MT6から7へ移行！TinyMCEカスタムフィールドプラグインが動かないときの解決策
MT6から7へのアップグレード作業実施中。昔作ったサイトで利用していた、TinyMCEカスタムフィールドプラグイン（mt-tinymce-field）が7に対応していなかった…。というわけでどうにかこうにか代わりのフィールドに移行しました。
01カスタムフィールドが消えた！？
MovableTypeのプロダクト・ライフサイクルの関係上、最近、顧客のMTのアップグレード依頼が立て込んでいます。たいがいはプラグインも一緒にバージョンアップして、はい、動いた！で終わりなのですが、たまに一筋縄ではいかない場面も…。
今回、一瞬ヒヤッとしたのは、TinyMCEカスタムフィールドというプラグインで作成した、リッチテキストのカスタムフィールドでした。でも大丈夫！後半でどうにかこうにか解決しています！
そもそもMTの標準機能では、カスタムフィールドにリッチテキストを適用できない
さて、問題のTinyMCEカスタムフィールドプラグイン、MT6時代は個人的に大変お世話になりました。ありがとう、ありがとう。このプラグイン、記事やウェブページのカスタムフィールドに、リッチテキストエディタ（Wysiwygエディタ）を追加することができるのです！！
実はMTって、本文や続きの入力欄はリッチテキストを適用できるのに、カスタムフィールドにはリッチテキストを適用できません。なんでなんだろ…。ただのブログを作るだけならあまり必要ありませんが、顧客のサイトでCMSとしてバリバリにカスタマイズするときは、どうしてもカスタムフィールドにもリッチテキストが必要です。
そんな悩みを解決してくれていたのが、この、「TinyMCEカスタムフィールド」だったのでした。ありがとう、ありがとう。このプラグインを導入すると、カスタムフィールドの作成画面で、種類を選択するときに、「テキスト（複数行）」とは別に、「TinyMCEリッチテキスト」を選択できるようになります。私はこのプラグインを、MT5.2xのころからたびたび利用させていただきました。
そんな私の中ではスタープレイヤーだったTinyMCEカスタムフィールドですが、時代が変わり、世の中に有名な最強プラグイン、MTAppjQueryやFreeLayoutCustomFieldなどがでてきたことによって、徐々に出場機会が減ってきた模様…。そんなわけで昔お世話になったプラグインが、MT7には対応されない、というのも、MT界隈が進化している証なのでしょうね！
そのままアップグレードしてみたらエラーが出た
さて、うまく動かないことが判明したのはとりあえずアップグレードしてみた後でした。ちなみにその時はうっかりプラグイン自体を入れておくのを忘れていた（ごめんなさい）ので、カスタムフィールドの編集画面では「種類」が不明な形になり、記事の編集画面も表示がされない状態…。おっと、やばいやばい、と思って改めてプラグインを入れてみると、テキストエリアは表示されるものの、リッチテキストが適用されていないのです。このままでは入力欄にHTMLタグがそのまま表示されてしまう…。知識のある人にしか編集できない状態に！
さぁ、どうしましょう。
02javascriptでテキストエリアにリッチテキストを適用しよう！
一瞬ヒヤッとしましたが、まぁ焦るでない。
今の問題はリッチテキストが適用できないことだけで、データも引き継がれているし、テキストエリア自体はきちんと表示されています。
ということは、あとはそう、テキストエリアにリッチテキストを適用させてあげればよいのです！！これは、管理画面のjsさえいじれば、できるはず…。
手っ取り早いのは、MTAppjQueryを使うこと！
ここで登場するのが先ほどちらりと話題に上がったMTAppjQueryです。このプラグインは管理画面をゴリゴリにカスタマイズすることが可能なので、もちろんオリジナルのjsも挿入可能。実際、プラグインのマニュアルページにも、カスタムフィールドのテキストエリアにリッチテキストを適用するTipsが載っているのです。
それ以外にもいろんな便利機能を導入して、CMSの使い勝手を向上させることができるので、理想はこのプラグインを導入したいのですが、何せ有料プラグイン。今回は予算を取っておりません。
たまたまFreeLayoutCustomFieldプラグインを導入しているようだったので、これを利用することに
さてどうしようか、と思ったのですが、よく見ると今回の案件ではたまたまFreeLayoutCustomFieldプラグインを導入済み。このプラグインは、管理画面にユーザーオリジナルのjsやCSSを追加する機能がついているので、それを使ってjavascriptを挿入することにしました！ラッキーです。
プラグインが二つとも使えないときは…？
ちなみに今紹介したプラグインは二つとも有料なので、案件によって今追加予算出せないよ！と言われて途方に暮れた時にはどうしたらよいのでしょう。(そんなに高くないんだから買ってほしいけど…意外と財布のひもを締められちゃうケースが多いのです。)
そんな時には下記のサイトを参考にするのもアリかもしれません。
参考：「MovableType 7の管理画面をカスタマイズしたい」
私は試してないけど…。確かにこの方法でできそうです。
でも、これをやるとMTのアプリケーションファイルを直接編集することになるので、アップグレードの時に注意が必要で好ましくありません。そんなことをするぐらいなら、やっぱりプラグインを導入するのがおすすめですね！！
テキストエリアにリッチテキストを適用する方法
さて、プラグインを利用するか、お勧めしないけどヘッダーテンプレートを編集してjavascriptを挿入できるなら、あとはコードを書き込むだけ！
テキストエリアにリッチテキストを適用するコードは、これだけです！
var 変数名 = new MT.EditorManager('テキストエリアのid名');
複数のフィールドにリッチテキストを適用する場合の見本はこちら
var cf_ritch01 = new MT.EditorManager('ritchfield_textarea01');
var cf_ritch02 = new MT.EditorManager('ritchfield_textarea02');
テキストエリアのid名は、「ritchfield_カスタムフィールドのベースネーム」になると思われます。念のためデベロッパーツールで確認してみましょうね！
ちなみに参考にしたのは下記のサイト。
参考：「MTAppjQuery で Movable Type のカテゴリ編集画面でもリッチエディタを使えるようにする」
MTAppjQueryでは、プラグインの機能を使って管理画面の種類によってjsを出し分けたりしていますが、その辺の条件分岐をプラグインなしでやる場合は、まぁとにかく頑張ってください！私はたまたまFreeLayoutCustomFieldを導入しているサイトだったので、このフィールドを使用しているページでしか読み込まれないjsに、「テキストエリアにリッチテキストを適用する」コードを追加するだけでしたから、よりシンプル。
03カスタムフィールドの種類を普通のテキストエリアに移行しよう！
ここまでで、必要最低限の形は整いました。これだけでも十分動くはずです。
だがしかし、今後の運用のことを考えると、ここで一つ、やっておきたいことがあります。
それは、カスタムフィールドの種類を「TinyMCEリッチテキスト」から「テキスト（複数行）」に変えること！
古いプラグインを使い続けるリスク
今回は完全にけがの功名ですが…。先にも触れたとおり、TinyMCEカスタムフィールドプラグインを入れ忘れてMT７にアップグレードしたところ、カスタムフィールドの種類が「不明」になり、編集画面にテキストエリアが表示されなくなってしまいました。そのため、一度古いプラグインをインストールし、管理画面を開いたところ、リッチテキストが適用されていないテキストエリアが表示されたので、javascriptで後からリッチテキストを適用したのが、今までのくだり。
ということはつまり、MT7ではうまく動かないプラグインも、このまま引き続き利用し続けなければならないのが今の状態なのです。
これはよくないですね。仮にリニューアルもしないまままたMT8とかがでて、さぁ、またこのままアップグレード！なんてことになったら、その時こそうまくいかないかもしれない…！！！
DBをいじってカスタムフィールドの種類を変える
しかしながら一度作成して運用中のカスタムフィールド、あとから種類を変更することはできません。管理画面上ではね。
なので、苦肉の策、DBをいじってカスタムフィールドの種類だけ書き換えちゃいます！！
カスタムフィールドの情報は下記テーブルに入っています。
blog_idでフィルタリングして、
該当のカスタムフィールドを探します。
field_type = "ritchtext" のカスタムフィールドが、TinyMCEカスタムフィールドプラグインで作成したフィールドなので、field_type = "textarea"に書き換えちゃいます。
これで、普通の複数行テキストのカスタムフィールドに変更できました！！！
最後にjavascriptを修正
さて、最後にjavascriptを修正します。カスタムフィールドの種類を変えたことで、フィールドのIDが変わっています。TinyMCEリッチテキストの場合は「ritchfield_ベースネーム」でしたが、普通のカスタムフィールドの場合、「customfield_ベースネーム」になるので、上記の例の場合だと、
var cf_ritch01 = new MT.EditorManager('customfield_textarea01');
var cf_ritch02 = new MT.EditorManager('customfield_textarea02');
に変更すればOK！
これで無事、MT6でTinyMCEカスタムフィールドプラグインで作成していたカスタムフィールドを、標準のカスタムフィールドに移すことができました！
ちょっとヒヤッとしたけれど、何とかなるものですね！今後MT7での構築が進めば、もはや記事やカスタムフィールドを活用することもまれになってくるかもしれないので、この情報が必要なのも一時的な事かも…！何かの役に立てばうれしいです！
この記事が役に立ったらシェアしてください！