エントリー記述に絵文字を入力出来るようにする｜Materializing [マテリアライジング]

レンタルブログには良く取り入れられてる機能のひとつですね。
笑顔だったりちょっと怒った顔だったりして、眺めると面白いです。
通常は、いわゆる携帯の絵文字みたいに使用するものかとは思いますが、アイデア次第で利用の幅はとても拡がるものと思います。
ここでは、管理画面からそのアイコンを利用して、エントリー中・追記中に表示させる方法を紹介します。

[関連]エントリー記述に絵文字を入力出来るようにする(2)(個人的にはこちらの方法を推奨)

絵文字用プラグインのDL

[配布元]
●MTMacro プラグイン
Brad Choate: MTMacro
●MT-Smileys プラグイン
■MT Smileys - MT (Movable Type) Hacks

絵文字用プラグインのUL

●MTMacro
・macros.pl→MTルート/plugins
・postproc.pm→MTルート/extlib/bradchoate
・macros.pm→MTルート/extlib/bradchoate

●MT-Smileys
imageディレクトリを mt.cgi と同じ場所にアップ

テンプレート作成

●テンプレート→モジュールタブ→モジュールを新規作成
テンプレート名→smiley macros
内容→MT-Smileys に入ってる smiley-macros.txt の内容全部

管理画面編集テンプレート修正

●エントリー記述内表示のため
MTルート/tmpl/cms/edit_entry.tmpl を開いて、
・smiley-javascript.txt
・smileys.txt
の内容をコピーして貼り付けます。

例：smiley-javascript の内容は div id="edit-entry"の下辺り
※smiley-javascript.txt の4行目：comments を entry に変更する

smileys.txt の内容は、エントリー編集画面の表示させたい位置に。
例：TMPL_IF NAME=DISP_PREFS_SHOW_EXTENDED の上辺り

●追記文中表示のため
上記で貼り付けて改変したsmiley-javascript.txt の下に、再度scriptをコピーして貼り付け、
・emoticon を emoticon1
・entry_form.text をentry_form.text_more
に改変します。

smileys.txt の内容も、再度表示させたい位置に貼り付けます。
そして、emoticon を emoticon1 に全て変更します。

判り辛いと思うので例：以下をdiv id=edit-entry の下に貼り付けてます。

<script type="text/javascript" language="javascript">
<!--
function emoticon(smiley) {
	var txtarea = document.entry_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();
	}
}

//-->
</script>


<script type="text/javascript" language="javascript">
<!--
function emoticon1(smiley) {
	var txtarea = document.entry_form.text_more;
	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();
	}
}

//-->
</script>

テンプレート修正

例として、個別エントリーテンプレートの場合での説明です。
●個別エントリーアーカイブの1行目に下記コードを追記

<$MTInclude module="smiley macros"$>

●MTEntryBody を下記コードのように修正する

<MTMacroApply><$MTEntryBody$></MTMacroApply>

●MTEnｔｒｙMore を下記コードのように修正する

<MTMacroApply><$MTEntryMore$></MTMacroApply>

以上で、管理画面(エントリー編集画面)からアイコンが簡単に入力出来、投稿したエントリー・エントリー追記内でアイコンが表示されるようになります。
更に、エントリーへのコメント時にも絵文字が使えるようにするには下記を行います。

テンプレート作成

●テンプレート名・・・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();
	}
}

●テンプレート→モジュールタブ→モジュールを新規作成
テンプレート名→smileys
内容→MT-Smileys に入ってる smileys.txt の内容全部

スクリプトを読み込ませる

下記コードを＜head＞～＜/head＞内に追記

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

コメントにも絵文字を使えるようにする

●MTCommentBody を下記コードに修正する

<MTMacroApply><$MTCommentBody$></MTMacroApply>

●絵文字を表示させる箇所
絵文字を表示させたい箇所に下記コードを追記

<$MTInclude module="smileys"$>

※コメント部に関してはテストしてないので確実な動作は判りません。そのうち試そうと思います。

大切なこと

「A文字列」は好きに決めますが、統一させること。
また、ブログ内で使用される文字列は変換されてしまうので、あまり使われそうにない文字列で定義することが大事です。
例「：hogehoge：」・・・コロンは半角です

●edit_entry.tmpl，smileys内

<a href="javascript:emoticon(':A文字列:')"><img src="～"></a>

●smiley macros内

<MTMacroDefine name="B文字列" string=":A文字列:" no_html="1">
<img src="～" />
</MTMacroDefine>

[参考記事]

■MovableType備忘録: コメントに絵文字を入れられるようにする　[MovableType備忘録]
■MT Smileys - MT (Movable Type) Hacks
■Document_Not_Bound...: エントリーの絵文字を"MT Smileys"に変更。
■やむやむ: コメントとエントリ投稿用絵文字パワーアップ
■[NC] : きつねさんでもOK

上記解説内のsmiley JavaScriptは、絵文字が文末に表示されるので、それを解消するスクリプトは下記。Netscapeの場合は使わないように。

<script type="text/javascript" language="javascript">
<!--
// MT Smileys http://mt-hacks.com/mt-smileys.html
// Edited By Noel http://noe.lolipop.jp/
function emoticon (smiley) {
var txtarea = document.entry_form.text;
smiley = ' ' + smiley + ' ';
if(navigator.appName.indexOf("Microsoft") > -1){ // If IE
txtarea.focus();
if (!document.selection) return;
var range = document.selection.createRange();
range.text=smiley;
txtarea.focus();
// return false;
}else{ // If other browser
if (txtarea.createTextRange && txtarea.caretPos) {
var caretPos = txtarea.caretPos;
caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? smiley + ' ' : smiley;
txtarea.focus();
} else {
var length = txtarea.textLength;
var start = txtarea.selectionStart;
var end = txtarea.selectionEnd;
var txtarea1 = txtarea.value.substring(0, start);
var txtarea2 = txtarea.value.substr(end, length);
txtarea.value = txtarea1 + smiley + txtarea2;
txtarea.focus();
}
}
}
//-->
</script>

2006/11/03 11:38:30：記事書き直し

エントリー記述に絵文字を入力出来るようにする｜Materializing [マテリアライジング]