Webプログラミング・フレームワーク

全文

(1)解説. Webプログラミング・フレームワーク下村隆夫 [email protected] 徳島大学工学部知能情報工学科. 宗雄 [email protected] 高橋桐蔭横浜大学. 池田建司 [email protected] 徳島大学工学部知能情報工学科. 義夫 [email protected] 最上徳島大学工学部知能情報工学科. イ. ンターネットを利用したビジネスの利便性から，多くの Web アプリケーションが開発され，サービスに供されている．Web アプリケーションの開発には，さまざまな統合開発環境が用いられる．現在，世界には 70,000 を. 超えるオープンソースソフトウェアを開発するプロジェクトがあり，Web アプリケーション開発支援についても多くのプロジェクトが進められている．Web プログラミング・フレームワークは，品質の高い Web アプリケーションを容易に開発するための枠組みであり，Web プログラミング手順とそれをサポートする開発・実行環境からなる．本稿では，. Web アプリケーションの開発，保守を容易にする Web プログラミング・フレームワークについて解説する．種の処理が必要となる．これらの処理の記述を容易にし，かつ，サーバソフトウェアの保守を容易にすることが大. はじめに. 変重要となる．Web プログラミング・フレームワークは，. インターネットを利用したビジネスの利便性から，多. 品質の高い Web アプリケーションを容易に開発するため. くの Web アプリケーションが開発され，サービスに. の枠組みであり，Webプログラミング手順とそれをサポー. 供されている．Web アプリケーションの開発には，さ. トする開発・実行環境からなる．. まざまな統合開発環境が用いられる．現在，世界には. 70,000 を超えるオープンソースソフトウェアを開発するプロジェクトがある．その中でも，特に，Apache. Web アプリケーション. Software Foundation1）は，Web アプリケーションの開. ここでは，Web アプリケーションの構成について説. 発を支援するための多くのプロジェクトを進めている．. 明し，簡単なオンラインショップ Web アプリケーショ. 通常のプログラムとは異なり，一般に，Web アプリケー. ンの作り方について述べる．. ションでは，Web ブラウザからのフォームデータの受け取り，値の検証，エラーメッセージの表示，セッションの. Web アプリケーションの構成. 管理，データベースの操作，ビジネスロジック（業務処理），. Web アプリケーションは，Web ブラウザによりアク. ページの遷移，Webブラウザに返すページの生成等の各. セスされるサーバ上のソフトウェアである．図 -1 に示すように，①サーバ上の JSP ページ，サーブレット等のプログラムを指定して，Web ブラウザがリクエストを. ��ブラウザ ① リクエスト（URL）. ��サーバ/ サーブレットエンジン. レスポンス（XHTML）， ⑤. ②. サーバに送信すると，②サーバ上で，そのプログラムがデータベース. 実行され，③データベース等の検索，更新を行い，④処. ③. 理結果を表示するための XHTML 文書を生成し，⑤それをレスポンスとして Web ブラウザに送り返す．. ④. ��ページ/ サーブレット. 図-1 Webアプリケーションの構成. 1266. 45 巻 12 号情報処理 2004 年 12 月. たとえば，Web ブラウザ上でユーザが次の URL を指定すると， http://server/webap/login.jsp. Web ブラウザは，次のようなリクエストを Web サーバ.

(2) ��ページ. ��さん. ��. �� ページ. ��さん. Webサーバ. 1回目のリクエスト. ��. ��. 1回目のリクエスト. ��. �� (a) Webアプリケーション例. �� . �� . ２回目のリクエスト ��. ��. ２回目のリクエスト ��. ��. ��. ��. ��. 図-3 セッション管理の仕組み. (b) JSPページによる実現. 図-2 JSPによるWebプログラミング. 表示されるが，JSP ページを用いると，動的に変わる内容を表示することができる． login.jsp ページでは，XHTML 言語を用いて，フォー. （server マシンのポート番号 80）に対して送信する．. ム（<form> タグ）を記述し，その中に名前を入力する. GET /webap/login.jsp HTTP/1.1. ためのテキストフィールド（<input> タグ）を配置す. host: server. る．テキストフィールドに入力されたデータは name と. このリクエストは，リクエスト行とヘッダ行からなっ. いうパラメータが付けられ，form タグの action 属性で. ており，GET リクエストで， Web サーバの管理するリソー. 指定されたサーバ上の JSP ページ hello.jsp に送信される．. スのパス名 (/webap/login.jsp）を指定している．Web サー. hello.jsp ページでは，パラメータ name の値を受け取り，. バは，このリクエストを受け取ると，指定されたサーバ. "Hello" に続いてその値を表示している．. 上の JSP ページ（login.jsp）を実行し，JSP ページによって生成された XHTML 文書を，次のようなレスポンスと. セッション管理. して Web ブラウザに送り返す．. オンラインショップ，予約システム等の Web アプリ. HTTP/1.1 200 OK. ケーションでは，ユーザが Web サイトにアクセスす. Content-Type: text/html. ると，リンクされたページを次々と遷移しながら，購. <html>...</html>. 入，予約等の処理を行う．Web アプリケーション側では，. レスポンスは，ステータス行，（複数の）ヘッダ行，お. どのユーザからのアクセスであるかを認識し，これらの. よび，メッセージ本体からなる．Web ブラウザは，こ. 一連の処理（セッション）を管理する必要がある．. のレスポンスを受け取り，ヘッダ行からコンテンツ種別. 図 -3 に示すように，最初に entry.jsp ページにアクセ. を認識し，メッセージ本体として送られた XHTML 文書. スし，次に，そのページからリンクされている shop.. を解釈してウィンドウに表示する．. jsp ページにアクセスする場合を考える．最初に entry.. サーバ上に配置されたソフトウェアには，サーバから. jsp ページにアクセスしたときに，固有のセッション ID. ダウンロードされて Web ブラウザ上で動作するスクリ. を持つ session オブジェクトが生成される．たとえば，. プトやアプレット等のプログラムを含む場合もある．. Takao さんが entry.jsp ページにアクセスしたときには，. 6）. "6F255815D4" という ID を持つ session オブジェクトが. JSP ページを用いた Web プログラミング. 生成される．名前を入力して，次に，shop.jsp ページに. 図 -2(a) に示す簡単な Web アプリケーションを記述し. 遷移した場合には，Web アプリケーション側では，こ. てみる．最初の login ページに名前を入力し，「Continue」. のユーザ固有の session オブジェクトを識別し，その中. ボタンをクリックすると，次の hello ページに，入力さ. にユーザの名前を格納することができる．session オブ. れた名前を "Hello" に続いて表示する．JSP ページによ. ジェクトの識別が可能となるのは，ユーザがアクセスす. り実現した例を図 -2(b) に示す．JSP ページは，XHTML. るごとに，Web ブラウザが Web サーバに対してユーザ. 文書の中に <% ... %> タグで囲んで Java 言語のソー. に固有のセッション ID を送ってくるからである．. スコードを記述できるようにしたものである．また，. 図 -4 に示すように，最初に entry.jsp ページにアクセ. <%= ... %> タグで囲むと，式の値を出力することがで. スしたときに，Web サーバは，Set-Cookie というヘッ. きる．XHTML 文書では，常に同じ内容の Web ページが. ダにセッション ID を指定して，レスポンスを返す．こ IPSJ Magazine Vol.45 No.12 Dec. 2004. 1267.

(3) Webブラウザ. 1回目のリクエスト. Webサーバ. ①. �� ２回目のリクエスト. ② ③. (a) Webブラウザがクッキーを無効にしている場合 �� (b) Webブラウザがクッキーを有効にしている場合. 図-5 簡単なオンラインショップ例. �� 図-4 セッションIDの送信. �� . ��. れは，Web ブラウザに対する指示であり，次に同じサイトにアクセスする場合には，Cookie ヘッダにこのセッション ID を指定してリクエストを送信してもらうことを示す．次の shop.jsp ページへのリンクにも，セッション ID を付加する．ユーザが，次に shop.jsp ページへアクセスすると，Web ブラウザは，リクエストとともに，このセッション ID を Web サーバへ送信する．セッション ID を Web サーバへ送信する方法は 2 つある．(a) Web ブラウザによってはクッキー機能を無効にしている場合もあるので，この場合には，shop.jsp ページへのリンクに付加されたセッション ID を送信する．(b) クッキー機能が有効になっている場合には，Cookie ヘッダにセッション ID を指定してリクエストを送信する．その場合には，Web サーバから送り返される次のページ（check.. jsp）へのリンクには，セッション ID は付加されない．. Web アプリケーション例. �� . �� . 図-6 オンラインショップのJSPページ. 簡単なオンラインショップ Web アプリケーションを. JSP ページを用いて作成してみよう．図 -5 に示すように， ①ユーザがentryページで名前を入力すると， ②shopページで，フルーツの一覧を表示し，ユーザがその中の 1 つ. している．. を選択すると，③ check ページで，選択されたフルーツと，最初に入力された名前を表示する．. Web アプリケーション開発上の問題点. オンラインショップの 3 つの JSP ページを図 -6 に示す．. オンラインショップ Web アプリケーションの例は，. entry.jsp ページの response.encodeURL("shop.jsp") は，. 小さなプログラムであるため，一見すると，簡潔に記述. セッション ID を付加した URL を返す．shop.jsp ページの. されているように見える．しかし，大規模な Web アプ. session.setAttribute("who", who) は，送信されてきた. リケーションを開発する場合には，このプログラミング. 名前を session オブジェクトに格納する．また，"select. 方法には，プログラムの保守を困難にする，次に示すよ. name, image, price from fruit" という SQL 文を実行して，. うな問題点がある．. DB テーブル fruit からフルーツの名前，画像ファイル名，価格を取り出し，<table> タグを用いて，それらを表示. 1268. 45 巻 12 号情報処理 2004 年 12 月. • 1 つの JSP ページの中に，Web ページのデザイン.

(4) View Webブラウザ. JSPページ. XHTML. XHTML. Controller. Model. ��ページ (��. �� アクションフォーム ②. ① ④. 遷移先. ⑤ JSPページ. データベース. ③ アクション. フォーム正常 (�� エラー. アクション (�� エラー. 正常. ��ページ (��. 図-8 エラー時のページ遷移. ページ遷移定義 ��. 図-7 Strutsフレームワーク. ジ遷移定義等から構成される．① Web ブラウザがフォームデータを送信すると，② Struts は，フォームデータを格納したアクションフォームを生成し，③アクションを. （XHTML 記述の部分）とビジネスロジック（Java コー. 起動する．アクションでは，アクションフォームを受け. ド記述の部分）が混在しているため，読解性が悪い．. 取り，データベースにアクセスし，ビジネスロジックを. •「はじめに」で述べた，Web アプリケーションに必要. 実行する．④そして，遷移先となるページにリクエスト. な各種の処理（フォームデータの受け取り，値の検証，. を転送すると，Struts は，ページ遷移定義から実際に遷. エラーメッセージの表示，ページの遷移等）を記述す. 移する JSP ページを探し，⑤その JSP ページの出力結果. るためのプログラミング方法が統一化されておらず，. である XHTML 文書を Web ブラウザに送り返す．. 個々の処理を変更したり，拡張したりすることが容易ではない．. Struts プログラミング Struts を用いて，図 -2(a) のアプリケーションを記述. これらの問題を解決するために，いろいろなフレーム. してみる．Struts では，フォームデータの検証処理やリ. ワークが開発されており，本稿では，その中の Struts と. クエストの転送先をビジネスロジックから切り離して記. JWIG について紹介する．. 述することができる．図 -8 に示すように，フォームデータの検証時，あるいは，アクションの実行時にエラーが. MVC フレームワーク. あれば，最初の login ページを表示することとする．このアプリケーションは，図 -9 に示すように，login. MVC（Model-View-Controller）アーキテクチャは，ソ. ページを表示する JSP ページ（login.jsp），フォームデー. フトウェアをモデル（データの操作），ビュー（データ. タを格納する JavaBean（FormData.java），ビジネスロ. の表現），コントローラ（ユーザ入力制御）に分離して開. ジックを記述するアクション（LoginAction.java），結. 発するフレームワークである．3 つのコンポーネントの. 果を表示する JSP ページ（hello.jsp），および，ページ遷. 独立性が高くなり，ソフトウェアの保守が容易になる．. 移を定義する XML ファイル（struts-config.xml）からなる．パラメータ name の値は，プロパティ name を定義した FormData オブジェクトに自動的に格納される．. Struts 2）. は，リクエストを一元的に管理する独自の. validate() メソッドを記述することにより，このフォー. コントローラを提供し，MVC アーキテクチャに基づく. ムデータを検証することができる．ここでは，名前の. Web アプリケーション開発を支援する．Struts は次のよ. 入力がなかったときにエラーを返している．アクショ. うな特徴を持つ．. ンでは，パラメータ name の値を FormData オブジェク. Struts. （1）Web ページのデザインとプログラムロジックを分離して記述できる．. トから取り出し，"anonymous" が入力された場合には. "failure" ページへリクエストを転送し，それ以外の場. （2）入力データの検証が容易である．. 合には "success" ページへ転送する．実際には，ペー. （3）遷移するページ名をプログラムのロジックから切り. ジ遷移定義に記述されているように，各々，login.jsp，. 離して記述できる．（4）セッション管理が自動化されており，セッション ID の付加を意識する必要がない． Struts では，図 -7 に示すように，Web アプリケーショ. hello.jsp へ遷移する．struts-config.xml ファイルの表す処理フローをグラフィカルに表示・編集し，Struts アプリケーションの開発を支援する Eclipse プラグインに，. Easy Struts，Struts Studio がある．. ンは，JSP ページ，アクションフォーム，アクション，ペー IPSJ Magazine Vol.45 No.12 Dec. 2004. 1269.

(5) ��ページ(�� から生成されWebブラウザに送られるXHTML文書 �� アクションフォーム(�� アクション(�� . ケーションには複数のユーザが同時にアクセスするため，サーバプログラムは，複数のスレッドで動作し，個々のユーザを識別するためにセッションを管理している．しかし，Web ブラウザを操作している 1 人のユーザから見れば，Web アプリケーションも，クライアントマシン上の 1 つのスタンドアロンのプログラムと見かけは変わ 3）. らない．JWIG は，Web アプリケーションを 1 つの連続したスレッドと見なしてプログラミングすることを可能にした Java の拡張言語である．. JWIG プログラミング図 -2(a) に示した Web アプリケーションを少し拡張し，. JWIG を用いてプログラミングしてみる．この Web アプリケーションでは，①ユーザが名前を入力すると，②次のページに，入力した名前とユーザ番号を表示し，③最後のページに，"Goodbye" を表示する（図 -10(a)）．ユーザ番号は，この Web アプリケーションにユーザがアクセスするごとに 1 ずつ増えていく．プログラミングした例を図 -10(b) に示す．main() メソッドから Web アプリケーションが開始される．①まず，wrapper にフォームを埋め込み，そのフォームに. "Enter your name:" と，テキストフィールド name を埋め込んだ XHTML 文書を Web ブラウザに送り返す．②次. ��ページ(�� . に，テキストフィールド name から名前を受け取り，名. ページ遷移定義(�� . セッションを意識しないで済むため，サーブレットや. 図-9 StrutsによるWebプログラミング. 前とユーザ番号を埋め込んだフォームを送り返す．③最後に，"Goodbye" と名前を送り返す．. JSP ページを用いるよりも，プログラムの構造が簡単になる．また，JWIG では，XHTML 文書の各部分を，階層構造を持つテンプレートとして定義し，XHTML 文書の生成時に具体的な内容を埋め込む方式をとっている．このため，（1）フォームデータの受信時に，実行時エラーが起こらない．. シングルスレッドフレームワークここでは，クライアントマシン上の 1 つのスタンドアロンプログラムのように，Web アプリケーションを開発することができるシングルスレッドフレームワークに. （2）XHTML 文書を動的に生成するときに，実行時エラーが起こらない．（3）生成される XHTML 文書の構造が正しいことを，JWIG プログラムのコンパイル時に検証できる．という特徴がある．. ついて紹介する．. JWIG. その他のフレームーワーク. Web アプリケーションでは，次々と Web ページを. サーブレット，JSP ページ等を用いた Web アプリ. 遷移しながら，処理が進められる．サーバプログラム. ケーションの統合開発環境として，Sun Java Studio，. は，図 -1 に示したように，フォームから送信されたデー. Eclipse，Spring，Torque 等がある．GUI コンポーネント. タを受け取って処理を行い，その結果を表す XHTML 文. やウィザードを利用したビジュアルな統合開発環境と. 書を生成して，Web ブラウザに送り返す．Web アプリ. しては，Visual Studio .NET，Web Matrix，Macromedia. 1270. 45 巻 12 号情報処理 2004 年 12 月.

(6) �� . ��. ��. ��. ��. テンプレートメソッド方式テ �� キスト指向. イベントドリブン方式 �� . �� . (a) Webアプリケーション例 �� . その他. �� ビ �� ジ �� ュ �� アル指向. ��. ��. �� . 図-11 フレームワークの分類. クであり，Struts の中でリクエストの転送先となる JSP ページの作成に用いる．Tapestry は，Web ページのデザインとロジックを分離する Web アプリケーションフレームワークである．ページテンプレートで，動的表示部分を含む XHTML 文書を定義し，ページコンポーネントで，動的表示内容を定義する Java クラスを記述する．. (b) JWIG プログラム図-10 JWIGによるWebプログラミング. おわりに各種のフレームワーク，開発環境を，イベントハンドラによりアクションを記述するイベントドリブン方式，. Dreamweaver MX，Iron Speed Designer，Flex，BioPro. および，処理の流れの各部分をカスタマイズするテン. 等がある．これらの中には，データベーステーブルをナ. プレートメソッド方式に分類すると，図 -11 のようにな. ビゲーションするための多彩なコントロールや，テー. る．今後は，柔軟性・保守性の高さと，ビジュアルプロ. ブル一覧表示から詳細表示に遷移する 1 つのアプリケー. グラミング技術が焦点になっていくと考えられる．また，. ションに近いコンポーネントが提供されているものもあ. Web ページに表示されるコンテンツとしては，XHTML. 4）. る．BioPro では，ページの遷移や，テーブル，フィー. だけではなく，アプレットや Flash 等の動画像の導入も. ルド，フレーム等の参照関係が矢印で表示されるため，. ますます広がっていくと思われる．. アプリケーションを構成する各コンポーネントの間の関連や，処理の流れが分かりやすい． 5）. JavaServer Faces は，レンダリング機能とイベント処理機能を持つコンポーネントモデルを提供する Web アプリケーションフレームワークである．コンポーネントを用いて Web ページを設計し，送信ボタン等のクリック時の処理はイベントハンドラとして記述する．Struts と JavaServer Faces を連携した StrutsFaces や，. JavaServer Faces をサポートしたビジュアルな統合開発環境として Sun Java Studio Creator，WebSphere Studio，. Eclipse プラグイン JSF Studio 等がある．. 参考文献 1）The Apache Software Foundation, http://www.apache.org/ (2004). 2）The Apache Software Foundation: Struts, http://jakarta.apache.org/ struts/ (2004). 3）Christensen, A.S., Moller, A. and Schwartzbach, M.I.: Extending Java for High-Level Web Service Construction, ACM TOPLAS, Vol.25, No.6, pp.814-875 (2003). 4）Shimomura , T. , Takahashi , M. , Ikeda , K. and Mogami , Y.: Visual Design for Server-Side Programs and Program Generation, IPSJ Journal, Vol.45, No.7, pp.1737-1744 (July 2004). 5）Sun Microsystems, Inc.: JavaServer Faces, http://java.sun.com/j2ee/ javaserverfaces/ (2004). 6）下村隆夫 : Java によるインターネットプログラミング , 近代科学社 , pp.165-170 (2002). （平成 16 年 7 月 16 日受付）. このほかに，Tiles は，Web ページのレイアウト定義とコンテンツを分離した Web ページ生成フレームワー IPSJ Magazine Vol.45 No.12 Dec. 2004. 1271.

(7)