XMLDB.jp

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

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

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





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

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

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


InfoPath フォームの新規作成

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

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

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

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

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

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


図4:InfoPath に標準で導入されるサンプルフォーム

図5:フォームのデザイン

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

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

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

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

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

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

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


データソースの設計

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

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

図6:InfoPath のフォームのデザイン環境

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

データソースを構成するには、[デザインタスク]から[データソース]を選択します。すると、作業ウィンドウは[データソース]に切り替わり、データソースが設計できるようになります(図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へ

  • 無償で使える!XMLDB「NeoCore」
  • サイバーテック求人情報
  • メールマガジン申し込み
  • TEchScore

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

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