お客様が developerWorks に初めてサインインすると、プロフィールが作成されます。プロフィールで選択した情報は公開されますが、いつでもその情報を編集できます。お客様の姓名（非表示設定にしていない限り）とディスプレイ・ネームは、投稿するコンテンツと一緒に表示されます。

送信されたすべての情報は安全です。

developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

送信されたすべての情報は安全です。

My developerWorks：

通知：

サイン・アウト

言語を選択する：

XForms 入門、第 1 回: フォームのための新しい Web 標準

Chris Herborth, Freelance, Freelance Writer

Chris Herborth は、数々の賞を受賞したテクニカル・ライターであり、オペレーティング・システムやプログラミングに関する執筆に 10 年以上携わっています。彼は息子の Alex と遊んでいる時や妻の Lynette と時間を過ごしている時以外は、ビデオ・ゲームの設計やプログラミング、そして研究 (つまりゲームで遊ぶこと) を行っています。

概要： XForms は、次世代の Web ベースのデータ処理技術です。XForms は従来の HTML フォームを、XML データ・モデルとプレゼンテーション要素で置き換えています。この 3 回シリーズでは、XForms とその機能について、基本的な XForms モデルとフォーム、様々なタイプのコントロール、基本的なフォーム送信や高度なフォーム送信などを含めて解説します。今回の記事では、XForms の動作の実際と、XForms のサンプルが見られるように Firefox と Microsoft® Internet Explorer で XForms を設定する方法について説明します。

タグを付ける!

日付: 2006年 9月 12日
レベル: 中級
この記事の原文: 英語
アクティビティー： 3425 ビュー
お気軽にご意見・ご感想をお寄せください：

はじめに

XForms は、エクステンションやプラグインを使って一般的なブラウザーでサポートできるようになったこと、また IBM® Workplace Forms のような技術 (詳細については「参考文献」を参照してください) によって、急速に勢いを増しています。XForms の柔軟性と強力さは Web 開発者にとって魅力的であり、またフットプリントが小さなことやクライアントサイドでの処理はシステム管理者にとって魅力的です。W3C は現在、XForms 1.1 をワーキング・ドラフト文書としてレビュー中であり (1.0 は正式なインターネット勧告であり、XHTML や PNG、CSS などと同じレベルです)、また IBM は現在、機能や能力で XForms と競合するいくつかの XMLベースのフォーム標準を統合する作業の先頭に立っています。

この記事では、単純なテキスト検索から対話動作による現在の高度なフォームまで、フォームの進化について説明し、そして Web フォームにおける次のステップである XForms について説明します。また、XForms では何が異なるのかについて説明し、第 2 回への準備としてユーザーの環境を整えます。

この記事を読むことによって、単純な HTML フォームが単純な XForms フォームで置き換えられること、また XForms の機能を使ってローカル・ファイルにフォームのデータを保存できること (そして後からリロードできること) が理解できるはずです。

この記事で取りあげる XHTML 文書や XForms 文書を実際に自分で追いたい場合には、「ダウンロード」セクションにアーカイブへのリンクを用意してあります。このアーカイブには対象のファイルが含まれており、皆さん自身で XForms を試すための出発点として使うことができます。

またこの記事では、現在のバージョンの Firefox や Internet Explorer、Seamonkey、Mozilla などで直接 XForms を見るための XForms エクステンションもインストールします。もし皆さんが、こうした素晴らしい標準準拠のブラウザーのいずれかをまだインストールしていなければ、今のうちにインストールしておいてください。

上に戻る

なぜ XForms なのか

XForms を説明する前に、まずフォームの歴史を少し見てみることにしましょう。

World Wide Web の初期の頃、サーバーで実行している CGI プログラムにリクエストを送るためには単純なテキスト入力フォームが使われ、未知の世界に飛び出そうとするパイオニア達は、それによって多少の対話性を実現していました。Web が成熟するにつれ、Web サイトで表示されるデータ入力フォームは、次第に複雑なものへと成長しました。

最近では、特に e コマースのサイトやフォーラムでは、非常に複雑なフォームが無数にあります。これらはサーバー上で実行している PHP や Java™ コードのフロント・エンドの場合もあれば、ブラウザーで JavaScript が実行しており、Ajax 技術を使ってその結果をサーバーに送っている場合もあります。

残念なことに、HTML のフォームは、プレゼンテーションと内容とが入り交じった要素から作られています。文書構造とフォーマット要素とを混在させるプレゼンテーション・ベースのお粗末な HTML から、CSS でスタイリングされたクリーンな XHTML への移行が始まると、フォームのデータや動作をプレゼンテーションから分離するための方法が必要になってきます。

上に戻る

ブラウザーについて

Web Forms はどうなのか

Web Forms 2.0 (参考文献のセクションにリンクがあります) は、HTML による既存のフォーム機能の上に構築されており、XForms に見られる多くの機能が追加されていますが、XForms よりも単純な、後方互換性を重視した手法をとっています。XForms と Web Forms とを組み合わせ、来たるべき XHTML 2.0 仕様の一部にしようとする動きがあります。

XForms 標準は既に数年間にも渡って議論が行われてきていますが、現在は非常に多くのアプリケーションでサポートされており (XForms エクステンションをインストールすれば、Firefox でも Mozillaでも Seamonkey でも使えます)、HTML でのフォームの混乱に対して XML で置き換えることを狙っています。

他の一般的な Web ブラウザーは、プラグインによって XForms をサポートしています (例えば Internet Explorer 6 用の formsPlayer プラグイン (入手方法は参考文献を参照) など)。また、標準をサポートするブラウザーであれば、どのブラウザーでも FormFaces を利用することができます。FormFaces は、クライアント上で XForms と標準の HTML コントロールとの間の変換を行う、純 JavaScript による XForms 実装です。さらに、IBM Workplace Forms のような主要製品も XForms をサポートしています。

フォームのデータ・モデル (データが送信される際の動作や、初期値など) は、フォームのプレゼンテーションとは分離されています。同じプレゼンテーションであっても、スタイルシートや、あるいはユーザーのブラウザーにとって適切な何かに基づいて、異なった解釈がされます。例えば携帯電話上で実行しているブラウザーは、コントロールの表示手法が一般とは異なるかもしれません。携帯電話のユーザーにとっては、ポップアップの選択ボックスよりも、メニューとリストの方が使いやすいものです。

上に戻る

XForms の動作

ここで、ローカル・マシン上で実行している仮想のクエリー・エンジンに対してサーチ・ストリングを送信する、単純な HTML フォームを見てみましょう (リスト 1)。これは HTML 4.01 というよりも、実際にはむしろ XHTML であることに注意してください。XForms は、妥当な XML 文書 (XHTML など) を必要とします。XForm のバージョンの見方は、このすぐ後に説明します。また、皆さんの環境で適切に動作するようにするためには、URL に細工が必要な場合があることにも注意してください。

リスト 1. 単純な HTML フォーム (simple.xhtml)

                

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Search Form</title>
</head>
<body>
<h1>Search Form</h1>

<p>
Enter a search string, then click the Search button.
</p>

<form action="http://localhost/imaginary-search-engine" method="get">
    <p>
    Find: <input type="text" name="query"/>
    <input type="submit" value="Search"/>
    </p>
</form>
</body>
</html>

ご覧のとおり、リスト 1 は、標準的で 100% 妥当な XHTML Strict です。<form> セクションは太字で強調表示されています (訳注：実際には太字になっていないようです)。

この XHTML を現在の典型的な Web ブラウザーで描画すると、ちょっと基本的すぎるかもしれませんが、よく見慣れたものになります (図 1)。

図 1. Firefox で描画した、単純な HTML フォーム

図 1 に示すフィールドに何らかのテキストを入力してボタンをクリックすると、そのデータは、仮想的なサーチ・エンジンに送信される URL http://localhost/imaginary-search-engine?query=whatever-you-entered にエンコードされます。

リスト 2 は、XForms のバージョンを示しており、違いが強調表示されています。

リスト 2. 単純な XForms フォーム

                

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:xf="http://www.w3.org/2002/xforms">
<head>
<title>Search Form v2</title>
<xf:model>
    <xf:submission action="http://localhost/imaginary-search-engine" 
        method="get" id="submit-search"/>
</xf:model>
</head>
<body>
<h1>Search Form</h1>

<p>
Enter a search string, then click the Search button.
</p>

<p>
<xf:input ref="query"><xf:label>Find:</xf:label></xf:input>
<xf:submit 
submission="submit-search"><xf:label>Search</xf:label></xf:submit>
</p>
</body>
</html>

変更された部分は、以下の 3 つです。

「xf:」名前空間は、XForms 仕様による要素を追加します。
<head> 要素に、<xf:submission> を宣言する <xf:model> 要素が追加されています。これによって、get メソッドにアクション (仮想的なサーチ・エンジン) がバインドされ、後で使うために submit-search という名前がつけられます。
フォームのプレゼンテーション要素 (テキスト入力フィールドの場合は <xf:input>、送信ボタンの場合は <xf:submit>) は、今や単なるプレゼンテーション要素であり、フォームのフィールドを、描画されたページのどこに、どのように表示すべきかを示します。これらの要素は、<xf:model> 要素で宣言されるモデルを逆参照します。

下記は、XForms を使った場合の表示を示したものです (図 2)。Firefox 用の XForms エクステンションをインストールする方法に関しては、後で説明します。

図 2. Firefox で描画した単純な XForms

なんと、フォームはまったく同じに見えます。従来の HTML フォームの代わりに XForms を使っても、まったく何も失われず、しかも XML データ・モデルを使うことによる利点をすべて活用できるのです。

上に戻る

XForms を見るための設定

サンプル・アーカイブ (「ダウンロード」セクションにあります) をダウンロードした人は、XForms 版のフォームがブラウザーでうまく表示できないことに気が付いたかもしれません。

図 3. XForms をサポートしないブラウザーで表示した単純な XForms ページ

皆さんが使っている Web ブラウザーが、組み込みで XForms をサポートするまでは、いくつかある XForms 実装のどれかを使う必要があります (「参考文献」にあげた XForms の Web サイトを参照してください)。ここでは、便利な実装の 1 つである、Mozilla エクステンションのインストール方法について説明します。このインストール方法は現在のバージョンのMozilla や Firefox、Seamonkey に対して有効なので、皆さんは新たにブラウザーをインストールしたり、ブラウザーを切り替えたりする必要もありません。またここでは、Internet Explorer 6 用のプラグインのインストール方法についても説明します。

Firefox に XForms エクステンションを追加する

Firefox で Mozilla XForms Project ページ (「参考文献」を参照) にアクセスします。Latest Release という見出しの下にある、ダウンロード・ページへのリンクをクリックします。

XForms Project のダウンロード・ページは、このプラグインがエンド・ユーザー用のものではないことを警告し、その後で実際のダウンロード・ページへのリンクを表示します。それをクリックし、次に Install Now リンクをクリックします。

図 4. エクステンションのインストールに関する Firefox の標準的な警告

Firefox が警告ダイアログを表示します (図 4)。Install Now ボタンをクリックして XForms エクステンションをダウンロードし、インストールします。Firefox を再起動すると、エクステンションが有効になります (図 5)。

図 5. 新しいエクステンションを有効にするために再起動する

ブラウザーを再起動すると、先ほど見た、単純な XForms のサンプルをロードすることができます。今度は XForms 要素が適切に描画されるはずです。

Internet Explorer 6 に XForms プラグインを追加する

formsPlayer Web ページ (リンクは「参考文献」を参照) で Download fP for free リンクをクリックし、登録ページに進みます。E メール・アドレスなどのデータを入力し、Install formsPlayer リンクをクリックすると、プラグインがダウンロードされ、インストールされます。

IE はプラグイン・アーカイブをロードすると、URL の下に ActiveX コントロールに関する警告を表示します。この警告をクリックし、次に Install ActiveX Control をクリックします。IE は formsPlayer をダウンロードしてインストールします。IE のセキュリティー警告がポップアップ表示されたら、Install をクリックし、インストールに進みます。

formsPlayer がインストールされると、いくつかのサンプルへのリンクを持ったページにリダイレクトされます。これらのサンプルのどれかを表示し、インストールを確認します。

上に戻る

フォームは 1 つ、プレゼンテーションは複数

XForms 文書ではデータ・モデルとプレゼンテーションが分離されているため、ユーザーのブラウザーは、フォームの要素を、最も適切で最も使いやすい方法を使って描画することができます。

例えば、ユーザーがリストから1 つのアイテムを選択するように求められる場合、Web ブラウザーは、そのリストを、標準のラジオ・ボタンのグループとして表示するかもしれません。一方、携帯電話のブラウザーでは、同じリストがポップアップ・メニューとして表示されるかもしれません。その方が、携帯電話の操作キーを使ってナビゲートするには楽なはずです。

このためには特別な CSS は必要なく、ユーザーのブラウザーを検出するための JavaScript (多くの Web サイトでエラーを起こしがちな方法です) すら必要ありません。ブラウザーが XForms を実装することによって、自動的に処理されるのです。単純なHTML フォームでは、データとプレゼンテーションが入り交じって緊密に結合されているため、こうした対応は困難です。

XForms モデルは XML であるため、XSLT や、あるいは JavaScript (と DOM) などの技術を使ってモデルを表示することもできます。またそのモデルに使用できるインターフェースとしては、XForms をサポートしていないユーザーのための単純な HTML や XHTML から、独自の GUI まで、任意のものが可能です。

XML との緊密な統合

XForms 文書は妥当な XML (XHTML など) である必要があり、またデータ・モデルのインスタンス (何よりも、デフォルト値を提供するために使われます。この実際については、このシリーズの今後の記事で取り上げます) は XML 文書です。データ・モデルのインスタンスは、ユーザーのマシンやサーバーにロードされた、外部の XMLファイルからロードすることもできます。

このように XML と緊密に結合されているため、XForms データは XML 入出力をサポートする他の技術 (データベースなど) と容易に統合することができ、ユーザーに表示されるフォームとデータベースとの間にスクリプトを追加する必要もありません。

フォームをオフラインに保存し、後で送信する

興味深い点として、XForms を使うことによって、ブラウザーはフォームの内容 (フィールド内の任意データと、データ・モデルに保存される「隠れた」任意データ) をファイルに保存できるようになります。put メソッドを使って <xf:submission> 要素を追加すれば、このデータを XML ファイルとしてローカル・ファイルシステムやサーバー上に保存することができます。そして後からそのファイルを再度ロードし、保存前に行っていた部分から作業を継続することができます。しかも、スクリプトや、データベースへのアクセスを追加する必要はまったくありません。

これは XForms の持つ、もう 1 つの利点を示しています。つまり、1 つのフォームに関連付けた送信アクションを、いくつでも持てるのです (リスト 3)。HTML では、1 つのフォームに対して 1 つのアクションしか持つことはできません。

リスト 3. フォームに対してデータの保存とロードを追加する

                

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:xf="http://www.w3.org/2002/xforms">
<head>
<title>Search Form v3</title>
<xf:model>
    <xf:instance>
        <data>
            <query>Enter your search string here.</query>
        </data>
    </xf:instance>
    <xf:bind nodeset="query" required="true()"/>
    <xf:submission action="http://localhost/imaginary-search-engine" 
        method="get" id="submit-search"/>
    <xf:submission action="file:///tmp/XFormsQuery.xml"
        method="put" id="save-search" replace="none"/>
    <xf:submission action="file:///tmp/XFormsQuery.xml"
        method="get" id="load-search" replace="instance"/>
</xf:model>
</head>
<body>
<h1>Search Form</h1>

<p>
Enter a search string, then click the Search button.  
You can also save your search string for later.
</p>

<p>
<xf:input ref="query"><xf:label>Find:</xf:label></xf:input>
<xf:submit 
submission="submit-search"><xf:label>Search</xf:label></xf:submit>
</p>
<p>
<xf:submit 
submission="save-search"><xf:label>Save</xf:label></xf:submit>
<xf:submit 
submission="load-search"><xf:label>Load</xf:label></xf:submit>
</p>
</body>
</html>

ここでも、先ほど行った XForms の実験から変化した部分は太字で強調表示されています。変化の内容を少し詳しく見てみましょう。

まず、データ・モデル・インスタンスを追加しています (<xf:instance> 要素の内側)。この中には、データ (<data> 要素という適切な名前が付いています。ここでは空の xmlns 属性が必須であることに注意してください) に対するルートが含まれています。そしてこの中には、フォームに必要なデータ、つまりフォームの <xf:input> 要素の中を参照する <query> が含まれています。この <query> 要素の中にあるデータはデフォルトのクエリー・ストリングであり、描画される際には <xf:input> 要素の中に表示されます。

次に、<xf:bind> 要素があります。これによって <query> データが必要になります。もし <query> が空の場合には、どの <xf:submit> ボタンも何もしません。

最後に、2 つの新しい <xf:submission> アクションを <xf:model> に追加しました。このアクションによって、データを (put メソッドを使って) ファイルに保存することができ、またページ全体をリロードしなくても、そのデータをファイルからロードすることができます (get メソッドを使います。replace="instance" 属性は、データ・モデル・インスタンスのみをリロードします)。

ページの最下部には、さらに 2 つの <xf:submit> 要素が追加されているため、データを保存し、ロードすることができます。

図 6 は、これが Firefox でどのように見えるかを示したものです。Find フィールドに、データ・モデル・インスタンスに含めたデフォルトがどのように入っているか、また新しい Save ボタンと Load ボタンにも注意してください。

図 6. 改善された新しいフォーム

この時点で Save ボタンをクリックすると、データ・モデル・インスタンスを含んだ XFormsQuery.xml という名前のファイルが、/tmp ディレクトリーの中に作られます (図 4)。Loading 機能をテストするには、Find ストリングを変更してから Load をクリックします。そうすると Find ストリングは、/tmp にある XFormsQuery.xml ファイルからロードされた、オリジナルの Find ストリングで置き換えられます。

リスト 4. 保存されたデータ・モデル・インスタンス

                

chrish@dhcp1 [531]$ cat XFormsQuery.xml 
<?xml version="1.0" encoding="UTF-8"?>
<data xmlns:xf="http://www.w3.org/2002/xforms">
            <query>Enter your search string here.</query>
        </data>

出力をコントロールするためのオプションはいくつかありますが、ここでは使いませんでした。いずれにせよ、Save と Load の機能は動作しており、そのためにスクリプトは何も使われていません。

上に戻る

まとめ

XForms 標準によって、フォームのデータ・モデルとプレゼンテーションとの間に強力で新たな抽象化が追加され、また 1 つのフォームを使って、いくつかの異なる送信アクションを提供することができます。また XForms 要素はデータを検証でき、しかも XML と緊密に統合されているため、XML に対応した他の任意のアプリケーションのデータを直接扱うことができます。後で使うためにフォームのデータを保存することも、XForms では非常に容易です。

第 2 回では、基本的な XForms モデルとフォームの作成方法について解説する予定です。ご期待ください。

上に戻る

ダウンロード

内容	ファイル名	サイズ	ダウンロード形式
Part 1 sample code	xforms1.zip	2KB	HTTP

ダウンロード形式について

参考文献

学ぶために

W3C の XForms home を訪れてください。
XForms.org: The Nexus for Intelligent Web Apps には、XForms の宝庫として、様々な情報やリンクが用意されています。
この、XForms 入門シリーズの第 2 回を読んでください。
この、XForms 入門シリーズの第 3 回を読んでください。
XForms と似ていますが競合する、Web Forms 2.0 の仕様を見てください。
「XForms 入門」(devleoperWorks、2002年9月) は、この重要な技術の概要をうまくまとめています。
John Boyer が XForms に関して書いているブログ、Web Forms 2.0 and the future of XML content on the web を読んでください。
「SVGとXForms: 入門」(developerWorks、2003年11月) は、この 2 つの技術の概要を紹介し、両者の間にシナジー効果の可能性があることをハイライトしています。
O'Reilly Media から出版されている、Micah Dubinko の著による XForms Essentials を読んでください。
XForms に関して調べるための出発点として、XML.com の Ten Favorite XForms Engines を読んでください。
W3C の XForms に関するインタラクティブでクロス・プラットフォームのチュートリアルを利用するために、XForms institute を訪ねてください。
XForms の起源と目的の歴史的な概要を知るために、SGML の歴史についての簡潔な説明を見てください。
XML に関する基礎を学ぶために、チュートリアル、「Introduction to XML」(developerWorks、2002年8月) を利用してください。
developerWorks の XML ゾーンでは、XML に関するすべてを学ぶことができます。