ページ要素の改変

表4.1の!の改変については，HTML¹ で記述されたテンプレートの一部の修正のようなきわめて小規模な 改変であれば，フレームワークや開発手法の種類を問わず手続き的なプログラムの知識は不要である．少 し複雑な事例として，テキストフィールドで入力していたフィールドをポップアップフィールドに変更した い場合を検討する．まず，ページ要素の改変だけの場合を示し，より実用的な意味でマスターから取り出し た内容をポップアップメニューに表示する場合の改変の手順についても検討する．

4.3. ページ要素の改変 33

表4.1:システム改変の発生する状況

概要 例

!1 ページ要素 •表示する順序変更

•非表示フィールドを新たに追加表示

•文字の色の変更

!2 データベース要求 •レコード取得のための検索や並べ替え条件の変更

•リレーションシップを伴うコンテキストを記述

•レコード作成や削除機能を追加する

!3 単一フィールド応答 •小数以下の桁数を2桁から3桁に増やす

•一定の文字列を前後に追加する

•計算フィールドを定義する

!4 ユーザーインタフェースのカスタマイズ •特別な処理を行うボタンの設置

（クライアントスクリプト） •ページ生成のための拡張処理の記述や変更

!5 データベース応答 •データベースだけで実現できない集計処理を追加

（サーバーサイドスクリプト） •PDF生成などの追加処理が必要なデータ

!6 スキーマ変更 •新たなビューを作成する

•テーブルやフィールドを新たに作成する

* 新規ページ追加 •スクラッチから作成する

•既存ページを複製後，!1〜!6の改変をする

サーバサイド Webページ

データベース

6

JavaScript

4 1

5 3 2

図4.2:ページ改変の分類

4.3.1 一定の選択肢のポップアップメニューに変更する

INTER-Mediatorを利用して作成したアプリケーションに対して，表4.1の!に相当する要素の種類を変¹ 更する改変作業を示す．図3.3のWebページにある「分類」を，テキストフィールドではなくポップアップ メニューから一定の文字列を選択して入力できるようにしたいとする．ポップアップメニューに変更するた めに，ページファイルの一部をリスト4.1のようにinputタグ要素からselectタグ要素に変更し，加えて選

択肢をoptionタグで記述する．

リスト4.1:ポップアップメニューで選択できるようにする

1 【変更前】

2 <input data−im="assetdetail@category" / >

3 【変更後】

4 <select data−im="assetdetail@category">

5 <option value="個人用">個人用< /option>

6 <option value="共用">共用< /option>

7 < /select>

ページ要素の修正が必要になれば，タグの修正はフレームワークの種類に限らず必要である．しかしなが ら，INTER-Mediatorではこの記述だけで，ページ表示したときにcategoryフィールドの値に応じて対応す る選択肢が選択される．また，ポップアップメニューを選択することで，選択した項目に対応する値を自動 的に元のレコードのcategoryフィールドに書き込む．こうしたユーザーインタフェースとモデルの連動を 取る手続き的なプログラムの記述は不要であり，バインディングの仕組みによって自動的に背後で処理され ている．

一般的な手続き的なプログラミングを主体としたフレームワークでも，テンプレートをHTML主体で記 述し，テンプレート処理のために少数の拡張記述を加えた程度で記述できる場合もある．表4.1の!の改変1

を行う場合，HTMLの変更だけで済まない場合には，プログラムの中にある変更可能な要素を探し出すた めにはビューやコントローラーがどのファイルであるのかなどの構成全体を把握する必要があり，小規模な 修正でも全体的な知識が必要である．また，タグの種類に応じたプログラムの変更が必要になることもあ る．一方，INTER-Mediatorでは，ページファイルの記述のみの変更で対処できる．

4.3.2 ポップアップメニューの選択肢をマスターテーブルより取得する

アプリケーションを開発した当初は文字列でデータを入力していたが，いくつかの決まった文字列であ る場合には，その文字列をレコードのフィールドに持つマスターテーブルを利用する方が記述がばらばら にならないなどの利点がある．このとき，マスターテーブルがない場合には，表4.1の!の改変が必要にな⁶ る．SQLデータベースでは一般にはエンジニアが検討をしてテーブルの追加等を行うことになり，この部 分はエンドユーザーだけでなくエンジニアの援助が必要である．

ここで，新たに「分類」フィールドでの選択項目をマスターテーブルの「category」から取得することになっ たとする．ポップアップメニューではcategoryテーブルに入力されている文字列を選択肢にする．category テーブルでは主キー値を整数で保持するフィールドもある．assetテーブルでは文字列を記録するcategory フィールドではなく，数値を記録するcategory_idフィールドに置き換える．categoryテーブルには主キー

値のcategory_idと，カテゴリ名を記録するnameの2つのフィールドを用意する．データの移行を含めて，

ここまでの作業はスキーマの設計に精通したエンジニアが行ったとする．

以後の作業は，リスト4.2のように宣言的な記述の修正で可能である．まず，categoryテーブルを利用す

るためのcategoryコンテキストを定義ファイルに追加する．単純なマスター参照だけなら，nameキーの値

を指定するだけで良い．そして，ポップアップメニューのためのSELECTタグのdata-im属性にあるター ゲット指定のフィールド名をcategory_idに変更する．選択肢のためのoptionタグは1つだけ記述する．こ こで詳細ページでは，TABLEタグ内にさらにTABLEタグがある場合，内部でさらにクエリー内容がペー ジに展開されることを示した．同様な関係がこの場合はTABLEタグとSELECTタグで実施される．ここ

ではSELECTタグの下位の要素として，categoryテーブルのレコードの数だけOPITIONタグ要素が並ぶこ

とになり，マスターの内容がポップアップメニューの選択肢となる．OPTIONタグのターゲットしては2つ の項目があり，それぞれ「category@category_id@value」「category@name」である．後者はcategoryテーブ

4.4. データベース要求の改変 35