2006.09.01

MTタグを利用してユーザーごとに画像を変える

ブログなどで利用されるMovable Typeには<$MT●●$>というような
独自のタグがあり、それをHTMLに埋め込むことによって決まった内容へ
勝手に変換してくれます。
例えば、<$MTEntryAuthor$>というタグを使用すると、
ログインしているユーザー名へ、
<$MTEntryID$>というタグを使用すると一エントリーごとの
一意のIDへ変換されます。

上記のタグを利用し、JavaScriptと併用してみます。

例)
------------------------------
 ユーザー名:sasaki
 エントりーID:123
 画像名:sasaki.jpg
------------------------------
あらかじめユーザー名と同じ名前の画像を用意し、
画像名を指定して表示するようなJavaScriptを
記事部分のHTMLに埋め込みます。
ユーザーによって画像名やエントりーによって画像のnameを
変える必要があるので名前をベタ書きせずにタグを使用します。
このときJavaScript内の変数名も一意にしないと
同じユーザーで複数エントりーした場合にうまく動作しません。

'// 画像
<img name="<$MTEntryAuthor$><$MTEntryID$>">

<script language="JavaScript">
<!--
var PIC<$MTEntryAuthor$><$MTEntryID$> = new Array();
PIC<$MTEntryAuthor$><$MTEntryID$>[0] = new Image();
PIC<$MTEntryAuthor$><$MTEntryID$>[0].src = "<$MTEntryAuthor$>.jpg";
document.<$MTEntryAuthor$><$MTEntryID$>.src=PIC<$MTEntryAuthor$><$MTEntryID$>[0].src;
// -->
</script>

エントリーした画面を実際にブラウザのソースで見ると
以下のように変換されます。

'// 画像
<img name="sasaki123">

<script language="JavaScript">
<!--
var PICsasaki123 = new Array();
PICsasaki123[0] = new Image();
PICsasaki123[0].src = "sasaki.jpg";
document.sasaki123.src=PICsasaki123[0].src;
// -->
</script>

このようにJavaScriptなどと併用すると
他にも様々なことができるのではないでしょうか。

photo
sasaki