レベル: 初級 Yoav Rubin, Software engineer,
IBM
Gal Shachor, STSM,
IBM
Brandon J.W. Smith, Software Engineer, IBM
2009年 8月 11日 IBM WebSphere® sMash Developer Edition 1.1 (DE) には、Web アプリケーション開発用の App Builder という Web ベースの開発環境が用意されています。このツールを使用して、Atom フィードを提供する単純なオンラインの RSVP アプリケーションを作成する方法を学びましょう (訳注: RSVP はフランス語の repondez s'il vous plait の略で「お返事をお願いします」の意)。
はじめに
Web アプリケーションの開発は、ゼロの状態から始めようとすると困難な場合があります。データベースのセットアップや、ユーザー・インターフェースの設計など、必ず必要となる定型的な作業は、低レベルのスキルで可能なものではありません。そうした作業を支援するために、IBM は App Builder を備えた WebSphere sMash DE を導入しました。これにより、開発者にはアプリケーションを作成するためのツール・セットが提供されると同時に、退屈な、そして場合によっては困難な多くの作業から開発者は解放されました。そのため開発者の精神的な負担は軽減され、最も重要なこと (つまり Web アプリケーションを実行させ、機能させること) に集中できるようになりました。
一般に必要とされる Web アプリケーションの一例が、RSVP システム、つまり友人達をイベントに招待し、その友人達の意向や希望についての通知を受けられるシステムです。この記事では、そうしたアプリケーションの作成方法を示しながら、App Builder にどのようなメリットがあるのかを説明します。
シナリオ
この記事のシナリオでは、皆さんの友人の 50 歳の誕生日が近づいており、皆さんは友人達や家族をパーティーに招待しようとしている、とします。皆さんは多忙な人なので、招待される人達全員に単純な RSVP フォームへのリンクを送信し、フォームが送信されるたびに通知を受けるようにしたい、とします。
アプリケーションを作成する
IBM WebSphere sMash プロジェクトの Web サイト (「参考文献」を参照) から IBM WebSphere sMash をダウンロードし、そのサイトの指示に従って皆さんのシステムに適切にインストールします。インストールが完了したら、コマンド・プロンプトから以下のコマンドを実行して App Builder を起動します。
するとブラウザーで 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 では黄色の丸で囲んであります) を開き、コマンド・プロンプトに下記のコマンドを入力すると、このリソース用のデータベース・テーブルが作成されます。
すると、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 アプリケーションを簡単に作成することができます。この記事では、そうした機能のごく一部を紹介しました。少し時間を取って、これらのツールを試してみてください。するとこれらのツールが、プログラミングをせずにプログラムを作成するという、長年の夢をどのようにして実現し始めているのか、理解できるはずです。
参考文献 学ぶために
製品や技術を入手するために
著者について  | | | Yoav Rubin は、Technion, Israel Institute of Technology のコンピューター・サイエンス学部で情報システム工学の理学士号を取得しました。7 年前からソフトウェア・エンジニアとして IBM Haifa Research Lab に勤務し、主にビジュアル・アプリケーション開発ツールの分野で活躍しています。彼の専門は、Java および Web 2.0 技術、エンド・ユーザー向け開発、そしてユーザビリティーです。 |
| | | Gal Shachor は IBM Senior Technical Staff Member で、IBM Haifa Research Lab では研究者としてミドルウェアとリッチ・インターネット・アプリケーションに関するさまざまな研究に取り組んでいます。 |
| | | Brandon J. Smith は Carnegie Mellon University で修士号を取得しています。彼が関心を持っている分野は、REST データ・サービス、Web スケールのデータベース、クラウド・コンピューティングです。 |
記事の評価
| 
