XMLDB周辺技術
HOME  >  XMLDB周辺技術  >  InfoPath徹底解析 2.フォーム設計(基本編)

InfoPath徹底解析 2.フォーム設計(基本編)

2004年6月24日 更新
※この記事はDigital Xpress 2004 Vol.19(2-3月号)に掲載されたものです。

ソリューション関連記事InfoPath徹底解析

Section1:フォーム設計(基本編)

このセクションではとてもシンプルなフォームを題材として、InfoPathを使ったフォームの基本的な設計方法を見ていきましょう。

ここでは、「ユーザが氏名とメールアドレス、生年月日を入力し、入力されたデータをXMLとして保存するだけのフォーム(サーバへの送信を行わない)」という想定でフォームを作成してみます。XMLエディタとしての利用法に近いものです。サーバとの送受信は行いませんので、サーバ側の設定は必要ありません。

InfoPathフォームの新規作成

InfoPathでは、次の3つの方法からフォームを新規作成できます。

① 完全に新規で、空白のフォームから作成する

まったく白紙の状態からフォームを作成するという方法です。データソースがまだ定義されていない場合など、ゼロから作成する場合にはこの方法を利用します。

② データソースから新規作成する

InfoPathでは、フォームとサーバ間でやり取りするデータのデータ構造を「データソース」と呼びます。すでに扱うデータの構造が決まっている場合、またすでにWebサービスやデータベースによってデータ構造が定義されているような場合には、この方法を利用します。

データソースから新規作成する場合は、どのようなデータソースを基にしてフォームを作成するかを、(1)XMLスキーマやXMLデータファイル、(2)データベースのテーブル設計、(3)WebサービスのWSDL、という3つの選択肢の中から選択できます。

図4:InfoPathに標準で導入されるサンプルフォーム
InfoPathに標準で導入されるサンプルフォームの画面イメージ

図5:フォームのデザイン
フォームのデザインの画面イメージ

③ サンプルをカスタマイズして利用する

InfoPathをインストールすると、サンプルフォームも同時にインストールされます(図4を参照)。これは休暇届や経費明細書、出張申請書など、企業内でよく使われるようなフォームをInfoPathで作成したものです。

これらのサンプルに類似したフォームを作成したい場合には、サンプルをベースにして独自のカスタマイズを加えていくと簡単に作成できます。

また、サンプルの中には実用的なスクリプトがたくさん含まれていますので、InfoPathでのスクリプトの書き方や動作を学ぶのにも便利です。

今回は、①の方法を使い、完全に新規のフォームから作成してみましょう。

InfoPathを起動し、[フォームのデザイン]を選択すると、作業ウィンドウがフォームデザイン用のウィンドウに切り替わります(図5)。ここで、どの方法でフォーム作成を開始するかを選択できます。今回は[新しい空白のフォーム]を選択します。

すると、白紙のフォームが開きます(8ページの図6を参照)。これがInfoPathのフォームデザイン環境です。さて、ではここからフォームのデザインを開始していきましょう。

データソースの設計

InfoPathではデータを入力するためのフォームを作成するわけですから、フォームの見た目のデザインより前に、まずどんなデータを入力してもらうのかを考える必要があります。今回は、

  • 氏名
  • メールアドレス
  • 生年月日

の3項目だけですので、とてもシンプルなデータ構成になりますね。

図6:InfoPathのフォームのデザイン環境
InfoPathのフォームのデザイン環境の画面イメージ

データソースを構成するには、[デザインタスク]から[データソース]を選択します。すると、作業ウィンドウは[データソース]に切り替わり、データソースが設計できるようになります(図7を参照)。ここで、どんなデータを入力してもらうのかを定義し、そのデータに対応したコントロール(テキストボックスやラジオボタンなど)をフォーム上に配置していくという流れになります。では早速、データソースの設計を開始してみましょう。

この[データソース]内の[使用するデータソース]の中に、データ構造を定義していきますが、最初からある「マイフィールド」は、そのフォームそのものを表している(フォーム内のデータ項目すべてをまとめるもの)と考えてください。XMLとして考えれば、この「マイフィールド」が最上位のエレメントに相当するものです。それで、この下位にデータ項目を追加していきます。

図7:データソースのデザイン
データソースのデザイン画面イメージ

表1:フィールドのデータ型

テキスト string 通常のテキストフィールド。
リッチテキスト XHTML リッチテキストフィールド。XHTMLで表現できる内容を格納する。
整数 integer 整数値。小数点を含む数値は扱うことができない。
10進 double 小数点を含む数値。
はい/いいえ boolean trueかfalse。
ハイパーリンク anyURI リンクを格納する。
日付 date 日付のみ。
時刻 time 時刻のみ。
日付と時刻 dateTime 日付と時刻。
画像 base64Binary 画像ファイルをBase64エンコードしたもの。

「マイフィールド」を選択し、[追加...]ボタンをクリックします。すると、[フィールドまたはグループの追加]ウィンドウが表示され、追加するフィールドを定義できるようになります(図8を参照)。ここでは、追加するフィールドの名前、種類、データ型(指定できるデータ型については表1を参照)、既定値、繰り返し可能な要素かどうか、入力が必須かどうかを設定します。今回は次の3つのフィールドを定義します。種類はすべて「フィールド(要素)」とし、既定値と繰り返しは設定しません。

フィールド名 必須
name テキスト(string) はい
mailAddress テキスト(string) はい
birthday 日付(date) いいえ

以上の3つのフィールドをデータソースに追加したら、データソースの設計は完了です。

ここでデータの種類についても触れておきましょう。データの種類として選択できるのは、「フィールド(要素)」、「グループ」、「フィールド(属性)」の3種類です。

フィールドには「要素」と「属性」の2種類がありますが、どちらもユーザが入力したデータを格納するという意味においては同じです。XMLデータを生成する際、フィールドを要素として作成するか、フィールドを属性として作成するかの違いのみです。ただし、「フィールド(要素)」の下位には「フィールド(属性)」しか追加できません。

グループには、ユーザが入力したデータが直接格納されることはありません。複数の「フィールド(要素)」、特に繰り返し可能な要素を格納する際にグループを使用します。

このサンプルでは、データソースは図9のようになれば完了です。

図8:[フィールドまたはグループの追加]ダイアログ
[フィールドまたはグループの追加]ダイアログ画面イメージ

図9:データソースの完成図
データソースの完成図イメージ

図10:[レイアウト]作業ウィンドウと配色パターン(色は分かりませんが・・・)
[レイアウト]作業ウィンドウと配色パターンの画面イメージ

フォームのデザイン

データソースが作成できたら、フォームの設計、コントロールの配置を始めます。コントロールの配置を始める前に、まずフォームの基本デザインを決めてしまいましょう。

InfoPathには、すぐに使用できるレイアウトパターンや配色パターンが登録されています(図10を参照)。もちろん、これを使わずにすべてオリジナルでデザインしていくことも可能ですが、手っ取り早く作業を進めるにはこれらのパターンを活用するのが有効です。

まず、フォームの基本的なレイアウトは、[書式]-[レイアウト](または、[デザインタスク]作業ウィンドウから[レイアウト])を使って、表組みを利用したレイアウトのいずれかを選択します。今回は基本的な「タイトル付きの表」を使用します。

フォーム全体の色調は、[書式]-[配色パターン]から設定できます。それぞれの配色パターンには基調となる6色が設定されています。配色パターンを選択しておくと、文字や網掛けの色を選択する際にも基調となる6色は分類されて表示され、簡単に選択できるようになります。

基本的なレイアウトが決まったら、フォーム上にコントロールを配置していきます。

コントロールの配置

ユーザが入力するためのコントロールを配置するには、[データソース]作業ウィンドウの[使用するデータソース]にあるフィールドやグループをフォーム上にドラッグします。

フィールドをドラッグすると、そのフィールド名と入力用のフィールドが並んで配置されます。配置されたコントロールが、ユーザがデータを入力するためのコントロールになります。

既定値のままでフィールドをドラッグすると、テキストや数値のフィールドはテキストボックス、日付フィールドは日付選択コントロールなど、既定のコントロールでフォーム上に配置されます。しかし、リストボックスやオプションボタン、チェックボックスなどのコントロールを使用することもできます。その場合には、変更したいコントロールで右クリックし、コンテキストメニューで[変更] を選び、どのコントロールに変更したいかを選択します。また、データソース内のフィールドを選択し、右側にある[▼]をクリックしてそのフィールドが使用するコントロールを変更することもできます。

図11:グループをフォーム上にドラッグする
グループをフォーム上にドラッグする画面イメージ

図12:入力チェックの定義
入力チェックの定義画面イメージ

グループをドラッグした場合は、そのグループをセクションや繰り返しセクションとして配置することができます(図11を参照)。また、グループ内のフィールドを表として自動的にレイアウトすることもできます。今回でも「マイデータソース」をフォーム上にドラッグして、[レイアウト用の表内のコントロール]にすれば、自動的に表組みしてレイアウトされます。

フィールドをフォーム上に配置できたら、フォームのタイトルや説明を挿入したり、レイアウトを調整したりして、使いやすいフォームをデザインしてみてください。

ここまでできたら、一度[フォームのプレビュー]をクリックして、フォームのデザインを確認しておきましょう。

プレビューしてみると、赤い下線が引かれているコントロールがあるはずです。これは、入力が必須となっている項目です。また日付を選択する「birthday」フィールドは、右端にあるカレンダーボタンを押せば、カレンダー形式で日付を選択できます。

入力チェックの設定

InfoPathでは、入力されたデータが正しいかどうかをチェックするための入力規則を定義することができます。今回は、メールアドレスに「@」と「.」が入っているかどうかをチェックする入力規則を定義してみましょう。

「mailAddress」のフィールドのプロパティ(またはmailAddressフィールドに対応するテキストボックスのプロパティ)を開き、入力規則、正しくないデータが入力されたときのエラーメッセージを設定します(図12を参照)。ここで設定する条件は、「設定した条件に当てはまった場合にエラーを表示する」ことに注意してください。今回のケースでは「@を含まない」と「.を含まない」という2つの条件のAND条件となります。

図13:入力チェックでエラーがあった場合
入力チェックでエラーがあった場合の画面イメージ

フォームのプレビューを見てみると、正しくないデータを入力した場合、赤い点線とエラーメッセージのポップアップが表示されることがわかります(図13)。

データ入力とXML保存

では、実際にデータを入力し、XMLとして保存してみましょう。と言っても、入力されたデータをXMLとして保存するのはとても簡単です。

各フィールドにデータを入力したら、[ファイル]-[名前を付けて保存](またはツールバー上の保存ボタン)をクリックします。すると、生成されるXMLファイルの保存先を指定できますので、適当なファイル名をつけて保存します。これで完了です。

それでは、生成されたXMLファイルを確認してみましょう(リスト1)。

リスト1:生成されたXMLファイル

<?xml version="1.0" encoding="UTF-8"?>
<?mso-infoPathSolution solutionVersion="1.0.0.2" productVersion="11.0.5531"
PIVersion="1.0.0.0" href=".le:///D: ¥Work ¥Dx ¥Working ¥テンプレート1.xsn" ?>
<?mso-application progid="InfoPath.Document"?>
<my: マイフィールド
xmlns:my="http://schemas.microsoft.com/of.ce/infopath/2003/myXSD/2003-12-17T06:57:29" xml: lang="ja">
  <my:name> 山崎太郎</my:name>
  <my:mailAddress>taro@somewhere.com</my:mailAddress>
  <my:birthday xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    1975-04-02
  </my:birthday>
</my: マイフィールド>

まず目に留まるのはXML宣言直後にある2つの処理命令です。これらはこのXMLファイルをInfoPathで開くときに利用されるもので、そのXMLファイルを開くフォームのテンプレートファイル名などが指定されています。InfoPathをインストールすると、XMLファイルはInfoPathで開かれるように関連付けられます。InfoPathはXMLファイルを開く際、この処理命令を参照し、そのXMLファイルを開くために使用されるテンプレートを判別するのです。

その後にある名前空間接頭辞myで始まる部分が、実際にフォームで入力されたデータです。入力されたデータがXMLに反映されていることが確認できたでしょうか。

InfoPath のデータファイル

前のセクションの最後に、InfoPathのデータファイル(.xsnファイル)はフォームの設計を保持したXMLファイルをcab形式で圧縮したものであることに触れました。実際に、今回使用したフォーム設計はどのように保持されているのか、xsnファイルを解凍し、確認してみましょう。

データファイルの内容を確認するのには、InfoPathでフォームを開き、[ファイル]-[フォーム構成ファイルの取り出し] を利用する方法と、xsnファイルのファイル名の末尾に「.cab」を付けて、cabファイルとして開く、という方法があります。これらの方法でデータファイルを確認してみると、xsnファイルには次のようなファイルが含まれていることがわかります。

  • myschema.xsd
    このフォームで扱うデータソースのXMLスキーマファイルです。各フィールドの定義に加え、必須項目を示すrequiredString単純型などが定義されています。
  • view1.xsl
    フォームを表示するときに使われるXSLファイルです。レイアウト情報やフォーム上の固定テキストなどはこの中で定義されています。
  • manifest.xsf
    データファイルの中で最もInfoPath寄りのデータを扱っているのがこのファイルです。InfoPathのバージョン情報やビューの定義、またこのセクションでは使用していませんが、スクリプトで利用するイベントの定義などのデータが含まれています。このファイルもXMLファイルであり、スキーマなどの詳細についてはInfoPathのヘルプ[InfoPath Developer.s Reference]-[InfoPath XSF リファレンス]に記載されています。
  • template.xml
    XMLデータのテンプレートです。リスト1のXMLファイルから、各フィールドの値を除いたものとほぼ同等です。
  • sampledata.xml
    フォームで使用されているデータソース定義だけを含んだ単純なXMLファイルです。

今回は非常に単純なフォーム設計でしたので、ファイルはこの5つだけになっています。データソースを複数利用している場合や複数のビューで構成されている場合、スクリプトを使っているフォームなどでは、さらに多くのファイルが使用されることになります。

XMLファイル作成ツールとしてのInfoPath

このセクションでは、InfoPathの最も簡単な使い方を確認しました。データソースやフォームの定義をすべてInfoPath上で行い、そのデータソースに基づくXMLファイルを生成する手順を見てきました。単純に、あるスキーマに基づくXMLデータを作成する場合にも、InfoPathを使うと非常に簡単にできることがお分かりいただけたかと思います。

もし、すでにXMLファイルを処理するためのバックエンドシステムが存在しているのであれば、このように作成されたXMLファイルをそのシステムに読み込ませ、処理を行うことができます。そのためにInfoPath側で必要になる作業はほんの少しだけです。今回のように構成が単純なフォームであれば、スクリプトを書いたり、コーディングしたりする必要はありません。

しかし、多くのシステムでは、サーバとのデータ通信が必要になることでしょう。その1つの方法はWebサービスを利用することです。

というわけで、次のセクションでは、InfoPathでのフォーム開発方法をさらに掘り下げつつ、WebサービスとInfoPathを組み合わせて利用する方法を確認していきましょう。

▲このページのTOPへ

  • XMLとは?IT初心者でもすぐわかるXML超入門
  • 無償で使える!XMLDB「NeoCore」
  • サイバーテック求人情報
  • メールマガジン申し込み
  • TEchScore

  • ▲NeoCoreについて記載されています!

  • ▲XMLマスター教則本です。試験対策はこれでばっちり!
Copyright (c) CyberTech corporation ltd. All ights Reserved. | サイバーテックについて | ご利用ガイド