-
- Mon
- May
- 14
- 2007
- 16:
- 22:
- 54
- 07-5-14(Mon) 赤口
Moon:26.8
- PC・Web
そう言えば、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のほうにも絵文字をちゃんと対応させよう…
関連する投稿
- Newer: 撃沈:(BlogPet)
- Older: サイト プチリニュ☆
Comments (Close):1
- さえら 07-05-16 (Wed) 13:38
-
こんにちは
はじめまして
トラックバックありがとうございました
