目次


IBM WebSphere sMash DE を使って Web アプリケーションを作成する

Web アプリケーションの作成を単純化する

Comments

はじめに

Web アプリケーションの開発は、ゼロの状態から始めようとすると困難な場合があります。データベースのセットアップや、ユーザー・インターフェースの設計など、必ず必要となる定型的な作業は、低レベルのスキルで可能なものではありません。そうした作業を支援するために、IBM は App Builder を備えた WebSphere sMash DE を導入しました。これにより、開発者にはアプリケーションを作成するためのツール・セットが提供されると同時に、退屈な、そして場合によっては困難な多くの作業から開発者は解放されました。そのため開発者の精神的な負担は軽減され、最も重要なこと (つまり Web アプリケーションを実行させ、機能させること) に集中できるようになりました。

一般に必要とされる Web アプリケーションの一例が、RSVP システム、つまり友人達をイベントに招待し、その友人達の意向や希望についての通知を受けられるシステムです。この記事では、そうしたアプリケーションの作成方法を示しながら、App Builder にどのようなメリットがあるのかを説明します。

シナリオ

この記事のシナリオでは、皆さんの友人の 50 歳の誕生日が近づいており、皆さんは友人達や家族をパーティーに招待しようとしている、とします。皆さんは多忙な人なので、招待される人達全員に単純な RSVP フォームへのリンクを送信し、フォームが送信されるたびに通知を受けるようにしたい、とします。

アプリケーションを作成する

IBM WebSphere sMash プロジェクトの Web サイト (「参考文献」を参照) から IBM WebSphere sMash をダウンロードし、そのサイトの指示に従って皆さんのシステムに適切にインストールします。インストールが完了したら、コマンド・プロンプトから以下のコマンドを実行して App Builder を起動します。

appbuilder open

するとブラウザーで App Builder が開き、図 1 のような画面が表示されます。

図 1. 最初の画面

図の詳しい説明

まず、新しいアプリケーションを作成する必要があります。そのためには「Create new application (新規アプリケーションの作成)」というリンク (図 1 では丸で囲んであります) をクリックします。新規アプリケーションのダイアログでは、このアプリケーションの名前として「Birthday RSVP」と入力し、「Create (作成)」をクリックします。すると図 2 のスクリーンショットのような画面が表示されます。

図 2. アプリケーションを管理する画面

図の詳しい説明

ここで、アプリケーションの名前が付いたリンク (図 2 では丸で囲んであります) をクリックし、アプリケーションの編集用ビューに移動します (図 3)。

図 3. アプリケーションの編集

図の詳しい説明

データ・モデルを作成する

最初のコンポーネントとして、Zero Resource Model (ZRM) を定義します。ZRM はリレーショナル・データベースのテーブルに相当しますが、それ以外にも数々のサービスを提供します。特に、ZRM によって提供される基本的な Atom フィード・サービスは、この記事の後の方で使用することになります。

データ・モデルを作成するために、「New File (新規ファイル)」メニュー (図 3 では赤い丸で囲んであります) を開き、「Create a Zero Resource Model (not based on a form) (Zero Resource Model の作成 (フォームを基にしない))」を選択します。表示されるポップアップ・ダイアログの中で、このモデル・ファイルに「invitation.json」という名前を付けます。すると、App Builder がモデル・エディターを開きます (図 4)。

図 4. 空の ZRM エディター

図の詳しい説明

モデル・エディターでは、パレット (図 4 では赤い丸で囲んであります) の上でクリックすることで、以下のフィールドをモデルに追加します。

  • 「String」フィールド — 招待される人の名前。
  • 「Boolean」フィールド — 招待される人の配偶者も出席するかどうかを表します。
  • 「String」フィールド — さまざまな注記を追加します。

これが完了すると、エディターは下記の図 5 のようになるはずです。

図 5. ZRM エディターとフィールド

図の詳しい説明

次に、それぞれのフィールドの各種プロパティーを設定します。そのためには、プロパティーのアイコン (図 5 では赤い矢印で示してあります) をクリックし、各フィールドに対して以下の属性を設定します。

  • 最初の String フィールドでは、このフィールドの名前を「name」に、ラベルを「Enter your name (名前を入力してください)」に設定し、「Required (必須)」チェックボックスにチェックを入れます。
  • Boolean フィールドでは、このフィールドの名前を「withSpouse」に、ラベルを「Arriving with spouse (配偶者同伴)」に設定します。
  • 2 番目の String フィールドでは、名前を「comments」に、ラベルを「Additional comments (一言欄)」に設定します。

これでモデルが完成しました。ZRM フレームワークは、このモデル定義のデータ・インスタンスを保存するためのバッキング・データベースを自動的に作成します。また ZRM はデフォルトで Derby データベースを使います (ただし、サポートされている別のデータベースを使うための構成をユーザーが提供した場合は別です)。この記事ではデフォルトの Derby を受け入れます。

「Console (コンソール)」タブ (図 3 では黄色の丸で囲んであります) を開き、コマンド・プロンプトに下記のコマンドを入力すると、このリソース用のデータベース・テーブルが作成されます。

zero model sync

すると、Derby データベースのテーブルが作成されたことを示すコンソール・メッセージが表示されます。

最後に、このモデルのための HTTP リソース・ハンドラーを作成します。「New File (新規ファイル)」メニューで「Create a Resource Handler (リソース・ハンドラーの作成)」を選択します。このハンドラーの名前を「invitation.groovy」にし、その内容を「ZRM.delegate()」に設定します。

これでデータ・モデルが無事に作成できました。

フォームを作成する

この招待フォームは、上で作成したデータ・モデルのユーザー・インターフェースです。従って、このモデルをベースにフォームを作成することができ、またフォームの外観は特定のイベントに合わせて構成することができます。

まず、「New File (新規ファイル)」メニューで「create a Zero resource form based on a model (モデルに基づく Zero リソース・フォームの作成)」を選択します。このフォームの名前を「rsvp.json」に、フォームのためのモデルを「invitation.json」に設定します (図 6)。

図 6. モデルをベースに作成する新しいフォーム

図の詳しい説明

ここで「Create (作成)」をクリックすると、フォーム・エディターが開きます。フォーム・エディターでは、このフォームのタイトルとして「Welcome to the party (パーティーへようこそ)」と入力し、その説明には「Please fill up this RSVP form (この RSVP フォームに記入してください)」と入力します。するとエディターは図 7 のようになるはずです。

図 7. フォーム・エディター

図の詳しい説明

これでデータ入力フォームの作成は終わりです。

招待ページを作成する

今度は Web ページを作成します。この Web ページでは、招待される人達が必要な情報を入力するためのフォームが表示されます。

まず、「New File (新規ファイル)」メニューで「Create an HTML file (HTML ファイルの作成)」を選択し、このファイルの名前を「invitation.html」にします。

次に、ZRM フォーム要素を追加します。このフォーム要素は編集用ウィンドウの右側に表示されるパレット上の「Zero」セクションにあります。「Zero」セクションを右クリックし、ポップアップ・メニューの「Properties (プロパティー)」を選択してフォームのプロパティーを編集します。「Relative URI to form model file: (フォーム・モデル・ファイルに対する相対 URI)」フィールドに ./zero/forms/rsvp.json と入力します。すると結果は下記の図 8 のようになるはずです。

図 8. HTML ページ・エディター

図の詳しい説明

これでデータ入力用の Web ページの作成は終わりです。

アプリケーションを実行する

これで、あとはアプリケーションを実行するだけです。「Start (スタート)」(図 3 では緑の丸で囲んであります) をクリックします。最後に、招待される人達全員に、「http://[アプリケーションを実行するサーバーのホスト名]:8080/invitation.html」というリンクを送信します。

招待される人達がこのリンクを開くと、下記の図 9 のようなページが表示されます。

図 9. ユーザーに対して表示されるフォーム

図の詳しい説明

Atom フィードを受信する

RSVP フォームが送信されるたびに通知を受けるようにするために、適当なフィード・リーダーに「http://[アプリケーションを実行するサーバーのホスト名]:8080/resources/invitation?format_as=atom」というURL を追加します。すると、フォームが受信されるたびに通知が表示されるはずです。

まとめ

IBM WebSphere sMash と Web ベースの App Builder は強力な組み合わせです。プログラミング・スキルを持ったユーザーは、データベースおよびフォームの設計についての最低限の要求さえあれば、この IBM WebSphere sMash と Web ベースの App Builder という強力な組み合わせを利用することで、彼らのニーズに合った Web アプリケーションを簡単に作成することができます。この記事では、そうした機能のごく一部を紹介しました。少し時間を取って、これらのツールを試してみてください。するとこれらのツールが、プログラミングをせずにプログラムを作成するという、長年の夢をどのようにして実現し始めているのか、理解できるはずです。


ダウンロード可能なリソース


関連トピック


コメント

コメントを登録するにはサインインあるいは登録してください。

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Web development
ArticleID=426820
ArticleTitle=IBM WebSphere sMash DE を使って Web アプリケーションを作成する
publish-date=08112009