お知らせ

作って覚えるPHP+MySQLアプリケーション 2008年6月24日

作って覚えるPHP+MySQLアプリケーション」が発売されました。
PHP+MySQL+Smartyを使って、ブログ/ショッピングサイト/マッシュアップの3つのWebアプリケーションを作る方法を解説しています。

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

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

| コメント(7) | トラックバック(0)

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

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

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

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

1.インストール

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

InsertIcon_1_22.zip

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

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

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

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

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

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

トラックバック(0)

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

コメント(スレッド1件,コメント7件)

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

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 アセアセ・・・

コメントする