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 という圧縮ファイルをダウンロードしてください。
そして、適当なフォルダに展開して以下のファイルをサーバーにアップロードします。

macros.pl：
mt/plugins/ の中にアップロードします。
postproc.pm：
mt/extlib/ の中に bradchoate というディレクトリを作成して、その中にアップロードします。
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. 内容は以下の通り

    テンプレート名：
smiley-javascript
出力ファイル名：
smiley.js
このテンプレートにリンクするファイル：
未記入でいいです。
テンプレートの内容：
以下のコードをコピペします。

function emoticon(smiley) {
    var txtarea = document.comments_form.text;
    smiley = ' ' + smiley + ' ';
    if (txtarea.createTextRange && txtarea.caretPos) {
        var caretPos = txtarea.caretPos;
        caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? smiley + ' ' : smiley;
        txtarea.focus();
    } else {
        txtarea.value  += smiley;
        txtarea.focus();
    }
}

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

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

  4. 内容は以下の通り

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

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

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

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

<$MTInclude module="smiley macros"$>

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

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

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

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

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

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

変更前
<$MTEntryBody$>
変更後
<MTMacroApply><$MTEntryBody$></MTMacroApply>

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

変更前
<$MTCommentBody$>
変更後
<MTMacroApply><$MTCommentBody$></MTMacroApply>

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

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

  • Edit
  • Permalink
  • Comments(24)
  • Trackbacks(1)

 Trackback Pings(1)

from TokyoLife::Dalog

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

Tracked on May 14, 2007

 Comments(24)

#1: Posted by さえら [RES]

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

Posted on May 1, 2006
#2: Posted by bzbell [RES]

>>1 さえら さん

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

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

Posted on May 2, 2006
#3: Posted by もみぃ [RES]

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

Posted on July 31, 2007
#4: Posted by bzbell [RES]

>>3 もみぃ さん

はじめまして^^

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

Posted on July 31, 2007
#5: Posted by アプル [RES]

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

Posted on October 13, 2007
#6: Posted by id:bzbell Author Profile Page [RES]

>>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

Posted on October 13, 2007
#7: Posted by アプル [RES]

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

Posted on October 13, 2007
#8: Posted by bzbell [RES]

>>7 アプル さん

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

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

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

Posted on October 13, 2007
#9: Posted by アプル [RES]

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

Posted on October 13, 2007
#10: Posted by bzbell [RES]

>>9 アプル さん

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

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

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

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

Posted on October 13, 2007
#11: Posted by アプル [RES]

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

Posted on October 13, 2007
#12: Posted by bzbell [RES]

>>11 アプル さん

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

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

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

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

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

Posted on October 13, 2007
#13: Posted by Tina [RES]

初めまして。

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

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

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

<$MTInclude module="smiley macros"$>

の部分です。

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

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

Posted on December 4, 2007
#14: Posted by bzbell Author Profile Page [RES]

>>13 Tina さん

こんばんわ^^

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

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

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

Posted on December 4, 2007
#15: Posted by Tina [RES]

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

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

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 フォルダ毎置かなければいけないのでしょうか？

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

Posted on December 4, 2007
#16: Posted by bzbell Author Profile Page [RES]

>>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!!

Posted on December 4, 2007
#17: Posted by Tina [RES]

>>16 管理人様

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

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

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

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

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

Posted on December 4, 2007
#18: Posted by bzbell Author Profile Page [RES]

>>17 Tina さん

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

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

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

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

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

Posted on December 4, 2007
#19: Posted by うに Author Profile Page [RES]

こんばんわ！

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

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

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

Posted on December 9, 2007
#20: Posted by うに Author Profile Page [RES]

追記です。

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

宜しくお願い致します。

Posted on December 10, 2007
#21: Posted by bzbell Author Profile Page [RES]

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

こんばんわ^^

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

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

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

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

Posted on December 10, 2007
#22: Posted by うに Author Profile Page [RES]

>>21 bzbell さん

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

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

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

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

Posted on December 10, 2007
#23: Posted by bzbell Author Profile Page [RES]

>>22 うに さん

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

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

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

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

Posted on December 10, 2007
#24: Posted by うに Author Profile Page [RES]

>>23 bzbell さん

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

はい・・・

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

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

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

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

Posted on December 10, 2007

 Post a Comment

コメント用フィード