株式会社ATLED
城倉和孝


 はじめに

本章より2回続けてウェブフォームの作成方法についてご紹介します。まず本章ではウェブフォーム作成の基本的な流れを、次章で実用的なフォーム作成のテクニックをご説明します。
前章で説明いたしましたが、ウェブフォームはGUIでマウス操作を中心にデザインできますので、HTML、JavaScriptの知識がない方でも簡単に作成できます。普段はExcelやPowerPointをお使いの開発マネージャの方も、ぜひお手にとって（？）お試しください。



 X-WebForm Developerのインストール

1) X-WebForm Developerの入手
1. X-WebForm Developerを入手するには製品サイトの「 ダウンロードページ」にアクセスします。
2. 「X-WebForm Developer v2.0」のリンクをクリックすると、「プログラム仕様許諾書」が表示されます。
内容に同意するとダウンロード画面が表示されます。
ダウンロードできるファイルは2種類あります。
 
・ 「フルダウンロード版」・・・J2SE（Javaの基本ソフト）を同梱したバージョンです。初めてインストールする場合はこちらを使用してください。
・ 「アップデート版」・・・・・J2SEを同梱しないバージョンです。２度目以降のアップデートはこちらを選択してください。

動作環境を確認の上、ご自分のPC上の任意のフォルダ（デスクトップでも可です）に保存します。
また、製品は定期的にアップデートモジュールがリリースされ、機能改善や不具合の改修が行なわれますので、定期的にサイトをチェックして、「アップデート版」をダウンロードすることをお勧めします。

2) X-WebForm Developerのインストール
1. zipファイルの解凍
ダウンロードしたファイルは「xwebform_XXXXXX.zip」というファイル名で、zip形式に圧縮されていますのでzipファイルを解凍してください（「XXXXXX」の部分はリリースされたバージョンにより異なりますが、できるだけ最新のものを入手してください）。
2. インストーラを起動する
解凍したファイルの中に「xwf_setup」というディレクトリがあります。この中の「install.bat」をクリックして起動します。
※このとき、Windowsのセキュリティの警告画面が表示される場合がありますが、特に問題はありませんので「実行」をクリックして続行してください。
3. 契約条項の確認
X-WebForm Developerのインストーラ画面が表示されます。スクロールして使用許諾契約の内容に同意した上で「次へ」をクリックします。
4. インストール内容の指定
以下の画面で、X-WebForm Developerのインストール内容を指定します。
◇ インストール・ディレクトリ
X-WebForm Developerのインストール先ディレクトリを指定します。
インストール先ディレクトリを選択します。デフォルトは「C:¥Program Files¥」になっており、基本的には変更しないで構いません。
インストール先ディスクに容量の余裕がない場合（インストールには約50MBの容量が必要です）は適宜変更してください。
◇ JAVA_HOME
X-WebForm Developerが動作するのに必要な、J2SE（Java 2 Platform Standard Edition＝Javaの基本ソフト）がインストールされたディレクトリを指定します。
初めてインストールする方、もしくはJ2SEを別の用途でご自分でインストールされてバージョンが不明な場合は、同画面上の「J2SE」ボタンからインストールできますので、 まず後述の「J2SE5.0のインストール」を先に行なってください。
※ ご自分で別途インストールしたJ2SEをご利用される場合は、Sun J2SE Development Kit 5.0 Update5以降（バージョンは1.5.0_06以降を推奨）を指定してください。JRE（J2SE Java Runtime Environment＝ランタイム実行用）では動作しませんので注意してください。
◇ Look And Feel
X-WebForm Developerの表示デザインを指定します。Windows風とMetal風（Javaオリジナル）から選択します。
◇ メニュー登録
チェックすると、スタートメニューとデスクトップにアイコンが作成されます。
5. インストールを開始する
J2SEの導入、必要事項の指定が完了したら、「次へ」をクリックして続行します。
「インストールは正常に完了しました」の画面が表示されたらインストールは成功です。

3) J2SE 5.0のインストール
J2SE Development Kit 5.0が導入されていない場合、以下の手順で事前にインストールを行ないます（ X-WebForm Developerのインストール前に行なう必要があります）。
 
1. X-WebForm Developerのインストール画面で「J2SE」ボタンをクリックします。
2. Sun J2SEのインストーラが起動されますので、まず使用許諾契約の内容に同意の上、「次へ」をクリックします。
3. インストール内容とインストール先ディレクトリを選択します。基本的には変更せず、「次へ」で続行して構いません。インストール先ディスクに容量の余裕がない場合（インストールには約150MBの容量が必要です）は、インストール先ディレクトリを変更してください。
4. インストールには少々時間がかかります。「インストールが完了しました」の画面が表示されたら完了です。
5. インストールしたJ2SE 5.0をX-WebForm Developerで指定してください。


 X-WebForm Developerの起動

インストールが完了したら、X-WebForm Developerを起動して使ってみましょう。

1) 起動
インストール時に作成されたデスクトップのアイコン（またはスタートメニュー）をクリックしてX-WebForm Developerを起動します。

起動時にWindowsのセキュリティの警告画面が表示されることがありますが、特に問題はありませんので、「実行」をクリックして続行してください。
起動スプラッシュ画面が表示された後に、X-WebForm Developerの画面が表示されます。

2) 画面の説明
X-WebForm Developerはメニューバー(またはツールバー)からフィールドを選択し、「フォーム定義エリア」へドラッグして配置し、プロパティで属性を設定することでデザインを作成します。多くのHTMLエディタはHTMLタグを直接修正して微調整を行ないますが、X-WebForm Developerはマウス操作で位置指定が、プロパティ設定で属性設定がすべてできますので、HTMLの知識は全く必要ありません。



 ウェブフォーム作成の流れ

では、実際にウェブフォームを作成してみましょう。
ここではサンプルとして、以下のような簡単な「伝言メモ」の入力フォームを作成してみます。

1) 新規でフォームを作成する
1. フォームを新規で作成するには、X-WebForm Developerのメニューバーから[ファイル] - [新規作成]を選択します（ツールバーの「新規作成」ボタンからでも作成可能です）。
2. 以下の「新規作成」の画面が表示されます。

これはフォームの基本情報を入力する画面です。入力した情報は「フォーム設定」で後から変更することもできます。
ここでは「フォーム名称」、「クラス」のみ入力してください。データソース等の他の項目は後のデータベース連携の章でご説明します。
◇ フォーム名称
「受注入力」、「売上検索」のように、作成するフォームの名称を指定します。ちなみにこれは、ウェブフォームを表示したときにメニューバーに表示される名称でもあります。ここでは「伝言メモ」と指定します。
◇ クラス名
作成するフォームのフォームIDを半角英数字で指定します。 後の章でご説明しますが、Oracle JDeveloper 10gでプログラム開発を行なう際に、この名称がプログラムの名称（クラス名）になりますので、他のフォームと重複しない一意な名前(*1)を半角英数字で指定してください。ここでは「telMemo」という名前を指定します。

(*1)正確には「アプリケーション」というプロジェクトの単位内で一意な名前となります。「アプリケーション」については後の章でご説明いたします。
3. 「作成」ボタンをクリックすると、真っ白な新規の画面が表示されます。

2) フォームの基本設定（フォーム設定）
ウェブフォームを作るとき、まず初めに「フォーム設定」でサイズなどのフォーム全体の情報を設定します。この作業はフォームごとに行なう必要があります。

メニューバーの[ファイル] - [フォーム設定]を選択すると「フォーム設定」の画面が開きますので、[基本情報]のタブを表示させます。

◇ 用紙サイズ指定、用紙方向
ウェブフォームのサイズを指定します。ここでいう「用紙」とはフォームの大きさのことです。A4、A5等の印刷時のサイズと向き（縦、横）で指定します。指定することにより、以下に説明する「用紙サイズ」の「用紙幅」「用紙高さ」が既定の値に自動的に設定されて切り替わります。
任意のサイズを指定したいときは「Custom」を指定します。「Custom」のとき、用紙方向は有効になりません。
◇ 用紙サイズ
「用紙サイズ指定」が「Custom」のとき、ウェブフォームのサイズをピクセル（HTMLでサイズ指定する単位）で指定します。
◇ マージン幅
ブラウザで表示したときに、ブラウザ内の表示領域の左上からウェブフォームまでの距離をピクセルで指定します。
◇ PDF余白
PDFファイルを作成する際に、用紙の左側と上側に余白を作ることができます。余白サイズはピクセルで指定します。

設定を変更して「OK」ボタンをクリックすると、「フォーム定義エリア」のフォームサイズが変更されます。
このサンプルの「伝言メモ」では「A5縦」を指定します。

3) 枠を描く（図形オブジェクトの配置）
サイズを指定したら、ブラウザ上に表示する用紙の外枠の罫線となる部分を、水平線、垂直線、直線、長方形枠、長方形を組み合わせて作成します。
 
1. ツールバーまたはメニューバーの[ツール] - [図形]より、各アイコンをクリックして選択します（ツールバーからでも選択できます）。
 
 
2. この状態でフォーム作成エリアにマウスをドラッグして描画します。選択している図形オブジェクトは続けて描画することができます。

クリックした状態で「オブジェクト描画モード」になり、選択しているオブジェクトが続けて描画できます。
 
 
3. 図形サイズのを変更、移動を行なう場合は、ツールバーの「選択ツール」をクリックして「オブジェクト選択モード」に変えて、対象となる図形を選択し、マウスをドラッグします。
 
 
4. 図形の色を変えるなど、属性を変更する場合も同様に、「オブジェクト選択モード」にします。この状態で対象となる図形を選択するとプロパティウインドウに属性が表示されます。
 
プロパティウインドウで属性の変更を行ないます。
例として「長方形枠」の角を丸くするため「コーナR」を変更してみましょう。値を変更したら必ずEnterキーを押して確定してください。確定しないと変更が反映されない場合があります。


次に色を変更します。色はRGB16進数で指定します。「色」のプロパティの横にあるボタンをクリックすると表示される「色の選択」画面で変更可能です。



変更する色を選択して「了解」をクリックすると、プロパティの値が変更されます。

これで外枠が完成しました。

4) 固定文字（文字ラベル）を配置する
次に固定文字（文字ラベル）を配置します。操作方法は図形オブジェクトと同様です。
 
 
1. ツールバーまたはメニューバーの[ツール] - [図形]から「文字」をクリックして選択し、「オブジェクト描画モード」で文字ラベルを描画します（ツールバーからでも選択できます）。
 
 
2. 文字を入れるには、ツールバーの「選択ツール」をクリックして「選択モード」にし、文字オブジェクトを選択してプロパティの「初期値」に文字を入力します。


これで固定文字が入り、外観は完成です。

5) 入力フィールドを配置する
 
最後に入力フィールドを配置します。
 
1. 入力フォールドはツールバーまたはメニューバーの[ツール] - [標準コンポーネント]より各アイコンをクリックして選択し、「オブジェクト描画モード」の状態で描画します（ツールバーからでも選択できます）。


まず、伝言メモの宛先の欄に「文字フィールド」を描画してみましょう。
 
 
2. フィールドを配置したら、フィールドを識別する名前をつけます。フィールドの名前はプロパティの「属性タブ」の「タグ名」と「ID」の２種類があります。「タグ名」はフィールドを目で見て識別するための名称で、通常は日本語でわかりやすい名前をつけます。「ID」はJavaプログラムをコーディングするときにフィールドを識別するIDで、半角英数字で指定します。どちらもデフォルト値が設定されていますので、変更は必ずしも必須ではありませんが、わかりやすい名前を設定しておくと「フィールドの一括操作」機能を使用するときや、プログラムをコーディングするときに必要となります。
 
 
3. 次にプロパティ値を設定します。
日本語入力をOnにするために、プロパティの「属性タブ」の「IMEモード」をOnに変更してみましょう。


さらに文字の配置をきれいに見せるため、プロパティの「書式タブ」で文字間隔を少し広く設定し、垂直配置（中央寄せ）に設定してみます。
 
 
4. 他のフィールドも同様に、配置、プロパティ設定を繰り返します。
ここでは、「伝言メモ」で使用したいくつかのフィールドについてご説明します。

「電話を受けた時間」の項目は、数値しか入力できない「整数フィールド」で指定します。 プロパティの「属性タブ」で「最大入力文字数」を設定します。


伝言の要件は「チェックボックス」フィールドで選択できるようにします。
チェックしたときに表示する文字はプロパティの「属性タブ」の「チェックマーク」で指定します。デフォルトは「■」ですが、ここでは「レ」にしてみます。


伝言を受けた人は、入力ではなく予め決まった人を選択できるように「コンボボックス」フィールドを配置します。 プロパティの「属性タブ」の「選択肢」をクリックして、サブウインドウを表示し、リスト表示する選択肢をカンマ区切りで指定します。


これで「伝言メモ」のウェブフォームが完成しました。
外枠→固定文字→入力フィールドの順に説明してきましたが、作成する順番はご自分がやりやすい方法でよいと思います。
実際にプログラムを作成する際にはフォームの右側の「ナビボタン」で動作を設定する必要がありますが、これは後の章で説明いたします。



 ウェブフォームのプレビューとPDF印刷

1) プレビュー（入力用HTMLフォームの表示）
作成したウェブフォームは「プレビュー機能」を使い、Webブラウザで表示、確認することができます。実際は、作成中にプレビューで出来栄えを確認しながら作業するほうが効率的です。
 
 
 
1. ツールバーの「プレビュー」アイコンをクリックします。
 
 
2. 標準の状態では内蔵のWebサーバーが自動で起動し、Webブラウザでウェブフォームが表示されます。

2) PDF印刷
X-WebFormにはPDFLib社のPDFLibが標準で同梱されていますので、ウェブフォームで表示されているとおりにPDFファイルに出力することができます。
したがって、「入力用」「印刷用」のフォームを別々に作成する必要はありません。
 
 
 
1. PDF出力の設定
PDF出力を行なうには事前設定が必要です。PDFを表示したいウェブフォームを開いた状態で、メニューバーから[ファイル] - [フォーム設定]を選択し、「フォーム設定」画面で、「PDF作成」のチェックボックスをチェックして「OK」をクリックします。

ウェブフォーム新規作成時のデフォルトでは、「PDF作成」はチェックされていません。チェックすると、Oracle JDeveloper 10gでJavaプログラミングをする際にPDF印刷用ソースコードが常に作成されてしまうので、PDF印刷を必要とするウェブフォームだけチェックすることをお勧めします。
 
 
2. PDF表示
ウェブフォームをプレビューし、ナビボタンの「PDF」ボタンをクリックするとPDFに出力されます。
PDF上には「www.pdflib.com」の文字が表示されます。本番環境でこの文字を表示しないようにするにはPDFLibの製品ライセンスの購入が必要です。


もし、「フォーム設定」画面で、「PDF作成」をチェックしていない状態で「PDFナビ」ボタンをクリックすると、以下のようなエラー画面が表示されます。



 XWFファイルの保存と読み込み

1) 作成したフォームの保存と読み込み（XWFファイル）
作成したウェブフォームは、XWFという拡張子のファイルにXML形式で保存することができます。
 
 
 
1. ファイルの保存
メニューバーの[ファイル] - [保存]（ツールバーからでもできます）をクリックすると、以下の画面が表示されます（画面上のすべての情報が指定されているときは表示されません。変更の必要がなければそのまま「OK」をクリックしてください）。

保存ダイアログが表示されますので、ファイル名をつけて保存してください。
保存の際に実際は、XWF以外にもJavaプログラム作成用のいくつかのファイルが自動で作成されています。このあたりはOracle JDeveloper 10gの連携の章で詳しく説明しますので、ここでは割愛させていただきます。
 
 
2. ファイルの読み出し
メニューバーの[ファイル] - [開く]から保存してあるXWFファイルを開きます。


以上、ウェブフォーム作成の基本的な流れをご説明しました。

次回は応用編として、表の作成方法や、背景画像を使ったフォーム作成、さらに実用的な使い方などをご説明します。