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

第3回 サンプルアプリ(タスク管理アプリ)の作成 -タスクの登録・表示-

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

Jaxerアプリケーションの作成

前回は,Jaxerの環境構築,およびサンプルアプリの解説をしました。今回から,いよいよJaxerアプリケーションのプログラミングに取り掛かります。

今回作成するサンプルアプリケーションは,タスク管理アプリです。画面イメージは以下のようになります。

画面イメージ

実装する機能は,次のものになります。

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

それでは,前回インストールしているAptana Studioを起動しましょう。

起動後,以下の手順で,まずは「task」プロジェクトを作成します。

  1. project viewで右クリック→New→Projectを選択する。

  2. New Projcetウィンドウで,「Aptana Projects」「Default Web Project」を選択し「Next」をクリックする。

  3. Project name欄に,今回作成するアプリのフォルダ名を入力する。今回はサンプルアプリとして,タスク管理アプリを作成するので,"task"と入力して,「Next」をクリックする。

    今回作成するアプリのフォルダ名を入力する

  4. 続いて利用するJavaScript Libraryを選択する。今回は,jQueryを利用するので,jQueryのチェックボックスにチェックをつけて,「Next」をクリックする。

    jQueryのチェックボックスにチェック

  5. 「Include Jaxer sample in project」以外にチェックをつけて,「Next」をクリックする。

    「Include Jaxer sample in project」以外にチェック

  6. 最後は何も入力せず,そのまま「Finish」をクリックする。

これで,project view のところに以下のようなファイル構成でプロジェクトが作成されます。

プロジェクトが作成された

「jquery_sample.htm」「jquery_sample.js」は,jQueryのサンプルなので,削除しましょう。今回作成するページは,index.htmlなので,「task」プロジェクトを選択した状態で,右クリック→「New」「HTML file」を選択します。

「HTML file」を選択

表示されたウィンドウで,ファイル名欄にindex.htmlと入力して「Finish」をクリックします。

ファイル名欄に入力

するとproject viewにindex.htmlが現れ,中央のエディットエリアにindex.htmlのソースが表示されます。

index.htmlソースの表示

著者プロフィール

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

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

URLhttp://dev.chrisryu.com/

コメント

  • loadAllTask()がbothである理由

    がうさん、お返事が遅くなりまして、申し訳ありません。
    (コメントに気づきませんでした)
    さて、loadAllTask()ですが、
    > さらに,ページ表示時に,loadAllTask関数が実行されるように,bodyタグに onserverload="loadAllTask();"を追加します。
    と書いており、サーバ側でも実行しています。
    「onserverload属性は,サーバ側でDOM操作の準備が完了した段階で実行する関数を指定できる属性」なので、この属性に指定する関数はサーバ側で動作するものである必要があります。

    Commented : #2  栗栖義臣 (2008/04/23, 12:48)

  • loadAllTask()が"both"なんでしょうか?

    クライアントだけで実行するものと思い
    runat="client"にするとエラーで動かず
    理由を教えてください

    Commented : #1  がう (2008/04/14, 16:16)

コメントの記入