エントリーとコメントで絵文字を使えるようにするプラグイン（MT4専用版・その3）

「エントリーとコメントで絵文字を使えるようにするプラグイン」の第3回として、コメント入力欄で絵文字を使えるようにする方法の2つ目を解説します。

1.InsertIconプラグインのインストール

まず、一昨日のエントリーの手順に沿って、InsertIconプラグインをインストールし、絵文字を表示できる状態にしておきます。

2.ConvertIconMacroプラグインのインストール

次に、絵文字のコードをimgタグに変換するために、「ConvertIconMacro」というプラグインをインストールします。

プラグインの継続的な開発やサポートのために、プラグインをご利用された方は、ドネーション（寄付）を行っていただけると幸いです。
ドネーションの方法は、こちらのページをご参照ください。

また、このプラグインの他にも、いくつかのプラグインを配布しています。
配布中のプラグインは、Movable Type Plugin Directoryのページをご参照ください。

Movable Typeのプラグイン開発等のドキュメント「Movable Type Developer's Guide Volume 1」も販売しています。
ご自分でプラグインを作ってみたい方に、ぜひお勧めしたい一冊です。
詳細は特設ページをご覧ください。

ダウンロードが終わったら、そのファイルを解凍します。
解凍すると「ConvertIconMacro」というフォルダができますが、その中の「ConvertIconMacro.pl」というファイルを書き換えます。

このファイルの先頭の方に、以下のような部分があります。

my @mt_icons = (
    ・
    ・
    ・
);

InsertIconプラグインのInsertIcon.jsから絵文字の情報の部分（「[」と「]」で囲んだ行が並んでいる部分）をコピーして、上記の「(」と「);」の間に、貼り付けます。

例えば、「pepper」というサイト様で配布されている「D-BALLOON01」という画像を使う場合だと以下のように書き換えます。

my @mt_icons = (
    [ "pp_00.gif", "・・・", 17, 17 ],
    [ "pp_01.gif", "ハート", 17, 17 ],
    [ "pp_02.gif", "汗", 17, 17 ],
    [ "pp_03.gif", "嫌な感じ", 17, 17 ],
    [ "pp_04.gif", "怒り", 17, 17 ],
    [ "pp_05.gif", "音符", 17, 17 ],
    [ "pp_06.gif", "？", 17, 17 ],
    [ "pp_07.gif", "！", 17, 17 ],
    [ "pp_08.gif", "汗2", 17, 17 ],
    [ "pp_09.gif", "ひらめき", 17, 17 ],
    [ "pp_10.gif", "ハートブレイク", 17, 17 ],
    [ "pp_11.gif", "ダブルハート", 17, 17 ],
    [ "pp_12.gif", "ドクロ", 17, 17 ]
);

書き換えが終わったら、ファイルを保存します。
なお、Movable Typeの文字コードをutf-8以外にしている場合は、その文字コードにしてファイルを保存します。

3.ConvertIconMacroプラグインのアップロード

次に、ConvertIconMacroプラグインをアップロードします。
「ConvertIconMacro」フォルダを、Movable Typeの「plugins」ディレクトリの中にアップロードします。

4.コメント入力フォームに絵文字入力機能を追加する

次に、コメント入力フォームに、絵文字を入力する機能を追加します。

コメント入力フォームがあるテンプレートを開き、その中でtextareaタグの箇所を探します。
そして、その終了タグ（</textarea>）の後に、以下を追加します。

<br />
<MTInsertIconListJS mode="macro">

たとえば、Movable Type 4の標準テンプレートの場合、コメント入力フォームは、「コメント入力フォーム」という名前のテンプレートモジュールにあります。
そのテンプレートで、textareaタグの付近に、以下の赤字の部分を追加します。

<div id="comments-open-text">
    <label for="comment-text">コメント <MTIfAllowCommentHTML>(スタイル用のHTMLタグを使うことができます)</MTIfAllowCommentHTML></label>
    <textarea id="comment-text" name="text" rows="15" cols="50">
    <MTIf name="comment_preview_template">
        <$MTCommentBody autolink="0" sanitize="0" convert_breaks="0" encode_html="1"$>
    </MTIf>
    </textarea><br />
<MTInsertIconListJS mode="macro">
</div>

5.コメント一覧部分の書き換え

次に、テンプレートの中でコメント一覧を表示する部分を探し、MTCommentBodyタグを<MTConvertIconMacro>と</MTConvertIconMacro>のタグで囲みます。

たとえば、Movable Type 4の標準テンプレートの場合、「コメント詳細」のテンプレートモジュールにMTCommentBodyタグがあります。
以下の赤字のように、MTConvertIconMacroタグを追加して書き換えます。

・
・
・
</div>
<div class="comment-content">  
<MTConvertIconMacro><$MTCommentBody$></MTConvertIconMacro>
</div>
<div class="comment-footer">
・
・
・

6.再構築する

ここまでが終わったら、ブログ記事アーカイブを再構築します。
これで、各記事のコメント入力欄で、絵文字（を表すコード）を入力できるようになります。