はじめてみよう

im-Jssp Frameworkは、 サーバサイドのビジネスロジックを JavaScript で実装する事の出来る Web アプリケーション開発モデルの実行エンジンです。

ユーザインタフェース部分に相当するプレゼンテーションページ(HTMLファイル)と、 ビジネスロジック部分に相当するファンクションコンテナ(サーバサイドJavaScriptファイル)を作成することで、 容易にWebアプリケーションを開発することができます。

ここでは、サンプルを実行するまでの手順を示します。
(本ページでは、Windows系OSでサンプルを実行しています。その他のOSで実行する場合は、適宜読み替えてください)

サンプル実行までの流れ

  1. JDKのインストール
  2. Webアプリケーションサーバのインストール
  3. im-jssp-sample.warのインストール
  4. Webアプリケーションサーバの起動
  5. 初期ページの表示
  6. Hello, World!(サンプルページを表示)
  7. こんにちは、intra-mart!(サンプルページをカスタマイズ)

材料

JDKJ2SE Development Kit 5.0.xhttp://java.sun.com/j2se/1.5.0/ja/download.html
WebアプリケーションサーバResin 3.0.xhttp://www.caucho.com/download/index.xtp
サンプルプログラムim-jssp-sample-0.1.x.warページ上部の「ダウンロード」よりダウンロード可能です

JDKのインストール

J2SE Development Kit 5.0.xをインストールします。
http://java.sun.com/j2se/1.5.0/ja/download.htmlよりJDKをダウンロードし、 インストールを行ってください。
すでにインストールされている場合は行う必要はありません。


Webアプリケーションサーバのインストール

Webアプリケーションサーバには、Caucho Technology, Inc.Resinを利用します。
すでにインストールされている場合は行う必要はありません。

  • http://www.caucho.com/download/index.xtpにアクセスします。
  • Resin Downloads より、Resin 3.0 Binary をダウンロードします。(ここでは「resin-3.0.21.zip」をダウンロードします)
  • ダウンロードしたアーカイブ・ファイルを展開します。(展開先のディレクトリを <RESIN_HOME> とします)

以上でResinのインストールは完了です。


im-jssp-sample.warのインストール

サンプル用のwarファイル「im-jssp-sample-X.X.X.war」をResinにインストールします。

  • サンプル用warファイルim-jssp-sample-0.1.1.war をダウンロードします。(ページ上部の「ダウンロード」よりダウンロード可能です)
  • ダウンロードした「im-jssp-sample-0.1.x.war」を <RESIN_HOME>/webapps にコピーします。
  • コピーした「im-jssp-sample-0.1.x.war」 を 「im-jssp-sample.war」にリネームします。

以下のようになっていれば、im-jssp-sample.warのインストールは完了です。 (以下の例では、<RESIN_HOME>は「C:\resin-3.0.21」となっています)


Webアプリケーションサーバの起動

<RESIN_HOME>/httpd.exe をダブルクリックし、Resinを起動します。

起動するとコンソールが表示されます。

コンソールに「Resin started in XXXXms」と表示されれば、Resinの起動は完了です。

起動に失敗する場合

Resinはデフォルトで、8080ポートを利用します。
8080ポートが既に試用されている場合は、以下の例外が発生します。

java.net.BindException: Address already in use: JVM_Bind
Can't bind to *:8080.

ポートを変更する場合は、<RESIN_HOME>/conf/resin.confの 「/resin/server/http/@port」を変更してください。


初期ページの表示

Webブラウザから「http://localhost:8080/im-jssp-sample/」にアクセスします。


Hello, World!(サンプルページを表示)

http://localhost:8080/im-jssp-sample/sample.jssp」にアクセスします。


「Hello, intra-mart」リンクをクリックします。
この画面は、「<RESIN_HOME>/webapps/im-jssp-sample/sample/tag/hello/hello_main.html」の内容が表示されています。

  • <RESIN_HOME>/webapps/im-jssp-sample/sample/tag/hello/hello_main.htmlの内容
    <HTML>
      <HEAD>
        <TITLE>Sample [Hello, intra-mart]</TITLE>
      </HEAD>
      <BODY>
        Hello, World!
      </BODY>
    </HTML>
    

こんにちは、intra-mart!(サンプルページをカスタマイズ)

プレゼンテーションページ「hello_main.html」と、ファンクションコンテナ「hello_main.js」をカスタマイズし、 画面上に「こんにちは、intra-mart'''」と表示します。
hello_main.htmlhello_main.js は「<RESIN_HOME>/webapps/im-jssp-sample/sample/tag/hello/」にあります)

ファンクションコンテナ(サーバサイドJavaScriptファイル)と連携させたい部分に<IMART>タグを埋め込み、 プレゼンテーションページを完成させます。ここでは、「"Hello, World!"」の部分を<IMART>タグにし、ファンク ション・コンテナで指定する文字列(nameValueの値)に置き換えるように設定します。

  • <RESIN_HOME>/webapps/im-jssp-sample/sample/tag/hello/hello_main.html
    <HTML>
      <HEAD>
        <TITLE>Sample [Hello, intra-mart]</TITLE>
      </HEAD>
      <BODY>
        <IMART type="string" value=nameValue></IMART>
      </BODY>
    </HTML>
    

作成したプレゼンテーションページに対応するファンクションコンテナを作成します。 ファンクションコンテナには、初期化関数であるinit関数を作成します。 ここでは、文字列「こんにちは、intra-mart'''」を「nameValue」というバインド変数に設定します。 hello_main.htmlと連携させるため、ファイル名はhello_main.jsとし、プレゼンテーションページと同じフォルダに置きます。
(hello_main.jsは既に用意してあるので、適宜編集してください)

  • <RESIN_HOME>/webapps/im-jssp-sample/sample/tag/hello/hello_main.js
    // バインド変数宣言
    var nameValue = "";
    
    // init関数の定義
    function init(request){
    
        // HTMLへ渡す値を設定します
        nameValue = "こんにちは、intra-mart!";  
    
    }
    

再度「http://localhost:8080/im-jssp-sample/sample.jssp」にアクセスし、「Hello, intra-mart」をクリックします。

表示内容が更新されていれば、成功です。


このように、im-jsspでは、容易にWebアプリケーションを作成することが可能です。
im-jssp-sample.warには、その他のサンプルも収録されています。あわせて、ご参照ください。


添付ファイル