お知らせ

MTOS活用テクニック2009年2月26日

拙著新刊の「MTOS活用テクニック」が発売されました。
MTOSにカスタムフィールド的な機能を追加する方法や、ブログ記事を柔軟に検索する方法を解説しています。
Movable Typeでサイト制作をされている皆様はぜひお買い求めください。

他にも多数書籍を執筆しています。
こちらもぜひご覧ください。

ブログ記事とコメントで絵文字を使えるようにするプラグイン(プチバージョンアップ)

| コメント(13) | トラックバック(1)

ブログ記事とコメントで絵文字を使えるようにするプラグイン(InsertIcon)に対して、以下のようなご要望をいただきました。

ブログ記事の編集画面で、絵文字のツールバーを記事編集欄の下に表示するか、ツールバーをポップアップ表示するようにできる機能が欲しい

これらのうち、ツールバーを記事編集欄の下に表示する機能を追加しました。
なお、Movable Type 4.12とMTOS 4.2の最新リビジョンで動作を確認しました。

↓ツールバーを記事編集欄の下に表示した例
inserticon2.png

1.インストール

プラグインは以下のリンクからダウンロードします。

InsertIcon_1_23.zip

また、絵文字の画像ファイルを、こちらの記事の「3.絵文字用画像の準備」にしたがって用意しておきす。

ダウンロードしたzipファイルを解凍すると、「plugins」と「mt-static」の2つのフォルダができます。
「mt-static」→「plugins」→「Inserticon」→「js」フォルダにある「InsertIcon.js」ファイルを、こちらの記事の「4.InsertIcon.jsの書き換え」の手順で書き換えます。

ここまでの作業が終わったら、こちらの記事の「5.ファイルのアップロード」にしたがって、ファイルをアップロードします。

2.ツールバーの位置の指定

「システムメニュー」→「プラグイン」で、プラグインの設定のページを開きます。
プラグインの一覧が表示されますが、その中の「InsertIcon」を開き、「設定」のタブに切り替えます。
ここでツールバーの位置を指定することができます。

↓ツールバーの位置の指定
inserticon.png

はてなブックマークの情報

トラックバック(1)

トラックバックURL: http://www.h-fj.com/mt/mt-tb.cgi/1371.

エントリとコメント内に顔文字だけでは寂しいと思い・・・  絵文字を使えるようにし... 続きを読む

コメント(スレッド3件,コメント13件)

コメントはスレッド表示になっています。
また、スレッドの先頭のコメントに対する返信には、先頭に矢印を表示しています。

No.1 こきこき : FireFoxでアイコンが相対パスで挿入されてしまいます。

藤本様

本当にありがとうございます。
おかげさまで、アイコンが入力欄の下に表示されるようになりました。

ところで、2点ほど問題が発生しているのですが、
1点目は、絵文字がリンクをクリックするように、クリック出来る状態に自動的になること。

2点目は、FireFoxで挿入すると、相対パスになってしまい、ページによって表示されなくなること。

です。

もし、改善策がございましたら、どうぞよろしくお願いいたします。

No.2  Author Profile Page: Re:FireFoxでアイコンが相対パスで挿入されてしまいます。

>こきこきさん
こんにちは。

>1点目は、絵文字がリンクをクリックするように、クリック出来る状態に自動的になること。
「絵文字にマウスポインタを当てたときに、画像のタイトルが表示される」ということでしょうか。
そうであれば、以前からそのような作りになっています。

>2点目は、FireFoxで挿入すると、相対パスになってしまい、ページによって表示されなくなること。
画像のURLの先頭部分は、mt-config.cgiのStaticWebPathの設定に依存します。
StaticWebPathが相対パス表記になっているのではないかと思われますので、そこを絶対パスに変えてください。

No.3 こきこき : 早速のご回答ありがとうございます。

藤本様

      こきこきです。

早速のご返事ありがとうございます。

>「絵文字にマウスポインタを当てたときに、画像のタイトルが表示される」ということでしょうか。

ごめんなさい。そういうことではなくて、
リンクをクリックできる場所をポイントすると、マウスカーソルが
矢印から手の形に変わると思うのですが、アイコンをポイントすると
手の形に変わり、リンクをクリックするようにクリック出来てしまいます。
InsertIcon.jsをいじってたら、改善したのですが、
http://www.shoin.net/event/kosodate-college/2008/07/post.html
には、アイコンをポイントするとリンクと同じポインタに変わる状態が残っています。


>StaticWebPathが相対パス表記になっているのではないかと思われますので、そこを絶対パスに変えてください。

ありがとうございます。
確認しましたが、絶対パスになっていました(>_ やった!これで解決!と思ったのですが、残念です。。。

ええと、IEでは、ちゃんと絶対パスでアイコンが挿入されます。
FFではsrc="../../../InsertIcon/images/naninani.gif"
といった入り方をしてしまいます。

ちなみにMT-Plugin-FCKeditor も使っています。

どうぞ、よろしくお願いいたします。

No.4  Author Profile Page: Re:早速のご回答ありがとうございます。

>こきこきさん
こんにちは。

ご質問の件ですが、申し訳ありませんが、このプラグインはFCKEditorと組み合わせることは想定していません。
MT標準のテキストエディタでのみ動作を確認しています。

No.5 こきこき : ご返信ありがとうございます。

藤本様

ご回答ありがとうございます。
そうですか、MT-Plugin-FCKeditor が原因ですか。。。
o(>_

両方、捨てがたい機能なだけに・・・。。。
苦しいところです。

いろいろ試してみます。

No.6 こきこき : とりあえず、回避策が見つかりました。

藤本様

自分なりに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/";
-------------------------------------------------
と挿入したら、とりあえず、改善するようになりました。

邪道かとは思いますが、とりあえず、運用上は、問題なさそうです。

本当にいろいろ、アドバイスいただき、ありがとうございました。

No.7 こきこき : 追記

藤本様

書き忘れがありました。
後は、【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 アセアセ・・・

No.8 girasol : (無題)

現状では階層の深いところに画像があるため、html の表示で絵文字のタグがとても長く(80バイトあまりに)なってしまいます。
当初は気になりませんでしたが、今ではコメント総数が17,000件を超え、絵文字総数も18,000個を超えてしまい、看過できない状況です。
そこで少しでも軽量化するため、絵文字画像へのパスを極力短くしたい(ドメインの上位に画像フォルダを置きたい)のですが、StaticWebPathの設定に依存する現状のInsertIcon.plを、絶対パスに変えることは可能でしょうか? 可能だとすればどのように記述すればいいでしょうか?
ご多忙の折恐縮ですが、ご教示いただけましたら幸いです。

No.9  Author Profile Page: (無題)

>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/";

書き換え後

$icon_dir = "http://画像のディレクトリ/";

・99行目
書き換え前

_fj_insert_icon_obj = new FJInsertIcon('${static_path}plugins/InsertIcon/images/', 0);

・書き換え後

_fj_insert_icon_obj = new FJInsertIcon('http://画像のディレクトリ/', 0);

ただ、このようにしたとしても、ディスク容量の消費を抑えたり、再構築を高速化したりすることには、ほとんど寄与しないと思います。

No.10 girasol : (無題)

壱さん
お忙しいところありがとうございました。
従来218KBあった個別ページが202KBに、159KBあったページが139KBになるなど、html自体は多少なりとも軽量化できました。
これでサーバーに積もる生ログも軽減できるかと思います。

No.11 chiffon. Author Profile Page: title属性とalt属性

いつもありがたく使わせていただいております。

最近ふとアイコンにマウスポインターをあわせても絵文字の説明の語句が表示されないことに気づきました。
title属性がないのがその原因みたいなのですが、自分で何とかならないかと思ったものの、プラグイン本体をいじるのはよくわからないし、かといってせっかくクリック1つでできていたものをそのつどいちいちtitle属性を付け加えるのも面倒…。

どうか、title属性を追加したバージョンアップをお願い出来ないでしょうか?

No.12  Author Profile Page: Re:title属性とalt属性

>chiffon.さん
こんにちは。

ご希望の件を追加したバージョンを、明日のブログの記事にしたいと思います。

No.13 chiffon. Author Profile Page: (無題)

壱さん、こんなにあっさり受けてくださるなんて…ありがとうございます。
記事のアップ心待ちにしております。

コメントする


Movable Type Developer's Guide Volume 1

Movable Typeのプラグイン開発等のドキュメント「Movable Type Developer's Guide Volume 1」を発売しました。
詳細は特設ページをご覧ください。