さて、コーディング時に手放せなくなってしまっているフリーソフトをいくつか紹介します。DreamWeaverなどが信じられない古い人間なので割と古いツールばかりですが、手書きにこだわる人の参考になれば幸いです。Windows中心になりますが悪しからず。

Zen Coding

言いつつ、いきなり流行りものですみません。言わずと知れたZen Codingです。紹介はあちこちでされているので動画とリンク先に譲るとして、知らない方はまずこの動画をご覧ください。小さいと見づらいと思うので、ぜひHDでどうぞ。

一見何が起こっているのかわからないかもしれませんが、

• CSSのような省略記述でタグを自動的に生成・展開
  （div#globalNavigation>li*6>a などと書いてショートカットを押すとタグを生成してくれる）
• HTML, CSS, JavaScriptなどの言語でヘルプ・ガイドが表示される
• 任意のコードでくるむことができる
• タグを分割/結合/削除できる
• 開きタグ・閉じタグに一発で飛べる
• 画像サイズを取得する

などなど、とにかくこれはコーディングを3倍は早くしてくれる方法で、しかもいろいろなツールでプラグインが出ています。無料でやるとしたらEclipse+Aptanaあたりがいいのではないでしょうか。

参考：Zen-Codingのショートカットをまとめてみました – EC studio デザインブログ

COLOR CLIP and VIEWer

もう何年お世話になってるんでしょうか。昔から大ファンのmedia remixさんのソフト。

color clip and viewer キャプチャ

• カーソル座標の色をESCキーで拾える
• 画面上にあればどこでも拾える
  （Flashとかの色拾うのって案外面倒ですよね）
• 拾った色は16進数でクリップボードにコピーできる他、RGBやHSVでも表示
• 拾った色から簡単な色相環を作ってくれる
• 拾った色と反対色の薄い色、ちょっと濃い色、濃い色を作ってくれる
• 拾った色は5つまでパレットに保存しておける

とにかくこれがあるとPhotoshopデータなりWebページなりからコーディングを起こすのがえらい便利です。手放せません。

つばめ

ソフト名が奥ゆかしすぎてリンク先を探すのに苦労しました。画像をドラッグアンドドロップすることにより、画像サイズを自動取得してimgタグをクリップボードにコピーしてくれるソフトです。

つばめキャプチャ

テンプレートをカスタマイズできますので、XTHMLはもちろんCSSを書くときにも使えます。テンプレートに使えるパラメーターはこんな感じ。

• %n：ファイル名
• %w：画像の幅
• %h：画像の高さ
• %s：ファイルサイズ

ミニウィンドウ（常に前面表示）を出しておいて、そこにドラッグアンドドロップして使えます。かわいい。

つばめ

Windowfrog

これは主にマウスを使っているときにウィンドウを切り替えるための常駐型ソフトです。マウスボタンを押してホイールを回すと、現在開いているウィンドウを一覧表示してくれて、そのままホイールで選択できます。

Windowfrogキャプチャ

また、よく使うプログラムを登録してランチャとして使ったり配色を変えることもできます。
今最新情報見てみたら常駐しないでも使えるんですね。

Windowfrog設定画面

設定もお好みで変えられます。

Fenrir

でも、やはりコーディング中はキーボードでソフトを立ち上げたい。キーボード使ってる間にマウスに切り替えたりするの好きじゃないんです。というかデザイナーの分際で「CUI最高」とか言っちゃう変態なので（略）

閑話休題。

Fenrirといってもブラウザではなくて、常駐型プログラムランチャのFenrirです。いつもさりげなく役だっているので個人的には「妖精さん」と呼んでいます。

fenrirキャプチャ

• Caps Lockキーで小さな一行ウィンドウが表示される
• 入力した文字を部分一致検索でファイルやフォルダを開いてくれる
• 学習機能あり（よく使うものが上にくる）
• 設定で検索対象ドライブ/フォルダや拡張子を指定できる
• スラッシュから始まる任意コマンドにファイルパスやURLを指定可能

参考：窓の杜 – 【NEWS】インデックス検索してファイルを開くキーワード入力型ランチャー「fenrir」

本当にこれだけは、これだけはないと仕事ができません。私が使う全てのWindowsマシンに入れてあります。

特に任意コマンドが便利で、例えば私は/gmと打つとGmailが開くように、/imgと打つと先程のつばめさんが起動するようになっています。便利すぎ。CUI最高。

以上、私が長いこと手放せないフリーソフトのご紹介でした。こういういいソフトは永久に残って欲しいです（もちろんバックアップはとっていますが；）

サンプル

クリエイティブ・コモンズの表示-継承で公開しますので、
商用でも自由に改変してお使いいただけます。
システム構成図もこれを使うとなんだか平和な感じになってなごむかも。

ただ、二次配布はなるべくしないでくださいね。
必要がある場合はご連絡ください。

• BooGie Taste アイコンセット (PNGフォーマット)
• BooGie Taste アイコンセット (SVGフォーマット)

Print Friendly & PDFは、ページ内のメイン要素だけをシンプルに印刷する 機能を提供するサービスです。


Print Friendly & PDF

またもや紹介動画がありましたので、まずはこちらをみていただくと分かりやすいかも。

印刷したい／させたいページのいらない情報をとっぱらって、非常にシンプルに印刷できる画面を提供してくれます。
方法は3つ

• URLを入力して： 簡単にプレビュー
• ブックマークレット： 自分が印刷したい時
• サイトに追加するボタンを取得：自分のサイトに簡単に設置可能

要素や画像を自分好みに消したりすることもできます。
さらに、出力結果をEメールで送ったりTwitterに流すことができるようです（未確認）
早速このサイトにも付けてみましたので押してみてください。タイトルの隣にあります。

PDF出力するときは日本語が文字化けしてしまったり、
コピーライト情報やロゴは外したくないという場合には使えませんが
シンプルに印刷だけしてもらいたい人にはいいですね。

確かに印刷用のスタイルシートを用意するのは面倒ですよね。軽くてインク代の掛からないなるべくシンプルな情報だけのページを提供したいけど、労力の割に使われないというか。

「見た目通りに印刷できるようにしてくれ」なお客さんには使えませんが、ユーザのためを思って提供するサービスとしてはとても便利だと思います。

今回もまたjQueryで解決しました。filter()が鍵ですかね。これなら何行あっても楽々です！以下、方法をごらんください。

こんななんの変哲もない、ただダダ長いテーブルに対して処理するとしましょう。

<table id="detail">
	<tr>
		<th>headering</th>
		<td>-</td>
		<td>-</td>
		<td>-</td>
	</tr>
	<tr>
		<th>headering</th>
		<td>-</td>
		<td>-</td>
		<td>-</td>
	</tr>
	<tr>
		<th>headering</th>
		<td>-</td>
		<td>-</td>
		<td>-</td>
	</tr>
	<tr>
		<th>headering</th>
		<td>-</td>
		<td>-</td>
		<td>-</td>
	</tr>
		：
		：
</table>

1. $.each()

まず、各行に対して処理をしたいので、テーブルの「各行」を拾ってきます。

$("table#detail tr").each(functionName);

これで、detailというIDのテーブルの各行でfunctionNameという関数が呼ばれます。

次。

2. $.find()して$.filter()

各行から0番目と1番目と2番目のセルを拾いたいです。

まずセルを拾って

$(オブジェクト).find('td');

条件に合うものだけフィルタにかけます。

$(オブジェクト).filter( function(index) {
return index == 0;
});

3. クラスをつける

ここまでをまとめて自動的にクラスを振ってもらいましょう。

$("#detail tr").each(function(){

	// このthisにはtrが入っています
	$(this).find('td').filter(function(index){
		// 0番目のセルを返します
		return index == 0;
	}).addClass('lite'); // 帰ってきたオブジェクトに.liteというクラスをつけます

	// 1番目のセルには.standardを
	$(this).find('td').filter(function(index){
		return index == 1;
	}).addClass('standard');

	// 2番目のセルには.proを
	$(this).find('td').filter(function(index){
		return index == 2;
	}).addClass('pro');
});

// ついでに偶数行のtrに.evenを
$('#detail tr:even').addClass('even');

これをページのロード時に走らせると、最終的にこのようなHTMLが吐出されます。

<table id="detail">
	<tr>
		<th>headering</th>
		<td class="lite">-</td>
		<td class="standard">-</td>
		<td class="pro">-</td>
	</tr>
	<tr class="even">
		<th>headering</th>
		<td class="lite">-</td>
		<td class="standard">-</td>
		<td class="pro">-</td>
	</tr>
	<tr>
		<th>headering</th>
		<td class="lite">-</td>
		<td class="standard">-</td>
		<td class="pro">-</td>
	</tr>
	<tr class="even">
		<th>headering</th>
		<td class="lite">-</td>
		<td class="standard">-</td>
		<td class="pro">-</td>
	</tr>
		：
		：
</table>

あとは、それに合わせてCSSを書くだけ。

.lite { background-color: 色1; }
.standard { background-color: 色2; }
.pro { background-color: 色3; }
.even .lite { background-color: 色1 (暗); }
.even .standard { background-color: 色2 (暗); }
.even .pro { background-color: 色3 (暗); }

ね、簡単でしょう？
実際の動作ページ

ちょっと丁寧に解説しすぎた気がします。帰ります。

さて、我々はコーディングという大事なお仕事が発生したわけで。エミュレータとしてとても使いやすいものを見つけたのでご紹介します。Blackbaud Labs さんの iBBDemo2です。

機能紹介

取り急ぎ４分の短い紹介ムービーがあるので、どんな感じか見てみたい人はこちらをどうぞ。

iBBDemo2 – iPad and iPhone simulator for Windows, Linux and Mac from Shaun Sullivan on Vimeo.

• URLを入力してサイトがブラウズ出来る
• iPad / iPhone4をホットキーで切り替えてシミュレートできる
• ズームイン／ズームアウトができる
• 縦横の切り替えができる

AIRアプリなのでWindowsでもMacでもLinuxでも使えるとのこと。非常によくできてます。

インストール

AdobeAIRアプリでSafariのエンジンを利用していますので、まずこの２つが必要です。

1. Adobe AIRをインストール
2. Safariをインストール
3. iBBDemo2をインストール

基本的にはこれだけで使えるようになります。ショートカット作成などはお好みでどうぞ。

使い方

起動すると、まずiPad横モードで開きます。

……実は私、この後なにをしたらいいのかわかりませんでした；

使い方は動画を見ろって感じで英語でも日本語でも情報が簡単に見つからなかったので、メモしておきます。

iPhoneモードに切り替え

Ctrl (Command) + 2

iPadモードに切り替え

Ctrl (Command) +1

縦／横の切り替え

Ctrl (Command) + ←/→

画面のズームイン

Ctrl (Command) + [+]

画面のズームアウト

Ctrl (Command) + [-]

アプリの終了

ホームボタン（筐体右の丸いボタン）をクリック

iPhoneモードの時にアドレスバーが消えてしまったら、筐体の上のほうにマウスを持って行ってください。

レッツエンジョイ

追記：

どうやら現時点ではhistory:back(-1)かな、「戻る」全般がうまく効かない模様。
iPhoneモード縦ではホームボタンのダブルクリックで戻れます。

ワイアフレームを使用する利点と、あのデザイナはどんなワイヤフレームを書いているのか、便利なツールについてまとめてみます。

ワイアフレームって？

ページのレイアウトのルールを、詳細まで作り込む前に描いてしまう「大体の枠」です。満足度の高いサイトデザインの作り方後半でも触れましたね。

ここでユーザインターフェイスや各ページの見せ方まで決めてしまえば、グラフィックデザインを作る過程ではレイアウトについて悩むことなくディテールにこだわることがでます。お客さんも事前に納得している前提ですので差し戻しがありません。みんなハッピーです。

具体的にはどんなもの？

具体的なワイアフレームの書き方は、各個人のやり方があると思います。

ヒントになりそうなサイトがありますので参考にしてください。

Wireframe Showcase

Wireframe Showcase

名前の通り、ワイアフレームのショウケースです。このデザインってどんなワイアフレームでできてるんだろう？ということを日頃から意識出来ているといいですね。

ワイアフレームのツールを使う：オンラインサービス

オンラインサービスでもワイアフレームを簡単に作成できます。

iPLOTZ

iplotz.com

操作が非常に直感的で、Ctrl+C(コピー)やCtrl+G(グループ化)もサポート。
手書き風のワイアフレームが簡単に作成できます。
サービス自体はワイアフレームに特化しているわけではなく、
プロジェクトマネジメントにも利用できる素晴らしいサービスです。

Cacoo

cacoo.com

日本製のサービスです。ワイアフレームに限らず、フローチャートやネットワーク構成図などにも使えます。

特筆すべき点はアカウントを持っていればリアルタイムに複数人で編集可能なこと。
これであればお客さんが遠隔にいてもネット上でブレインストーミングできますね。

ワイアフレームのためのツール：紙テンプレート

やはり手軽さとスピードに関しては神に勝るものなし。
そんなあなたにおすすめしたいのが960.gsのPDFテンプレート。

印刷して持ち歩けばいつでもどこでもワイアフレームを書くことができます。

960.gs sketch PDF

960.gs（グリッドシステム）に則ったガイドラインがひいてあるので、手描きでもちゃんとバランスのとれたワイアフレームが書けます。
githubにて最新のsketch sheetsが公開されていますが、私の持ち歩きに便利なよう、A5版に編集した複数のファルをシェアします。よかったら使ってみてください。

web960.gs PDF

web690.gs 4コマ PDF

web690.gs 6コマ PDF

ウェブデザインを起こすにあたってどうしたらそのギャップを埋められるのか、を考えた雑感を記しておきます。

実感として、デザインや色彩学に長けていればいるほど、そうでない人との言葉でのコミュニケーションは難しいように思います。

「ポップな感じで」と言われたので高彩度のトーンドミナントでまとめたら「これじゃない」とか、「赤と青で作ってください」と言われてもどの赤と青なのか悩む、なんていうのはよくある話です。

この場合、伝えた方も捉えた方も悪くありません。要は言葉の定義が違うんです。「グレイッシュペールトーンドミナントで色相は広めに」とかいうコミニュケーションができたらそれはすごく楽ですが、そういうわけにもいきませんよね。

じゃあ、どうしたらいいのか。最近気を付けていることをまとめてみます。

1. キーワードを複数もらう

私は「伝えたいことはなんですか？」と聞いて、なんでもいいからキーワードを複数もらって事前に具体的なコンセンサスを得るようにしています。

キーワードがひとつだと、大体デザインを決めるまでに何回も大掛かりな作り直しをしなくてはいけません。また、事前にコンセンサスがあれば、決める側も納得とか満足しやすく感じるように思います。

ポイントは、そうすることでどんな効果が得られるか想像してもらえる伝え方をすること。

例：

• 都会的な
• 洗練された
• 落ち着いた
• 信頼感
• CIは高彩度・低明度の青

ここまで情報が得られたらかなり楽ですね。

• 配色：CIのぱっきりした青と彩度・明度が低めの寒色系
• エレメント： 直線・硬質
• レイアウト： 重心を下のほうに置く
  画面が暗くなりすぎないようにホワイトスペース多め

あとはこれを一般的な表現に直して先方に伝えておけばOKです。「では、青を中心にして近い色で落ち着いた配色にして、硬めでどっしりした感じを出しながら余裕をもったレイアウトで一度作ってみますね。洗練された御社の雰囲気を伝えられる、清潔感のあるデザインになると思います」。それだけで出来上がった時の満足感って上がるものです。

よもやまですが、冒頭の美容師さんとの話の中で「街の名前あげてもらえるといいんじゃないか」と話題になりました。これは面白い。確かにスムーズに話が広がりそうで、先方とのやりとりも楽しそうです。「吉祥寺っぽく」「丸の内っぽく」「青山っぽく」。それに対して、「あ、東京でも八重洲じゃなくて丸の内ですね。例えば～」っていう話の広げ方ができますよね。

閑話休題。

2. 配色を具体的に見せる

先ほどの例でも明らかなように、色を決めるのは難しいです。CIが決まってればそれに準じて話ていけますが、「青」と色相だけをある程度限定してもらったところで意識のズレは補正できません。かといって色彩学的な説明をするのはデザイナーのエゴというものです。先方はそんなことは知りたくありません。

具体的に配色を見せて、合意をもらうことが満足感につながります。

Webサービスを使う

打ち合わせ時にモバイル環境があれば是非Webサービスを利用しましょう。実際に配色を見せれば、先方もその効果を事前に確認することができてお互いにハッピーです。

kuler

有名どころ、Adobeの配色ライブラリkulerです。使い方が豊富で実に素晴らしいサービスです。

kuler.adobe.com

• 他の人が作った配色をキーワードで探す
• 最近のトレンドを探す
• 写真から色を拾って配色を作る
• 指定色からスキームを利用して配色を作る
  • Analogous
  • Monochromatic
  • Triad
  • Complementary
  • Compound
  • Shades
  • Custom
• 作った配色を保存
• お気に入りの配色を保存
• APIがあるのでその他多数機能が使える

Color Scheme Designer 3

Webデザインに特化するならこちらのColor Scheme Designer 3。簡単に配色を作る機能はkularに劣りますが、より細かな指定が可能です。アクセシビリティへの配慮やWebプレビュー、CSSの吐き出しなど便利機能がたくさん。

color Scheme Designer 3

• 指定色からスキームを利用して配色を作る
  • mono
  • complement
  • triad
  • tetrad
  • analogic
  • accented analogic
• 作った配色でWebサイトをプレビューする
• 変化させるパラメータを固定（色相・彩度・明度・コントラストなど）
• 色覚異常がある場合のシミュレーション（赤緑色盲・完全色盲など）
• 操作の取り消し・やり直し
• 作った配色はIDが振られて固定URLで参照できる
• CSS,Textなどの形式でエクスポート

iPhoneアプリを使う

近頃はいいiPhoneアプリを見つけました。複数ありますが、この場合の使い勝手が良さそうなのはchromaMiniというアプリです。iPhoneアプリなら出先でもすぐに配色の効果を実感してもらえますし、あとから16進数を拾う事もできます。

下のコントロールでその場で調整可能ですので、先方と揉むのにも重宝しますね。

私の最近作った配色でいくつかスクリーンショットを

1の例

都会的で洗練された落ち着いた配色ってこんなんですか？と見せてみる。

アーバン

アーバン

PIECE2

弊社のプロダクト「PIECE2」プロモーションサイトリニューアルに際して作った配色。

PIECE2

PIECE2

大人エコ

レトロなアースカラー配色を作ってみました。伝わるかな？

大人エコ

大人エコ

3. レイアウトの決め方

先方はどうしたってデザイン＝見た目の話と思いがちですが、レイアウトだけは機能にこだわっていかないと後で絶対に破綻します。要素とその重要度に沿ってワイアフレームを決めて、これも同意を取っておくとスムーズです。

3-1. 入れたい要素を決める

何を盛り込みましょうか。これは先方に任せっきりではなく、こちらから提案してあげることも大事です。先方が何をしたいのかを汲みとって、それに対して提案していきたいところです。

一般的なコーポレートサイトだとこんな感じでしょうか。

1. ロゴ
2. キャッチコピー
3. グローバルメニュー
4. サブメニュー
5. メインビジュアル
6. サイトの説明
7. ニュース
8. プレスリリース
9. バナースペース

さらに製品をアピールしたいなら製品一覧、環境への配慮をアピールしたいならそのスペースを提案しておきます。

3-2. 重要度を決める

重要度すなわちスペースの大きさと捉えて問題はないかと思います。であれば、なにが重要なのか決めておくことは非常に大事。

先の例のように製品をアピールしたいとのことでしたらそのスペースはもちろんセンターにどーんと構えましょう。ユーザに自由に行動をとらせるサイトだったらグローバルメニューの比率を大きくしてもいいですね。CI確立を重視するなら、ビジュアルやロゴを大きくするのがベターだと思います。

3-3. ワイアフレームを描いてみる

こればかりは言葉で説明するよりその場で「こうですかね」とワイアフレームを描いてみることにつきます。うまく直線が引けなくたって問題ないです。今の失態より後の修正を恐れましょう。

これにあたって便利なのは、「他の人はどんなワイアフレームを描いているか」と「960グリッドシステムテンプレート」です。長くなるので後ほどエントリーを書きたいです。

追記：書きました「ワイアフレームのススメ！例と便利ツール」

かなり文章だらけでつまらないエントリーになってしまったので、このくらいにしておきますね。こういうことは言葉にしたことはなかったので、それぞれの項目について後々深く掘り下げていきたいと思います。

例えばサイドバーの幅を決めるとき、みなさんどうしてるでしょうか？
機能から？適当に？それもいいのですが、黄金比を使っても求められます。

黄金比とは？

具体例の前に軽く黄金比の説明を。

定義は、「a, bの長さで 2 つに分割するときに、a : b = b : (a + b) が成り立つように分割したときの比 a : b」です。

すいません、この図は適当なのであてにしないでください。

で、頭のいい人たちがごにょごにょすると、これは以下の式で表せます。

これはだいたいでいうと、1:1.168です。もっとだいたいでいうと5:8。

詳しくはここを：黄金比 – Wikipedia より

うん、小難しいですね。あ！数学嫌いな人、あきらめないでください。さっさと具体例示しますから。

具体例：サイドバー

要するにサイトのデザインをするとき、サイドバーの幅を求めるとすると、

( 横幅 – x ) : x = 1.168 : 1

で求まるわけです。

下図が横幅950pxとして計算したときの例。

このとき、950:363（緑＋青）がだいたい黄金比です。
これじゃあ太すぎるだろってことで更に分割して、224（緑）:139（青）もだいたい黄金比です。
幅950pxのサイトだったら、サイドバーの幅は224pxだときれいかもしれないですね。

縦はコンテンツ量によって変わるでしょうが、950:587も黄金比です。
そこから同じようにして求めたのが、86pxというヘッダ。

黄金比のサイトデザインへの応用

もっと応用すると、マージンやナビゲーションの幅にも使えます。
こちらで紹介されているようなので参考にして下さい。
黄金比をサイトのデザインに取り入れる簡単な３つの方法｜コリス

ちなみに上記ページで紹介されている、「5, 8, 13, 21, 34, 55, 89, 144, 233、を適応したスケール」の数列は実はフィボナッチ数列といいまして、こちらも黄金比に収束していくという大変面白い性質を持っている……のですが、そこまで書くともはや何のブログか本当に分からなくなってしまうので泣く泣く割愛します。

最初からバランスのいいデザインができる人は、感覚的にこの比率が感覚で分かるんでしょうね。
どうしてもなんだかバランスが悪い人は、あちこち黄金比を利用してみましょう。

やっとデザインの話が書けてうれしいですが、なんだか思った以上にO型っぽい解説になりました。

いやぁ、数学って美しいな……（理数オタク）
黄金比・フィボナッチ数列に関わらず、デザインってけっこう数字で計算できるものなんですよ。
だからそこ、私がPhotoshopを開いてエアーそろばんしながらガイドを引いてても笑わないように！

AjaxといってもjQueryのおかげでだいぶ難しいものではなくなりましたよね。デザイナでもサーバサイドが書けるプログラマと組めばわけはないでしょう。

しかし、ちょっとハマったのが上述した現象。

• HTMLからJavaScript(jQueryベース)でAjax通信で値をPOST
• 受け取ったPHPは$_POSTに入っている変数をそのまま返す
• 返すデータ値はプレーンテキスト
• 受け取ったデータ値をJavaScriptでアラート表示

こんな条件の場合、IEだけerrorHandleが返ってきました。はて。
コード例を示しましょうか。

Ajax通信部分：

$(function(){
	$("button").click(function(){
		$.ajax({
			type: 'POST',
			data: {
				"id" : $(this).parent().attr('name'),
				"answer" : $(this).attr('class')
			},
			datatype: "text", // 返ってくる値の形式をTEXTに指定
			url: 'return.php',
			success: handleSuccess, // 通信成功時の処理
			error: handleError, // 通信失敗時の処理
		});
	});
});
// 通信成功時の関数
var handleSuccess = function(data, datatype) {
	alert("通信に成功しました - " +data);
}
// 通信失敗時の関数
var handleError = function(XMLHttpRequest, textStatus, errorThrown) {
	alert('通信に失敗しました - ' + textStatus);
}

サーバ側PHP：

<?php
	// POSTされた値を取得
	$ID = $_POST['id'];
	$answer = $_POST['answer'];

	returnResults();

	// 結果を返す変数
	function returnResults() {
		global $ID;
		global $answer;
		// $resultsに結果を格納してプレーンテキスト形式で返す
		$results = 'posted: ' . $ID . ' - ' . $answer;
		header('Content-type: text/plain');
		print($results);
	}
?>

必要ない部分はかなり削ってシンプルにしましたが大体こんな感じ。
で、動かすと次のようにアラートの動作が分かれました。

Firefoxの場合：

通信に成功しました – posted: 00002 – yes

InternetExproler8の場合

通信に失敗しました – parseerror

まさかサーバサイドスクリプトがローカルのブラウザを左右するとも思えず、ずっとJavaScriptを疑っていたんですが、原因はPHPの14行目にありました。

誤：

header('Content-type: text/plain');

正：

header('Content-type: text/plain; charset=utf-8;');

HTTPヘッダはちゃんと書きましょう、って話ですね……
Apatcheの設定にもよりますが、文字コードまで指定しないとIEではパースエラーを返すらしいです。
たいへん勉強になりました。でもやっぱりIEは爆発しろ。

デザイナのくせにまともにデザイン関連のエントリできなくてすみません。今日はとうとうサーバサイドスクリプトまで範囲が広がりました。このブログはどこへ行くんだろう。

MTに標準でついているWYSIWYGエディタって正直使えないですよね。
クライアントのMTに正しい文法で書いてくれるWYSIWYGエディタを入れようと探していて見つけたTinyMCE。これがかなり使えるんですが、画像アップローダMCImageManagerは有償でした。
説得して導入が決定したのですが、このインストールにハマって……
日本語で詳しく解説している記事が見つからなかったので、またもや自分メモに残しておきます。

ちなみに、TinyMCEのインストールは完了しているものとして話を進めます。こちらは簡単だったので。

1. MCImageManagerのインストール

購入したらダウンロードパスが届きますので、ファイルを一式手に入れます。
解凍してできる[imagemanager]というディレクトリをそのまま
/mt/mt-static/plugins/TinyMCE/lib/jscripts/tiny_mce/plugins
にアップロード。

2. TinyMCEに認識させる

/mt/mt-static/plugins/TinyMCE/js/initialize.js
の46行目あたり、pluginsの一番後ろにimagemanagerを書き加えましょう。

plugins : "safari,pagebreak,style,......................,imagemanager",

3. 日本語化

http://tinymce.moxiecode.com/download_i18n_imagemanager.php
からJapanese Language Package(ja.XML)をダウンロードして
/mt/mt-static/plugins/TinyMCE/lib/jscripts/tiny_mce/plugins/imagemanager/language/im
にアップロードします。

4. MCImageManagerの設定

/mt/mt-static/plugins/TinyMCE/lib/jscripts/tiny_mce/plugins/imagemanager/config.php
にて、ご希望により設定を書き換えます。
私は以下の3点を書き換えました。

1. $mcImageManagerConfig['general.language']を’ja’に（日本語化）
2. $mcImageManagerConfig['filesystem.rootpath']にファイルを保存する絶対パスを記述
3. $mcImageManagerConfig['filesystem.path']に画像を保存したい絶対パスを記述

2, 3を設定しないと、/imagemanager/以下に画像が保存されて少し気持ち悪いです。
/mt/mt-static/files/とかでいいでしょう。
2,3で設定したディレクトリは、属性を707にしておいてください。【重要】

3. セッション情報を記述

/mt/mt-static/plugins/TinyMCE/lib/jscripts/tiny_mce/plugins/imagemanager/login_session_auth.php
の頭、// Some settingsとコメントがある部分にMTのIDとパスワードを設定します。

	$msg = "IDとパスワードを入力して下さい";
	$username = "ユーザ名";
	$password = "パスワード";

これをしておかないと、誰でも画像をアップできたり削除できたりしてしまうそうです。

さて、ここまで成功したらTinyMCEのimageボタンを押したときのダイアログにボタンが表示されるはずです。

これを押すと、MCImageManagerが起動して画像の管理ができるようになります。

このMCImageManager、アップした画像の簡単な編集できたり、お気に入り・履歴機能なんかも備えていてかなり優秀です。MTのプラグインとしてじゃなくてもスタンドアローンでも動くし、PHP版と.NET版があるので重宝しそう。35€ですが、それなりの価値はあると思います。

しかしなんでこうMovableTypeって使いづらいんでしょう。
早くWordPressが標準になればいいのになぁ。あと関係ないけどIEは爆発すればいいのになぁ。