mb_language("uni"); mb_internal_encoding("utf-8"); mb_http_input("auto"); mb_http_output("utf-8"); ?>
このセクションではとてもシンプルなフォームを題材として、InfoPathを使ったフォームの基本的な設計方法を見ていきましょう。
ここでは、「ユーザが氏名とメールアドレス、生年月日を入力し、入力されたデータをXMLとして保存するだけのフォーム(サーバへの送信を行わない)」という想定でフォームを作成してみます。XMLエディタとしての利用法に近いものです。サーバとの送受信は行いませんので、サーバ側の設定は必要ありません。
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ではデータを入力するためのフォームを作成するわけですから、フォームの見た目のデザインより前に、まずどんなデータを入力してもらうのかを考える必要があります。今回は、
の3項目だけですので、とてもシンプルなデータ構成になりますね。
図6: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ファイルを確認してみましょう(リスト1)。
<?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のデータファイル(.xsnファイル)はフォームの設計を保持したXMLファイルをcab形式で圧縮したものであることに触れました。実際に、今回使用したフォーム設計はどのように保持されているのか、xsnファイルを解凍し、確認してみましょう。
データファイルの内容を確認するのには、InfoPathでフォームを開き、[ファイル]-[フォーム構成ファイルの取り出し] を利用する方法と、xsnファイルのファイル名の末尾に「.cab」を付けて、cabファイルとして開く、という方法があります。これらの方法でデータファイルを確認してみると、xsnファイルには次のようなファイルが含まれていることがわかります。
今回は非常に単純なフォーム設計でしたので、ファイルはこの5つだけになっています。データソースを複数利用している場合や複数のビューで構成されている場合、スクリプトを使っているフォームなどでは、さらに多くのファイルが使用されることになります。
このセクションでは、InfoPathの最も簡単な使い方を確認しました。データソースやフォームの定義をすべてInfoPath上で行い、そのデータソースに基づくXMLファイルを生成する手順を見てきました。単純に、あるスキーマに基づくXMLデータを作成する場合にも、InfoPathを使うと非常に簡単にできることがお分かりいただけたかと思います。
もし、すでにXMLファイルを処理するためのバックエンドシステムが存在しているのであれば、このように作成されたXMLファイルをそのシステムに読み込ませ、処理を行うことができます。そのためにInfoPath側で必要になる作業はほんの少しだけです。今回のように構成が単純なフォームであれば、スクリプトを書いたり、コーディングしたりする必要はありません。
しかし、多くのシステムでは、サーバとのデータ通信が必要になることでしょう。その1つの方法はWebサービスを利用することです。
というわけで、次のセクションでは、InfoPathでのフォーム開発方法をさらに掘り下げつつ、WebサービスとInfoPathを組み合わせて利用する方法を確認していきましょう。
▲このページのTOPへ