コメント( 0 ) | トラックバック( 0 )

現代の Ajax開発は、すべてを1から構築するよりも、「ライブラリ」や「フレームワーク」を使うことがほとんどです。
その中でも、現在非常に多く使われているライブラリが、今回紹介する「prototype.js」です。

シンプルな作りな上に、さまざまな機能を提供してくれているため、このライブラリを使って作られているツール群もたくさん存在しています。

ここでは、そんな prototype.jsの使い方を数回にわたって、少しずつ解説してみたいと思います。いつまで続くか分かりませんが、お付き合いくださいませ。

インストールしよう

まずは、インストールしましょう。といっても方法は簡単で、ファイルを一つコピーするだけです。
prototype.jsは、オフィシャルサイトから無料で配布されています。以下のサイトに訪れましょう。

http://prototype.conio.net/

「Download the latest version」というリンクをクリックすると、ファイルをダウンロードすることができます。ただ、圧縮形式が「.tar.gz」という UNIXなどでよく使われる圧縮形式な為、Windowsなどの場合は専用ソフトがないと解凍できません。

そんな場合はその下の「Just the .js, please」をクリックすると、必要なファイルだけがダウンロードできて便利です。
ちなみに、圧縮ファイルを解凍すると、「dist」フォルダの中に本体が格納されているほか、ドキュメント群やサンプルプログラムなどが含まれています。

さて、それではまずは非常に簡単なサンプルプログラムを作ってみましょう。ボタンをクリックすると、メッセージが書き換わると言うだけのプログラムです。
まずは、適当なフォルダを作って、ファイルを新しく作成します。

文字コードをUTF-8にして、ボタンと<div>タグか<p>タグを配置します。id属性に「display」と設定しておきましょう。

<form name="form1" action="">
<input type="button" name="button1" value="メッセージを表示する" />
</form>
<p id="display">！この内容が書き換わります！</p>

次に、同じフォルダにテキストファイルを作成して、適当なメッセージを書き込みます。

message.txtの内容が表示されました！

このファイルも UTF-8で保存します。さらに、「BOM付」という形式で保存すると良いでしょう。（Safariなどのブラウザで文字が化けることがあります）

これで、準備は完了です。それでは、プログラミングを始めていきます。
まずは prototype.jsにリンクします。タグの中で次のように記述しましょう。

<script src="prototype.js" type="text/javascript"></script>

次に、ボタンに onclickイベントを書き加えます。

<input name="button1" type="button" value="メッセージを表示する" onclick="new Ajax.Updater('display','message.txt',{method: 'get'});" />

これで OK。Webブラウザで表示して、ボタンをクリックしてみましょう。メッセージが書き換わります。

サンプルを見る

たった1行のプログラムで、きちんと Ajaxができています。Webブラウザ間の依存性も極力排除されていて、ほとんどの Webブラウザで動作します。
prototype.jsを使えば、面倒な手続きなしに Ajaxを活用することができるのです。どんどん活用していきましょう。

はてなブックマークに保存

[PR] Recently Ajaxメルマガ限定、人気記事ランキング