拙著「WordPress Web開発逆引きレシピ」が発売されました。
WordPressの様々なカスタマイズについて、逆引きの形式で取り上げています。
PHP 7.0での動作確認も行っています。
ブログ記事とコメントで絵文字を使えるようにするプラグイン（プチバージョンアップ）
ブログ記事とコメントで絵文字を使えるようにするプラグイン（InsertIcon）に対して、以下のようなご要望をいただきました。
ブログ記事の編集画面で、絵文字のツールバーを記事編集欄の下に表示するか、ツールバーをポップアップ表示するようにできる機能が欲しい
これらのうち、ツールバーを記事編集欄の下に表示する機能を追加しました。
なお、Movable Type 4.12とMTOS 4.2の最新リビジョンで動作を確認しました。
↓ツールバーを記事編集欄の下に表示した例
1.インストール
プラグインは以下のリンクからダウンロードします。
また、絵文字の画像ファイルを、こちらの記事の「3.絵文字用画像の準備」にしたがって用意しておきす。
ダウンロードしたzipファイルを解凍すると、「plugins」と「mt-static」の2つのフォルダができます。
「mt-static」→「plugins」→「Inserticon」→「js」フォルダにある「InsertIcon.js」ファイルを、こちらの記事の「4.InsertIcon.jsの書き換え」の手順で書き換えます。
ここまでの作業が終わったら、こちらの記事の「5.ファイルのアップロード」にしたがって、ファイルをアップロードします。
2.ツールバーの位置の指定
「システムメニュー」→「プラグイン」で、プラグインの設定のページを開きます。
プラグインの一覧が表示されますが、その中の「InsertIcon」を開き、「設定」のタブに切り替えます。
ここでツールバーの位置を指定することができます。
↓ツールバーの位置の指定
Movable Typeのプラグイン集「MT Cloud Starter Kit」をぜひご利用ください
コメント
コメントする
こきこき
藤本様
本当にありがとうございます。
おかげさまで、アイコンが入力欄の下に表示されるようになりました。
ところで、2点ほど問題が発生しているのですが、
1点目は、絵文字がリンクをクリックするように、クリック出来る状態に自動的になること。
2点目は、FireFoxで挿入すると、相対パスになってしまい、ページによって表示されなくなること。
です。
もし、改善策がございましたら、どうぞよろしくお願いいたします。
壱からこきこきへの返信
＞こきこきさん
こんにちは。
＞1点目は、絵文字がリンクをクリックするように、クリック出来る状態に自動的になること。
「絵文字にマウスポインタを当てたときに、画像のタイトルが表示される」ということでしょうか。
そうであれば、以前からそのような作りになっています。
＞2点目は、FireFoxで挿入すると、相対パスになってしまい、ページによって表示されなくなること。
画像のURLの先頭部分は、mt-config.cgiのStaticWebPathの設定に依存します。
StaticWebPathが相対パス表記になっているのではないかと思われますので、そこを絶対パスに変えてください。
こきこきからこきこきへの返信
藤本様
こきこきです。
早速のご返事ありがとうございます。
＞「絵文字にマウスポインタを当てたときに、画像のタイトルが表示される」ということでしょうか。
ごめんなさい。そういうことではなくて、
リンクをクリックできる場所をポイントすると、マウスカーソルが
矢印から手の形に変わると思うのですが、アイコンをポイントすると
手の形に変わり、リンクをクリックするようにクリック出来てしまいます。
InsertIcon.jsをいじってたら、改善したのですが、
http://www.shoin.net/event/kosodate-college/2008/07/post.html
には、アイコンをポイントするとリンクと同じポインタに変わる状態が残っています。
＞StaticWebPathが相対パス表記になっているのではないかと思われますので、そこを絶対パスに変えてください。
ありがとうございます。
確認しましたが、絶対パスになっていました(>_ やった！これで解決！と思ったのですが、残念です。。。
ええと、IEでは、ちゃんと絶対パスでアイコンが挿入されます。
FFではsrc="../../../InsertIcon/images/naninani.gif"
といった入り方をしてしまいます。
ちなみにMT-Plugin-FCKeditor も使っています。
どうぞ、よろしくお願いいたします。
壱からこきこきへの返信
＞こきこきさん
こんにちは。
ご質問の件ですが、申し訳ありませんが、このプラグインはFCKEditorと組み合わせることは想定していません。
MT標準のテキストエディタでのみ動作を確認しています。
こきこきからこきこきへの返信
藤本様
ご回答ありがとうございます。
そうですか、MT-Plugin-FCKeditor が原因ですか。。。
o(>_
両方、捨てがたい機能なだけに・・・。。。
苦しいところです。
いろいろ試してみます。
こきこきからこきこきへの返信
藤本様
自分なりにMT-Plugin-FCKeditor との併用時に、
絵文字をポイントするとマウスカーソルがリンクをクリックするときの手形ポインタになることの解決策を講じてみました。
確認の意味も含めて、ご報告いたします。
InsertIcon.jsの『 style="cursor : pointer;"』が原因だと思い、削除し、アイコン挿入時に絵文字をクリックして挿入出来ない代わりに、ドラッグ操作でアイコンを挿入するように運用しています。
また、FireFoxで、相対パスが入ってしまう現象については、
-------------------------------------------------
spanElement.id = 'editor_insert_icons';
var html = '';
-------------------------------------------------
の後に、
-------------------------------------------------
var mt_icon_base = "http://www.shoin.net/images/InsertIcon/";
-------------------------------------------------
と挿入したら、とりあえず、改善するようになりました。
邪道かとは思いますが、とりあえず、運用上は、問題なさそうです。
本当にいろいろ、アドバイスいただき、ありがとうございました。
こきこきからこきこきへの返信
藤本様
書き忘れがありました。
後は、【InsertIcon.pl】の
-------------------------------------------------
_fj_insert_icon_obj = new FJInsertIcon('${static_path}plugins/InsertIcon/images/');
-------------------------------------------------
の{static_path}を消して、
-------------------------------------------------
_fj_insert_icon_obj = new FJInsertIcon('$/mt-static/plugins/InsertIcon/images/');
-------------------------------------------------
もしくは、本サイトの場合、/images/InsertIcon/にも昔の名残で絵文字を置いているので、
-------------------------------------------------
_fj_insert_icon_obj = new FJInsertIcon('$/images/InsertIcon/');
-------------------------------------------------
に設定しています。
実は、意味はよくわかっていませんが、なんとなく、ここかな・・・と思ってやっています。。。
(;^_^A アセアセ・・・
girasol
現状では階層の深いところに画像があるため、html の表示で絵文字のタグがとても長く（80バイトあまりに）なってしまいます。
当初は気になりませんでしたが、今ではコメント総数が17,000件を超え、絵文字総数も18,000個を超えてしまい、看過できない状況です。
そこで少しでも軽量化するため、絵文字画像へのパスを極力短くしたい（ドメインの上位に画像フォルダを置きたい）のですが、StaticWebPathの設定に依存する現状のInsertIcon.plを、絶対パスに変えることは可能でしょうか？ 可能だとすればどのように記述すればいいでしょうか？
ご多忙の折恐縮ですが、ご教示いただけましたら幸いです。
壱からgirasolへの返信
＞girasolさん
こんにちは。
プラグインご利用ありがとうございます。
ご質問の件ですが、InsertIcon.plの以下の箇所を書き換えればできます。
・63～71行目
書き換え前
if ($icon_dir =~ m!^/!) { my $blog_id = $app->param('blog_id'); my $blog = MT::Blog->load($blog_id); my ($blog_domain) = $blog->archive_url =~ m|(.+://[^/]+)|; $icon_dir = $blog_domain . $icon_dir; } $icon_dir .= '/' unless $icon_dir =~ m!/$!; $icon_dir .= "plugins/InsertIcon/images/";書き換え後
・99行目
書き換え前
_fj_insert_icon_obj = new FJInsertIcon('${static_path}plugins/InsertIcon/images/', 0);・書き換え後
_fj_insert_icon_obj = new FJInsertIcon('http://画像のディレクトリ/', 0);ただ、このようにしたとしても、ディスク容量の消費を抑えたり、再構築を高速化したりすることには、ほとんど寄与しないと思います。
girasolからgirasolへの返信
壱さん
お忙しいところありがとうございました。
従来218KBあった個別ページが202KBに、159KBあったページが139KBになるなど、html自体は多少なりとも軽量化できました。
これでサーバーに積もる生ログも軽減できるかと思います。
chiffon.
いつもありがたく使わせていただいております。
最近ふとアイコンにマウスポインターをあわせても絵文字の説明の語句が表示されないことに気づきました。
title属性がないのがその原因みたいなのですが、自分で何とかならないかと思ったものの、プラグイン本体をいじるのはよくわからないし、かといってせっかくクリック1つでできていたものをそのつどいちいちtitle属性を付け加えるのも面倒…。
どうか、title属性を追加したバージョンアップをお願い出来ないでしょうか？
壱からchiffon.への返信
＞chiffon.さん
こんにちは。
ご希望の件を追加したバージョンを、明日のブログの記事にしたいと思います。
chiffon.からchiffon.への返信
壱さん、こんなにあっさり受けてくださるなんて…ありがとうございます。
記事のアップ心待ちにしております。