本文へジャンプ

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む


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

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

  • 閉じる [x]

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

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

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む


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

  • 閉じる [x]

Firefox での XForms

使いながら学ぶ

Elliotte Rusty Harold (elharo@metalab.unc.edu), Adjunct Professor, Polytechnic University
Photo of Elliot Rusty Harold
Elliotte Rusty Haroldはニューオーリンズ出身であり、時たま、おいしいgumbo(オクラ入りのスープ)を食べに帰っています。ただし現在はニューヨークのブルックリン近郊のProspect Heightsに、妻のBethと猫のCharm(charmed quarkからとりました)とMarjorie(義理の母の名前からとりました)と一緒に住んでいます。彼はPolytechnic Universityのコンピューター・サイエンスの非常勤教授として、Java技術とオブジェクト指向プログラミングを教えています。彼のCafe au Lait Webサイトは、インターネット上で最も人気のある独立系Javaサイトの一つです。また、そこから派生したCafe con Lecheは、最も人気のあるXMLサイトの一つです。彼の最近の著作には『Java I/O, 2nd edition』があります。現在はXML処理用のXOM APIやJaxen XPathエンジン、Jesterテスト・カバレッジ・ツールなどに取り組んでいます。

概要: 実験的な Mozilla XForms の拡張機能を使うと、皆さんのブラウザーで今日から XForms を処理することができます。XForms はまだ公開のインターネット上で使えるほど広くデプロイされていませんが、一部のイントラネット・アプリケーションには適しているかもしれません。この記事では、現在 Firefox と Mozilla XForms プラグインでサポートされている、基本的な XForms 処理について説明します。

日付:  2007年 1月 23日
レベル:  初級 この記事の原文:  英語
アクティビティー: 2522 ビュー
お気軽にご意見・ご感想をお寄せください: 


XForms を利用することで、Web にデプロイされるアプリケーションの開発を迅速に、容易に行うことができます。XForms のクリーンなアーキテクチャーによって、アプリケーションはより強固に、よりスケーラブルに、より高速に、そしてよりセキュアになります。1 つの小さな事実を除けば、XForms を使っての開発は難しいものではありません。その事実というのは、実は現在どのブラウザーも、そのままでは XForms をサポートしていないという点です。言うまでもなく、この事実によって、XForms でできること、また XForms をデプロイできる場所は大きく制限されています。

しかし、回避策があるのです。市場をリードするブラウザーである Windows® Internet Explorer® にも Firefox にも、XForms サポートを追加するためのブラウザー・プラグインが存在しています。また XForms プロセッサーも Flash で書かれており、Flash ランタイムを持つ任意のブラウザーにデプロイすることができます。そして最後に、あらゆる XForms マークアップを従来の HTML (Hypertext Markup Language) と JavaScript プログラムにプリコンパイルする、サーバー・サイド・ソリューションがあります。

こうしたソリューションは、どれも何かしら推奨に値するものを持っていますが、XForms を初めて学ぶには、ブラウザーの中にサポートが直接組み込まれていると非常に便利です。そうすれば、ちょっとしたフォームを書き、それをプレビューすることができます。そしてフォームをもう少し変更し、再度プレビューすることができます。まだフォームが完璧でなかったら、さらに手を加え、そしてリロードします。Chiba のようなサーバー・サイド・ソリューションはデプロイメントには便利ですが、学ぶという目的では、ブラウザーを使った迅速な開発サイクルに勝るものはありません。そこでこの記事では、Firefox で Mozilla XForms プラグインを使う方法に焦点を当てることにします。

プラグインをインストールする

この記事の執筆時点で、Mozilla XForms プラグインの最新バージョンは 0.7.0.1 であり、Firefox 1.5 以降で動作します。プラグインのインストールは簡単です。単純に Firefox を開き、https://addons.mozilla.org/firefox/824/ に行き、緑色の大きな Install now ボタンをクリックするだけです (図 1)。


図 1. Mozilla XForms プラグインをインストールする

そうすると図 2 に示すダイアログが表示されます。このプラグインは現在署名されていませんが、私はベータ・ソフトウェアと同じくらい安全だと思っています。(私はこれまで、DoS 攻撃への脆弱性を高める不正形式のコンテンツをロードしてブラウザーをクラッシュさせたことが何度かあります。そのため、このプラグインを本格的な稼働用として推奨する気はありません。) このコードの目標は、最終的に Firefox と Mozilla のすべてのダウンロードの標準部分となることですが、実際にそうなるかどうかは確かではありません。


図 2. Mozilla XForms ダイアログをインストールする

プラグインを有効にするには、Firefox を再起動する必要がありますが、必要なことはそれだけです。これで、XForms で作成された最初のフォームを書き、プレビューする準備ができました。


XForms よ、こんにちは

必要なものがすべて正しくインストールされ、実行しているのを確認するために、単純な Hello World の例から始めることにします。このフォームはサーバーとの対話動作すら行わず、単純に 1 つのフィールドから別のフィールドにデータをコピーするだけです。このフォームを含んだ XHTML (Extensible Hypertext Markup Language) 文書をリスト 1 に示します。


リスト 1. 単純な XForm を含んだ XHTML 文書
                
<html xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:xforms="http://www.w3.org/2002/xforms">
   <head>
    <title>Hello XForms!</title>
    <xforms:model>
     <xforms:instance xmlns="">
      <Name/>
     </xforms:instance>
    </xforms:model>
   </head>
   <body>
    <xforms:input ref="/Name">
      <xforms:label>Type your name in the box and press tab: </xforms:label>
    </xforms:input>
    <hr />
    <xforms:output value="concat('Hello ', /Name)">
      <xforms:label>Output: </xforms:label>
    </xforms:output>
   </body>
</html>

このコードを、hello.xhtml (hello.html ではありません) という名前のファイルに保存します。このファイルを Firefox で開きます。そうすると入力フィールドに入力することができ、Tab キーを押すと、図 3 のような結果が見えるはずです。(入力フィールド以外にフォーカスを置きさえすれば、Tab キーを押す必要はありません。)


図 3. Hello XForms

また、このファイルを Web サーバーに置き、URL からファイルをロードすることもできます。しかしサーバーはこの文書を、text/html ではなく application/xhtml+xml というメディア・タイプで送信する必要があります。そうしないと Firefox は XForm を認識しません。

このフォームには、モデルと入力、そして出力という 3 つの部分があります。もっと複雑なフォームでは、複数の入力や出力を含め、さらにたくさんの部分がありますが、最初はこれで十分です。

このモデルは単純に XML (Extensible Markup Language) 要素であり、さまざまな入力や出力のどれもが、XPath 式を使ってこの要素を参照することができます。input 要素の ref 属性は、その入力がモデルのどの部分にデータを保存するかを指定します。ここでは 1 つの入力が Name 要素にデータを保存します。

output 要素は、この要素の value 属性のテキストを表示します。value 属性は XPath の concat 関数を使って、リテラル・ストリング「Hello」をモデルの中の Name 要素の現在の値と組み合わせます。ここには、算術計算やその他の基本的な計算を行う XPath 式を含め、任意の XPath 式を置くことができます。あらゆる演算ごとに必ずサーバーとの間を往復する必要はありません。


収集すべきデータを選択する

新しい XForms を設計する場合には、どのようにデータを表示したいかではなく、どんなデータを収集したいかを尋ねることから始めるのが普通です。この記事では、クレジットカードの情報を収集する例を示すことにします。このようなフォームは、e コマースのサイトではいくらでも見ることができます。このフォームは次のような情報を収集します。

  • クレジットカードに書かれているとおりの名前、ストリング
  • カード番号、13 桁または 16 桁のストリングで、チェック・ディジットを持ちます
  • CVV2、つまりカード識別番号 (American Express は 4 桁、Visa、MasterCard、Discover Card は 3 桁)
  • 有効期限、月および年
  • 住所の 1 行目、ストリング
  • 住所の 2 行目、ストリング
  • 都市名、ストリング
  • 州の名前、2 文字のストリングを 50 以上列挙した中の 1 つ (ただしここでは、短い例にするために 4 つの州のみに制限しています)
  • 郵便番号、数字とハイフンから成る 5 文字あるいは 10 文字のストリング
  • クレジットカード・タイプ (4 つのストリングを列挙したリスト)

私はすべての情報に型を割り当てました。これは検証のために重要です。この大部分は (すべてではありませんが)、XML スキーマで処理することができます。

HTML のフォームは通常、データを x-www-formurlencoded クエリー・ストリングで送信します。XForms も、URL の一部として渡される安全な GET リクエストに x-www-formurlencoded を使います。これは、名前 = 値 のペアのみから成る、限定的なフォーマットです。しかし、POST リクエストと PUT リクエストに関しては、XForms は完全な XML 文書を送信します。この文書用のスキーマはユーザーの自由であり、受信側の処理に便利なように、ユーザーの好きな形式の文書にすることができます。例えば、Atom 文書であっても SOAP 文書であっても、あるいは収集する必要があるデータ用にカスタム設計したフォーマットであっても構いません。この例の場合では、単純なフラットリストで十分です。これをリスト 2 に示します。


リスト 2. (偽の) クレジットカード・データを含む XML 文書
                
<CreditCardInfo>
  <Name>Elliotte Rusty Harold</Name>
  <Number>5123 4567 8901 2345</Number>
  <CVV2>314</CVV2>
  <Expiration>2007-01</Expiration>
  <Address1>6 Metrotech Center</Address1>
  <Address2>Dept. of Computer Science</Address2>
  <City>Brooklyn</City>
  <State>NY</State>
  <Zip>11201</Zip>
</CreditCardInfo>

スキーマはこの文書を、クライアント・サイドでもサーバー・サイドでも検証することができます。リスト 3 は、考えられるスキーマの一例です。


リスト 3. クレジットカード・データ用の W3C スキーマ
                
<?xml version="1.0" encoding="UTF-8"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">

  <xs:element name="CreditCardInfo">
    <xs:complexType>
      <xs:sequence>
          <xs:element name="Name" type="xs:normalizedString"/>
          <xs:element name="Number" type="CardNumber"/>
          <xs:element name="CVV2" type="CVV2"/>
          <xs:element name="Expiration" type="xs:gYearMonth"/>
          <xs:element name="Address1" type="xs:normalizedString"/>
          <xs:element name="Address2" type="xs:normalizedString" minOccurs="0"/>
          <xs:element name="City" type="xs:normalizedString"/>
          <xs:element name="State" type="State"/>
          <xs:element name="Zip" type="ZipCode"/>
      </xs:sequence>
    </xs:complexType>
  </xs:element>

  <xs:simpleType name="CardNumber">
    <xs:restriction base="xs:string">
      <!-- 13 or 16 digits with optional spaces -->             
      <xs:pattern value="(\d\d\d\d ?)(\d\d\d\d ?)(\d\d\d\d ?)(\d(\d\d\d)?)"/>
    </xs:restriction>
  </xs:simpleType>

  <xs:simpleType name="ZipCode">
    <xs:restriction base="xs:string">             
      <xs:pattern value="\d\d\d\d\d(-\d\d\d\d)?"/>
    </xs:restriction>
  </xs:simpleType>

  <xs:simpleType name="CVV2">
    <xs:restriction base="xs:string">             
      <xs:pattern value="\d\d\d\d?"/>
    </xs:restriction>
  </xs:simpleType>

  <xs:simpleType name="State">
    <xs:restriction base="xs:token">
      <xs:enumeration value="AA"/>
      <xs:enumeration value="AK"/>
      <xs:enumeration value="AZ"/>
      <xs:enumeration value="NY"/>
      <!-- other states follow... -->
    </xs:restriction>
  </xs:simpleType>

</xs:schema>

Firefox は、無効なデータを送信しません (困ったことに、Firefox は有益な情報を何もユーザーにフィードバックしません。つまり無効データなので送信しなかった、あるいはどのフィールドに無効データが含まれていたか、どのように修正すべきか、などをユーザーに知らせないのです。) しかしそれでもサーバーは、サーバー自身で、有効性を検証するべきです。クライアントは有効なデータしか送ってこないものと信頼しきっているサーバーは、ハッキングされるのを望んでいるのと同じです。

最後に、このスキーマでチェックされない制約や規則が数多くあります。最も顕著なのは、このスキーマは、そのクレジットカードを使って買い物をすることができるかどうかをチェックしません。またクレジットカードのチェック・ディジットの検証もしません。制約を検証するためには、何らかのコードを従来のプログラミング言語で書く必要があるでしょう。


モデル

どんなデータを収集するかを決めたので、そのデータのモデルを作る必要があります。モデルは単なるサンプル・インスタンス文書であり、フォーム入力データは削除されていますが、すべてのマークアップと静的テキストはそのままです。リスト 4 はこのモデルを示しています。このモデルは XForms の model 要素で構成され、model 要素は instance と submission という 2 つを含んでいます。instance はリスト 2 のサンプル・インスタンス文書を含んでいますが、実際のデータは削除されている点が異なります。データは、フォームへの入力によって埋められます。あとは構造だけです。

submission 要素は、データの宛先となる URL と、データを送信するための GET あるいは POST メソッドを指定します。

モデルは、入力文書に対するスキーマを schema 属性の中で参照することもできます。しかしこれは必須ではなく、いずれにせよ当面は Firefox では無視されます。


リスト 4. クレジットカード・データの XForms モデル
                
<xforms:model schema="cc.xsd">
  <xforms:instance>
    <CreditCardInfo xmlns=">
      <Name />
      <Number />
      <CVV2 />
      <Expiration />
      <Address1 />
      <Address2 />
      <City />
      <State />
      <Zip />
    </CreditCardInfo>
  </xforms:instance>
  <xforms:submission action="http://example.com/xform-processor" 
                     method="post" id="submit" />
</xforms:model>

モデルは、title や meta タグ、その他 head にある他の要素と共に、このフォームを含む XHTML 文書の head の中に置かれます。


フォーム

HTML のフォームの場合と同様、input は基本要素です。各入力コントロールは、そのボックスに何を入力すべきかをユーザーに伝えるためのラベルを持つ必要があります。これは、input 要素の label 子要素によって提供されます。一例として、下記は name に対する単純な入力フィールドです。

<xforms:input ref="Name">
  <xforms:label>Credit Card Number:</xforms:label>
</xforms:input></xforms:label>

input 要素は、他のインライン要素やブロック要素 (strong や p など) と同じように、本体の任意の場所に置くことができます。HTML のフォームとは異なり、すべての入力フィールドを含むマスター・フォーム要素はなく、どこでも好きな場所で、自由に HTML と混合させることができます。

また、モデルの submission 要素で指定される URL にフォームを送信する、送信コントロールも必要です。これは下記のように、単に label を持つ submit 要素にすぎません。

<xforms:submit submission="submit">
  <xforms:label>Buy Now!</xforms:label>
</xforms:submit>

リスト 5 は、このコードを示しています。


リスト 5. クレジットカード・データ用の XForms 入力フィールド
                
<xforms:input ref="Name">
  <xforms:label>Name as it appears on the credit card:</xforms:label>
</xforms:input>

<xforms:input ref="Number">
  <xforms:label>Credit Card Number:</xforms:label>
</xforms:input>

<xforms:input ref="CVV2">
  <xforms:label>CVV2:</xforms:label>
</xforms:input>

<xforms:input ref="Expiration">
  <xforms:label>Expiration date:</xforms:label>
</xforms:input>

<xforms:input ref="Address1">
  <xforms:label>Address Line 1:</xforms:label>
</xforms:input>

<xforms:input ref="Address2">
  <xforms:label>Address Line 2:</xforms:label>
</xforms:input>

<xforms:input ref="City">
  <xforms:label>City:</xforms:label>
</xforms:input>

<xforms:input ref="State">
  <xforms:label>State:</xforms:label>
</xforms:input>

<xforms:input ref="Zip">
  <xforms:label>Zip code:</xforms:label>
</xforms:input>

<xforms:submit submission="submit">
  <xforms:label>Buy Now!</xforms:label>
</xforms:submit>

図 4 は、できあがったフォームを Firefox で表示したものです。


図 4. クレジットカード入力フォーム

このフォームはまだ醜悪ですが、すぐ後で CSS (Cascading Style Sheets) スタイルシートを使って美しく仕上げることにします。


他のコントロール

input コントロールの意味は、「ユーザーからテキスト・ストリングを取得する」ことです。しかしフォームを使って行われる汎用操作は他にもたくさんあります。特に XForms では、汎用のフォーム・コントロールとして 10 種類を定義しており、次のようにそれぞれ別の要素として示されます。

  • 1 行のテキストを入力する: input
  • 処理用にフォームを送信する: submit
  • 編集不能な、計算済みの値をユーザーに表示する: output
  • リストから 1 つの項目を選択する: select1
  • リストからゼロ個以上の項目を選択する: select
  • ユーザーから複数行のテキストを取得する: textarea
  • ユーザーに表示せず 1 行のテキストを入力する: secret
  • ファイルを選択する: upload
  • ある範囲の値から選択する: range
  • スクリプトを起動する: trigger

大部分のコントロールは、独特のウィジェットで表現されます。例えば Firefox では、trigger にはボタンを、range にはスライダーを、upload コントロールには標準のファイル・オープン・ダイアログ・ボックスを使います。secret コントロールは input コントロールとまったく同じ、単なるテキスト・フィールドですが、ユーザーが入力するものが画面上では黒丸で表示される点が異なります。ブラウザーが異なると、同じ基本タイプのデータをユーザーに入力させる点は同じですが、表示は少し異なります。

例えば、あるブラウザーは select1 コントロールをポップアップ・メニューあるいはコンボ・ボックスとして表示するかもしれず、別のブラウザーはラジオ・ボタンを使うかもしれず、3 番目のブラウザーはスクロール・リストを使うかもしれません。さらに 4 番目のブラウザーは、リストの中の項目の数によって、それ以外の選択肢を選ぶかもしれません。フォーム自体は、選択肢の表示方法についての要求はありません。フォームはブラウザーに対して、何らかの方法でエンド・ユーザーに選択肢を表示するように、そしてその選択肢のリストから 1 つの項目を選べるようにすることだけを要求するのです。

これまでに示した 3 つのコントロール以外で、この例に非常に適しているのが select1 です。このコントールは、州の入力に最適です。ユーザーにはテキストを入力させたくありませんし、リストから 1 つの州のみを選択できるようにしたいのです。リスト 6 に示すように、個々の選択肢は select1 要素の、item という子供です。


リスト 6. 州をリストする select1 コントロール
                
<xforms:select1 ref="State">
  <xforms:label>State:</xforms:label>
    <xforms:item>
      <xforms:label>AA</xforms:label>
      <xforms:value>AA</xforms:value> 
    </xforms:item>
    <xforms:item>
      <xforms:label>AK</xforms:label>
      <xforms:value>AK</xforms:value> 
    </xforms:item>
    <xforms:item>
      <xforms:label>CA</xforms:label>
      <xforms:value>CA</xforms:value> 
    </xforms:item>
    <xforms:item>
      <xforms:label>NY</xforms:label>
      <xforms:value>NY</xforms:value> 
    </xforms:item>
    <!-- more states follow -->
</xforms:select1>

図 5 は、このコンロールを Firefox で表示した様子を示しています。


図 5. 州を選択するための select1 コントロール

各項目にはラベルと値があります。この例では両者を同じにしてありますが、必ずそうする必要はありません。ラベルはエンド・ユーザーに表示されます。値は、フォームを送信する際にサーバーに送信されます。例えばサイトを翻訳する際に、ラベルはローカライズしたいけれども値は同じままにしたいかもしれません。あるいは、ユーザーには州の完全な名前を表示し、サーバーには省略形のみを送ることもできます。例えば下記を見てください。

<xforms:item>
      <xforms:label>Alabama</xforms:label>
      <xforms:value>AA</xforms:value> 
    </xforms:item>


コントロールの表示形式

XForms は、入力コントロールの表示形式に関しては何も要求がありません。図 4 では、従来の GUI (graphical user interface) のテキスト・フィールドとして入力コントロールが表示されています。他の環境では、ユーザーが 1 行のテキストを入力できさえすれば、非常に異なった形式で表示されるかもしれません。しかしコントロールによっては、単純な 1 行のテキストよりも制約を厳しくする必要があります。例えば有効期限のフィールドは、特定フォーマットでの実際の日付しか受け付けないかもしれません。XForms の実装では、想定されるデータのタイプに関する知識を利用することで、同じコントロールに対して異なるウィジェットを表示することが許されています (ただし必須ではありません)。例えば、もし想定される日を Firefox が知っている場合には、通常のテキスト・フィールドの代わりに図 6 のようなカレンダー・コントロールをユーザーに表示することができます。


図 6. XForms のカレンダー・コントロール

Firefox はインスタンスのスキーマを読み取り、どの種類のコントロールを提供すべきかを判断します。ただしその文書がスキーマを持っていない場合にも、ある特定のタイプを特定のコントロールにバインドするための方法がいくつかあります。最も単純な方法は、コントロール要素に xsi:type 属性を追加する方法です。下記はその一例です。

<xforms:input ref="Expiration" xsi:type="xs:date"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  <xforms:label>Expiration date:</xforms:label>
</xforms:input>

あるいは、モデルの中の関連要素に xsi:type 属性を置く方法もあります (リスト 7)。この場合、xsi:type 属性は、この要素にバインドされるすべてのコントロールに適用されます。


リスト 7. expiration 要素が type date を持つ
                
<xforms:model
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:xs="http://www.w3.org/2001/XMLSchema">
  <xforms:instance>
    <CreditCardInfo xmlns=">
      <Name />
      <Number />
      <CVV2 />
      <Expiration xsi:type='xs:date'/>
      <Address1 />
      <Address2 />
      <City />
      <State />
      <Zip />
    </CreditCardInfo>
  </xforms:instance>
  <xforms:submission action="http://example.com/xform-processor" 
       method="post" id="submit" includenamespaceprefixes="/>
</xforms:model>

最後に、モデルの中に xforms:bind 要素を追加することもできます (リスト 8)。


リスト 8. expiration 要素を type date にバインドする
                
<xforms:model xmlns:xs="http://www.w3.org/2001/XMLSchema">
  <xforms:instance>
    <CreditCardInfo xmlns=">
      <Name />
      <Number />
      <CVV2 />
      <Expiration />
      <Address1 />
      <Address2 />
      <City />
      <State />
      <Zip />
    </CreditCardInfo>
  </xforms:instance>
  <xforms:bind  nodeset="Expiration" type="xs:date" />
  <xforms:submission action="http://example.com/xform-processor" 
       method="post" id="submit" includenamespaceprefixes="/>
</xforms:model>

このようにバインディングする利点は、bind 要素がもっと複雑な XPath 式を nodeset 属性の中で使うことができ、それによっていくつかの入力を同時にバインドできることです。

どの方法を使うにせよ、そのタイプ用に特別に設計されたコントロールがある場合には、Firefox はそのコントロールを表示します。もし特別なコントロールがない場合には、汎用のテキスト・フィールドを使います。つまり目標は、高度な機能を持たないブラウザーでもフォームを表示できるようにした上で、もしブラウザーが必要とする場合には、より複雑な機能を実装できるようにすることなのです。


スタイル

.xf-value

ここで使われている .xf-value セレクターは、入力フィールドの値をスタイリングしますが、フィールドのラベルはスタイリングしません。実はこれは、現在の CSS3 ドラフトと一貫性がありません。この例は実際には ::value 疑似クラスを使って下記のようにすべきなのです。

input::value { width: 20em; }
#ccnumber::value { width: 18em }
#zip::value { width: 12em }
#state::value { width: 3em  }

しかし Firefox は、まだこの構文をサポートしていません。

これまで示したフォームは、どれも非常に醜悪なものでした。CSS と HTML を使うことで、フォームの見栄えを良くすることができます。リスト 9 は単純な CSS スタイルシートであり、ラベルのフォントを変更し、またフォーム・フィールドを整然と表示します。


リスト 9. クレジットカード・フォームのための CSS スタイルシート
                
 @namespace xforms url("http://www.w3.org/2002/xforms");

xforms|label {
   font-family: Helvetica, Geneva, Lucida, sans-serif;
   font-weight: bold;
   width: 32ex;
   text-align: right;
   padding-right: 1em;
   padding-bottom: 0.8ex;
}

xforms|input, xforms|select1, xforms|submit {
   display: table-row;
}

xforms|input xforms|label, xforms|select1 xforms|label  {
   display: table-cell; 
}

.xf-value { width: 20em; }

#ccnumber .xf-value { width: 18em }
#zip      .xf-value { width: 12em }
#state    .xf-value { width: 3em  }

/* color invalid data red */
*:invalid  {
   background-color: red;
}

図 7 はでき上がったページを示しています。


図 7. スタイリングされたフォーム

図 7 は、今日よくある Web サイトで見られるような、適切に設計された HTML フォームほどスマートではありません。しかしそれは単に私自身の限界によるものです。私はライターでありプログラマーであって、グラフィック・デザイナーではありません。このフォームを少し CSS を経験したことのある優秀なデザイナーに渡せば、即座にもっと魅力的なレイアウトにしてくれるはずです。実際、デザイナーにとっては、XForms には事前定義された描画セマンティクスがないため、XForms で作業する方が HTML のフォームで作業するよりもずっと容易なはずです。すべてが CSS で指定可能なのです。個人的に言えば、私はテーブルを使ってレイアウトしない限り、これほど立派な HTML フォームを作れませんでした。それとは対照的に、約 15 分でこのスタイルシートをまとめることができました。本職のデザイナーであればどんなことができるか、想像してみてください。

こうしたコンサーンの分離は、XForms や XML など、汎用のマークアップ全般に共通する大きな利点です。デザイナーはレイアウトとフォーマットに専心することができ、実際の XHTML コードや XForms コードに触れる必要がありません。ページの作者はコンテンツに集中すればよく、どのように表示されるかを心配する必要はありません。それぞれの作業者が、他の作業者に影響を与えることなく、最も得意な部分に集中することができます。つまりこうした分離によって、ファイルをロックしたり他の人の作業が終わるのを待ったりする必要がなくなり、各自がフルスピードで作業を行えるのです。


制約

Mozilla XForms プラグインは、XForms 1.0 の大部分と、ここで説明した機能のすべてをサポートしています。しかし、まだ完全ではありません。現在最も重大な制約として、下記をあげることができます。

  • XForms は XHTML 文書の中にしか埋め込むことができず、この文書は application/xhtml+xml として扱う必要があります。XForms を他の種類の XML 文書に埋め込むこともできますが、HTML 文書内部の XForms も、text/html として扱われる XHTML 文書も、サポートされていません。
  • フォームの返送先は、元々そのフォームをダウンロードしたサーバーのみです。フォームを任意のサーバーに送信することはできません。
  • 範囲コントロールはバグが多く、動作しないことがよくあります。
  • Firefox は、CSS3 の疑似要素 (::value、::repeat-item、::repeat-index) をまだサポートしていません。代わりに Mozilla 専用のエクステンション (xf-value、xf-repeat-item、xf-repeat-index) を使う必要があります。必要であれば、両方を使うこともできます。そうすれば、そのフォームは Mozilla でも Mozilla 以外のブラウザーでも適切に表示されます。
  • 検証エラー・メッセージが非常に貧弱であり、皆無に等しいと言ってよいほどです。フォームが失敗しても何が悪かったのかは表示されないので、スキーマを提供しても、おそらくユーザーを混乱させるだけです。当面は、検証をサーバーに置く必要があります。

プラグインのバージョン 1.0 がリリースされる頃には、XForms 1.0 と、もしかすると CSS3 も完全サポートされるはずです。


まとめ

XForms は従来の HTML のフォームよりも、フォームをデザインし、レイアウトする手段として強力なだけではなく、容易な手段でもあります。コンテンツが表示と分離されているため、CSS の効果を最大限に利用することができます。さらに、フォーム要素をページ上の任意の位置に、任意のマークアップと混在させて置くことができます。そして最後に、大量の JavaScript コードが必要な、フォームのための小細工 (あるフィールドにユーザーがデータを入力したら別のフィールドを更新する、など) は、XForms では、ごくわずかな宣言コードで済みます。

私はまだ、この記事でようやく XForms の実力を検証し始めたところです。この記事が、皆さんにとっての出発点となれば喜ばしい限りです。XForms は従来の HTML フォームとは異なり、また使いこなすには学習が必要です。ただし、そのための学習曲線は急峻ではありません。最も容易な学習方法は、Web ブラウザーの中で直接フォームを書き、テストすることです。Mozilla XForms プラグインを備えた Firefox は無料であり、容易に使うことができます。

クライアント・サイドでの XForms 処理は、XForms がもっと広くブラウザーで採用されるまで、一般向けの公開サイトでは不可能です。しかしだからといって、今すぐ皆さんのイントラネットで採用するのが無理とは限りません。皆さんが既に Firefox を使っているのであれば (もし使っていなければ、ぜひ使うべきです)、必要なものは単純なプラグインのみです。それがインストールできれば、XForms の持つ強力さとスピード、そして柔軟性をフルに活用できるのです。


参考文献

学ぶために

製品や技術を入手するために

  • この記事で解説したプラグインは、Mozilla XForms プロジェクトが作成したものです。このプロジェクトの Web サイトには、現状での仕様との違いについてのドキュメンテーションが含まれています。こうした違いは 1.0 までに修正されるはずです。

  • 皆さんの次期開発プロジェクトを IBM trial software を使って構築してください。developerWorks から直接ダウンロードすることができます。

  • IE で XForms を描画できるオープンソースのコントロール、MozzIE を入手してください。

議論するために

著者について

Photo of Elliot Rusty Harold

Elliotte Rusty Haroldはニューオーリンズ出身であり、時たま、おいしいgumbo(オクラ入りのスープ)を食べに帰っています。ただし現在はニューヨークのブルックリン近郊のProspect Heightsに、妻のBethと猫のCharm(charmed quarkからとりました)とMarjorie(義理の母の名前からとりました)と一緒に住んでいます。彼はPolytechnic Universityのコンピューター・サイエンスの非常勤教授として、Java技術とオブジェクト指向プログラミングを教えています。彼のCafe au Lait Webサイトは、インターネット上で最も人気のある独立系Javaサイトの一つです。また、そこから派生したCafe con Lecheは、最も人気のあるXMLサイトの一つです。彼の最近の著作には『Java I/O, 2nd edition』があります。現在はXML処理用のXOM APIやJaxen XPathエンジン、Jesterテスト・カバレッジ・ツールなどに取り組んでいます。

不正使用の報告のヘルプ

不正使用の報告

ありがとうございます。 このエントリーは、モデレーターの注目フラグが設定されました。


不正使用の報告のヘルプ

不正使用の報告

不正使用の報告の送信に失敗しました。


developerWorks: サイン・イン


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 利用条件

 


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

表示名をお選びください

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

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

(半角英数字で3文字以上31文字以下にする必要があります)


「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 利用条件

 


この記事を評価する

コメント

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=XML
ArticleID=245760
ArticleTitle=Firefox での XForms
publish-date=01232007
author1-email=elharo@metalab.unc.edu
author1-email-cc=dwxed@us.ibm.com

タグ

Help
このタグで、My developerWorks のすべてのタイプのコンテンツを見つけるために検索フィールドを使用します。

スライダーバーを使用することで、より多く(少なく)タグを表示します。

人気のタグは、この特定のコンテンツ・ゾーン(例えば、Java テクノロジー、Linux や WebSphere など)に対するトップのタグを表示します。

マイ・タグは、この特定のコンテンツ・ゾーン(例えば、Java テクノロジー、Linux や WebSphere など)に対するお客様ご自身のタグを表示します。

このタグで、My developerWorks のすべてのタイプのコンテンツを見つけるために検索フィールドを使用します。人気のタグは、この特定のコンテンツ・ゾーン(例えば、Java テクノロジー、Linux や WebSphere など)に対するトップのタグを表示します。マイ・タグは、この特定のコンテンツ・ゾーン(例えば、Java テクノロジー、Linux や WebSphere など)に対するお客様ご自身のタグを表示します。