MTメモ：MovableTypeで絵文字を使うには。 - TokyoLife::Dalog トウキョウライフ::ダルログ

Home > 日記だとか雑記だとか > MTメモ：MovableTypeで絵文字を使うには。

Newer
Older

- Mon
- May
- 14
- 2007
- 16:
- 22:
- 54
- DALMATIANS
- 07-5-14(Mon) 赤口 Moon:26.8
日記だとか雑記だとか
MovableType | プラグイン

そう言えば、MovableTypeで絵文字を使う為の導入方法メモを
残していなかったコトに気付きました…
うんうんと唸りながら導入したので、
いつかやってくるかもしれない…
と言うか、既にCatlogの方で
対応させなければいけなくて、ちょっと忘れ気味で困ってるので…

ココで再度、思い出すためにも
メモに残しておこうと思います。ハイ。
1回メモとして残しておけば
今後、再度　対処しなくてはならなくなった時にも
困りませんからね。

ってワケで。さっそく、思い出しながら
やってみたいと思います。ハイ。

ちなみに、絵文字導入でお世話になったサイト様は
MovableType備忘録様とやむやむ様デス。

１．まずはここからMTMacroをDLして、ここからMT SmileysをDLして来る。

２．MTMacroプラグインをインストールする。
●macros.pl　→　mt/plugins/ の中にアップロード
●postproc.pmとmacros.pm　→　mt/extlib/ の中にbradchoate というディレクトリを作成してその中にアップロード

３．MT-Smileysプラグインをインストールする。
●DLした圧縮ファイルを展開した中にある image フォルダの中身をサーバーにアップロード
※アタシのサーバー環境の場合は、ブログをサブドメインで公開していると言うこともあり、mt.cgiと同じ場所にアップロードすると、イロイロとややこしくなるので、サブドメイン用のフォルダ以下にある images フォルダに smiley フォルダを作成し、その中に絵文字として使いたいアイコン画像ファイルをアップロードしています。

４．smiley-javascript(インデックス・テンプレートとテンプレート・モジュール) / smiley-macros(テンプレート・モジュール) / smileys(テンプレート・モジュール) のテンプレートを作成する

　Ａ．smiley-javascript　のテンプレートを作成

<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.comments_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>

やむやむ様のコメントとエントリ投稿用絵文字パワーアップを参考にしています。
上記のスクリプトでコメント欄での入力が超ラクチン
ちなみに、アタシの場合は　smiley-javascript　については
インデックス・テンプレート　で　smiley.js　を作成し
さらに、テンプレート・モジュール　でも　smiley javascript　というモジュールを作成しています。
イロイロやってみた結果、jsファイルを直接呼び出すよりも、MTのモジュールとしてテンプレートにインクルードした方がイイみたい( :？:)な場合があったので。

　Ｂ．smiley macros　と　smileys　のテンプレート・モジュールを作成

５．絵文字を変換(入力)したいテンプレートを修正する

　Ａ．以下のインクルード用コードを、テンプレートの1行目に追加

<$MTInclude module="smiley macros"$>

　Ｂ．以下のjsスクリプトコードまたはインクルード用コードを<head></head>内に追加

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

または

<$MTInclude module="smiley javascript"$>

　Ｃ．以下のインクルード用コードをコメント欄の絵文字イメージを表示させたい箇所に追加

<$MTInclude module="smileys"$>

※テーブル要素かdiv要素で囲みましょう

６．エントリ本文、エントリ追記分、コメント本文など、
絵文字を変換して欲しいトコロにマクロ用のコードを追記
※コメントプレビューだとか検索用だとかのテンプレートも忘れずに…

例：
変更前

<$MTEntryBody$>

変更後

<mtmacroApply><$MTEntryBody$></mtmacroApply>

修正したら、再構築。

これでMTに絵文字が導入できるはず。
絵文字の追加は自由自在。smiley-macros　と　smileys　に　既にある記述と同じように追加していくだけ。

ちなみに、アタシの場合
JUGEMからの移行だったので、ソレまでの絵文字用コードを活用するためにも
絵文字として認識させる文字列として、
“:”と“:”で括っています。
こうしてあれば、とりあえずは
日本独自の顔文字などが、
うっかり絵文字として画像に置き換えられるコトもアリマセン…
というワケで、絵文字導入メモでした。
さて、Catlogのほうにも絵文字をちゃんと対応させよう…