JavaScript型テキストエディタ：TinyMCEを設定する
TinyMCEは、多数のブログシステムやコンテンツ管理システムにバンドルされている。自作のWebアプリケーションでTinyMCEを使うなら基本設定を利用するのが手っとり早いが、詳細設定は依存関係や競合関係の解決を行うために複雑になる可能性がある。本稿では、WebページにTinyMCEを統合するヒントとアドバイスをいくつか提供する。
TinyMCEは、多くのGNU/Linuxディストリビューション内のパッケージや、zipまたはtar/gzipのアーカイブとして入手できる。プログラムをインストールするには、TinyMCEのディレクトリ構造をWebサイトのルートディレクトリに展開したうえで、TinyMCEを有効にしたい各ページの最初のタグのすぐ後にTinyMCEスクリプトをすべてのカスタマイズ項目とともに追加する（詳細は後述）。
うまくインストールされると、HTMLの<textarea>タグの部分にツールバーが追加される。デフォルトでは、このツールバーがすべてのtextareaタグに追加されるが、必要なものにだけ追加を行うような設定も可能だ。GNU/Linux環境でJavaScriptが有効になっていれば、その結果をOperaやFirefoxの他、EpiphanyのようなGeckoベースのブラウザで確認できる。TinyMCEはKonquerorでは動作しないので、一部のFirefox拡張機能とも互換性がない可能性がある。TinyMCEが動作しないブラウザでは、代わりに普通の入力フィールドが表示される。
高速設定
ページ上でTinyMCEを有効にするには、そのページの最初の<head> タグの後に以下の行を追加するだけでよい。
<script language="javascript" type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "textareas"
});
</script>
このスクリプトにより、簡単な書式指定、元に戻す/やり直しの操作、箇条書き、特殊文字、基本的なHTML段落タグのドロップダウンリストなど幅広いツールを備えたTinyMCEが、ページ上の全フォームに追加される。
もっと基本的なツール群に換えたい場合は、modeフィールドの下にもう1行「theme : "simple"」と追記すれば簡易テーマを指定することができる。ちなみにテーマを「詳細（advanced）」に変更すると、テーマを指定しなかったときと同じツール群が用意される。
TinyMCEのサンプルページにあるソースを使えば、他のもっと複雑な書式指定をすることもできる。このページのなかには、TinyMCEに追加可能なほぼすべての設定オプションが含まれたフル機能のサンプルもある。
詳細な設定
もっときめ細かく設定したい人のために、TinyMCEには125種類を超える設定オプションが存在する。こうしたオプションについては、それらの依存関係や競合関係も含めて、少量ながらも的確なドキュメントがTinyMCEのWebページ上に用意されている。
スクリプトへの各オプションの追加は、「tinyMCE.init」で始まる行のすぐ下で1件1行の形で行う。また、1つのオプションが複数の値を持つ場合は、カンマで区切って値を並べる。例えば、ツールバー上のボタンをカスタマイズするために「theme_advanced_buttons1_add」オプションを追加する場合、スクリプト内の該当行は次のようになる。
theme_advanced_buttons1_add : "separator,insertdate,inserttime,preview,zoom,separator,forecolor,backcolor"
TinyMCEのWebページでは、設定オプションが次の11のカテゴリに分類されている。
- 全般：プラグインの利用、言語の設定、デバッグ情報の表示、FirefoxなどGeckoベースのブラウザ向けスペルチェッカの追加、キーボードショートカットのカスタマイズなどのオプション。
- コールバック：特に、フォームのコンテンツ保存時にTinyMCEの動作や他のプログラムとのやりとりに作用するもの。
- クリーンナップ：入力において有効な要素、.cssクラス、エンティティ、doctype、HTMLタグの設定。
- URL：TinyMCEにおけるアドレスの表示方法および格納方法の設定。
- レイアウト：TinyMCEがさまざまな状況で使用する.cssファイルの種類やTinyMCEツールバーの幅および高さの選択オプション。
- 視覚補助：罫線のない表のグリッド線に関するツールの設定。
- 元に戻す/やり直し：元に戻す/やり直しの操作の保存回数や、これらの操作に割り当てるキーボードショートカットに対するオプション。
- ファイルリスト：外部のリンクや画像の一覧をツールバーに追加するもの。
- タブ専用：TinyMCEでMicrosoft Internet Explorerのタブをどのように扱うかを設定するオプション。
- トリガ/パッチ：TinyMCEの動作を変更するために設定できるトリガ群。
- 詳細テーマ：補足ツールを追加するためのものなど、より多くの書式指定オプションを使って詳細テーマをカスタマイズするオプション。詳細テーマのカスタマイズに使える全ボタンの一覧は、TinyMCEのWebサイトで確認できる。
依存関係を持つ複数の設定オプションを追加する際は、デバッグのことを考えて一度に一つずつ追加するとよい。私の経験では、スペル、構文、または配置を1つ間違っただけでTinyMCE全体が正しく表示されなくなることが少なくない。場合によっては、既に別の設定でデフォルトになっているオプションを1つ追加してもTinyMCEが表示されなくなることもある。
試行錯誤による方法以外でオプションの適切な設定を学ぶ方法は、多くの場合、機能が満載されたサンプルのソースコードを絶えず参照することである。少し辛抱してこのサンプルとWebサイトのドキュメントを行き来しながら調べれば、設定に関する問題のほとんどは解決できるはずだ。
Webサイトには、サポートドキュメント集やユーザフォーラムも用意されている。また、Moxiecodeは有料のサポートも提供している。
その他の設定オプションと問題
TinyMCEの設定の詳細事項のいくつかは、JavaScriptオプション以外の範囲にも存在する。フォントのサイズや色など表示に関する項目は、使用するテーマの.cssファイルを変更するか、あるいは（こちらのほうが好ましいが）「content_css option」を使って自作ファイルを指定することで設定できる。
さらに重要なのは、PHPやRuby on Railsをはじめとする言語を利用してサイトを構築している場合は、TinyMCEプロジェクトWikiのドキュメントページにある詳細情報やサンプルを調べる必要があることだ。トラフィックの多いサイトでは、初期化時間の短縮をねらった別の言語によるTinyMCEの圧縮に関する情報が役立つかもしれない。
ニーズが単純でなくMoxiecodeによるサンプルの変更で対処できない場合は、TinyMCEの設定のカスタマイズにある程度時間がかかる可能性がある。プログラムが使いづらいわけではなく、単にオプションの数が多すぎて利用できるオプションやその選択結果の及ぼす影響がわかるまでに時間がかかるだけだ。一度こうした問題の整理がつけば、現在TinyMCEが至るところで使われている理由がわかるだろう。確かに、このプログラムには誰もが必要とするものが備わっている。
Bruce Byfieldは、NewsForge、Linux.com、IT Manager’s Journalに定期的に寄稿しているコンピュータジャーナリスト。
