Movable Type 備忘録

 エントリとコメント欄に個別の絵文字を使い分ける

こんばんわ^^

エントリとコメント欄で使え絵文字を使い分けるカスタマイズやってみました笑１
大前提として以下のページでご紹介してますカスタマイズをされてる方が対象となります。

既に使われてる人なら想像つくかもしれませんが、基本的に追加する絵文字にエントリ用、コメント欄用という区分けはありません。
ですので、追加した絵文字は両方に同じものが表示されてしまいます困り

好みによりますが、わたしはエントリ( わたししか使えない )とコメント欄( 訪問者さんも使える )で使える絵文字を分けたかったので、そんな使い方をしたい人は続きを読むといいと思うのココロにや

カスタマイズ

先ほども説明しましたが、大前提として既に InsertIcon プラグイン、ConvertIconMacro プラグインがインストールされてて、絵文字も表示できてる人を対象として説明していきます。
まだ絵文字表示できてない人は、まずインストールして絵文字表示させておいてくださいね。

また、ウチは MT5 にバージョンアップしてますので、MT5 用の InsertIcon、ConvertIconMacro プラグインを利用してます。 ですので、MT5 用プラグインをベースに説明していきますが、基本的なところは MT4.x でも同様ですので適宜読み替えて頂けたらと思います。

具体的には以下のファイルを修正います。

  • mt/mt-static/plugins/InsertIcon/js/InsertIcon.js

他のファイルは変更する必要ありません。

InsertIcon.js ファイルの説明

まず、InsertIcon.js ファイルをカンタンに説明してみようと思いますにこ
「ブログ記事の作成」画面やエントリページのソースコードを見ると分かるかと思いますが、いずれも FJInsertIcon というキーワードで検索すると見つかるかと思います。

でも、「ブログ記事の作成」画面とエントリページのコメント欄とでは、FJInsertIcon に渡すパラメータが違ってます。
カンタンに説明すると以下のようになってるようです。

  • 0: エントリページのコメント欄( ConvertIconMacro )から利用
  • 1: 絵文字を「ブログ記事の作成」画面のテキストの上にレイアウト
  • 2: 絵文字を「ブログ記事の作成」画面のテキストの下にレイアウト

なので、「ブログ記事の作成」画面で使用とエントリページのコメント欄で使用を識別するには、FJInsertIcon の第二パラメータの値( 0 かそれ以外 )で識別できることになりますね。

ディレクトリ構成

ウチでは以下のように、ディレクトリ別にエントリ用、コメント欄用のアイコンを保存しています。

mt/mt-static/plugins/InsertIcon/images/
|
+-- kao/　　　エントリページ用アイコン
|
+-- kuroron/　コメント欄用アイコン

人それぞれ環境は違うと思うので、そこら辺は各自の環境に合わせて読み替えてくださいね。

InsertIcon.js ファイルを修正

では、実際にカスタマイズしてみます。
わたしが修正した InsertIcon.js ファイルの一部を以下に抜粋します。

InsertIcon.js ファイルの修正例

  1. function FJInsertIcon(mt_icon_base, position) {
  2. var mt_icons;
  3. var mt_icons_type = [];
  4.  
  5. mt_icons_type[0] = [/* ▼コメント欄用アイコン▼ */
  6. [ "kuroron/t2_ase1.gif", "あせあせ", 40, 40 ],
  7. [ "kuroron/t2_ase2.gif", "あせあせ", 40, 40 ],
  8. [ "kuroron/t2_bai.gif", "バイバイ", 40, 40 ],
  9. [ "kuroron/t2_be.gif", "べ～", 40, 40 ],
  10. [ "kuroron/t2_bui.gif", "ブイブイ", 40, 40 ],
  11. [ "kuroron/t2_chu.gif", "チュ！", 40, 40 ],
  12. [ "kuroron/t2_gan.gif", "ガーン", 40, 40 ],
  13. [ "kuroron/t2_glass.gif", "サングラス", 40, 40 ],
  14. [ "kuroron/t2_gu.gif", "グウグウ", 40, 40 ],
  15. [ "kuroron/t2_hate.gif", "はて？", 40, 40 ],
  16. [ "kuroron/t2_iya.gif", "イヤイヤ", 40, 40 ],
  17. [ "kuroron/t2_kyaha.gif", "キャハハ", 40, 40 ],
  18. [ "kuroron/t2_kyoro.gif", "キョロキョロ", 40, 40 ],
  19. [ "kuroron/t2_moji.gif", "もじもじ", 40, 40 ],
  20. [ "kuroron/t2_muka.gif", "ムカムカ", 40, 40 ],
  21. [ "kuroron/t2_naki1.gif", "しくしく", 40, 40 ],
  22. [ "kuroron/t2_naki2.gif", "エーン", 40, 40 ],
  23. [ "kuroron/t2_niko.gif", "にこっ！", 40, 40 ],
  24. [ "kuroron/t2_niya.gif", "にやり", 40, 40 ],
  25. [ "kuroron/t2_nn.gif", "んっ！？", 40, 40 ],
  26. [ "kuroron/t2_nohohon.gif", "のほほん", 40, 40 ],
  27. [ "kuroron/t2_normal.gif", "ふつう", 40, 40 ],
  28. [ "kuroron/t2_pati.gif", "パチパチ", 40, 40 ],
  29. [ "kuroron/t2_peko.gif", "ぺこり", 40, 40 ],
  30. [ "kuroron/t2_tere.gif", "テレテレ", 40, 40 ],
  31. [ "kuroron/t2_un.gif", "うぅ～ん", 40, 40 ],
  32. [ "kuroron/t2_uru.gif", "うるうる", 40, 40 ],
  33. [ "kuroron/t2_waku.gif", "ワクワク", 40, 40 ],
  34. [ "kuroron/t2_wink.gif", "ウインク", 40, 40 ],
  35. [ "kuroron/t2_ya.gif", "やあ！", 40, 40 ]
  36. ];
  37. mt_icons_type[1] = [/* ▼エントリページ用アイコン▼ */
  38. [ "kao/01.gif", "普通", 16, 16 ],
  39. [ "kao/02.gif", "…", 16, 16 ],
  40. [ "kao/03.gif", "は？", 16, 16 ],
  41. [ "kao/04.gif", "お？", 16, 16 ],
  42. [ "kao/05.gif", "ぶー１", 16, 16 ],
  43. [ "kao/06.gif", "ぶー２", 16, 16 ],
  44. [ "kao/07.gif", "にや", 16, 16 ],
  45. [ "kao/08.gif", "笑１", 16, 16 ],
  46. [ "kao/09.gif", "笑２", 16, 16 ],
  47. [ "kao/10.gif", "笑３", 16, 16 ],
  48. [ "kao/11.gif", "泣きべそ", 16, 16 ],
  49. [ "kao/12.gif", "大泣き", 16, 16 ],
  50. [ "kao/13.gif", "困り", 16, 16 ],
  51. [ "kao/14.gif", "べー", 16, 16 ],
  52. [ "kao/15.gif", "にこ", 16, 16 ],
  53. [ "kao/16.gif", "むか", 16, 16 ]
  54. ];
  55.  
  56. if (0 == position) {
  57. mt_icons = mt_icons_type[0];
  58. }
  59. else {
  60. mt_icons = mt_icons_type[1];
  61. }
  62.  
  63.     var i_file = 0;

色付けされたところが変更した部分になります。

  • 赤字は必ず追加してください。
    そうしないと正しく動作しなくなります。

  • 青字はコメント欄用に追加する絵文字アイコンリストになります。
    ここで注意することは、必ず mt_icons_type[0] としてください。

  • 緑字はエントリページ用に追加する絵文字アイコンリストです。
    ここでも必ず mt_icons_type[1] とします。

  • ピンク字は FJInsertIcon の第二パラメータ 'position' の値が 0 か 0 以外かを識別して、その値によってコメント欄用を使うか、エントリ用を使うかを設定してます。

動作確認

修正したら、ファイルを保存して元に位置にアップロードしてください。
そして、「ブログ記事の作成」画面とエントリページのコメント欄で異なるアイコンが表示されることを確認します。

Movable Type 4.x 向け [2010.01.09] 追記

MT4.x では FJInsertIcon の第二パラメータ 'position' が存在しませんので、mt/plugins/InsertIcon/InsertIcon.pl も修正する必要があります。
それぞれの修正例を以下に記します。

InsertIcon.pl ファイルの修正例 for MT4.x

  1. # MTInsertIconListJS tag
  2. sub insert_icon_list_js {
  3.     my ($ctx, $args) = @_;
  4.  
  5.     my $static_path = $ctx->_hdlr_static_path($args);
  6.     my $mode = $args->{mode};
  7.     $mode = 'tag' if ($mode ne 'tag' && $mode ne 'macro');
  8. my $type = ('macro' == $mode) ? 0 : 1;
  9.     my $out = <<HTML;
  10. <script type="text/javascript" src="${static_path}plugins/InsertIcon/js/InsertIcon.js"></script>
  11. <script type="text/javascript">
  12. //<![CDATA[
  13. _fj_insert_icon_obj = new FJInsertIcon('${static_path}plugins/InsertIcon/images/', '${type}');
  14. _fj_insert_icon_obj.listIconsCommentForm('${mode}');
  15. //]]>
  16. </script>
  17. HTML
  18.     $out;
  19. }

青字の部分を追加します。
そして InsertIcon.js ファイルを以下のように修正します。

InsertIcon.js ファイルの修正例 for MT4.x

  1. function FJInsertIcon(mt_icon_base, position) {
  2. var mt_icons;
  3. var mt_icons_type = [];
  4.  
  5. mt_icons_type[0] = [/* ▼コメント欄用アイコン▼ */
  6. [ "kuroron/t2_ase1.gif", "あせあせ", 40, 40 ],
  7. [ "kuroron/t2_ase2.gif", "あせあせ", 40, 40 ],
  8. [ "kuroron/t2_bai.gif", "バイバイ", 40, 40 ],
  9. [ "kuroron/t2_be.gif", "べ～", 40, 40 ],
  10. [ "kuroron/t2_bui.gif", "ブイブイ", 40, 40 ],
  11. [ "kuroron/t2_chu.gif", "チュ！", 40, 40 ],
  12. [ "kuroron/t2_gan.gif", "ガーン", 40, 40 ],
  13. [ "kuroron/t2_glass.gif", "サングラス", 40, 40 ],
  14. [ "kuroron/t2_gu.gif", "グウグウ", 40, 40 ],
  15. [ "kuroron/t2_hate.gif", "はて？", 40, 40 ],
  16. [ "kuroron/t2_iya.gif", "イヤイヤ", 40, 40 ],
  17. [ "kuroron/t2_kyaha.gif", "キャハハ", 40, 40 ],
  18. [ "kuroron/t2_kyoro.gif", "キョロキョロ", 40, 40 ],
  19. [ "kuroron/t2_moji.gif", "もじもじ", 40, 40 ],
  20. [ "kuroron/t2_muka.gif", "ムカムカ", 40, 40 ],
  21. [ "kuroron/t2_naki1.gif", "しくしく", 40, 40 ],
  22. [ "kuroron/t2_naki2.gif", "エーン", 40, 40 ],
  23. [ "kuroron/t2_niko.gif", "にこっ！", 40, 40 ],
  24. [ "kuroron/t2_niya.gif", "にやり", 40, 40 ],
  25. [ "kuroron/t2_nn.gif", "んっ！？", 40, 40 ],
  26. [ "kuroron/t2_nohohon.gif", "のほほん", 40, 40 ],
  27. [ "kuroron/t2_normal.gif", "ふつう", 40, 40 ],
  28. [ "kuroron/t2_pati.gif", "パチパチ", 40, 40 ],
  29. [ "kuroron/t2_peko.gif", "ぺこり", 40, 40 ],
  30. [ "kuroron/t2_tere.gif", "テレテレ", 40, 40 ],
  31. [ "kuroron/t2_un.gif", "うぅ～ん", 40, 40 ],
  32. [ "kuroron/t2_uru.gif", "うるうる", 40, 40 ],
  33. [ "kuroron/t2_waku.gif", "ワクワク", 40, 40 ],
  34. [ "kuroron/t2_wink.gif", "ウインク", 40, 40 ],
  35. [ "kuroron/t2_ya.gif", "やあ！", 40, 40 ]
  36. ];
  37. mt_icons_type[1] = [/* ▼エントリページ用アイコン▼ */
  38. [ "kao/01.gif", "普通", 16, 16 ],
  39. [ "kao/02.gif", "…", 16, 16 ],
  40. [ "kao/03.gif", "は？", 16, 16 ],
  41. [ "kao/04.gif", "お？", 16, 16 ],
  42. [ "kao/05.gif", "ぶー１", 16, 16 ],
  43. [ "kao/06.gif", "ぶー２", 16, 16 ],
  44. [ "kao/07.gif", "にや", 16, 16 ],
  45. [ "kao/08.gif", "笑１", 16, 16 ],
  46. [ "kao/09.gif", "笑２", 16, 16 ],
  47. [ "kao/10.gif", "笑３", 16, 16 ],
  48. [ "kao/11.gif", "泣きべそ", 16, 16 ],
  49. [ "kao/12.gif", "大泣き", 16, 16 ],
  50. [ "kao/13.gif", "困り", 16, 16 ],
  51. [ "kao/14.gif", "べー", 16, 16 ],
  52. [ "kao/15.gif", "にこ", 16, 16 ],
  53. [ "kao/16.gif", "むか", 16, 16 ]
  54. ];
  55.  
  56. if (undefined != position) {
  57. mt_icons = mt_icons_type[0];
  58. }
  59. else {
  60. mt_icons = mt_icons_type[1];
  61. }
  62.  
  63.     var i_file = 0;

黄色字は MT4.x 向けに MT5.x 用のコードを変更したものです。
FJInsertIcon にパラメータを追加することで、コメント欄の場合( ConvertIconMacro 使用 )は 'position' パラメータが有効ですが、それ以外の時はパラメータは無効ですので、そのように修正しております。

以上です。

 Trackback Pings(0)

No trackbacks found.

 Comments(2)

#1: Posted by Author Profile Page Kei @ January 9, 2010 [REPLY]
user-pic

こんばんわバイバイ

これ前からやりたかったんです！
で、早速やってみました^^
わんこをキャハハ１０匹増やしました

 
#2: Posted by Author Profile Page bzbell @ January 9, 2010 [REPLY]
user-pic

>>1 Kei さん

こんばんわ^^

わたし、今までブログ記事内には絵文字使わない派だったのですが、Kei さんのおかげで手ごろな絵文字見つけたので今回から使うようにしたんです。
で、思い立ったのでサクッとやってみたものなのですが、お役に立て何よりですやあ！

 

 Post a Comment

 

コメント用フィード