Webアプリの基本 | |||||||||||||||||||||||||||||||
はじめに) | |||||||||||||||||||||||||||||||
下記のような顧客マスターのテーブルがあり、これをメンテナンスするWebアプリケーションを作成することにしましょう。 | |||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||
A OR検索画面 | |||||||||||||||||||||||||||||||
|
最初に作るのは、下記の検索機能付き一覧表画面です。 ひな型シートは、MasterListAです。 |
||||||||||||||||||||||||||||||
下記は、検索ボタンの作りについて入力規則の設定です。属性差込は |Name=writeReport=MasterList; です。 |
|||||||||||||||||||||||||||||||
B リンクして詳細画面へ | |||||||||||||||||||||||||||||||
顧客名に<A hrefでリンクして詳細画面へ遷移する。 | |||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||
削除セルの注意点: | |||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||
C 詳細画面にコード入力の追加 | |||||||||||||||||||||||||||||||
例えば、都道府県について、北から順に、北海道は1、青森県は2 と数字コードを割り振る場合も多い。その時のXcuteでの入力方式の代表例として、下記に2つ示します。 | |||||||||||||||||||||||||||||||
1) ExcelのVlookUp関数で数字コードを算出 | |||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||
|
Excelの名前定義は便利です。データベースでコード表などを管理すると、このための追加修正画面をつくるなど、手間が掛かります。Excelの名前定義ならユーザーでもメンテナンスできます。さらに、Accessにリンクして参照用のテーブルとして使えます。 | ||||||||||||||||||||||||||||||
2) ポップアップリスト・ウインドウの利用 | |||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||
上記画面の?の呼び出しボタンは、ナビ機能にあるものを使い、属性差込で|Style=としStyle属性をクリアーして小さなボタンとしています。 呼び出される画面は下記で、Submitの代わりにFsubmitを、Set_RyCxの代わりにFSet_RyCxを使います。Set先は当然、修正・削除シート側のセル位置です。 |
|||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||
D 新規登録を追加 | |||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||
|
顧客名のリンクをクリックすると、ひな型シートMasterDが呼ばれる。新規登録のボタンをクリックすると、ひな型シートMasterDNewが呼ばれます。すなわち、更新・削除と新規登録は、別々のひな型シートで処理します。こちらの扱いの方が、画面数は増えるが扱いが簡単です。 | ||||||||||||||||||||||||||||||
MasterDとMasterNewDを1つのひな型にすると、画面数は減りますが、取り扱いが複雑になります。 | |||||||||||||||||||||||||||||||
E 新規登録時名前重複チェック | |||||||||||||||||||||||||||||||
このテーブルでは、顧客名が重複することは、事実上ありえないので、新規入力時に、顧客名で重複チェック処理を追加することになりました。 下記の画面遷移を実現します。 |
|||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||
|
Xcuteのコマンドは、WriteReport、ReadReport、WriteSheetの他にもう1つMessageがあります。下記のように、「Message=こんにちは」とURLから指定すれば、戻るボタン付きで表示されます(procgi8/ProWebErr.htmがテンプレートhtm)。 | ||||||||||||||||||||||||||||||
R1C6やR3C6は、エラーフックのために用意され、今回のMessageコマンドがここに指定されます。すなわち、R3C6に何かコマンドなどがあれば、R3C8の評価に進むことなく、フックしてそのコマンドを実行します。 | |||||||||||||||||||||||||||||||
|
Xcuteをコントロールするのは、R1C8、R2C8、R3C8 セルです。 下記は、ひな型シートの残滓を示したものですが、復習してみましょう。 まず、R1C8には、ブラウザからのメインコマンド記述され、今回はWRITEREPORT=Na.. です。 R2C8には、Filterなどの主にWriteReport時の補助コマンドを記述します。なお、Filterは、ReadReportやWriteSheet時には、当然無視されます。 |
||||||||||||||||||||||||||||||
R3C8に何か記述されていれば、Xcuteはそれを実行します。今回は、OverRead=MasterNewを行い、SetコマンドとWriteSheet=AfterReadを実行しています。OverReadやOverWriteコマンドは、上書きの意味でシートを変えずにReadやWriteが実行されます。今回のように最後にWriteSheetが発行されているなら、ブラウザからのコマンドと同じように実行され、コマンド連鎖と言っています。 | |||||||||||||||||||||||||||||||
すなわち、Xcuteは、R3C8のOverコマンドを実行し、最後にコマンド連鎖が指定されているならそれを実行します。コマンド連鎖が指定されていないなら、印刷範囲をHTML化してブラウザに返します。 |
|||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||
なお、OverWriteコマンドには、FilterやNextやChg_Sqlの補助コマンドが使えますがこれらは、OverWriteの前に指定します。 また、WriteReport、ReadReport、WriteSheetを使いコマンド連鎖する時に、Setコマンドを併用しますが、Setコマンドにはメインコマンドの前後どちらでも指定しても差し支えありません。 |
|||||||||||||||||||||||||||||||
あとがき) | |||||||||||||||||||||||||||||||
上記が、テーブルが決まった場合の典型的なXcuteによるWebアプリの作り方でしょう。 Webアプリの真髄は、画面遷移であり、本来は、画面遷移を決めてから実装するのが筋ですが、Xcuteの場合作りながら画面遷移を決める場合が多いのではと思います。画面遷移を決めるのはひな型シートであり、ひな型シートがどんな要件を満たせばよいか、よく考えることがWebアプリの上達の道です。 |
|||||||||||||||||||||||||||||||
「更新・削除」と「新規登録」画面は、1つに纏めることも出来るが、今回は別々に2系統作りました。こちらのほうが、考え方も単純で、後の仕様変更などに対応しやすいと考えます。 |
|||||||||||||||||||||||||||||||
Xcuteは作り安い反面、整理やテストなどおろそかにしやすくなる嫌いがあります。特にテストはパターンの洗い出しに注力してください。(言うはやすく、行うはむずかしい) |