【第7回】サイトごと・画面ごとにカスタマイズを出し分ける - MTAppjQuery で Movable Type 9 のリッチテキストエディタをカスタマイズ
目次
この記事は「MTAppjQuery で Movable Type 9 のリッチテキストエディタをカスタマイズ」の第7回、最終回です。
これまでの回で、ツールバー、段落やカラーパレット、見た目、拡張と、ひととおりのカスタマイズ方法を見てきました。最終回の今回は、それらを「必要な場所にだけ」適用する方法をご紹介します。MT9 本体の設定画面ではできない、MTAppjQuery ならではの締めくくりです。
なぜ出し分けが必要になるのか
第1回でお伝えしたとおり、MT9 のリッチテキストエディタ設定画面はシステム全体で共通です。ところが実際の運用では、こんな要望が出てきます。
- コーポレートサイトはフル機能、ブログサイトは最小構成のツールバーにしたい
- ウェブページの編集画面だけエディタの高さを広くしたい
- カラーパレットはサイトごとのブランドカラーにしたい
こうした「サイトごと」「画面ごと」の調整が、MTAppjQuery なら自然に実現できます。方法は2つあります。
方法1 - 自由テキストエリアのスコープで出し分ける
実は、いちばん簡単な出し分けは MTAppjQuery の設定画面そのものでできます。
MTAppjQuery のプラグイン設定は、システム（全サイト共通）とサイトごとの両方で行えます。自由テキストエリアもサイトごとに書けるので、サイト A の設定画面にはサイト A 用のコードを、サイト B にはサイト B 用のコードを貼り付ければ、それだけで出し分けの完成です。
- 全サイト共通のカスタマイズ → システムスコープの自由テキストエリアに書く
- そのサイトだけのカスタマイズ → 各サイトの自由テキストエリアに書く
コードによる条件分岐が不要なので、管理も分かりやすくなります。まずはこの方法で足りないかを考えてみてください。
方法2 - mtappVars で条件分岐する
もう少し細かく制御したい場合は、コードでの条件分岐です。MTAppjQuery が管理画面の全ページに用意してくれる mtappVars オブジェクトには、現在の画面に関する情報が入っています。出し分けによく使うのは次の2つです。
mtappVars.blog_id— 現在のサイト（ブログ）の ID。環境によって数値ではなく文字列で入ることがあるため、比較するときはNumber()で数値に揃えてくださいmtappVars.screen_id— 現在の画面の ID（記事編集画面ならedit-entryなど）
これを create イベントの中で参照します。
<script type="module">
if (window.MTRichTextEditor) {
MTRichTextEditor.on('create', (options) => {
// サイト ID が 2 のときだけツールバーを最小構成に
if (Number(mtappVars.blog_id) === 2) {
options.toolbar = [
[
[
['block'],
['bold', 'italic'],
['link', 'unlink'],
],
[['undo', 'redo']],
],
];
}
// ウェブページの編集画面だけエディタを広く
if (mtappVars.screen_id === 'edit-page') {
options.height = 700;
}
});
}
</script>
screen_id の値は、各画面で body 要素の id 属性を見るか、コンソールで mtappVars.screen_id を実行すると確認できます。記事の編集画面は edit-entry、ウェブページは edit-page、コンテンツデータは edit-content-type-data です。
height は単位なしの数値で渡してください。'700' のように文字列で書くと、エラーも出ないまま無視されます。また height を指定しない画面では、編集者が最後にリサイズした高さが使われます。詳しくは第4回をご覧ください。
システムスコープの自由テキストエリアにこの形で書いておけば、1か所のコードで全サイトの出し分けを管理できます。サイト数が多い場合はこちらの方が見通しが良いこともあるので、方法1と使い分けてください。
応用 - 特定のフィールドだけカスタマイズする
コンテンツタイプを使っていると、複数のリッチテキストフィールドが1画面に並ぶことがあります。「概要フィールドは最小構成、本文フィールドはフル機能」のような出し分けをしたい場合は、options.id を見ます。
create イベントの options には、これから生成されるエディタの対象となるテキストエリアの id が入っています。コンテンツフィールドなら editor-input-content-field-5 のように末尾がフィールドの ID になります。記事の本文は editor-input-content、続きは editor-input-extended です。
MTRichTextEditor.on('create', (options) => {
// options.id は String オブジェクトなので、String() で文字列に揃えてから比較する
const id = String(options.id);
console.log(id); // どのフィールドかを確認
if (id === 'editor-input-content-field-5') {
options.toolbar = [
[
[['bold', 'italic'], ['link', 'unlink']],
],
];
}
});
create イベントはエディタひとつごとに発火するので、id で分岐すればフィールド単位のカスタマイズになります。実際の id は、まず console.log で確認してから条件に使ってください。
String() で揃えるのを省略しないでください
options.id は、見た目こそ文字列ですが、プリミティブな文字列ではなく String オブジェクトです。typeof options.id は 'string' ではなく 'object' を返します。
そのため options.id === 'editor-input-content-field-5' と書くと、常に false になります。=== は型まで比較するからです。エラーも警告も出ないので、「コンソールに表示された文字列をそのまま書いたのに、なぜか何も起きない」という、いちばん気づきにくい形で失敗します。
String(options.id) で文字列に揃えてから比較してください。mtappVars.blog_id のときと同じ考え方です。
入力フォーマットが「リッチテキスト」でないと発火しません
create イベントは、リッチテキストエディタ（WYSIWYG）が生成されるときだけ発火します。
テキスト（複数行）フィールドの入力フォーマットが「リッチテキスト」以外になっていると、MT はソース編集用のテキストエリアを表示するだけで、エディタを生成しません。この場合 create は発火しないので、options.id による出し分けも効きません。
出し分けが効かないときは、コンテンツタイプの設定でそのフィールドの入力フォーマットを確認してみてください。
連載のまとめ
全7回を通して、MT9 の新しいリッチテキストエディタを MTAppjQuery でカスタマイズする方法を見てきました。振り返っておきましょう。
- 第1回 カスタマイズの入口は
MTRichTextEditor.on('create', ...)。自由テキストエリアにtype="module"で書く - 第2回 ツールバーは4階層の配列。
options.toolbarを差し替えるか加工する - 第3回 段落ドロップダウンとカラーパレットは
toolbarOptionsで調整する - 第4回
stylesheetsとclassNamesで編集画面の見た目を実サイトに合わせる - 第5回
extensionOptionsで組み込み機能を調整・無効化し、htmlOutputOptionsで出力 HTML を整える - 第6回
import('@tiptap/core')とToolbarItemElementで独自機能を追加する - 第7回 スコープと
mtappVarsで、必要な場所にだけカスタマイズを届ける
エディタは編集者が毎日触る場所なので、小さなカスタマイズでも運用の快適さに直結します。この連載が、MT9 移行後の管理画面づくりの助けになれば嬉しいです。
連載は以上となります。最後までお読みいただきありがとうございました。
