GUI 化のためのロード・マップ

それではどのような順序でどのようにGUI化を進めて行けばよいのでしょうか ?
成功の道筋を示すGUI化のためのロード・マップを示して行きます。
AutoWeb を使えば DDSの修正だけでWeb開発を十分行うことができます。

最初はメニューの GUI化から

初めはメニューをツリー・ビューのメニューに変更するには次のガイドに従って進めていきます。

5250アプリケーションは、最初にAutoWeb によってログイン後、
直ちにメニューが表示されることが最も望まれます。
5250サイン・オンでサイン・オン入力するとメニューが表示される前に確認画面が
表示されるアプリケーションは Webでは、一般的ではないので他の方法にすべきです。
ただし AutoWeb はこのような特殊ケースのアプリケーションにも対応しています。

対象となるメニューはすべてのタイプのメニューである

AutoWeb のツリー・ビューを初めて見る人の最初の質問は
「うちは GO MENU型式ではないメニューですが大丈夫ですか ?」というご質問です。
AutoWeb は GO MENU 型式のメニューだけでなく
CALL 呼出しの CLP 型式や SDA メニュー, パネル・グループによるメニューもサポートしています。
CALL 呼出しの CLP によるメニューであってもツリー・ビューとして表示することができます。

最初のメニューはメニュー・オプションで判断する

最初に表示される画面に GO AUTOWEB の 「2.実行環境の設定」( WEBENV ) の
メニュー・オプションとして定義されている文字列が見つかれば、
その画面はメニューである、と判断されます。 

#------------------------------------------------------
#  Menu_Opt  :  メニュー・オプション番号の表記方法
   Menu_Opt             9.
   Menu_Opt            99.
      :

( 9. や 99. の文字9 は数字であることを表しています。)

自社のメニューの表記方法がこの型式に適っているかを確認してください。
この文字列が含まれない画面はメューとは判断されません。
逆にメニューと判断されたときはツリー・ビューの項目をクリックすると
上記のオプション番号がENTERキーとともにIBM i に投入されて
結果的に人手により文字列操作を行ったのと同じことになります。
自社のメニューがこの型式ではないときは WEBENV に適切なディレクティブとして登録する必要があります。

上位に戻るためのキーは統一されているか ?

ツリー・ビューとしてメニューが表示されたとき
展開されたツリーから別のツリーの項目をクリックしたときには
内部では AutoWeb が自動的に上位へ戻るための機能キーを押してから別のツリーの項目へ遷移します。
このとき上位メニューに戻るための機能キーが定義されていなければなりません。
IBM i の場合、上位に戻るための機能キーは一般的には F12キーまたは F3キーです。
ただし AutoWeb で使用する業務メニューを選択していくと
F3キー で戻ったり F1キー で戻ったり、... と様々な機能キーで
統一されていないのでは AutoWeb は上位に戻る機能キーを判断することができません。
従って AutoWeb で使用するアプリケーションの戻りキーはすべて同じものに統一してください。 

#------------------------------------------------------
#  Menu_Return   上位メニューに戻るための機能キーを
#                定義します。
#  Menu_Return         CF03
   Menu_Return         CF12

サブ・メニューとなる判断

最初のメイン・メニューが表示されるとそのメニューの各オプションが、
また下位へのサブ・メニューの展開になるのか
またはプログラムの起動であるか? の判断が必要になります。

【例】
   10. 受注管理メニュー
   11. 外字処理

.... この例では「10.受注処理メニュー」は下位メニューへの展開であるとわかるのは
「メニュー」という文字列が含まれているからです。
しかし「11.外字処理」という文字列はプログラムの起動を表しているかもしれませんし、
あるいはサブ・メニューに繋がるのかもしれません。
また、次の例をご覧ください。 

-----------------------------------------------------------------------------------------
 MAIN                        I5/OS メインメニュー
                                                          システム :   XXXXXXXX
 次の１つを選択してください。

      1. ユーザー・タスク
      2. オフィス・タスク
      3. 汎用システム・タスク
      4. ファイル，ライブラリー，およびフォルダー
      5. プログラミング
      6. 通信
      7. システムの定義または変更
      8. 問題処理
      9. メニューの表示
     10. 情報援助オプション
     11. ISERIES ACCESS のタスク

     90. サインオフ

 選択項目またはコマンド
----------------------------------------------------------------------------------------

... これは IBM i のメイン・メニューですが「1.ユーザー・タスク」や
「2. オフィス・タスク」は実際はそれを選択すると、実はサブ・メニューであることがわかります。
従って AutoWeb では「タスク」という文字列をメニューであることを表す文字列として
WEBENV に登録しておく必要があります。

AutoWeb は WBENV の Menu_Tree ディレクティブに相当する文字列を
サブ・メニューであると判断してツリー・メニューのフォルダー・アイコンとして表示します。
そしてフォルダー・アイコンをクリックすると
さらに下位のツリー・ビューへと展開することができるようになります。 

#------------------------------------------------------
#   メニューの定義
#------------------------------------------------------
#  Menu_Tree :  この文字列が含まれているときに、
#               これがメニューであることを示します。
#               下位メニューに展開を指示します。
#
   Menu_Tree     メニュー
   Menu_Tree     ﾒﾆｭｰ
   MENU_TREE     ＭＥＮＵ
   MENU_TREE     MENU
   MENU_TREE     タスク
      :

このようにサブ・メニューを表す表記の文字列を規則化して登録しておく必要があります。
AutoWeb で運用しようと予定している業務のメニュー表記が
正しく同じ規則の表記文字列を使用しているかをご確認ください。
もし、そうでなければ規則性に従うようにメニューの表記を正しいものに変更してください。

メニューの GUI化の要点
  • DSPF, CLP および PNLGRP すべてのメニューをツリー型式で表示する
  • メニュー・オプション型式を社内で統一しておくこと
  • メニューの戻りキーも社内で統一しておくこと
  • サブ・メニューであることを示す表記文字列も統一しておくこと

社内用の 5250画面の GUIコントロール化

それではいよいよ社内にある5250ユーザー画面の GUIコントロール化を進めて行きましょう。
最初はチェックボックス, ラジオボタン, コンボボックスの
3つの基本的なGUIコントロールの違いについて学習します。

チェックボックス




任意選択可能を表すのがチェックボックスです。
つまり選択しても選択しなくてもよいことを表し、いくつかある候補の中から
ひとつだけでなく複数個を選択することも許されます。
DDSキー・ワードは MLTCHCFLD (複数項目選択フィールド)というわかりにくい表現です。
ただし MLTCHCFLD は SFLレコード上では使用することができません。
SFLレコード上でのチェックボックスは AutoWeb で
*SFLCHK によってチェックボックスを作ることができます。

5250アプリケーションの場合、どれかを選択するという項目は少ないはずです。
多くの場合は○○区分 (1=あり) のような任意選択の項目をチェックボックスにするのが最適です。

【PGM107:部品マスターの登録】 MN01- オプション7 : チェックボックスのサンプル

手配確定 

            A                                 14  2' 手配確定 '
            A            BHTEHA@        2Y 0B 14 25TEXT(' 手配確定 ')
            A                                      MLTCHCFLD
            A                                      CHOICE(1 '  手配確定  ')
            A                                      CHCCTL(1 &CHK01)
            A N88                            +2'(1= 手配確定 )'
            A            CHK01          1Y 0H
【解説】

チェック・ボタン(MLTCHCFLD) となるフィールドは必ず
2桁の数字フィールド( 2Y 0) でなくてはなりません。
このためチェックボックス化しようとするフィールドが 2Y 0 でなければ
画面フィールドを実際のフィールドにMOVEする演算を記述する必要があります。

※ SFLレコード上のチェックボックス

照会画面などで SFLレコード明細行のレコードを選択して
別画面に詳細を表示するアプリケーションはよく見られますが、
この操作を Web化しようと思うとSFLレコードにチェックボックスを設けて
エンド・ユーザーに目的のSFLレコードをチェックさせてから押しボタンを押す、というのが
Webでの普及している一般的な操作です。

しかしIBM DDS解説書には記述されていませんが実際は CRTDSPF で
SFLレコード上に記述された MLTCHCFLD はコンパイル・エラーとなります。

これを避けるためにAutoWeb では *SFLCHK という機能が用意されています。
SFLレコードの1桁の文字フィールド(1A)のテキストに次のように *SFLCHK と記述するだけです。 

       A*( *SFLCHK : SFL 用のチェックボックス =1 )
       A            SEL            1A  B  8  4TEXT('*SFLCHK')

エンド・ユーザーが SFLレコードのチェックボックスをチェックすると
*SFLCHK として定義されている 1A の文字フィールドには値「1」が入ります。

ラジオボタン




ラジオボタンは複数個の選択可能値の中から唯一だけ選択するのに使用されます。
後で紹介するコンボボックスも多くの場合は唯一の選択を示しますが
ラジオボタンはコンボボックスと違って候補がすべて目に見える形で示されます。
それゆえ数多くない候補の中で全体を見せて選択させたほうがよい場合に使用されます。

DDSキー・ワードは SNGCHCFLD(単一選択項目フィールド)というわかりにくい表現がされています。

5250アプリケーションの場合、初めから候補が画面上に表示されている項目を
GUI化するのであればラジオボタンが適切です。

コンボボックス

コンボボックスは候補をプルダウンしてその中から選択するためのコントロールです。
コンボボックスという名称を誤って「プル・ダウン・メニュー」という人がいますが
それはメニュー・バーのプル・ダウン・メニューのことであってコンボボックスを
「プル・ダウン・メニュー」と呼ぶ習慣は決してありませんので注意してください。
コンボボックスは DDSの標準的なキー・ワードとしては用意されていませんが
AutoWeb の機能としてコンボボックスを定義することができます。

コンボボックスには静的なコンボボックスと動的なコンボボックスの2種類があります。
静的なコンボボックスとは DDS の TEXT に表示名を入れて、
VALUESキー・ワードに候補値を入れる方法で、
これによって AutoWeb によって静的なコンボボックスとして表示することができます。

5250アプリケーションの場合、初めから候補が画面上に表示されている項目を
GUI化するのであればラジオボタンが適切です。

【PGM201:受注の入力】 MN02- オプション1 : 静的コンボボックスのサンプル

      A                                  6  2' 受注区分 '
      A            JUKBN          2   B  6 13
      A                                      VALUES('01' '02')
      A                                      TEXT('" 売上 " " 返品 "')
【解説】

表示には「売上」と「返品」がそれぞれ候補として示されます。
「売上」または「返品」をエンド・ユーザーが選択すると
対応する VALUES の値 01 または 02 が投入されます。

静的コンボボックスに対して動的コンボボックスとはデータ・ベースを読んで
その内容を候補として表示する方法です。
AutoWeb ではストアド・プロシージャーを使って動的なコンボボックスを表現します。
ストアド・プロシージャーは SQL, QUERY または RPG/COBOL によって作成することができます。

【PGM201:受注の入力】 MN02- オプション1 : 動的コンボボックスのサンプル
       A                                  6 57' 担当者 '
       A            JUTANT    R    4A  B  6 66REFFLD(TANTOMR/TACODE QTRFIL/TANTO)
       A                                      TEXT('*COMBO *KEY')
       A            TTNAM     R    8A  O  6 71REFFLD(TANTOMR/TTNAM QTRFIL/TANTO)
       A                                      TEXT('*COMBO *DATA')       -
【解説】

コンボボックスの値を *KEY , データ部分を *DATA として REFFLD によって参照定義を行ってください。
この記述の例では 

SELECT JUTANT, TTNAM FROM WTRFIL/TANTO

という SQL 文が自動生成されて SQL のストアド・プロシージャーによって
コンボボックスが検索されて表示されます。
ストアド・プロシージャーについてはこれ以外に
RPG/COBOL や Query/400 定義も利用することができます。
くわしくはこちらで。

さらに次のGUIコントロールも DDSで定義することができます。

カレンダー・コントロール カレンダー・コントロールは日付選択のために、
便利なコントロールです。
日祭日の保守が必要ありません。
常に正しい最新のカレンダーを表示して
その中から選択することができます。

ツリー・メニューを使うには

ツリー・メニュー

ツリー・メニューを構成すると適用業務の全体像が直観的で大変わかりやすいものになります。
IBM i の伝統的なメニューでは、操作している自分自身がメニュー全体のどの位置に
いるのかを常に頭の中に描いていなければなりません。
メニュー項目の非常に多い適用業務の中から目的の業務を選んで操作することは
操作員にとってストレスがかかります。

これに対してツリー・メニューでは頭の中に思い描く必要はなく
メニューの構造が見たままに表示されますので非常にわかりやすくなります。

ツリー・メニューで運用するには、適用業務の構成が
いくつかの簡単なルールに沿っていなければなりません。

ツリー・メニューとして表示するために必要な条件

1. ツリー・メニューが *YES であること

GO AUTOWEB の AutoWeb メニューの「2. 実行環境の設定」で 


	TREE_MENU     *YES

と設定されていなければなりません。
特定の実行ライブラリー(オブジェクト・ライブラリー)を個別に指定して 


	TREE_MENU     *YES       MYOBJLIB

のように指定することもできます。

2. メニュー項目の規則性が守られていること

メニュー項目は「1. 得意先の登録」のように数字 + ピリオドのような
一定の規則性を守っていなければなりません。
あるメニューは数字 + ピリオドであるが、別のメニューは
数字 + コロン というような不規則な項目表示は避けてください。
特にメニュー項目が数字だけという場合の判別はできません。

GO AUTOWEB の AutoWeb メニューの「2. 実行環境の設定」で 


	Menu_Opt             9.
	Menu_Opt            99.

のように記述しておけば、 1. 2. ... や 01. 02. ... はメニュー項目であると
判断されます。

メニュー項目がサブ・メニューである場合は必ず
「2. 棚卸しメニュー」のように、これがサブ・メニューであることを
示す「メニュー」という文字列が含まれていなければなりません。
「3. 在庫管理」というメニュー項目はこれがサブ・メニューであると
判断することはできません。「3. 在庫管理メニュー」のようにして
これがサブ・メニューであることを表記してください。

GO AUTOWEB の AutoWeb メニューの「2. 実行環境の設定」で 

	Menu_Tree     メニュー

と記述すると「メニュー」という文字列を含むメニュー項目は
サブ・メニューであると判断されます。

【重要】Menu_Tree は２つの意味があります。

Menu_Tree として登録する文字列はメニューを示すための
ふたつの場面で使われます。

  1. 1. サブ・メニューであることを示す

    メニューの中のあるメニュー項目は実はそれがサブ・メニューであることを
    示すために使われます。

    【例】 
               1.受注管理メニュー
           2.発注業務メニュー
           3.在庫業務
    【解説】

    この例では「 1. 受注管理メニュー」や「 2. 発注業務メニュー」には
    「メニュー」という Menu_Tree として登録されている文字列が含まれているため
    これらはサブ・メニューとして判断することはできますが、
    「 3. 在庫業務」はメニューであるのか、プログラムであるのかを
    判定することができません。
    もし「 3. 在庫業務」も実はサブ・メニューであるなら
    「在庫業務」という文字列も Menu_Tree として登録すれば
    「 3. 在庫業務」もこれがサブ・メニューであると判断されます。

               Menu_Tree   在庫業務
  2. 2. サブ・メニューの表題であることを示す

    前述の「在庫業務」をサブ・メニューとして登録したものとします。
    この「 3. 在庫業務 」を選択すると次に表示される画面はツリー・メニューとして
    表示されますが次の「在庫業務」のメニューの画面では
    「在庫業務」という文字列は次のようにどこにも現れていなければ
    どうでしょう?

    【例】 
                          在 庫 業 務

       1.棚卸し入力
       2.棚札の出力
       3.棚卸し在庫一覧表
           :
    【解説】

    例えば「 1. 棚卸し入力」を選択してプログラムの処理を終了して
    この画面に復帰したときに、この画面がメニューであると
    判断できる文字列はどこにもありませんので
    この画面はメニューではなく単なる画面として表示されてしまいます。
    メニューに復帰したことをツリー・メニューに認識させるには
    「在 庫 業 務」を Menu_Tree として登録しておけば
    この画面への復帰はメニューへの復帰であると見なされます。

              Menu_Tree    在 庫 業 務

    ※ ツリー・メニューとして正しく表示されるにはメニュー表現の方法が
    規則性を持って統一されていることが重要です。

ツリー・メニューの、ある項目から別のツリーへジャンプするような
操作がエンド・ユーザーによって行われたときは
AutoWeb は「F12=戻る」のような機能キーを押して上位のメニューに
戻ります。
この上位に戻る機能キーがメニューによって統一されたものでないと
AutoWeb は上位のメニューに戻ることができません。

GO AUTOWEB の AutoWeb メニューの「2. 実行環境の設定」で 


	Menu_Return         CF12

と定義しておくと上位メニューに戻るために内部では F12キーが
押されます。
この定義は複数個定義することはできません。

どの GUI コントロールを使うべきか?

長い間、5250 エミュレータ上での開発をしていて GUI 化を行うに当たって
どのような GUI コントロールを使うべきか悩む場合があります。
ここでは適切な GUI コントロールを与えるための指針となるガイドを示します。

1. GUI コントロールの性格と使用方法を理解する。

GUI コントロールを使う目的は、その GUI コントロールの意味が
一般的に周知されていることにあります。
従ってエンド・ユーザーに使用方法や意味を説明する必要がありません。
ところが、開発者が本来の GUI コントールの意味とは異なる意味を持って
使用してしまうと GUI コントロールの意味が失われてしまいます。

  • ラジオ・ボタン

    例えば ラジオ・ボタンは、唯一の項目だけが選択できることを
    意味しています。

  • チェック・ボックス

    これに対してチェック・ボックスは複数個の項目を同時に選択できることを
    意味しています。

  • 押しボタン

    また押しボタンとはいくつかの選択を行ったときや入力項目に必要な
    文字列を入力した最後にサーバーに投入するために使用されます。
    押しボタンによる操作は実行キーや機能キー操作に良く似ています。
    従って機能キーなどが押しボタン化されるのはこのためです。

  • リンク

    リンクは Web サイトでは良く使われます。
    例えば検索サイトで検索した結果をクリックしてサイトにジャンプ移動しますが、
    クリックする文字列には URL が埋め込まれていることが多いのですが
    5250 エミュレータ上でカーソルをセットして機能キーを押して
    POPUP 表示したりする作業はリンクに置換えると自然です。

  • TABキー

    機能キーによって画面を切替えていた業務は TAB キーによる切換えに
    置換えると非常に効果的です。
    RPG/COBOL ソースには一切、手を加えることなく機能キーの切替えだけを
    TAB キーにすることができます。
    機能キーによる切換えを TAB キーにすることによってエンド・ユーザーの
    安心感や使いやすさは各段と向上します。

  • コンボボックス

    選択候補をプルダウンしてその中から選択できるのが
    コンボボックスです。
    コンボボックスは静的なデータをあらかじめ DDS ソースに埋め込んでおく
    静的なコンボボックスだけでなく、社員マスターなどのデータ・ベースの
    レコードを読み取って表示する動的なコンボボックスも作ることができます。
    さらに指定した営業所の社員レコードだけを抽出して表示する
    条件つきのコンボボックスも表示することができます。
    ただし Query のあいまい検索( LIKE など)のような指定は
    コンボボックスではできません。
    あいまい検索が必要な場合は POPUP 検索を指定してください。

  • ポップアップ

    5250 エミュレータでの POPUP が WINDOW レコードとして定義されていれば
    AutoWeb でもポップアップ・ウィンドウとして表示されます。
    ただし 5250 エミュレータでの多重 POPUP 表示は避けるべきです。
    POPUP の上にさらに POPUP、さらに POPUP, .... のような極端な処理構造は
    エンド・ユーザーの操作に混乱を及ぼします。

  • POPUP検索

    コンボボックスと同じような原理で POPUP 検索を指定することができます。
    POPUP 検索を指定した項目をフォーカスすると虫眼鏡のアイコンが
    表示されますので、それが POPUP 検索であることがわかります。
    POPUP 検索ではデータ・ベースを指定してデータ・ベースの内容を
    表示して選択できるだけでなく Query/400 のようなあいまい検索や
    一部の文字列だけでの検索もできます。
    POPUP 検索を利用すれば 5250 エミュレータ上で作成していた
    ポップアップ画面のアプリケーションを開発する必要がありません。

2. 普段よく使うサイトなどで GUI コントロールの使用方法を学習する。

5250 エミュレータの学習に長年、携わっているとどのように GUI 化すれば
よいか最初はなかなか掴めないかもしれません。
SFL の多くの行の中からの選択をすべて押しボタンの羅列にしたのでは
普段、インターネットなどで GUI を見慣れているエンド・ユーザには
受入れられません。

それにはお手本となる参考サイトではどのようなコントロールが使われているのかを
意識的に見て学習することが効果的です。
特に Microsoft や 楽天、Amazon などのショッピング・サイトやゴルフの予約サイト。
ホテルの予約サイトや銀行のメンバーサイトなど、大手のサイトを参考にしてください。
個人サイトでなく大手のサイトであれば非常にわかりやすく扱いやすいように
かなりの工夫がされています。
GUI コントロールや操作性がどのように工夫されているかを意識して
ご覧になれば学習することがたくさんあります。


【例】Microsoft Outlook メール

典型的なリスト・ビューの保守アプリの型式です。
明細行はリンクでありクリックするとその行が表示されます。
明細行のチェック・ボックスをチェックして選択して
まとめて削除することができます。

ボタンばかりが一斉に並んでいるような表示は Web サイトでは
ご覧になったことはないはずです。
やはり極端な表示をしてしまうのはどこか適切さを欠いていると
考えてよく似たサイトをインターネットで探すべきです。

IBM i の開発者は 5250 エミュレータばかり長年扱っているとやはり
5250 の仕様をWebサイトに持ち込もうとしてしまう傾向にあります。
Web サイトで利用されている自然なインターフェースに従ったほうが
エンド・ユーザーにも自然に受け入れられます。
そのためにも普段から意識的に Web サイトのアプリケーションの利用を
積極的に心がけてください。

● 検索サイトの利用
  • IBM Knowledge Center の利用
  • 楽天などのショッピング・サイトの利用
  • ホテルやゴルフなどの予約サイトの利用
  • SNS や FaceBook などの交流サイトの利用

こういう処理は他ではどのようにしているのだろうか?という疑問の目を
持って探してみれば参考となるサイトはたくさんあります。

HTML インターフェースを始めとするテクニックや工夫はインターネットで
数多く紹介されており、それらを検索する習慣をつけておけば
効果的な利用方法やノウハウを手に入れることができます。
ネットからの知識の吸収は GUI コントロールだけでなく
IBM i の知識やテクニックもインターネットから得ることができます。
インターネットをぜひ活用してください。