株式会社ATLED
城倉和孝

 はじめに

前章では実際に「伝言メモ」を作成して、ウェブフォーム作成の流れをご説明しました。本章では、さらに実用的なウェブフォーム作成のテクニックをいろいろご紹介します。
データベース連携や、サーバープログラムに関連する機能（ナビボタン、ボタン等）については後の章で説明しますので、本章では説明を省略いたします。
なお、本説明のバージョンはv2.0.04で行ないます。

 

 標準コンポーネントの操作いろいろ

まず初めに、X-WebFormで用意された標準コンポーネントで何ができるかを覚えましょう。

1 ) コンポーネントの操作方法
前章のおさらいとなりますが、コンポーネントの各種設定は対象フィールドを選択して、プロパティで設定を行ないます。
① ツールバーの「選択ツール」をクリックして「選択モード」に切り替えます。
 
② 設定を行なうコンポーネントをクリックして選択します。
 
③ プロパティウインドウに、選択しているフィールドのプロパティ値が表示されるので、値を変更します。
プロパティは「属性」「アクション」「書式」の３つのタブに整理されています。
 

2 ) 標準コンポーネントの種類
X-WebFormには以下の標準コンポーネントが用意されています。数値や日付を入力するフィールドなど、HTMLの標準言語仕様には存在しないフィールドも、Visual Basicでいうところの「データ型」の感覚で使用できます。
分類 コンポーネント名 説明 便利なプロパティ設定
テキスト系入力 文字フィールド 単一行のテキスト入力を行なう IME（日本語入力）制御、最大入力文字制限、英字大文字・小文字自動変換、カナ自動入力、全角・半角カナ自動変換、日付カレンダ入力
テキストエリア 複数行のテキスト入力を行なう
パスワード パスワードを入力する
数値系入力 数値フィールド 数値を入力する。小数の入力も可能 3桁カンマ区切り、計算値設定、最大入力文字制限、入力可能最大値・最小値設定
整数フィールド 整数の入力を行なう。小数は入力できない
チェック式選択 ラジオボタン 用意された複数の選択肢の中からひとつを選択。複数を選択する場合はチェックボックスを使用 チェック時・非チェック時のマーク設定
チェックボックス 用意されたひとつの選択肢に対して「はい」「いいえ」の意思表示を選択
リスト式選択 コンボボックス プルダウン型リストの選択肢の中からひとつを選択 選択肢設定（固定値、またはDB連動）
リストボックス リストの選択肢の中からひとつ、または複数を選択
日付の入力 西暦フィールド 西暦年を入力 年、月、日、曜日連動
月フィールド 月を入力
日フィールド 日を入力
曜日フィールド 曜日をプルダウンリストの中から選択
その他 ボタン 入力された内容をサーバーに送信する「submitボタン」を作成 表示テキスト設定
印影 印影を表示 表示テキスト設定、イメージ画像設定
バーコード バーコードを表示 バーコード種類、チェックデジット付加
郵便番号フィールド 郵便番号を入力して住所等の自動表示を行なう。郵便住所データはデータベースに事前設定が必要 住所自動設定フィールド指定
アップロードフィールド ローカルPCのファイルを指定してサーバーにアップロード  

インデックスに戻る

 

 カナ自動入力

顧客名や住所等の入力で漢字名とカナ名を両方指定する場合がありますが、それぞれを個別に入力するのは面倒な作業です。年賀状ソフト等では漢字を入力すると自動でカナが設定される便利な機能が当然のように装備されていたりしますが、残念ながらWebアプリケーションでは「黙殺」されがちな機能でした。このようなカナ自動入力は、「文字フィールド」のプロパティで「ふり仮名フィールド」を設定します。

1 ) 「文字フィールド」で漢字入力欄（入力するフィールド）とカナ入力欄（カナを自動設定するフィールド）を定義します。
この例では漢字入力欄のIDを「name_kanji」、カナ入力欄のIDを「name_kana」として定義します。
2 ) 漢字入力欄（name_kanji）の「ふり仮名フィールド」プロパティに、カナ入力欄のID（name_kana）を指定します。これだけで連動設定は完了です。
同時に、日本語入力用にするために「IMEモード」を「On」にしておきます。
3 ) カナ入力欄の「カナ・かな」プロパティで自動入力される文字の種類を、「全角カナ」「全角かな」「半角カナ」から指定します。この例では「全角カナ」を指定します。

4 ) プレビューを実行すると以下のような自動入力が行なわれます。

インデックスに戻る

 

 計算式の設定

一般的なWebの入力画面で、数量と金額を入力して計算ボタンを押して計算を行なうユーザーインターフェイス（以下、UI）を見かけることがあると思います。リアルタイムに金額計算を行なうにはJava Scriptを使って頑張ってコーディングする必要があるため（端的にいうと工数がかかるため）、以前は敬遠されがちでした。
計算の設定は、「数値フィールド」「整数フィールド」の「計算設定値」プロパティから「計算式設定」画面を開き、フィールドと式を指定します

計算の方法は２種類あります。

1 ) 合計（サマリ）
指定されたフィールドの値を合計します。表グループの繰り返し項目（表グループの作成方法は後述する「表の作成」の項を参照してください）を合計するときなどに使用します。
「計算設定画面」で「合計（∑）」のタブを選択して設定を行ないます。

以下は、小計入力欄の「計算設定値」プロパティに金額欄の縦計を設定する例です。
代入するフィールド（この例では小計欄）を選択して「計算式設定」画面を開き、合計するフィールド（この例では金額欄）を指定します。
操作は「計算設定画面」で「合計（Σ）」のタブを選択して、画面左側に表示されているフォーム上の「数値フィールド」「整数フィールド」から計算に使用するフィールドを選択します。「→」ボタンをクリックすると、右側の合計対象欄に表示されます。合計対象は複数の選択が可能です。
2 ) 四則演算
計算に使用するフィールドと四則演算の式を指定します。「計算設定画面」で「四則演算」のタブを選択して設定を行ないます。

以下は数量欄×単価欄を金額欄に設定する例です。
代入するフィールド（この例では金額欄）を選択して「計算式設定」画面を開きます。操作は「計算設定画面」で「数量欄」を選択して「→」ボタンをクリック、「×」ボタンをクリック、単価欄を選択して「→」ボタンをクリックの順で四則演算を完成させます。



フィールドではなく固定の数値を選択したい場合は、「数値入力」欄に値を直接入力して「→」ボタンをクリックします。 例えば、消費税を税率「0.05」で計算する場合は以下のように指定します。


計算結果の小数点以下の端数処理については、「端数処理」欄と「小数点以下桁数」欄で指定します。 例えば、レート換算計算などで計算結果を小数部２位までとして３位以下を切り捨てする場合は、以下のように指定します。

インデックスに戻る

 

 コンボボックスとリストボックス

「コンボボックス」、「リストボックス」は、用意された選択肢リストの中から選択を行なうコンポーネントです。選択肢の設定は固定値またはデータベース項目から指定ができます。後者の指定については後のデータベース関連の章で説明しますので、ここでは固定値の設定方法のみ紹介します。

1 ) 選択肢の指定
選択肢の設定は「コンボボックス」または「リストボックス」の「選択肢」プロパティをクリックし、「選択肢の指定」画面を開いて行ないます。
例えば「支払方法」の選択肢を設定する場合は、「代引,クレジットカード,郵振,コンビニ支払」のようにカンマで区切って指定します。
また初期値（ウェブフォームを表示したとき最初に選択されている値）を指定したい場合は、「初期値」プロパティでリストの中の値を設定します。

2 ) 表示項目と取得項目を変える場合の設定
HTMLのリスト仕様ではvalue属性を指定することで、画面表示項目と取得する値を変えることができます。例えば代引は”1”、クレジットカードは”2”…というように、選択肢をコードで管理したい場合に使用します。画面表示上は「代引」「クレジットカード」といった名称を表示しますが、選択された値はコードで取得できます。
この場合、「データ列数」プロパティに「2」を指定します。

次に「選択肢」プロパティをクリックして「選択肢の指定」画面を開き、リスト１行に対する表示値（この例では支払方法名称）と取得値（この例では支払方法コード）を続けて記述します。
「データ列数」プロパティを「2」に指定している場合、偶数番目の値（＝取得値）は画面には表示されません。
以下の例では、「クレジットカード」が選択された場合に取得される値は”2”になります。

 

インデックスに戻る

 

 ラジオボタン

ラジオボタンの設定は、選択肢の数ぶんの複数のラジオボタンを定義して「グループ化」を行ないます。

1 ) 枠の作成
「長方形枠」と「ラベル」で見出しを配置します。

2 ) ラジオボタンの配置
「長方形枠」の上に「ラジオボタン」を配置します。
「ラジオボタン」のプロパティ設定で、「チェックマーク」に選択されたとき表示する文字と、「チェック値」に選択されたとき取得する値を指定します。
この例では「チェックマーク」に”●”、チェック値に”1”を設定します。

同様に、選択肢の数ぶんのラジオボタンを定義します。このとき注意する点は、「チェック値」には重複する値を設定しないということです。「コンボボックス」の例と同様に、代引は”1”、クレジットカードは”2”…というようなコードを指定するとよいでしょう。
3 ) グループ化
配置が完了したら、グルーピングを行なうラジオボタンをすべて選択して右クリックでメニューを表示し、[グループ] - [グループ化]を選択します。

4 ) グループ設定
ループ化されたフィールドを選択後、右クリックメニューを表示して [グループ設定]を選択すると、以下の「ラジオボタン・グループ設定」画面が表示されます。

ラジオボタンで選択されている値の取得はグループのID名で行ないます。ID名には同一グループ内の最初のラジオボタンのIDが設定されます。
また、当該グループに所属しているラジオボタンが画面の右側に表示されるので、ここでメンバID、選択値、チェックマーク等を一括で設定することも可能です。
初期値（ウェブフォームを表示したときに最初に選択されている値）を指定したい場合は、画面左側の「初期値」の欄に該当する「選択値」を指定します。
5 ) プレビューを実行すると、以下のようなラジオボタンが完成しています。この例では「クレジットカード」が選択されているので、取得値は”2”となります。


「ラジオボタン」の大きさが枠とあわない場合は「フォントサイズ」で調整してください。
6 ) ラジオボタンの追加
作成済みのグループに対して新たに「ラジオボタン」を追加する場合は、グループ化されたフィールドを選択後、右クリックメニューを表示して [ラジオボタン追加]をクリックします。追加後の「選択値」は適宜変更してください。

インデックスに戻る

 

 日付を扱う方法

日付は、数値と同様にWebが苦手としているデータ型です。X-WebFormで日付を扱うには、単一フィールドで年月日を扱う方法と、年月日を個別のフィールドで定義する方法の２通りがあります。

1 ) 単一フィールドで日付を扱う
単一フィールドで日付を扱うには「文字フィールド」を使用します。フィールドを定義した後で、「日付書式」プロパティで日付の表示形式を指定します。
この例では「yyyy年MM月dd日」を指定します。
この指定により日付を入力後、フォーカスが他へ移ると同時に、指定した書式に自動変換されます。

2 ) 複数フィールドで日付を扱う
「長方形枠」の上に「ラジオボタン」を配置します。
「西暦フィールド」「月フィールド」「日フィールド」「曜日フィールド」は、個別のフィールドを連動させて日付を扱うことができます。
以下の例は、「西暦フィールドID名：year」「月フィールドID名：month」「日フィールドID名：day」「曜日フィールドID名：week」を定義して、ラベルで見出しを配置した例です。
フィールドを配置したらプロパティで個々のフィールドに連動するフィールドの関連付けを行ないます。「西暦フィールド」であれば、関連する「月フィールド」「日フィールド」「曜日フィールド」のすべてに対して設定を行ないます。

プレビューで確認すると、以下のように日付を入力したとき曜日が自動設定されていることがわかります。
3 ) カレンダからの入力
日付をカレンダから入力したい場合は、当該フィールドを選択した状態で、ツールバーの「カレンダ入力」ボタンをクリックします。
「カレンダ入力」は、「文字フィールド」「西暦フィールド」「月フィールド」「日フィールド」「曜日フィールド」のいずれも設定可能です。
「カレンダ入力」が設定されたフィールドは、ダブルクリックすると以下のカレンダが表示されます。日をダブルクリックすると、もとのフィールドに選択した年月日が自動入力されます。

インデックスに戻る

 

 バーコード

バーコードは業務を省力化するのに欠かせないアイテムです。伝票に商品コードを表示して読み取る旧来からの利用方法はもちろんのこと、最近ではコンビニバーコードやQRコード等も注目されているようです。「バーコード」コンポーネントを使用すると、リアルタイムなバーコード生成インターフェイスを容易に作成できます。

1 ) 標準のバーコード
X-WebFormは標準で「CODE128」「CODE39」「PDF417」の3種類のバーコードが扱えます。 以下の例は商品コードの入力欄（IDはitem_cd）と、それを表示するバーコードを配置したものです。

バーコードのプロパティで「バーコード種類」を指定します。この例では英字も扱える「CODE128」を指定します。
また、「バーコード値ID」にはフォーム上のフィールドの一覧が表示されますので、バーコードに入力する値のフィールドを指定します。ここでは商品コード入力欄（item_cd）を指定します。

プレビューで表示してみてください。以下のように商品コード欄に値を入力してフォーカスが離れると、バーコードの表示がリアルタイムに変更されます。
2 ) グレープシティ社「JBarCode 2.0J」
「標準で用意されているバーコードの種類では足りない」という方には、グレープシティ社の「JBarCode 2.0J」を組み込むことで多彩なバーコードを利用いただけます。Visual Basicによるプログラミング経験のある方には、グレープシティ社の「SPREAD」「ActiveReport」といった名作コントロールたちは馴染みが深いのではないでしょうか。
「JBarCode 2.0J」は、商品コードで代表的なJANコードをはじめ、携帯電話による利用で普及したQRコードや、郵便ラベルのカスタマバーコード、コンビニエンスストア向けの払込書に利用できるコンビニバーコードなど、18種類の規格に対応しています。

製品URL： http://www.grapecity.com/japan/jbarcode/

X-WebForm Developerで「JBarCode 2.0J」のライブラリを組み込めば、標準バーコードと同様にプロパティ設定だけで容易に利用することができます。
グレープシティ社製品との連携については、今後、グラフ表示コントロールなどにも対応していく予定です。

インデックスに戻る

 

 表の作成

請求書や受注伝票等の明細部では表形式の入力が欠かせません。HTMLの言語仕様にもTableはありますが、X-WebFormでは表計算ソフトのような、見た目の一味違った表を作成することができます。また、例えば5列×10行の表を作成する場合、50個のフィールドを定義するのではなく、5列の明細を１行定義して10行繰り返すといった設定でフォーム作成が効率的に行なえます。

1 ) フィールドの配置
初めに表に使用するフィールドを１行配置します。
ここでは、行番号をラベル、商品名を文字フィールド、数量、単価、金額を整数フィールドで作成します。

フィールドの背景は図形フィールドで線を引くこともできますが、プロパティで「枠線付き」をTrueに設定するとフィールドに自動的に枠線がつきますので便利です。
また、フィールドの高さや横位置がきれいに配置できない場合は、配置を揃えたいフィールドをすべて選択して右クリックでメニューを表示すると、「配置」「サイズ」で複数フィールドの位置やサイズを一括で揃えることができます。
2 ) グループ化
表に使用するフィールドを全て選択後、右クリックでメニューを表示して[グループ] - [グループ化]を選択します。 この操作で選択された項目はグループ化されます。

3 ) グループ情報の設定
グループ化されたフィールドを選択後、右クリックメニューを表示して [グループ設定]を選択すると、以下の「グループ設定」画面が表示されます。


「行数」の欄に繰り返しを行なう行数を指定します。ここでは10行を指定します。

表は段違いで行の色を変えると見やすくなります。その場合は偶数行（または奇数行）の背景色を指定することができます。ここでは偶数行に薄いブルーを設定します。 設定を行なって「OK」ボタンをクリックすると、明細部が以下のような表示となります。
4 ) ラベルの指定
表の上にラベルで見出しをつけます。


アクセントをつけるためにラベルに色をつけてみます。背景色をグレー、文字色を白に設定します。
5 ) フィールドの詳細設定とプレビュー確認
フィールドに対して細かい設定をしていきます。
「商品名」はIME（日本語入力）をオンに指定して、「金額」には「数量」×「単価」を計算で指定します。
表の下に合計欄を作って、明細の「金額」を合計する計算設定を行ないます。

表内のラベル「行番号」に自動で連番を設定したい場合は、プロパティの「行番号」をTrueに設定すると行数が自動的に表示されるようになります。

設定が完了したらプレビューで出来栄えを確認します。以下のような計算が入った明細欄ができました。
6 ) スクロール
表の明細行が多いときは、スクロール設定を行なうことができます。
「グループ設定」画面で「スクロール」のチェックボックスをチェックします。行数はウェブフォーム上に見える最大行数を「行数」の欄に、明細の全行数を「初期行数」の欄に指定します。ここではウェブフォーム上に10行表示して、スクロールで全20行の設定を行ないます。

7 ) 複数段の表
表の定義は１段である必要はありません。以下のような複雑な配置でも、グループ化することで表として定義することができます。

インデックスに戻る

 

 フィールドの一括操作

フォームをある程度作成した後にIDの命名をチェックしたり、タブ移動順を変更するなど、フィールドに対する操作を一括で済ませたい場合は「フィールド設定」画面で行なえます。

1 ) メニューバーの[ファイル] - [フォーム設定]から「フォーム設定」画面を開き、「フィールド設定」タブを選択します。

この画面ではフォームに配置されているすべてのコンポーネント、グループ化の状態が確認できます。
2 ) ID名、タグ名等を変更する場合は、変更したい項目を直接修正します。
3 ) タブ移動順序を変更するには、「順序」の欄の「↑」「↓」ボタンで変更します。上に配置されている項目順にタブ移動が行なわれます。

インデックスに戻る

 

 背景画像を使ったウェブフォームの作成

ウェブフォームのデザインをより簡単にしたい場合は、背景画像を使うと便利です。使い慣れたExcelやWord等でデザイン（外枠）を作成してフォームの背景とし、入力フィールドを割り当てていくだけでウェブフォームをさらに短時間で作成することができます。

1 ) ExcelやWord等で外枠を作成してPDF形式に変換します。PDFは1,980円くらいで市販されているツールやフリーウエア等を使って簡単に変換できます。

2 ) 対象のレイアウトのPDFをAdobe Readerで開きます。Adobe Readerのメニューバーの[編集] - [ファイルをクリップボードにコピー]を選択します。
3 ) 次にX-WebForm Developerを開きます。メニューバーの[編集] - [貼り付け]を選択すると、クリップボードよりPDFがPNG形式の背景画像に変換されて貼り付けられます。

4 ) フォームのサイズと背景画像があわない場合は、メニューバーの[ファイル] - [フォーム設定]で「フォーム設定」画面を開き、「基本タブ」の「用紙設定」でサイズを調整します。詳しい操作は前回の章を参照ください。
5 ) 背景画像の上にフィールを配置すれば完成です。

インデックスに戻る

 

 こだわりJavaScriptプログラミング

以上、標準コンポーネントのプロパティ設定だけで、JavaScriptの知識がなくても様々な便利な機能が利用できることは理解していただけたでしょうか。
ただ、「どうしてもJavaScriptを書きたい！」という方は、JavaScriptで固有のプログラムを記述することもできます。入力された値をチェックしてエラーメッセージを表示したり、ある箇所に入力された値を別のフィールドにセットしたり、といったことも自由自在に行なえます。

1 ) 画面初期表示のタイミング（OnLoad）で記述する場合
メニューバーの[JSP＆スクリプト設定]を選択すると「JSP＆スクリプト設定」画面が表示されます。この画面で[JavaScript]タブ- [OnLoad]タブを選択して、直接JavaScriptを記述してください。

2 ) フィールドのイベントハンドラに記述する場合

以上、２回にわたり、ウェブフォームの作成方法についてご説明しました。随分ボリュームを詰め込んで書いてしてしまった気がしますが、最後までお付き合いいただきありがとうございます。「HTMLやJavaScriptの知識がないから」という理由でHTML入力フォームの作成を敬遠していた方にも、X-WebFormをきっかけに、Webをより身近な存在として体感していただければ幸いです。
ウェブフォームの作成をマスターしたところで、次回からいよいよサーバー側のプログラミング開発の章へ突入していきます。まず、オールインワンな高性能IDE「Oracle JDeveloper 10g」との連携について説明いたします。

インデックスに戻る