コメント( 3 ) | トラックバック( 2 )

何度も紹介している「Aptana」ですが、なかなか作り方に癖があるので、基本的なプロジェクトの作り方を紹介しましょう。
まずは、Aptanaを起動します。  

図の「新規プロジェクト」ボタンをクリックすると、［New］というダイアログボックスが表示されるので、「Web Library Projects」の中から「AJAX Library Project」を選びます。

適当なプロジェクト名（ここでは、prototype_sampleにしました）を入力し、必要に応じてファイルを保存する場所を設定し、［Next］ボタンをクリックしましょう。

次に、使うフレームワークを選ぶ画面になります。ここで「Prototype x.x.x（バージョン番号）」にチェックを入れて［Next］ボタンをクリックしていきます。

これで、プロジェクトが出来上がりました。「prototype_sample.htm」というファイルが出来上がって、最初から、サンプルプログラムが掲載されているので、これを改造しながら作ることが出来ます。

まずは、bodyタグ内をすべて削除しましょう。
また、このままだと日本語が文字化けしてしまうので、次のように設定をします。

メニューから［Project］［Properties］をクリックして、プロパティ設定ウィンドウを開きます。
最初に表示される「Info」という画面に「Text file encoding」という設定項目があり、これが標準で「Inherited from container(SJIS)」になっていますので、「Other」を選択して「UTF-8」を選びます。これで、［OK］ボタンをクリックしましょ う。

さらに、headタグ内に、次のようにmetaタグを記述します。

<meta http-equiv="Content-type" content="text/html; charset=UTF8" />
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />

※筆者注： 上記サンプルコードが間違えていました。ごめんなさい。

これで、文字化けがしなくなります。bodyタグ内に、次のように記述してみましょう。

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

画面下部の［Preview］をクリックすると、画面が表示されます。見終わったら［Source］を再びクリックして、元に戻しておきましょう。

次に、Ajaxで呼び出されるテキストファイルを作成します。［File］［New］［Untitled text file］を選択して、新しいテキストファイルを作ります。
適当に、次のようなメッセージを記入して保存しましょう。名前を「message.txt」として、HTMLファイルと同じ場所に保存します。

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

さて、最後にこれをprototype.jsを使って表示します。先ほど作ったボタンに次のようにプログラムを書き加えてください。

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

再び［Preview］をクリックしてから、ボタンをクリックすると、先ほど作った message.txtの内容が表示されています。これで、Ajaxプロジェクトの完成です。
他のフレームワークも同じように使えますので、ぜひ使ってみましょう。

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

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