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

「エントリーとコメントで絵文字を使えるようにするプラグイン」では、タイトル通り、コメントの投稿フォームでも絵文字を使えるようにすることができます。

絵文字を使う方法は2通りあり、今日はその1つ目を解説します。

1.2つの方法について

このプラグインでは、コメントに絵文字を入れる方法として、以下の2通りをとることができます。

  • コメントにimgタグを入れられるようにして、絵文字のimgタグを直接に入力する
  • 絵文字を表すような文字列をコメントに入力するようにして、再構築の際にその文字列をimgタグに置換する

今日は前者の方法を解説します。
この方法は、後者に比べると手間がやや少ないのがメリットです。
一方、コメントにimgタグを入力することを許可しますので、絵文字以外の画像も入れることが可能になり、変な画像をコメントに入れられる恐れがあります。

一方、明日は後者の方法を解説します。
こちらは、前者に比べて手間はかかりますが、コメントにimgタグを直接に入力できるようにはしませんので、変な画像を入れられることはありません。

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

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

3.コメントでimgタグを使えるようにする

Movable Typeの標準の設定では、コメントにimgタグを入れることができません。
そこで、imgタグを入れられるようにするために、設定を変えます。

Blogの各ページで、「設定」メニューの「ブログの設定」を選び、設定を行うページを開きます。
そして、ページの左端で「コメント」を選び、コメントの設定を行う状態にします。

これで、コメントの設定を行う状態になります。
「HTMLを許可」のチェックをオンにした後、「HTMLタグを制限」のところで「カスタム設定」をオンにし、その右の欄に以下のように入力します。

a href,b,i,br/,p,strong,em,ul,ol,li,blockquote,pre,img src class width height alt title

↓コメントにimgタグを入れられるようにする
コメントにimgタグを入れられるようにする

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

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

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

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

たとえば、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="tag">
</div>

5.再構築する

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

↓コメントに絵文字のimgタグを入力できるようになったところ
コメントに絵文字のimgタグを入力できるようになったところ

MT Cloud Starter Kit
Movable Typeのプラグイン集「MT Cloud Starter Kit」をぜひご利用ください