Movable Type 備忘録

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

JUGEMやライブドアブログなどでは、普通にある絵文字ですがMovableType(ムーバブルタイプ)ではありませんね。

ないなら入れてしまおう!! ということで、コメントくれる人のために絵文字を使えるようにカスタマイズしてみたいと思います。

今回参考にしたサイトは、やむやむ 様です。

コメント欄に絵文字を入れるには、MTMacroプラグインとMT-Smileysプラグインを使用して実現します。

MTMacroプラグインは、あらかじめ定義された文字列を絵文字イメージのURLに変換してくれるプラグインです。
また、MT-Smileysプラグインの方は、絵文字イメージを管理しているプラグインとなっています。

▼MTMacroプラグインの入手はこちらから▼
http://bradchoate.com/weblog/2002/08/12/mtmacros
▼MT-Smileysプラグインの入手はこちらから▼
http://mt-hacks.com/mt-smileys.html

カスタマイズ方法

MTMacroプラグインをインストールします。
上記リンク先から mtmacros-1_52.zip という圧縮ファイルをダウンロードしてください。
そして、適当なフォルダに展開して以下のファイルをサーバーにアップロードします。

  1. macros.pl： mt/plugins/ の中にアップロードします。
  2. postproc.pm： mt/extlib/ の中に bradchoate というディレクトリを作成して、その中にアップロードします。
  3. macros.pm： mt/extlib/ の中に bradchoate というディレクトリを作成して、その中にアップロードします。

次にMT-Smileysプラグインをインストールします。
上記リンク先から mt-smiley.zip という圧縮ファイルをダウンロードしてください。
そして、適当なフォルダに展開すると image ディレクトリがありますので、まるごと mt.cgi と同じ場所にアップロードします。

次に絵文字を表示させるための前準備を行います。
mt-smiley.zip の中に、smiley-javascript.txt、smiley-macros.txtとsmileys.txt というファイルがあると思います。
以下の手順でテンプレートおよび、モジュールを作成します。

  1. まずは、smiley-javascript.txt のテンプレートを作成します。
    MovableType(ムーバブルタイプ)の管理画面からテンプレートをクリックして、画面上部にあるテンプレートの新規作成をクリックします。

  2. 内容は以下の通り

    1. テンプレート名： smiley-javascript
    2. 出力ファイル名： smiley.js
    3. このテンプレートにリンクするファイル： 未記入でいいです。
    4. テンプレートの内容： 以下のコードをコピペします。
    5.  
    6. function emoticon(smiley) {
    7.     var txtarea = document.comments_form.text;
    8.     smiley = ' ' + smiley + ' ';
    9.     if (txtarea.createTextRange && txtarea.caretPos) {
    10.         var caretPos = txtarea.caretPos;
    11.         caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? smiley + ' ' : smiley;
    12.         txtarea.focus();
    13.     } else {
    14.         txtarea.value += smiley;
    15.         txtarea.focus();
    16.     }
    17. }

    入力したら、保存して再構築します。

  3. 次に、smiley-macros.txtのモジュールを作成します。
    MovableType(ムーバブルタイプ)の管理画面から、ンプレートをクリックして、画面上部にあるモジュールをクリックします。
    そして、画面右上にあるモジュールを新規作成をクリックしてください。

  4. 内容は以下の通り

    1. テンプレート名： smiley macros
    2. このテンプレートにリンクするファイル： 未記入でいいです。
    3. モジュールの内容： smiley-macros.txt の中すべてをコピペします。

    入力したら、保存してください。
    また、同じ要領でsmileys.txtのモジュールも作成します。

    1. テンプレート名： smileys
    2. このテンプレートにリンクするファイル： 未記入でいいです。
    3. モジュールの内容： smileys.txt の中すべてをコピペします。

最後に、個別エントリ・テンプレートを修正します。
以下のコードを1行目に追加してください。

  1. <$MTInclude module="smiley macros"$>

次に、以下のコードを<head>～</head>内に追加してください。

  1. <script type="text/javascript" src="<$MTBlogURL$>smiley.js"></script>

青い字の部分を各自の環境に合わせて変更します。
そして、絵文字イメージを一覧させたい場所に以下のコードを追加します。

わたしは、コメント入力欄の下に配置するようにしています。

  1. <table border="0" cellpadding="0" cellspacing="0"><tr><td><$MTInclude module="smileys"$></td></tr></table>

最後に、コメント本文のところに絵文字イメージを表示できるようにします。
<$MTEntryBody$>を探してください。そして以下のように変更します。

  1. 変更前
  2. <$MTEntryBody$>
  3.  
  4. 変更後
  5. <MTMacroApply><$MTEntryBody$></MTMacroApply>

青い字の部分で<$MTEntryBody$>を挟み込むよう追加しました。
同様に<$MTCommentBody$>を探して以下のように変更します。

  1. 変更前
  2. <$MTCommentBody$>
  3.  
  4. 変更後
  5. <MTMacroApply><$MTCommentBody$></MTMacroApply>

修正したら、いつものように保存して再構築します。
同様の手順で、コメント・プレビューにも追加しておきます。

以上で、コメント欄にも絵文字を表示させることができました。 絵文字の追加も自由自在で、先ほど作ったモジュール smiley-macros と smileys に、既にある記述と同じように追加していくだけです。

 Trackback Pings(1)

from TokyoLife::Dalog

そう言えば、MovableTypeで絵文字を使う為の導入方法メモを 残していなか...

Tracked on May 14, 2007

 Comments(32)

#1: Posted by さえら @ May 1, 2006 [REPLY]
user-pic

こんばんは。やむやむにトラックバックありがとうございました。:pp_01a.gif:
かわいい絵文字がたくさんですね。:pp_01.gif:
MTはデフォルトのまま使うとなんとも味気ないので、こういうカスタマイズは大好きです。:pp_05.gif:

 
#2: Posted by bzbell @ May 2, 2006 [REPLY]
user-pic

>>1 さえら さん

こんばんわ^^
コメントありがとうございます:pp_05.gif:
やむやむは以前からずっと拝見させてもらっていました。わたしなんかよりずっと前からMovableTypeを使われているので、とっても参考になっています:pp_01.gif:ブログもかわいいし:pp_11.gif:

機会がありましたら、また寄ってくださぁ～い:pp_11a.gif:

 
#3: Posted by もみぃ @ July 31, 2007 [REPLY]
user-pic

初めまして。コメント欄に導入することができました。
とってもわかりやすいご説明で感謝してます。
ありがとうございました。

 
#4: Posted by bzbell @ July 31, 2007 [REPLY]
user-pic

>>3 もみぃ さん

はじめまして^^

お役に立ててよかったです (●＞∀＜●)

 
#5: Posted by アプル @ October 13, 2007 [REPLY]
user-pic

bzbellさま。
こんにちわ。はじめまして♪
bzbellさまの記事通りに設置したのですが・・・
アイコンは出てるのですが、クリックしてもコメント内に移動する事が
出来ません。何か設定が間違っているのでしょうか？
テンプレートは、小粋空間さまの３カラム。
Movable Type3.35です。
ご指導を宜しくお願い致しますm(._.)m

 
#6: Posted by Author Profile Page id:bzbell @ October 13, 2007 [REPLY]
user-pic

>>5 アプル さん

こんにちわ^^

> アイコンは出てるのですが、クリックしてもコメント内に移動する事が出来ません。

アプル さんとこのコメントフォーム見てきました。
どうやら、smiley.js でエラーしているようです。
smiley.js の 2 行目を以下のようにしてみていただけますか。 

var textarea = document.getElementById('comments_form');

また、MT4 だと以下のようなプラグインが公開されてます。
http://www.h-fj.com/blog/archives/2007/08/10-105920.php

 
#7: Posted by アプル @ October 13, 2007 [REPLY]
user-pic

bzbellさま。
こんにちわ。早速のご指導をありがとうございます。
smiley.jsの2行目の変更をしたのですが・・・
何も変わらないのです(-_-;)
お忙しいとは思いますが・・・宜しくお願い致します。

 
#8: Posted by bzbell @ October 13, 2007 [REPLY]
user-pic

>>7 アプル さん

あっ!! ごめんなさい。
間違ってました。
正しくは以下のように変更してみてください。 

var textarea = document.getElementById('comment-text');

上記は、<textarea> タグの ID 'comment-text' のオブジェクトを取得します。
エラー内容から、フォームのオブジェクトを取得できていない!? かんじだったので、ダイレクトにフォームの ID を指定します。

 
#9: Posted by アプル @ October 13, 2007 [REPLY]
user-pic

bzbellさま。
こんにちわ。早速のご指導をありがとうございます。
ご指導を頂いているのに何故？か何も変わらないのですが・・・(-_-;)
何か申し訳なく感じますが、またまたお忙しいとは思いますが・・・宜しくお願い致します。

 
#10: Posted by bzbell @ October 13, 2007 [REPLY]
user-pic

>>9 アプル さん

あぁ～ (´Д｀；)
またまた、ごめんなさい。

'textarea' でなく 'txtarea' でした。 

変更前
var textarea = ･･･
変更後
var txtarea = ･･･

何度もすいません。ちゃんと良く見ろっ!! てかんじですね (;￣∇￣A
お手数ですが再度ご確認お願いします。

 
#11: Posted by アプル @ October 13, 2007 [REPLY]
user-pic

bzbellさま。
こんにちわ。早速のご指導をありがとうございます。
出来ました♪本当にお世話になりました！
bzbellさまは、凄いですね。分かりやすく最後までご親切に
説明をして下さって本当に感謝しております。
これからアイコンを増やします。
覚え書きとしてエントリしてもよろしいでしょうか？
そしてリンクもさせて頂きたいので宜しくお願い致します。
これからもbzbellさまのカスタマイズを参考にさせて
頂きます。

 
#12: Posted by bzbell @ October 13, 2007 [REPLY]
user-pic

>>11 アプル さん

> 出来ました♪本当にお世話になりました！

やりましたねっ!!
何かをやり遂げると一段と自分のサイトに愛着沸きますよね♪

> 覚え書きとしてエントリしてもよろしいでしょうか？
> そしてリンクもさせて頂きたいので宜しくお願い致します。

ぜんぜん OK です (●´∀｀●)

こちらこそよろしくお願いしますの♪

 
#13: Posted by Tina @ December 4, 2007 [REPLY]
user-pic

初めまして。

コメント投稿に絵文字を入れられる方法が無いものかと放浪していましたら、ここに辿り着きました。
判り易い解説なのもあって導入もすぐ終わり、満足しています。

ただ。絵文字機能の方はちゃんと動いているので不満は無いのですが、一つ問題がございまして。
管理人様に対処の方法を教えて頂ければと思い、書き込みました。

その問題とは、エントリーアーカイブ & コメント・プレビューに書き加える

<$MTInclude module="smiley macros"$>

の部分です。

1 行目に書き加えて下さいという事で XML 宣言の前に挿入したのですが、何故か空白部分が出来てしまいます。
たぶん smiley-macros の内容がこの部分に当たるのだと思うのですが、 1 行目からこのような状態ですと HTML の文法的にも好ましくないので、どうにか空白部分を無くしたいのです。尚、使っている Movable Type の ver は 3.35 です。

お忙しいとは思いますが、どうかお願いします。

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

>>13 Tina さん

こんばんわ^^

ご質問の件ですが、以下のようにすれば OK です (￣∇￣)b 

<$MTInclude module="smiley macros"$><?xml version="1.0" encoding="UTF-8"?>

そうすることで、再構築後の MTInclude のスペースがなくなります。

 
#15: Posted by Tina @ December 4, 2007 [REPLY]
user-pic

こんばんは。質問に答えて頂きまして、ありがとうございます。

早速、返答のように書き換えてみたのですが、やはり改行部分が出来てしまいました。

smiley-macros 内は以下の様になっているのですが、間違いはございませんでしょうか？

<MTMacroDefine name="poin" string=":poin:" no_html="1">
<img class="smiley" src="<$MTBlogURL$>mt/images/ka60.gif" width="19" height="19" alt="" />
</MTMacroDefine>

あと気懸りなのが、 mt-smiley フォルダ内の images フォルダだけを mt.cgi と同じ場所に置くのでは無く、 mt-smiley フォルダ毎置かなければいけないのでしょうか？

度々の質問で申し訳ありませんが、よろしくお願いします。

 
#16: Posted by Author Profile Page bzbell @ December 4, 2007 [REPLY]
user-pic

>>15 Tina さん

> 早速、返答のように書き換えてみたのですが、やはり改行部分が出来てしまいました。

あっ!! ごめんなさい。
たぶんその改行は、MTMacroDefine を再構築したことで出力されてしまうものです。
どうしても気になるようでしたら、以下のページから MTRemoveBlank プラグインをダウンロードして smily macros テンプレートモジュール内で下記記事の説明のように囲ってみてください。

http://bizcaz.com/archives/2007/09/09-174534.php

そうすると余分な空白が削除されるはずです (￣∇￣)b

> smiley-macros 内は以下の様になっているのですが、間違いはございませんでしょうか？

記事内では例として mt.cgi と同じ場所としていますが、Tina さんの環境に合わせてアップロード先を変更してもいいと思います。
その際には、smiley macros と smileys の URL を変更してください。

> あと気懸りなのが、 mt-smiley フォルダ内の images フォルダだけを mt.cgi と同じ場所に置くのでは無く、 mt-smiley フォルダ毎置かなければいけないのでしょうか？

mt-smiley/ フォルダですか!? そのようなフォルダありました!?
今ダウンロードしたらそのようなフォルダはないようですよ (;￣∇￣A
特に指定はないので、Tina さんのお好みでアップロードして問題ないです。

肝心なとこは smiley macros と smiley 中の各イメージファイルの URL がつじつまがあってれば OK!!

 
#17: Posted by Tina @ December 4, 2007 [REPLY]
user-pic

>>16 管理人様

> MTRemoveBlank プラグインをダウンロードして～

テンプレートモジュール内で <MTRemoveBlank>～</MTRemoveBlank> で囲って再構築してみた所、綺麗さっぱり改行部分が無くなっていました!! この改行部分、どうしても気になって仕方が無かった為、これですっきりと更新に励む事が出来ます。

丁寧に応対 & お付き合い頂き、本当にありがとうございました。

< mt-smiley/ フォルダですか!? そのようなフォルダありました!?

これに関してですが、申し訳ありません…。私がプラグインを再圧縮する際、判り易いようにとリネームしたままだったのを混同してしまったようです =□○_

 
#18: Posted by Author Profile Page bzbell @ December 4, 2007 [REPLY]
user-pic

>>17 Tina さん

> ･･･綺麗さっぱり改行部分が無くなっていました!! この改行部分、どうしても気になって仕方が無かった為、これですっきりと更新に励む事が出来ます。

よかったぁ、解決して (●´∀｀●)
でも、その気持ち分かります。

わたしも MT4 のテンプレートでは余分な空白が多くって、すっごく気分が悪いし、余計なデータ転送が発生しちゃうので MTRemoveBlank というプラグインを使ったんです。

> これに関してですが、申し訳ありません…。私がプラグインを再圧縮する際、判り易いようにとリネームしたままだったのを混同してしまったようです =□○_

はぁ～い、了解でぇ～す (●＞∀＜●)／

 
#19: Posted by Author Profile Page うに @ December 9, 2007 [REPLY]
user-pic

こんばんわ！

いつもお世話になってます。
うにです。

こちらのプラグインを導入して絵文字は表示されるようになったんですが、コメント入力時スマイルをクリックした時は絵文字ではなく変換前？の文字列になるんですね。

これってどうにもならないものでしょうか？

 
#20: Posted by Author Profile Page うに @ December 10, 2007 [REPLY]
user-pic

追記です。

それとコメントプレビューの追加場所（テンプレートの名称）も教えて頂ければ幸いです。

宜しくお願い致します。

 
#21: Posted by Author Profile Page bzbell @ December 10, 2007 [REPLY]
user-pic

>>19 うに さん
>>20 うに さん

こんばんわ^^

> これってどうにもならないものでしょうか？

単刀直入に言いますとどうにもならないです (;￣∇￣A
なので、smileys 中の 'emoticon' で指定する文字列を、クリックした絵文字をイメージできる文字列にするくらいでしょうか。

> それとコメントプレビューの追加場所（テンプレートの名称）も教えて頂ければ幸いです。

はい。システムテンプレート一覧中の「コメントプレビュー」がプレビューボタンクリック時のプレビューの結果になります。

 
#22: Posted by Author Profile Page うに @ December 10, 2007 [REPLY]
user-pic

>>21 bzbell さん

>絵文字をイメージできる文字列にするくらいでしょうか。

しょうがないですね＞＜；
まぁ使うことが出来るってだけでもいいほうでしょうか^^

システムテンプレート一覧中の「コメントプレビュー」の中のMTCommentPreviewBodyをMTMacroApplyで囲めばいいんでしょうか？

なんかうまく動いてくれなぃです＞＜

 
#23: Posted by Author Profile Page bzbell @ December 10, 2007 [REPLY]
user-pic

>>22 うに さん

> なんかうまく動いてくれなぃです＞＜

もしかして･･･プレビューしたら絵文字が表示されると考えてますか (;￣∇￣A
だとしたら、それはできません。

Ajax を使用してますので、入力されたテキストを表示するだけなんです。
イメージの変換は投稿されて始めてイメージファイルの URL に変換されます。

もしプレビューで絵文字表示させたい場合には、Ajax 化をやめてデフォルトに戻せば毎回再構築されますので、ご希望通りのことができると思います (￣∇￣)b

 
#24: Posted by Author Profile Page うに @ December 10, 2007 [REPLY]
user-pic

>>23 bzbell さん

>もしかして･･･プレビューしたら絵文字が表示されると考えてますか (;￣∇￣A

はい・・・

>もしプレビューで絵文字表示させたい場合には、Ajax 化をやめてデフォルトに戻せば毎回再構築されますので、ご希望通りのことができると思います (￣∇￣)b

なるほど・・・
どっちかを取れってことですね。

Ajaxプレビューは捨てがたいのでコメントフォームのアイコンの下にでも注意書きを書いて済まそうと思います。

ありがとうございました^^

 
#25: Posted by yutaka @ June 3, 2008 [REPLY]
user-pic

こんばんわ、いつもお世話になりますもじもじ
今度はこれに挑戦しようと思いやりかけたのですが、smiley-javascript.txt のテンプレートを作成しますの所まで進んでふと気がついたのですが、これはMovableType4.1でも利用できるのでしょうか？お願いします。

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

>>25 yutaka さん

こんばんわ^^

MT4.1 なら以下のページを参考にしてください。
http://bizcaz.com/archives/2007/12/22-225428.php

上記ページは現在わたしのサイトでもカスタマイズしてるものです。

このエントリでご紹介してるのは MT3.2、MT3.3 の頃なので、できなくはないのですが手順が多いので大変かもですあせあせ

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

順調に進んできたのですが最後の段階の
>３次に「コメントの詳細」テンプレートモジュールを変更します。
「コメントの詳細」テンプレートモジュール内の <$MTCommentBody$> タグを以下のように <MTConvertIconMacro> コンテナタグで囲います。

この<$MTCommentBody$>部分が「コメントの詳細」テンプレートの中に無いのですが..？うるうる

 
#28: Posted by Author Profile Page Aik☆ @ June 4, 2008 [REPLY]
user-pic

>>27 yutaka さん 初めまして。

MTCommentBody はコメント本文を表示するタグですので、これが無いとコメント自体表示されません。
テンプレートで検索をかけても該当部分は見つかりませんか？。

comment_detail.mtml
<$MTCommentBody link_number="1"$>
の部分だと思います。

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

>>28 Aik☆ さん

フォローありがとうございますテレテレ

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

Aik☆さんはじめまして、レスありがとうございます。
>comment_detail.mtml
<$MTCommentBody link_number="1"$>
の部分だと思います。

ちょっと違うけど入れるとしたらそこしかないと思い入れてみたのですが、アイコンが出ないので場所が違うんだなぁ、と思っていたのですが...じゃあそれ以外のカスタマイズ方法が違っているんですね。
Aik☆さんのブログも拝見しましたが、アイコンもクイックタグも使えるんですねぇ。いいなぁのほほん

 
#31: Posted by Author Profile Page Aik☆ @ June 4, 2008 [REPLY]
user-pic

>>30 yutaka さん
MovableTypeのカスタマイズは慣れないウチは中々一発で上手く動作しなくてストレスになりますね^_^;。

InsertIcon.js の「 */ 」を削除してもダメでしょうか？。

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

Aik☆さん、度々済みません。ありがとうございました。

>InsertIcon.js の「 */ 」を削除してもダメでしょうか？。

でたぁ〜〜〜〜〜〜〜〜〜出た、出た、でましたぁ〜
「 */ 」このぐらい、おまけしてよぉキャハハ

 

 Post a Comment

 

コメント用フィード