Ajaxを使用して、MTの表現を面白く

■まずは概要 　最近、MOVABLETYPE（以下、MTと略称）を使用していて、色々な表現を試しているサイトが多くなりました。特に、Ajax/JavaScriptを使用するのが一番ポピュラーといえ、色々なAjax/JavaScriptがMTに対応してきています。　さて、そんなAjaxですが、「Asynchronous JavaScript + XML」の略であり、Ajaxという名称自体もそういった技術があるのでなく、色々な技術の複合の略称であり、根本的にはJavaScriptとXML、そしてXMLHttpRequestという命令を使用したものをそう呼ぶようになりました。　さて、そんなAjaxですが、MTが利用される理由の一つに、「インタラクティブな表現方法が出来る」というのが一番大きい理由でしょう。それを可能としたのが、XMLHttpRequestという命令であり、ページのリロードをさせずにページ自体を書き換えることができるようになり、それがAjax普及の原動力になったのも忘れてはいけません。　さて、今回から数回に分けてはそのAjaxを利用して、GeekNewsのサイトをよりインタラクティブに表現していこうと思います。

■Lightbox2を利用して画像表示を「よりインタラクティブに表現する」 　今回紹介するものは、Ajax APIの中では割とポピュラーなAPIである「Lightbox2」というものです。　これがどのような動きをするかを実際に試して貰うために、以下の画像を用意しました。　ちょっと試しにクリックしてみてください。

　どうです？　周りが黒くなって、表示されたのがわかったでしょうか？　これがLightbox2というAjax APIが行う表示方法です。　Lightbox2の表示方法は、これ以外にも
　

　のように、カタログ表示のようなことも出来るので、主に画像を中心なblogなどではよく見られるかと思います。　また、実装自体もファイルアップと簡単なリンク作成のみで行えるので、敷居も低いかと思います。

■設定方法 Lightbox2の設定方法は簡単です。まず、Lightbox2の公式サイトに行き、Lightbox2をDownしてきます。　公式サイトからファイルをDownしてくると、サンプルファイルが入っていますので、その中のjsフォルダーと、CSSフォルダーをご自分のサイトのルートディレクトリにアップロードします。　その後は、MT等のデザイン編集画面に飛び、<head></head>タグの間に、以下のテキストを張ります。

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

これで下準備は終わりました。次に、表示したい画像をアップし、LINKタグを埋め込むのですが、その時に、

rel="lightbox"

という命令をLINKタグに差し込んでおきます。具体的には、 <a href="[URL]" rel="lightbox">image #1</a> のようにします。これで、Lightbox2が表示をしてくれるようになります。また、グループとして表示したい場合には、グループ化したい画像のLINKに

rel="lightbox[グループ名]"

と差し込みをします。これで、グループ名が付いた画像はLightbox2上ではグループとして表示されるようになります。

このようにLightbox2を使用するのはあまり何も考えないでも使用できるのが解ったはずです。是非、試してみて、MTの表現方法の幅を広げてみてあげてください。

（ライター：Wanwan）

【関連リンク】・Lightbox 2

クリックしていただけると、励みになります。