ちょこちょことバージョンアップを重ねてきた、Movable Typeにて絵文字を使用可能にする、emoddyプラグインですが、今回コメント部分にも絵文字が使えるようになりました。
対応しているバージョンは、MT4.0、4.1x、4.2となっております。
管理画面の大きな変更がなければバージョンが上がっても使えると思います。
旧バージョンでも書いておりましたが、このプラグインの特徴などをご紹介。
- とにかく使いたいって人は、アップロードするだけで使える！
- 絵文字の画像を追加するのがとてもカンタン！
- 画像がいっぱいに増えても普段は邪魔にならない！
- 好きなディレクトリに絵文字用の画像を設置可能！
- 絵文字が最初から88個くらい付いている！
- カスタマイズとかも自由にしてOK！
- コメントにも絵文字が使える！
- モディファイアを使う事で、ブログ記事編集画面にimg要素などのソースが表示されなくなり、すっきりできる
など、いい感じになってきました。
TypePad で使用している絵文字アイコンをダウンロードして、そのまま該当のディレクトリにアップロードすれば、すぐに使えたりします。
ダウンロードやインストール方法、詳細な説明は続きにて。
---- こっから続き
ダウンロード
- コメント対応版 絵文字プラグイン（emoddy）zip形式（68KB）
上記リンクをクリックして、ダウンロードしてくださいませ。
基本的なインストール方法
- ダウンロード後、任意の場所（デスクトップなど）に置き、解凍します。
- emoddy302フォルダ内に、「mt-static」と「plugins」があるのを確認してください。
- 2つのフォルダの中身全てをMovableTypeがインストールされているディレクトリ（mt.cgiがある場所）にアップロードします。
- 個別のブログの設定→プラグインより、emoddy3.0.2が表示されているのを確認してください。
以上で、基本的なインストールは完了です。
後は、「ブログを書く」などから、ボタンが追加されていれば完璧です。
ウェブページのエントリー画面にも表示されますので、あわせてご確認ください。
ちゃんとインストールされると、以下のような感じになります。
コメントでemoddyを使用する
今回のバージョンより、個別ページのコメントにも絵文字が使えるようになりましたので、その使い方を説明します。
コメントを使いたいhead要素にCSSとJSを読み込ませる
<link rel="stylesheet" href="<$MTStaticWebPath$>plugins/emoddy/css/emoddy.css" type="text/css" /> <script type="text/javascript" src="<$MTStaticWebPath$>plugins/emoddy/js/emoddy.js"></script>
「mt-static\plugins\emoddy」のCSSとJSまでのパスが正しく記述されていればOKです。
なので、mt-static内が嫌な人は、任意のディレクトリに移動させ、そこまでのパスを記述してください。
コメント設定を変更する
各ブログの設定 > コメントのコメントポリシー内にある、HTMLを許可にチェックを付け、HTMLタグを制限でカスタム設定を選択します。
そしたら、以下のHTMLを入力します。
a href,b,i,br/,p,strong,em,ul,ol,li,blockquote,pre,img src class width height alt
絵文字のみ許可の場合は、img以降だけで大丈夫だと思われ。
この部分です。
コメントフォーム部分にemoddy表示用のソースを記述する
ブログ記事テンプレートなど、コメントフォームが設置されているテンプレートに以下のソースをコメント本文のtextarea要素直前などに記述します。
<$MTEmoddyComment$>
「保存」後、再構築をかければ絵文字がコメントでも使えるようになります。
初期状態は管理画面と同様に、ボタンが1つ表示された状態で、クリックすると一覧が表示されますので、使いたい絵文字をクリックすればOKです。
上記のMTタグは、以下のHTMLが吐き出され、一度再構築をかけたタイミングで、コメント用の「emoddy_icons.js」が生成されます。
<div id="emoddy">
<a href="javascript:void(0)" onclick="_CL_emoddy.EmoddyIcon('emoddy_icons',event)"><img title="Insert Emoddy tag" src="http://yourdomainname.com/cms/mt-static/plugins/emoddy/images/bn_emoddy_normal.gif" alt="Insert Emoddy tag" width="22" height="22" /></a>
<div id="emoddy_icons"><script type="text/javascript" src="http://yourdomainname.com/emoddy_icons.js"></script></div>
</div>
emoddy_icons.jsは、デフォルトのままだとルートディレクトリに生成されるので、jsディレクトリにまとめたいなど、この場所が嫌なときは、プラグインの設定から変更が可能です。（詳細は後述）
細かい設定など
絵文字画像の追加方法
「mt-static\plugins\emoddy\images」に「gif形式」の画像を追加するだけでOKです。
ファイル名順に並び替えられますので、近い絵文字のファイル名の先頭を揃えておくなどすると、キレイに並ぶと思います。
※画像の差し替えやリネームなどする際に「bn_emoddy_normal.gif」を削除してしまうと、管理画面に表示されなくなってしまうので、消さないようにご注意ください。
（_active.gifと_hover.gifは使われてないのは秘密です。）
絵文字画像のディレクトリ変更
初期では、「mt-static\plugins\emoddy\images」に絵文字画像が入ってますが、任意のディレクトリに移動させる事も可能です。
例えば、「http://css-happylife.com/img/emoddy/」で絵文字を使いたい場合、まずは該当のディレクトリに絵文字画像をアップロードしておきます。
システムと各ブログでそれぞれ設定が出来ますので、自分の目的にあわせて設定してください。
システムプラグイン設定から変更する場合
複数のブログで絵文字を使用する場合に、一括でディレクトリ変更する際に使用します。
emoddy 3.0.2の設定画面を表示させ以下の指定を行い「変更を保存」後再構築をかければ反映されます。
- ICON SITE URL：絵文字画像が入っているディレクトリをURLで指定します。（例：http://css-happylife.com/img/emoddy/）
- ICON SITE PATH：絵文字画像が入っているサイトパスを指定します。（例：/home/htdocs/blog/img/emoddy）
home/htdocsとかのサイトパスは、各ブログの設定 > 公開のサイトパスから確認すると手っ取り早いです。
なお、ここにはJSの設定とemoddyタグを使用するのチェックボックスがありますが、詳細は後述します。
各ブログのプラグイン設定から変更する場合
個々に設定を行いたい場合や、ブログが1つしか無い時はこっちの設定を変更します。
ツール > プラグインより、emoddy 3.0.2の設定画面を表示させ以下の指定を行い「変更を保存」後再構築をかければ反映されます。
- ICON PATH：絵文字画像が入っているディレクトリのパスを指定します。（例：img/emoddy/）
システム設定と同時に行っていると、こちらの指定が優先されます。
「emoddyタグを使用する」の使い方
こちらにチェックをつけると、<Emoddy:face_smile>のように、エントリー画面が独自タグで表示されるようになります。
そのままだと、動作しないため、
<$MTEntryBody$>や<$MTEntryMore$>などに、
<$MTEntryBody emoddy="1"$>とモディファイアを付け足す必要があります。
MTEntryTitleなどにも、モディファイアを追加すると使えたりします。
なお、コメント部分はこれに対応していません。ご了承をば。
コメント用の「emoddy_icons.js」の生成ディレクトリ変更
初期状態でコメントに絵文字を使うようにすると、ルートディレクトリにJSが生成されてしまうので、コレを変更するには、絵文字画像のディレクトリ変更と同じようにプラグインの設定から変更してください。
なお、ディレクトリを変更する場合は、パーミッションの変更が必要な場合があります。「777」とか、書き込めそうな権限にしたってください。
ライセンス
この作品は、クリエイティブ・コモンズ・ライセンスの下でライセンスされています。
という感じです。改変とかは自由にやってください。ブラッシュアップ歓迎です。
特定の画像のみを特定の使い方をするのもOKです。
- 各種SBMに追加
-
Track Back [4]
Movable Type用絵文字プラグイン「emoddy」がMT4.2に対応
CSS HappyLifeが、Movable Type 4.2に対応したコメント対応版絵文字プラグイン「emoddy」の配布を行っていました。 とこ...
by MACお宝鑑定団 blog｜2008年09月01日（月）
Movable Typeで携帯絵文字がシンプルに、コメント対応に。
Movable Type（MT）で携帯（docomo・au・SoftBank）の...
by Kamitani79-メロンとバナナとブログ｜2008年09月21日（日）
ＭＴのお勧め本２ コメント欄に絵文字が簡単設定
MovableTypeのお勧め参考書のご紹介、その２です。
by 『超おむすび』｜2009年05月28日（木）
emoddy導入 絵文字使えるようになりました
CSS HappyLife http://css-happyli...
by ゴルフバカの気まぐれブログ｜2009年10月07日（水）
comment [28]
1 - 千葉ひで さん
うまく動作しました。公開を含め、まことにありがとうございます。あと、１点ご質問です。コメント認証時に自動で公開の設定にしていても絵文字があると認証待ちになってしまいます。認証なしでそのまま投稿させられないでしょうか？
2008年8月23日 22:25
2 - Takuya さん
初めまして！
いつも勉強になるエントリをありがとうございます。
只今、MTで初めてブログを作っておりまして、さっそくemoddyプラグインを導入したのですが、コメントフォーム部分で、クリックしても反応がありません。クリックしたら、テキストエリアに挿入される認識だったのですが。。
ご返信お願いいたします。
URL｜2008年8月25日 15:57
3 - TAKA さん
素敵プラグインを公開してくださってありがとうございます。
実は私もTakuyaさんと同じ状態です。
エントリを作成する際はうまくいくのですが、コメントの時、うまく絵文字が使えません。
問題は2点あります。
1つ目はtakuyaさんがおっしゃってるように、絵文字をクリックしても反応がない。
2つ目は「本来1つ絵文字が表示されてて、それをクリックすると絵文字一覧が表示されるはず」なのに、元々絵文字一覧が表示されている。
以上です。
回答よろしくお願いいたします。
2008年8月28日 09:22
4 - 千葉ひで さん
コメントを使いたいhead要素にCSSとJSを読み込ませるという設定を、デザイン＞＞テンプレートのなかのテンプレートモジュールにあるHTMLヘッダーの7行目前あたりに行なったのち、再構築しないと、takuyaさん、takaさんのような事象になりますよ。
自分もはじめ、そのような事象になりましたもんで…。まあ、こちらに書かれている設定通りに実施すれば、問題なく設定できました。
あと、絵文字を増やしすぎると、ブログ記事表示のロードに少し時間がかかるので、標準くらいの文字数（私は330くらい登録してたもので（苦笑））が妥当かと感じました。
認証待ちになる理由は、不明です。たぶんMT4.21がスパムに厳しくなったのかな？？？即時コメント反映が自分は好きなので、いったんコメントの絵文字は利用しないようにしています。
2008年8月30日 10:00
5 - miho さん
はじめまして。大変便利なプラグインありがとうございます。
私も設定どおりにしたつもりなのですが、Takuyaさん、TAKAさんのようになってしまいます。
<head>
のすぐ下にCSSとJSを読み込ませる記述をすればいいのですよね？
2008年9月 2日 18:33
6 - miho さん
さきほどコメントしたものです。
大変お騒がせしました。
無事 動作しました
2008年9月 2日 18:49
7 - hirasawa さん
>皆様
ご連絡ありがとうございます。
現在調査中ですのでお待ちくださいませ。
2008年9月 3日 00:38
8 - Kamitani79 さん
どうも。こんにちは。
携帯プラグインの「ケータイキット」と組み合わせて利用してますKamitani79です。
バージョンアップされたと言うことで早速使わせていただきました。
非常に便利です。コメント欄にも対応してもらったのは最高にうれしいです。
トラックバックもさせて頂きました。
URL｜2008年9月21日 14:39
9 - くろ さん
こんなに簡単に絵文字がつかえるなんて、、
ありがとうございます。
ところで、MTのブログ記事に絵文字を載せて
その絵文字にカーソルを当てるとファイル名が
表示されてしまいますが、これを消すのはどの
ファイルのどの部分を消せばよいのでしょうか？
くろ
2008年10月 6日 05:44
10 - hirasawa さん
>くろさん
ご使用して頂きありがとうございます！
ご質問の件ですが、emoddy.plの一番最後辺りの行の。
<img src="${site_path}$1.gif" alt="icon:$1" \/>
この部分のalt="icon:$1"のicon:$1を取れば表示されなくなります。
2008年10月16日 16:32
11 - くま さん
いつも参考にさせて頂いてます。
これまで管理画面で利用させて頂いて問題なく動いていたのですがコメント反映させようとすると上手くいきません。
絵文字の一覧（？）までは上手く表示されるのですが絵文字を選択してもコメント欄に反映できません。
以前のコメントで再構築を行なってみるってのもあったので試してみましたが同じでした。
ファイルをPHPに設定しているのですが、そこが原因なのでしょうか？
2008年10月19日 03:53
12 - くま さん
昨日投稿させて頂きましたものです。
その後、調べて原因が分かりましたのでご報告です。
ただ単にテキストフィールドのID設定を「comment-text」と設定していなかったのが原因でした。
お騒がせ致しました。
URL｜2008年10月19日 22:59
13 - くろ さん
hirasawaさん
アドバイスありがとうございました。
2008年10月23日 09:39
14 - くろ さん
ブログ記事作成画面では絵文字一覧からクリック選択すると、その絵文字が表示されますが、コメント欄ではとパスが表示されてしまうのですが、どこに問題があるのでしょうか？
2008年10月25日 06:32
15 - くろ さん
スミマセン、補足します。MTは4.1です。投稿後にコメントを表示させるとチャンと絵文字が表示されます。はﾃﾞｻﾞｲﾝ･ﾃﾝﾌﾟﾚｰﾄ・ﾃﾝﾌﾟﾚｰﾄﾓｼﾞｭｰﾙ・ｺﾒﾝﾄ入力ﾌｫｰﾑのの直前に入れました。
2008年10月25日 06:51
16 - hirasawa さん
>くろ さん
えっと、コメント欄ではパスになってしまうのは、
プラグインの仕様上そうなってます。
コメント欄も独自タグで動作させるには、
色々もっと複雑なのです、、、
2008年10月27日 12:31
17 - くろ さん
hirasawaさん
ご確認ありがとうございます。また何かチョンボしたかと思っていましたが、一安心です。
2008年10月28日 09:39
18 - GU さん
コメント欄をHTML許可にして画像タグを使わせてしまうと絵文字以外の画像も貼られてしまうので困ってます。
なにか良い対処法はないのでしょうか？
2008年11月 3日 14:13
19 - cranberry さん
初歩的な質問で申し訳ありません。
ブログ記事を書く場所では、きとんと絵文字表記ができました。
コメント投稿のところに、絵文字を表記させるところで躓いています。
「コメントを使いたいhead要素にCSSとJSを読み込ませる」
ということですが、実際にはどの部分にこの
href="plugins/emoddy/css/emoddy.css" type="text/css" />
src="plugins/emoddy/js/emoddy.js">
を組み込めばいいのでしょうか？
テンプレートはデフォルトのものを使っています。
MovableTypeはver4.42で、ダイナミック・パブリッシングを使用しています。
よろしくお願い致します
URL｜2008年11月 8日 14:11
20 - ｓｔ さん
私も、MTでブログを書いていまして、このプラグインの
おかげで、絵文字が使えるようになりました。
公開ありがとうございます。
ブログ記事が絵文字が無くさみしい感じでしたが、
これで華やかになりそうです。
トラックバックもさせていただきました。
ありがとうございました。
URL｜2009年2月26日 22:27
21 - 千葉ひで さん
非常に便利なプラグインのご提供、誠にありがとうございます！
IE7環境+MT4.26で絵文字機能(emoddy302)が使えていないわけではないのですが、ブログ記事の編集で絵文字のアイコンをクリックすると、必ず以下のエラーがでてしまいます。エラーをなくしたいのですが、なにか対策方法がありますでしょうか？
IE８がリリースされた時にすぐにアップしてみたところ、ブログ編集機能で絵文字投稿が使えなかった（自分だけ？？？）こともあり、このエラーが原因かな？と思ったので、ぜひとも改善してIE8再チャレンジしたいと思っています。
お暇なときでもよいので、ご教授願います。それまではIE8へのバージョンアップはやめておこうと思っています。
(2009/5/4に本件メールで送付させていただいております)
ライン：781
文字：9
エラー：引数が無効です。
コード：0
URL：http://xxxxxx.com/mt/mt.cgi?
_mode=view&type=entry&id=521&blog_id=2
2009年6月18日 20:47
22 - aya さん
はじめまして。
質問の前に、一言言わせていただきます。
「Movable Type 4.x 本格的CMSサイトを構築するためのMTスーパーテクニック クリエイターが身につけておくべき新・100の法則。」という教本ですが
まさか！こちらのサイトの管理人さまとは！
もう、涙が出そうでした。
ＭＴの教本は
１冊目、４年ほど前レンタルブログをカスタマイズしたくて
（でも、まったく違うものを買ったんだって、ずいぶん後で気づきました。）
２冊目、２ヶ月前に、思い切ってＭＴでサイトをリニューアルしようとしたとき。
でも、内容は知りたいことはまったく載ってませんでした（涙）
で、我流でいじったものの、、難航しました。
３冊目で、「１００の法則」を見つけ、内容的には素人の私には難しいもので半分も理解できませんでしたが、それでも一筋の光で、買って１ヶ月しないのにもうボロボロになってます(汗)
この本がなかったら、今でも我流で苦しんでいたと思うので、まずお礼を言いたいです！
で、質問のほうは・・・お恥ずかしい内容なのですが・・・
「１００の法則」にあった絵文字を使ってみたいと、こちらでＤＬさせていただきました。
「基本的なインストール」をやって、ブログ管理画面にアイコンも出て、記事の文中にも＜Emoddy:face_sad＞と出たのですが
いざ更新した記事をみると、表示されてないのです。。。
管理画面では問題がなく、でも実際絵文字が表示されない原因はどこにあるのでしょうか？
コメントで使うかまだ考え中ですが、この記事内に書いてあるCSSとjsを読み込むダグを記述云々なども一通りやりました。
変なことをやったとすれば「絵文字画像のディレクトリ変更」で
複数のブログで絵文字を使用する場合・・・
○○○」で絵文字を使いたい場合、まずは該当のディレクトリに絵文字画像をアップロードしておきます。
ここで、その該当のディレクトリにすでに同じimagesフォルダがあったために
仕方なくemoddyフォルダを作りその中にimagesフォルダを入れたことです。
コメントで使用しなければ必要ないことまでやってしまったのか・・
コメント欄以前にブログ記事に絵文字が出ないという初歩でつまづいております。
長文、失礼しました。
URL｜2009年8月 6日 01:04
23 - aya さん
あ、追記です、、すみません
前コメントのURLのところですが
絵文字を試してみたのは、
http://m-site.sunnyday.jp/nikonikoban/index.php
です。
うまくできたら、今後
http://m-site.sunnyday.jp/miniblog/index.php
や
http://m-site.sunnyday.jp/-ffxi-/index.html
（これは、ブログを更新記録に使ってるだけですが）
そのほか、今後新しいブログ（日記ではなくwebページとして）を作る際にも使えたらと思っております。
お忙しいところ、初歩的な質問で申し訳ありません。
なにとぞ、よろしくお願いします。
URL｜2009年8月 6日 01:17
24 - aya さん
何度も申し訳ありません(汗)
一筋の光と映った 管理人様の「１００の法則」について
サイト内にある別のレンタルブログの
上のURLの記事に書いておりました。
あのときは本当に感激したということを、お知らせしたかっただけです。。
深夜にもうしわけありませんでした。
URL｜2009年8月 6日 01:42
25 - aya さん
おはようございます。
先日は、ありがとうございました。
「emoddyタグを使用する」のチェックを外し
テンプレートののモディファイアを消したら表示することができました！
何故だかよくわかりませんが 画像までのパスはあっていたようです。
ブログ記事の編集画面にimg要素などのソースがでますけれど
絵文字を使うことで、記事が華やかになりました。
ご指導、ありがとうございました！
2009年8月12日 09:43
26 - 千絵 さん
はじめまして
emoddy302をダウンロードさせていただきました。
ありがとうございます。
プラグインはインストールでき、エントリーの書き込みでは絵文字が使えるようになったのですが、コメントのほうでエラーが出てしまいます。
エラーの内容は次のようなものです
-----------------------------
メッセージ: '_CL_emoddy' は宣言されていません。
ライン: 265
文字: 1
コード: 0
URI: http://www.mccoy.jp/mt/blog/diary/archives/2009/09/post-3.html
------------------------------------------------
アドバイスよろしくお願いいたします。
2009年9月 4日 13:29
27 - りか さん
はじめまして！
CSSハックやCSSの裏技で、ちょくちょくお邪魔させていただいておりました。
この度自サイトをMTで組むことになり、こちらのプラグインをダウンロードさせていただきました。
早速試用させていただいたのですが、みなさんが上の方で書いてらっしゃる
コメント欄で入力、表示ができない、、ということは全くなかったのですが
私の場合、逆に、エントリーの部分で入力と表示ができませんでした。。
標準テキストでエントリーを見てみると、ちゃんとタグが入力されているのですが、実際の記事には全く反映されていません。
2.0.3は難なく動いたのですが…何故でしょうか。。
まだテンプレートもいじってないサイトなので
見ていただくのは大変お恥ずかしいのですが、、
現在このようなかんじになっております。
環境はMacOSX 10.5.5 FTPはFetchを使用しております。
お忙しいところ大変お手数をおかけいたしますが、アドバイスよろしくお願いいたします。
URL｜2009年11月10日 15:53
28 - tata さん
かなり活用させていただいています。
IE8でうまく動作しないようなのですが、対象外なブラウザなのでしょうか？？
2009年11月12日 09:45