Movable Type 備忘録

 エントリとコメント内に絵文字を入れられるようにする

こんにちわ^^

Movable Type を使いだした頃はめずらしさのあまり、わたしのサイトでもエントリ内、コメント欄に絵文字を入れてましたが、いつしか何となく取り外しちゃいましたあせあせ
でも、友人が入れたいとのことだったので、最近の絵文字事情を調査( 大げさ過ぎあせあせ )して、実際に設置してみたのでその方法をご紹介します。

エントリ内に絵文字を入れるには、The blog of H.Fujimoto さんとこで配布されてる IntertIcon プラグインを使用します。

エントリ内に限らず、コメント欄にも絵文字を入れることができる優れものです うるうる

Movable Type 3.x 版と Movable Type 4 版がありますのでご注意ください。
MT3.x 用: InsertIcon

アイコンを配布してるサイト

エントリページ内に絵文字アイコンを表示する

以下にエントリページ内に絵文字アイコンを表示する為の手順を記します。

  1. まず絵文字アイコンを入手します。
    上記アイコンを配布してるサイトからアイコンを入手してサーバにアップロードします。アップロード先は mt/mt-static/plugins/InsertIcon/images/ ディレクトリ内にアップロードします。
    また、mt/mt-static/plugins/InsertIcon/images/ ディレクトリ内にある dummy というファイルを削除してください。

  2. 次に InsertIcon プラグインを入手します。
    上記 URL より InsertIcon プラグインの圧縮ファイルを入手します。そして適当なフォルダに展開します。

  3. InsertIcon.js を編集します。
    InsertIcon.js 内に、先ほどアップロードした絵文字アイコンを記述していきます。

    具体的な記述の仕方は InsertIcon.js 内にも明記されてますので分かりやすいかと思います。
    以下は Purple Cafe さんとこでお借りした、顔アニ くろろんの記述例です。

    1. var mt_icons = [
    2.     [ "kuroron/t2_ase1.gif", "あせあせ", 40, 40 ],
    3.     [ "kuroron/t2_ase2.gif", "あせあせ", 40, 40 ],
    4.     [ "kuroron/t2_bai.gif", "バイバイ", 40, 40 ],
    5.     [ "kuroron/t2_be.gif", "べ~", 40, 40 ],
    6.     [ "kuroron/t2_bui.gif", "ブイブイ", 40, 40 ],
    7.     [ "kuroron/t2_chu.gif", "チュ!", 40, 40 ],
    8.     [ "kuroron/t2_gan.gif", "ガーン", 40, 40 ],
    9.     [ "kuroron/t2_glass.gif", "サングラス", 40, 40 ],
    10.     [ "kuroron/t2_gu.gif", "グウグウ", 40, 40 ],
    11.     [ "kuroron/t2_hate.gif", "はて?", 40, 40 ],
    12.     [ "kuroron/t2_iya.gif", "イヤイヤ", 40, 40 ],
    13.     [ "kuroron/t2_kyaha.gif", "キャハハ", 40, 40 ],
    14.     [ "kuroron/t2_kyoro.gif", "キョロキョロ", 40, 40 ],
    15.     [ "kuroron/t2_moji.gif", "もじもじ", 40, 40 ],
    16.     [ "kuroron/t2_muka.gif", "ムカムカ", 40, 40 ],
    17.     [ "kuroron/t2_naki1.gif", "しくしく", 40, 40 ],
    18.     [ "kuroron/t2_naki2.gif", "エーン", 40, 40 ],
    19.     [ "kuroron/t2_niko.gif", "にこっ!", 40, 40 ],
    20.     [ "kuroron/t2_niya.gif", "にやり", 40, 40 ],
    21.     [ "kuroron/t2_nn.gif", "んっ!?", 40, 40 ],
    22.     [ "kuroron/t2_nohohon.gif", "のほほん", 40, 40 ],
    23.     [ "kuroron/t2_normal.gif", "ふつう", 40, 40 ],
    24.     [ "kuroron/t2_pati.gif", "パチパチ", 40, 40 ],
    25.     [ "kuroron/t2_peko.gif", "ぺこり", 40, 40 ],
    26.     [ "kuroron/t2_tere.gif", "テレテレ", 40, 40 ],
    27.     [ "kuroron/t2_un.gif", "うぅ~ん", 40, 40 ],
    28.     [ "kuroron/t2_uru.gif", "うるうる", 40, 40 ],
    29.     [ "kuroron/t2_waku.gif", "ワクワク", 40, 40 ],
    30.     [ "kuroron/t2_wink.gif", "ウインク", 40, 40 ],
    31. [ "kuroron/t2_ya.gif", "やあ!", 40, 40 ]
    32. ];

    一番最後の行だけは、行末に「,」を付けないようにしてください。

    一通り編集したら保存します。保存の際、お使いの文字コードに合わせて保存します。デフォルトでは UTF-8 になってます。

  4. InsertIcon.pl を編集します。

    - 2008.01.19 追記 -
    SSL 使用時でもここでの作業は不要になりましたので無視してください。

    ここでの作業は共有SSL を使って Movable Type にログインするでご紹介したカスタマイズを行った場合の手順になります。 通常では不要な手順ですので読み飛ばしてください。

    SSL を使用して Movable Type にログインした場合、URL が異なります。 ですので、InsertIcon.pl 内の 60 行目辺りを以下のように変更することで対応します。

    plugins/InsertIcon.pl

    1. #$insert_icon_js = $app->static_path . "plugins/InsertIcon/js/InsertIcon.js";
    2. #$icon_dir = $app->static_path;
    3. $insert_icon_js = $app->config('CGIPath') . 'mt-static/plugins/InsertIcon/js/InsertIcon.js';
    4. $icon_dir = $app->config('CGIPath') . 'mt-static/';

    赤い字のようにコメントにして、青い字の部分を追加します。

  5. アップロードします。
    一通り編集したら mt-static/、plugins/ フォルダをそのまま mt/ ディレクトリの中にアップロードします。

  6. 以上でエントリ編集画面に、追加した絵文字アイコンが表示されるようになります。
    絵文字アイコンをクリックすることで、エントリ内にお好きな絵文字アイコンを表示することができます。

    コメント欄に絵文字アイコンを表示する

    次にコメント欄に絵文字アイコンを表示するための手順を記します。

    1. まず ConvertIconMacro プラグインを編集します。
      こちらのページから、ConvertIconMacro プラグインを入手してください。 そして、ConvertIconMacro/ConvertIconMacro.pl の 15 行目あたりを以下のように変更します。

      ConvertIconMacro/ConvertIconMacro.pl

      1. my @mt_icons = (
      2. # ここに、InsertIcon.jsからコピーした内容を貼り付けます。
      3. # 以下の例はpepper様の「BALLOON-01」を使う場合です。
      4. # [ "pp_00.gif", "・・・", 17, 17 ],
      5. # [ "pp_01.gif", "ハート", 17, 17 ],
      6. # [ "pp_02.gif", "汗", 17, 17 ],
      7. # [ "pp_03.gif", "嫌な感じ", 17, 17 ],
      8. # [ "pp_04.gif", "怒り", 17, 17 ],
      9. # [ "pp_05.gif", "音符", 17, 17 ],
      10. # [ "pp_06.gif", "?", 17, 17 ],
      11. # [ "pp_07.gif", "!", 17, 17 ],
      12. # [ "pp_08.gif", "汗2", 17, 17 ],
      13. # [ "pp_09.gif", "ひらめき", 17, 17 ],
      14. # [ "pp_10.gif", "ハートブレイク", 17, 17 ],
      15. # [ "pp_11.gif", "ダブルハート", 17, 17 ],
      16. # [ "pp_12.gif", "ドクロ", 17, 17 ]
      17. [ "kuroron/t2_ase1.gif", "あせあせ", 40, 40 ],
      18. [ "kuroron/t2_ase2.gif", "あせあせ", 40, 40 ],
      19. [ "kuroron/t2_bai.gif", "バイバイ", 40, 40 ],
      20. [ "kuroron/t2_be.gif", "べ~", 40, 40 ],
      21. [ "kuroron/t2_bui.gif", "ブイブイ", 40, 40 ],
      22. [ "kuroron/t2_chu.gif", "チュ!", 40, 40 ],
      23. [ "kuroron/t2_gan.gif", "ガーン", 40, 40 ],
      24. [ "kuroron/t2_glass.gif", "サングラス", 40, 40 ],
      25. [ "kuroron/t2_gu.gif", "グウグウ", 40, 40 ],
      26. [ "kuroron/t2_hate.gif", "はて?", 40, 40 ],
      27. [ "kuroron/t2_iya.gif", "イヤイヤ", 40, 40 ],
      28. [ "kuroron/t2_kyaha.gif", "キャハハ", 40, 40 ],
      29. [ "kuroron/t2_kyoro.gif", "キョロキョロ", 40, 40 ],
      30. [ "kuroron/t2_moji.gif", "もじもじ", 40, 40 ],
      31. [ "kuroron/t2_muka.gif", "ムカムカ", 40, 40 ],
      32. [ "kuroron/t2_naki1.gif", "しくしく", 40, 40 ],
      33. [ "kuroron/t2_naki2.gif", "エーン", 40, 40 ],
      34. [ "kuroron/t2_niko.gif", "にこっ!", 40, 40 ],
      35. [ "kuroron/t2_niya.gif", "にやり", 40, 40 ],
      36. [ "kuroron/t2_nn.gif", "んっ!?", 40, 40 ],
      37. [ "kuroron/t2_nohohon.gif", "のほほん", 40, 40 ],
      38. [ "kuroron/t2_normal.gif", "ふつう", 40, 40 ],
      39. [ "kuroron/t2_pati.gif", "パチパチ", 40, 40 ],
      40. [ "kuroron/t2_peko.gif", "ぺこり", 40, 40 ],
      41. [ "kuroron/t2_tere.gif", "テレテレ", 40, 40 ],
      42. [ "kuroron/t2_un.gif", "うぅ~ん", 40, 40 ],
      43. [ "kuroron/t2_uru.gif", "うるうる", 40, 40 ],
      44. [ "kuroron/t2_waku.gif", "ワクワク", 40, 40 ],
      45. [ "kuroron/t2_wink.gif", "ウインク", 40, 40 ],
      46. [ "kuroron/t2_ya.gif", "やあ!", 40, 40 ]
      47. );

      青い字の部分のように InsertIcon.js で編集した内容をコピー & ペーストして保存します。
      そして mt/plugins/ ディレクトリの中に ConvertIconMacro/ フォルダごとアップロードします。

    2. 次にコメントフォームに絵文字アイコンを追加します。
      「コメント入力フォーム」テンプレートモジュール内にある、textarea タグあたりに以下を追加します。

      1. <p><MTInsertIconListJS mode="macro"></p>

      追加したら保存します。

    3. 次に「コメントの詳細」テンプレートモジュールを変更します。
      「コメントの詳細」テンプレートモジュール内の <$MTCommentBody$> タグを以下のように <MTConvertIconMacro> コンテナタグで囲います。

      1. <MTConvertIconMacro><$MTCommentBody$></MTConvertIconMacro>

      変更したら保存します。

    4. 再構築します。
      一通り変更したらブログ記事アーカイブを再構築します。 再構築すると、コメントフォーム辺りに絵文字アイコンが表示されるはずです。

    以上でコメント投稿時でも絵文字アイコンを使えるようになりました。

    コメント投稿に Ajax を使用してる場合

    コメント投稿に Ajax を使用している場合には、「コメントプレビュー」システムテンプレート内から<$MTCommentPreviewBody$> タグを探して、以下のように <MTConvertIconMacro> コンテナタグで囲います。

    1. <MTConvertIconMacro><$MTCommentPreviewBody$></MTConvertIconMacro>

    変更したら保存します。
    コメントプレビューにて正しくイメージ変換されることを確認いてください。

 Trackback Pings(0)

No trackbacks found.

 Comments(22)

#1: Posted by kankiti @ February 16, 2008 [REPLY]
user-pic

こんばんは。
絵文字つけようとしたところ全く表示されませんでした。(; ̄ー ̄川 アセアセ
また、coreserverが原因とか・・・関係ありますか?

#2: Posted by Author Profile Page bzbell @ February 16, 2008 [REPLY]
user-pic

>>1 kankiti さん

こんばんわ^^

> また、coreserverが原因とか・・・関係ありますか?

こちらの記事を参考にしたのであれば、わたしと同様なのでサーバは関係ないと思われまするウインク
コメントへの絵文字ですか!? それともエントリ内!?

どちらにしても JavaScript または ConvertIconMacro プラグインの記述に問題がある可能性大ですうぅ~ん

#3: Posted by kankiti @ February 16, 2008 [REPLY]
user-pic

bzbell と同じ状況、顔文字も同じにしてコピペして貼り付けてやっても表示しませんでした。
おかしいですね。

#4: Posted by Author Profile Page bzbell @ February 17, 2008 [REPLY]
user-pic

>>3 kankiti さん

> bzbell と同じ状況、顔文字も同じにしてコピペして貼り付けてやっても表示しませんでした。

えっあせあせ !?
コピペはダメですよ。

わたしの場合は mt/mt-static/plugins/InsertIcon/images/ ディレクトリの中に kuroron/ というディレクトリを作ってその中にアイコンを格納してます。

基本的には上記ディレクトリ配下であればどのようなディレクトリ構成になっても、相対パスであれば問題ありません。

わたしはディレクトリ分けしてアイコンを使い分けてますので、記事はあくまでもわたしが設置した記述例です。

kankiti さんはアイコンをどこに格納してますかのほほん
そこら辺をご確認くださいあせあせ

#5: Posted by kankiti @ February 17, 2008 [REPLY]
user-pic

はい!そう思ってimagesホルダの中にご指摘のホルダを作成してました。
とりあえずテスト的に同じようにしようと思ってやってます。
mt/mt-static/plugins/InsertIcon/images/kuroron/←アイコン
InsertIcon.js も [ "kuroron/t2_ase1.gif", "あせあせ", 40, 27 ],  と記入してます。
ほんま不思議ですね。これでエントリの部分にアイコンがでないとは・・・・・

#6: Posted by Author Profile Page bzbell @ February 17, 2008 [REPLY]
user-pic

>>5 kankiti さん

お使いの MT は MT4.1 ですか!?
その場合、ちゃんと MT4.1 用のプラグインを使ってますよねあせあせ

この記事は MT4 のときの記事ですが、その後 MT4.1 用が配布されてます。
MT が 4.1 の場合 MT4.0 用プラグインを使用してもエントリ編集画面には表示されません(コメントは OK!!)ので配布元をご確認頂けますか。

#7: Posted by kankiti @ February 17, 2008 [REPLY]
user-pic

こんばんは。
どうもありがとうございます。
MT4.1のプラグインを入れると表示されました。気がつかずにすんません。
あせあせ

#8: Posted by yutaka @ June 4, 2008 [REPLY]
user-pic

こんばんわ〜、こちらのエントリーですね。
エントリー欄は必要なくコメント欄のみに使いたいのですが
「コメント欄に絵文字アイコンを表示する」この説明以下を行えばいいわけですか?

#9: Posted by Author Profile Page bzbell @ June 4, 2008 [REPLY]
user-pic

>>8 yutaka さん

> 「コメント欄に絵文字アイコンを表示する」この説明以下を行えばいいわけですか?

はい。そこだけやっていただければ OK ですワクワク

#10: Posted by yutaka @ June 4, 2008 [REPLY]
user-pic

長くなり申し訳ありません
1)http://www.h-fj.com/blog/archives/2007/08/10-105920.php
このサイトからInsertIcon_1_20.zipをダウンロードしました。
2)絵文字ファイルを用意しまして、「mt-static」→「plugins」→「InsertIcon」→「images」
フォルダにコピーしました。
URLを貼り付けてテストしアイコン画像が表示されるのを確認
http://fish1091.com/mt/mt-static/plugins/InsertIcon/images/icon_biggrin.gif

3)InsertIcon.jsファイルを編集
function FJInsertIcon(mt_icon_base) {

var mt_icons = [

[ "icon_biggrin.gif", "スマイル1", 15, 15 ],
[ "icon_confused.gif", "スマイル2", 15, 15 ],
[ "icon_cool.gif", "サングラス", 15, 15 ],
[ "icon_cry.gif", "しら〜", 15, 15 ],
~~~~~~~~~~~~~~~~~~~~~~以下省略合計16個作りました

*/
このように編集しました。

4)次にhttp://bizcaz.com/archives/2007/12/22-225428.php
このページの「コメント欄に絵文字アイコンを表示する」
の改造をしました
http://www.h-fj.com/blog/archives/2007/08/12-101540.php
ここからConvertIconMacro_1_10.zipをダウンロードしてConvertIconMacro.pl
を編集しました。内容はInsertIcon.jsファイルを編集したときの画像名と同じ
ようになるように編集しました。編集後
mt/plugins/ ディレクトリの中に ConvertIconMacroフォルダごとアップロードしました。


5)「コメント入力フォーム」テンプレートにタグ追加
コメント入力フォーム部分は

<textarea id="comment-text" name="text" tabindex="14" accesskey="t" rows="12" cols="20" onfocus="if(this.value=='Leave your comment here.'){this.value='';}" onblur="if(this.value==''){this.value='Leave your comment here.';}">Leave your comment here.</textarea></p><p><MTInsertIconListJS mode="macro"></p>
<p id="comment-feed"><a class="feed" href="<$MTLink template="feeds/comment"$>" title="コメントの返信をフィードでお知らせ">コメント用フィード</a></p>
</div>
-------------------------------------------

6)コメント詳細部分

<dd><MTConvertIconMacro><$MTCommentBody link_number="1"$></MTConvertIconMacro></dd>
<dt class="comments_footer">Posted on <$MTCommentDate language="en" format="%B %e, %Y"$></dt>
</dl>
---------------------------------------------------------------
このように作業して見たのですがアイコンはお出ましになりません(>_ いままで一発で出来たためしがないなぁ

#11: Posted by Author Profile Page bzbell @ June 4, 2008 [REPLY]
user-pic

>>10 yutaka さん

> 3)InsertIcon.jsファイルを編集

記事内の「エントリページ内に絵文字アイコンを表示する」の 3. で説明した内容のことをやってみてください。
yutaka さんの InsertIcon.js のアイコンリストの最後にカンマ「,」が付いていることが原因だと思いますあせあせ

#12: Posted by yutaka @ June 4, 2008 [REPLY]
user-pic

3.コメントでimgタグを使えるようにするの説明部分ですね。その通り設定しました。

>InsertIcon.js のアイコンリストの最後にカンマ「,」が付いていることが原因だと思います

なるほどぉ一番下だけは「,」を外さないといけないんですね。外して再度アップしました。
....出ぬ!なんでだぁ〜

#13: Posted by yutaka @ June 4, 2008 [REPLY]
user-pic

皆様のおかげでコメント欄にスマイル表示完成しました。所でこのエントリーってそもそも「エントリー欄」「コメント欄」の両方に同じアイコンが表示できるんですよね。最初はコメント欄だけで良いと思い設置作業をしていたのですが、エントリー画面と同じアイコンの方が揃って良いなと思いやってみようと何度もエントリーを読み直しているんですが、ほとんど同じ作業をしたような気がします。エントリー欄にもアイコンを出すという設置方法とどこが違うんでしょう?

#14: Posted by Author Profile Page bzbell @ June 4, 2008 [REPLY]
user-pic

>>13 yutaka さん

MT4.1 用のプラグインをお使いですか!?
この記事でご紹介してるものは MT4.0 のもので MT4.1 では動作しません。

配布元から MT4.1 用のプラグインが配布されてますのでそちらをお使いください。
http://www.h-fj.com/blog/archives/2008/01/07-163227.php

#15: Posted by yutaka @ June 4, 2008 [REPLY]
user-pic

MT4.1 用のプラグインに交換しました。珍しく一発で成功しました。エントリー投稿画面にもアイコンが出てきました〜
有り難うございました。
う〜〜ん、一仕事終えた(´ー`)y-~~

#16: Posted by maru @ June 8, 2008 [REPLY]
user-pic

初めまして。こちらのサイトとfujimotoさんのサイトを参考にさせていただき
絵文字を入れんとして只今格闘中なのですが…
初めてのブログ構築中なもので日々悪戦苦闘です。

質問させていただきたいのですが、エントリには何事もなく無事に記事内に絵文字を書き込むことができ、表示もされますが、コメント入力フォーム下部には絵文字アイコンがズラリと並んでいるにもかかわらず、文末に絵文字をクリックすると「(文章):pp_11.gif:」となり投稿しても表示がそのままなのです。絵文字が出ない状態なのです。
当方IE6なので、知人にIE7、Firefox、Safariで確認してもらってもコメントには表示されておらず、試しに書き込んでもらってもそのままでした。何度確かめても理由がわかりません。
システムのプラグインではいずれも使用可能になっています。4.1用のものをダウンロードして、fujimotoさんの紹介されている例と同じ絵文字を同じように入れております。なので、ダウンロードして書き換えるべきJSとPLはデフォルトで入っていたので書き換えずそのまま使用しています。
どこか確認すべき点がありましたらお教えいただければと思い書き込みさせていただきました。長くなってしまい申し訳ありません。よろしくお願いいたします。

#17: Posted by Author Profile Page bzbell @ June 9, 2008 [REPLY]
user-pic

>>16 maru さん

こんばんわ^^

> …投稿しても表示がそのままなのです。絵文字が出ない状態なのです。

ということは、ConvertIconMacro プラグインというものはインストール、および設置されてますよね!?
コメントの絵文字は、投稿時(再構築時)に :pp_11.gif: が絵文字の URL に変換されます。その変換をやってるのが ConvertIconMacro プラグインになりますキャハハ

絵文字のがコメントフォームのとこに表示されてるとのことなので、思いつくのは変換時の処理ぐらいでしょうかあせあせ

#18: Posted by maru @ June 9, 2008 [REPLY]
user-pic

お返事ありがとうございます。
ConvertIconMacro プラグインは設置済みです。テンプレートモジュール内のコメント入力フォームにタグも追加しましたし、コメント詳細のコンテナタグで囲むことも済んでいます。この2つはもう…何度も確認しました…
でも投稿ボタンを押した際、再構築されるときにimgに変換できてない、ということなのですよね?Ajaxも使用していませんし、JSもPLも元々UTF-8になっているとのことですし…友人からJAVASCRIPTを実行させてないのでは?と言われてIEの設定も確認しました。何をどうしたらいいものやら…
ほんとに、何度もすみません。

#19: Posted by Author Profile Page bzbell @ June 9, 2008 [REPLY]
user-pic

>>18 maru さん

おっかしいですねぇ。
ConvertIconMacro では再構築時にコメント内から、ConvertIconMacro に記述された文字列(:pp_11.gif: など)をパターンマッチさせてその変換を行ってるだけなので、プラグインさえ実行されれば maru さんのお話聞いてると問題なさそうなんですけどね。

試しに JavaScript、および ConvertIconMacro プラグインの文字コードを確認していただけますか。

#20: Posted by maru @ June 9, 2008 [REPLY]
user-pic

ご親切にお返事ありがとうございます。
プラグインさえ実行されれば!…なんですよね。
JavaScript、および ConvertIconMacro プラグインの文字コードはUTF-8Nになっていました。ここにかすかな期待を抱いていたのですが…
あとは、もう一度ダウンロードし直してみたり、ディレクトリをサーバーの推奨のパーミッションに変えてみたり、としつこく関係ないだろうことまで試してみました。
MTのテンプレートの方のJavaScriptは関係ないのですよね。何かとケンカしてるのでしょうか。あとはセキュリティソフトって関係しますか?でもこの場合は私自身の問題であって、友人がテスト投稿しても出ないわけですし。あぁーもう何も思いつかないです。友人にはつれなく外したら?と。だんだん意地になってきました。
何度もお返事くださってほんとに申し訳ないです。

#21: Posted by maru @ June 9, 2008 [REPLY]
user-pic

bzbellさん、出ましたーーーーー!
ものすごい単純なことで出てしまいました。さきほどのコメントはもう消してしまってください。もうほんとにほんとにご迷惑おかけしました…ありがとうございます。
Macroプラグインの# [ "pp_00.gif", "・・・", 17, 17 ], というアイコン表記の頭の#を撤去したら出ました…そのまま使っちゃいけなかったってことでしょうか。
あぁ…どっと疲れが出てきました。初心者には高すぎる壁です…
お世話になりましたです。ぺこり

#22: Posted by Author Profile Page bzbell @ June 9, 2008 [REPLY]
user-pic

>>20 maru さん
>>21 maru さん

> …#を撤去したら出ました…そのまま使っちゃいけなかったってことでしょうか。

えっ!? そうなんですか!?
すいません、気づかなくって。
# ってコメントという意味なのですが、わたしの方では問題なかったので・・・盲点でしたグウグウ

でも、勉強になりました。
今後ともどうぞよしなにもじもじ

 Post a Comment

 

コメント用フィード