Aptana JaxerでサーバサイドJavaScriptを始めてみよう!

第2回 Jaxerの環境構築/サンプルアプリ解説

この記事を読むのに必要な時間:およそ 4 分

では,Jaxerを起動してみましょう。

上記表示エリアの下の,⁠Validation」⁠Console」⁠Servers」⁠Jaxer Shell」のタブが並んでいる場所から,⁠Servers」タブを選択します。⁠Jaxer Internal Server」という項目が表示され,⁠Status」「Stopped」になっています。

「Jaxer Internal Server」をクリックして選択状態にし,右クリック→⁠Start server」を選択しましょう。

画像

「Status」「Starting...」から「Running」になれば起動完了です。

画像

もっと簡単に起動する方法として,Aptana Studio上部の「Jaxer」のボタンを押下する方法があります。

画像

上記ボタンをクリックすると,赤いマークがオレンジ色(Starting...)になり,しばらくすると緑色(Running)になります。マークが緑色になれば起動完了です。

画像

Jaxerを起動した状態で,先ほどのプレビューをもう一度見てみましょう。 プレビュー画面を開いていた人は,一度「Source」タブを選択し,再度「IE」もしくは「Firefox」タブをクリックします。 すると,以下のような画面が表示されます。

画像

先ほどのJaxerを起動していないときの違いは,次の2点が挙げられます。

  • Simple Sampleという項目のところに,⁠Jaxer build number:」という表示がある
  • IEタブの頭にオレンジ色のマークが付いている

タブの頭に付いているオレンジ色のマークは,現在表示しているプレビューがJaxerサーバで実行された結果であることを意味します。

Jaxer build numberの表示は,サーバ側でJaxerのコードが実行された結果になります。 Sourceタブで該当箇所のソースを見てみると,次の記述が見つかります。

<script runat="server">
  document.write("<p class='note'>Jaxer build number: " + Jaxer.buildNumber + "</p>");
</script>

scriptタグのrunat属性がserverとなっているので,このタグ内のコードは,サーバサイドの処理ということになります。

中に書かれているのは,見慣れたJavaScriptのdocument.write()のコードです。ページ表示時に,サーバサイドのJavaScriptが実行され,ページ内にdocument.write()でHTMLが書き出されたということがお分かりいただけたでしょうか。

今回作成するサンプルアプリケーション

さあ,それでは,簡単なサンプルアプリケーションを作ってみることにしましょう。

今回作るのは,タスクメモアプリです。 Jaxer付属のアプリにもタスク管理アプリがありましたが,その付属アプリとは異なる実装にしてみます。また,ライブラリとしてjQueryを利用し,Jaxerとの相性の良さも確かめてみましょう。

完成後の画面イメージは次のようなものです。

画像

タスクを入力するテキストボックスがあり,追加したタスクは,画面遷移することなく,テキストボックスの下に表示されます。

今回サンプルアプリに実装したい機能を以下に列挙してみます。

  • テキスト入力欄にタスクを入力し,Enterキーを押すと,タスクが登録される
  • 登録したタスクは,即時画面上に反映される
  • 既存のタスクをクリックすると,テキスト入力欄になり,タスクの内容を編集することができる
  • ×をクリックすると,タスクを削除できる

サンプルアプリのイメージは沸きましたか?

それでは,次回からいよいよJaxerアプリケーションのプログラミングに取り掛かりたいと思います。

次回の連載まで,皆さんが得意とする言語ならどのように実装するか,ちょっと考えてみてはいかがでしょうか。他の言語での実装と比較することで,メリット・デメリットがより明確になると思います。

著者プロフィール

栗栖義臣(くりすよしおみ)

TIS株式会社 主任。鹿児島県出身。大阪大学大学院工学研究科にて原子力工学を専攻。卒業後,TISで主にJavaの開発案件に携わる。 SUN × Recruit主催のmash up award 2ndにて「サグール賞」「きざし賞」「特別賞」を受賞(asso-ball.networdarium.net)。iGoogleガジェットコンテストで「特別賞」を受賞(U.T.)。ブログは「でぃべろっぱーず・さいど」。

URLhttp://dev.chrisryu.com/