WEB初心者奮闘記「ここまでできました!」 -10ページ目

WEB初心者奮闘記「ここまでできました!」

Web・PC・アプリや日常のことを書いてます。
いまだにWEBビギナーな私が、ここまでできました!をお届する「ここでき!ブログ」

WEB初心者奮闘記「ここまでできました!」

今日、通勤途中の遊歩道にある桜がきれいに咲いていたので、今週末は花見日和になりそうです。
昔住んでいた世田谷の国道246号線から1本入った小さな道路には、この時期さくらがトンネルのようになってとてもきれいだったので、当時乗っていた94年式MINIと一緒に写真をとりました。
7年ほど前の写真なのですが、今年は花見を自粛する人も多いようなので、ディスプレイのなかで花見はいかがでしょうか。

WEB初心者奮闘記「ここまでできました!」

WEB初心者奮闘記「ここまでできました!」

WEB初心者奮闘記「ここまでできました!」

WEB初心者奮闘記「ここまでできました!」

WEB初心者奮闘記「ここまでできました!」

WEB初心者奮闘記「ここまでできました!」

WEB初心者奮闘記「ここまでできました!」

WEB初心者奮闘記「ここまでできました!」

WEB初心者奮闘記「ここまでできました!」

「ここでき!」
3月11日の東日本大震災後、クライアントのサイトにはお見舞いや計画停電などの掲載業務でバタバタしていましたが、そんな中クライアント自身でブログを始めたいとの要望があり、Movable Typeの設置をすることになりました。

Movable Type5.0の設置
今回、Movable Type5.0を業務として初の設置。設置には文字コードの問題が少々ありましたが、何とか解決し、テーマを変更し、クライアントのサイトのイメージにヘッダ画像やCSSをチョコチョコいじり完成。$WEB初心者奮闘記「ここまでできました!」

記事投稿時の文字編集パレットのプラグイン
Movable Typeの文字編集パレットはとてもシンプルで、HTMLがわかる人は<font size><font color>を使って文字の装飾ができるのですが、普通の人には使い勝手が良くないので以前の記事「Movable Type4.2の文字編集パレット」でも書いているようにプラグインを追加してパレットを使いやすくしました。
当然、以前にも試したことのあるTinyMCE-MTPluginのMovable Type5.0対応バージョンをダウンロードして、以前と同じく、pluginsフォルダにFTPからアップしました。
mt-static
└plugins
  └TinyMCE
plugins
TinyMCE

しかし、ダッシュボードからプラグインの設定に行こうとしてもエラーが出て先に進めません。
ファイルを削除したり追加したりと深夜3時ごろまで格闘してたのですが、以前TinyMCE-MTの存在を知った「世界中の1%の人々へ」でCKEditor for MTというプラグインを見つけたので試してみることに。
細かな説明は上記サイトに詳しく説明されているので、割愛しましすが、TinyMCE-MTと同じでmt-static
/pluginsとpluginsフォルダに該当ファイルをFTPでアップするだけ。
後はプラグインの設定画面で使用するパレットの種類を設定するだけ。

こちらがデフォルトの文字編集パレット
WEB初心者奮闘記「ここまでできました!」


こちらが今回使用したCKEditorのシンプルパージョン
WEB初心者奮闘記「ここまでできました!」

文字サイズや文字色が変更できればいいので、パレットに表示される機能はこれくらいで十分。

【追記】2011/04/17 
文字編集パレットの簡単な使用方法を作成したので、UPします。
$WEB初心者奮闘記「ここまでできました!」

「ここでき!」
1月29日のエントリー「Googleの画像検索で色から選べるパレットを使ってみた。」では、Googleのカラー検索を使ってみましたが、今回は、NAVERの画像検索での表示が気に入っているので、その紹介でも。

NAVERは、韓国の検索サイトで、昨年にはライブドアが検索エンジンに採用されています。
といえばまとめ記事や人名検索などで使われる方も多いと思いますが、画像検索の表示が面白いのでよく使っています。というのも画像検索ですから検索した画像が一覧となって表示されるだけなんですが、画面いっぱいに隙間なく表示されると見ていて気持ちがいいものです。
娘も、好きなアニメの画像を検索してあげた時に、目をキラキラさせて「すごいね~」と言ってました。
とりあえず、画像といえばやはり車ということで。

「PORSCHE918」で検索。
美しいボディライン。特に好きなのがドア後ろのダクト部分のラインが絶妙。さすがはポルシェ。

WEB初心者奮闘記「ここまでできました!」



続いて「Ferrari」で検索。
ポルシェといえば次はフェラーリ。フェラーリといえば「赤」というくらいに赤が多いです。

WEB初心者奮闘記「ここまでできました!」



続いて「涼宮ハルヒの憂鬱」で検索。
娘が好きなアニメのひとつ。
WEB初心者奮闘記「ここまでできました!」



続いて「けいおん」で検索。
WEB初心者奮闘記「ここまでできました!」



続いて「プリキュア」で検索。
保育園でも大人気はプリキュア。2月から新シリーズ「スイートプリキュア」が開始。また3月19日からは歴代プリキュアが大集合のプリキュアオールスターズも公開されるので、前売り券を買わないと。

WEB初心者奮闘記「ここまでできました!」




やはり、アニメのカラフルな色使いは画面いっぱいに表示されるとインパクト大なので、一度お試しあれ。

「ここでき!」
半年以上も前の話ですが、会社のPCに接続されている外付HDDが飛んでしまい、保存していたクライアントのデータがなくなってしました。
前職の場合、商品カタログや取説、ロゴシールなどのデータはMOに保存していました。
しかし、MOは時々読み込みエラーが出て最悪はデータが飛ぶこともしばしば。
しかし、当時新しく買ったiMac(MacOX10.5)はTime MachineというHDの中身を丸々バックアップしてくれる機能が付いていたので、MOのデータを全てHDにコピーして使用していました。これで何かあってもバックアップから復元できるので、データが消えてしまった!ということはなくなりました。

話を戻して、今の会社のデータ管理は、クライアントの担当しているPCに外付HDDを接続して、その中にクライアントのデータを入れているだけ。
時々、クライアントの担当が替わった場合、外付HDDから新しい担当の外付HDDへ移動していました。

WEB初心者奮闘記「ここまでできました!」

しかし、データが移動されると、Dreamweaverのサイト管理やFTPソフトのローカルのファイルのパス変更など、いちいち設定変更しなくてはいけなかったり、PCにUSB(ほとんど1.0)の外付HDDは重く大量のコピーなどは時間がかかる。なにより、文頭にもあったとおり、ひょんなことからデータが飛んでしまうという最悪な事態がまた起こる可能性があります。
当然、htmlデータはWEBサーバ上から落としてくればいいのですが、画像の素材やFlashの元データなど、修正に必要なものがなくなるのは痛いです。
そんな事件があり、その時は、データのバックアップをするのにどうしようなど話があり、ネットワーク対応(NAS)HDDの導入の話もあったのですが、そのままになっていました。
年が明けて突然社長がバックアップ用にと1TBの外付HDDを買ってきたまでは良かったのですが、なんでUSB接続?┐( ̄ー ̄)┌
数日後さらにもう一台。もちろんUSB接続。(。-人-。)

ことばになりません。

しかし、先日ミーティングの時、買った1TBのHDDは使っているの?という話になって、同期の子がゆくゆくはそれぞれのPCに外付HDDでなく、ネットワーク接続のHDDにしたほうがいいと提案。
今日もミーティングの時その話になったのですが、社長と週に一回しかこない社歴の長い人があまりよくわからない様子。
結局、ネットワーク対応HDD導入のメリット、デメリットをみんなで提出でいったん終了。

WEB初心者奮闘記「ここまでできました!」

上図のように説明すればわかりやすいのかなとは思いながらも、億劫になっていたのでブログに書いてみました。
その時に出た質問は、
同時にアクセスした時に大丈夫か?
動画編集やギガ単位のコピーや編集は別にして、10人以内でアクセスして重くなるようなことって、ないだろ!

今まで、データが分散していたのがひとつになると何かあったら全部なくなるのでは?
そのためにバックアップが必要なの!

などなど心の中で突っ込みを入れていました。

まあ、RAID1でも5でもいいからネットワーク対応(NAS)HDDであれば何の問題もないような気がしますが、個人的にはMacMINIにバックアップ用の外付HDDもありかなと。
先日のMAC用のブラウザ表示で手間取ったので確認用のためにも1台あるといいなと。


BUFFALO 71.9MB/s RAID対応 高速ネットワーク対応HDD NAS 2.0TB.../バッファロー

¥66,780
Amazon.co.jp


I-O DATA DLNA対応LAN接続型ハードディスク LANDISK Home 2.0TB.../アイ・オー・データ

¥66,780
Amazon.co.jp


Apple Mac mini/2.66GHz Core 2 Duo/4GB/1TB/NO OD.../アップル

¥98,800
Amazon.co.jp

「ここでき!」

※2012/10/13 修正
 ・フォントサイズを大きくしました。
$WEB初心者奮闘記「ここまでできました!」


先週、あるクライアントのサイトに予約システムの導入のため、iframを使用した予約カレンダーのソースを左メニュー下のスペースに設置しました。Windowsでのブラウザチェックを済まして完了の連絡をしたところ、Macのサファリでスクロールバーがでると指摘され増した。
うちの会社ではWindowsマシンしかなく、Macでの表示チェックはサファリの開発メニュー⇒ユーザーエージェントでシュミレートしていたのですが、実機での表示とはやはり違うようでした。
サイズの調整をしてちゃんと表示されるようになりホッとひと安心。
が、月曜日に連絡がはいり、FireFoxでスクロールバーが出るといわれ、あわててサイズをさらに伸ばして解決しました。
その際に、以前アドビにブラウザチェックツールがあった事を思い出し、使ってみることに。

まずはhttps://browserlab.adobe.com/ja-jp/へアクセス。
するとサインイン画面へ移動します。
WEB初心者奮闘記「ここまでできました!」

ADOBEのアカウント(無料)でサインインします。

使い方:ブラウザーセット
まず、中央のブラウザーセットでチェックするブラウザを選択します。
今回は、Win、MacのFireFox3.6でチェックします。

WEB初心者奮闘記「ここまでできました!」

使い方:テスト
ブラウザセットが完了したら、右の「テスト」をクリック。
チェックするサイトのアドレスを中央に入力し、スタート。
読み込みに少し時間がかかりますが、終了したら表示されます。

WEB初心者奮闘記「ここまでできました!」

使い方:表示
アドレス入力の左側の「表示」をクリックすると、下記のようなメニューが出てきます。
WEB初心者奮闘記「ここまでできました!」

1-upビューは1画面表示。
左上に表示されているブラウザ名をクリックして、他のブラウザに変更できます。
2-upビューは2画面表示
左右に表示され比較しやすくなります。
オニオンスキン
ブラウザセットで選択された全てを重ねて表示されるので、どれだけ表示にズレがあるか一目瞭然です。

2-upビュー表示
WEB初心者奮闘記「ここまでできました!」

オニオンスキン表示
WEB初心者奮闘記「ここまでできました!」

他にも便利なショートカットや機能があるようですが、とりあえずチェックできればいいかな。ということで省略します。

全体のシェアでいえばWindwsのIEが80%を占めているので、Macはおざなりになりがちですが、やはりクライアントの中にはMacを使っている人もいるので今後はこのツールでのチェックも欠かせなくなりそうです。

「ここでき!」