AiSee Webの開発作成手順書




1







株式会社ベータ・ネット

作成者:

西川 季輝

 

作成日:

2020/02/15

 



 

目次

1     はじめに... 1

2     AiSeeの環境構成... 1

3     サンプル AiSee プロジェクトの 1 画面分の作業・確認手順... 1

3.1      処理シナリオ作成の前準備... 1

3.2      Webサーバーで実行するデータリンクの作成手順... 1

3.2.1      業務ロジック処理の作成... 1

3.2.1.1       クーポン画面の初期化処理シナリオの作成(準備処理)... 1

3.2.1.2       クーポン画面の初期化処理シナリオの作成(メイン処理)... 1

3.2.1.3       追加イベントのデータリンクを作成(準備処理)... 1

3.2.1.4       追加イベントのデータリンクを作成(メイン処理)... 1

3.2.1.5       更新イベントのデータリンクを作成(準備処理)... 1

3.2.1.6       更新イベントのデータリンクを作成(メイン処理)... 1

3.2.1.7       削除イベントのデータリンクを作成(準備処理)... 1

3.2.1.8       削除イベントのデータリンクを作成(メイン処理)... 1

3.2.1.9     単独テストの指定方法... 1

3.3      HTML変換機能での作業手順... 1

3.3.1      Webスマート変換画面の起動... 1

3.3.2      HTMLの登録... 1

3.3.3      HTML変換ルールの作成... 1

3.3.3.1       HTMLの手動変換... 1

3.3.3.2       HTMLの自動変換... 1

3.3.3.3       HTMLの不要な変換ルールの削除... 1

3.3.3.4       HTMLのフォーム名・フィールド名の修正... 1

3.3.4      HTMLの操作イベント割当の作業手順... 1

3.3.4.1       画面表示初期化イベントの割り当て... 1

3.3.4.2       画面イベントの割り当て... 1

3.4      HTMLを指定したルールに従って変換する... 1

3.5      指定したイベント割り当て情報に従ってJavaBeanを生成する... 1

4     動作確認... 1

4.1      動作確認の概要... 1

4.2      Webサーバー環境の構築... 1

4.2.1      Web サーバーについて... 1

4.2.2      NetBeans のインストール... 1

4.2.3      HTMLJavaソースをNetBeansへ反映... 1

4.3      ISeeシナリオの実行環境の構築... 1

4.3.1      ISeeシナリオの実行環境について... 1

4.3.2      ISeeServiceのインストール... 1

4.3.3      テスト用プロジェクトファイルを作成する... 1

4.3.4      テスト用プロジェクトの設置... 1

4.4      設置した実行環境の確認... 1

4.4.1      ISeeServiceの設置確認... 1

4.4.2      Webサーバーの設置確認... 1

4.5      動作確認... 1

5     参考資料... 1

 


 

 

1       はじめに

この文書は、AiSeeによるWebアプリケーション作成のデモプロジェクトの作成手順の紹介です。

基本的なアプリケーションの作成を通じて、AiSeeの構成、ワークフロー、IDEの使用方法などを学ぶ事ができます。

デモプロジェクトのでは以下のような手順で説明します。

1)     作業プロジェクトの作成

アプリケーションに対応したプロジェクトを作成します。

 

2)     処理シナリオの作成

Webページのイベント発生時に実行する処理シナリオを作成します。

    画面初期化シナリオ

Webページが表示されるタイミングで実行する処理シナリオです。

 

    追加ボタンイベントシナリオ

Webページの追加ボタンを押した時に実行する処理シナリオです。

 

    更新ボタンイベントシナリオ

Webページの更新ボタンを押した時に実行する処理シナリオです。

 

    削除ボタンイベントシナリオ

Webページのテーブル行にある削除ボタンを押した時に実行する処理シナリオです。

 

3)     HTML変換ルールの作成

HTMLDynamicHTMLに変換するためのルールを作成します。

手動変換、自動変換、ルール削除、フォーム名・フィールド名変更などの操作を紹介します。

 

4)     HTMLのイベントと処理シナリオの紐づけ

処理シナリオとDynamic HTMLを紐づける作業です。

 

5)     HTMLファイルの変換

変換ルールや処理シナリオの紐づけ情報をソース変換サーバーへアップロードして、変換結果を受け取ります。

 

6)     動作確認ソース変換結果であるDynamic HTMLManagedBeanTomcatのプロジェクトに反映、実行してWebページや処理シナリオの動作確認を行います。

 

 

2       AiSeeの環境構成

AiSeeでは、Java Server Faces(JSF)フレームワークとISeeエンジンを組み合わせてWebアプリケーションの作成を構築します。

WebアプリケーションのユーザーインタフェースをJSFの「DynamicHTML」で作成し、機能の処理をISeeService上で動作する「処理シナリオ」で作成します。

DynamicHTML」と「処理シナリオ」は、「ManagedBean」を介してデータの受け渡しをします。

 

3       サンプル AiSee プロジェクトの 1 画面分の作業・確認手順

これから、実際開発の具体例を通じて、AiSeeWebの使用手順を細かく紹介します。

 

3.1      処理シナリオ作成の前準備

Webプロジェクトの作成処理シナリオを作成するための準備作業について紹介します。

詳細な手順は、別紙「AiSee Webの詳細操作説明書.docx」を参照してください。

 

l  ISeeIDEのインストール:ISeeで作業を行うためにインストールを行います。

l  プロジェクトの作成:サーバー処理を管理するプロジェクトを作成します。

l  フォルダ作成:処理シナリオ等を処理毎に分類するためのフォルダを作成します。

l  空の処理シナリオの作成:処理を指定する準備として空の処理シナリオを作成します。

l  Web用パラメータの指定:Webページ情報の取得用パラメータを指定する必要があります。

l  Webページへの値の反映:処理シナリオの結果の値をWebページに反映を指定します。

l  共通シナリオのインポート:共通シナリオをプロジェクトに取り込みます。

 

3.2      Webサーバーで実行するデータリンクの作成手順

サーバープログラムのISeeプロジェクトを作成する手順を紹介します。

 

3.2.1  業務ロジック処理の作成

処理のまとまりを定義する「処理シナリオ」の作成方法を紹介します。

 

3.2.1.1 クーポン画面の初期化処理シナリオの作成(準備処理)

画面を初めて表示するときに動作するシナリオの画面情報(FormData)からの取得方法やデー

タベースへの接続情報の作成方法を詳しく紹介します。

             

1)     Initialize」フォルダの下に「初期化」シナリオを作成します。

 

2)     右クリックしてメニューを表示し「修正」をクリックします。

 

3)     リレーションマネージャ画面が表示されます。

 

4)     Webページ情報を変数へ格納するためのリレーションを作成します。

l  リレーション情報

タイトル

フィールド名

変数

画面情報からassetsを取得する

assets

assets

画面情報からunitを取得する

unit

unit

画面情報からunitListを取得する

unitList

unitList

画面情報からsettlementを取得する

settlement

settlement

画面情報からsubBeanを取得する

subBean

subBean

画面情報からuserNameを取得する

userName

userName

 

5)     データベースへの接続を行うシナリオを呼び出すリレーションを作成します。

l  リレーション情報

種類

内容

シナリオパス

DBAccess/データベースの接続を開始する

タイトル

「データベースの接続を開始する」を実行する

 

l  戻り値、パラメータ

種類

内容

戻り値

変数

DBConnection

パラメータ1

定数

SampleDatabase.db

パラメータ2

定数

true

 

3.2.1.2 クーポン画面の初期化処理シナリオの作成(メイン処理)

画面を初めて表示するときに動作するシナリオのメイン処理を詳しく紹介します。

 

1)     資産単位コンボボックス用リストを作成するためのリレーションを作成します。

l  リレーション情報

種類

内容

ISee関数

新しいリストを作成して返す

タイトル

画面の資産単位の取得結果を保持する器を作成する

 

l  戻り値、パラメータ

種類

内容

戻り値

変数

unitList

パラメータ1

 

 

パラメータ2

 

 

 

2)     資産単位をデータベースから検索するリレーションを作成します。

l  リレーション情報

種類

内容

ISee関数

データベーステーブルを、テーブル名、カラム名と条件値のマップを用いて検索して返す。

タイトル

画面の資産単位の取得結果を保持する器を作成する。

 

l  戻り値、パラメータ

種類

内容

戻り値

変数

RecordSet

パラメータ1

変数

DBConnection

パラメータ2

定数

UnitTable

パラメータ3

定数

UnitValue

パラメータ4

 

 

パラメータ5

定数

AND

パラメータ6

 

 

パラメータ7

定数

UnitValue

パラメータ8

定数

ASC

 

3)     画面左のツリーで右クリックしてメニューを表示し「新規作成(下へ)>ループ」をクリックします。

 

4)     ループ指定画面が表示されます。

 

5)     集合選択ボタンを押します。

 

6)     ローカル変数選択画面で「RecordSet」を指定します。

 

7)     繰返し変数のローカル変数選択ボタンを押します。

 

8)     ローカル変数選択画面で「Record」を追加して指定します。

 

9)     タイトルに「検索結果が複数であるため下記の処理を繰返し行う」と入力します。

 

10)   画面右下の確定ボタンを押します。

 

11)   画面で右クリックしてメニューを表示し「新規作成>リレーション」をクリックします。

 

12)   レコードから単位を取得するリレーションを作成します。

l  リレーション情報

種類

内容

ISee関数

ISeeマップから、キーをもとにバリューを取得して返す

タイトル

検索結果から、一つの単位を取得する

 

l  戻り値、パラメータ

種類

内容

戻り値

変数

unit

パラメータ1

変数

Record

パラメータ2

定数

UnitValue

 

13)   資産単位リストに単位を格納するリレーションを作成します。

l  リレーション情報

種類

内容

ISee関数

ISeeリストに要素を追加する

タイトル

資産単位の器に取得した単位を追加する

 

l  戻り値、パラメータ

種類

内容

パラメータ1

変数

unitList

パラメータ2

定数

unit

 

14)   ループノードをクリックします。

 

15)   決済結果の置き換えシナリオを呼び出すリレーションを作成します。

l  サブシナリオ情報

種類

内容

ISee関数

Common/更新内容をデータベースから取得する

タイトル

チェック状態に応じた決済結果を取得する

 

l  戻り値、パラメータ

種類

内容

パラメータ1

変数

subBean

パラメータ2

変数

DBConnection

 

16)   データベースの切断シナリオを呼び出すリレーションを作成します。

l  サブシナリオ情報

種類

内容

ISee関数

DBAccess/データベースの接続を終了する

タイトル

データベースの接続を終了する

 

l  戻り値、パラメータ

種類

内容

パラメータ1

変数

DBConnection

パラメータ2

定数

TRUE

 

17)   Webページへ反映するマップを作成するリレーションを作成します。

l  リレーション情報

種類

内容

ISee関数

マップを作成して返す。初期値の指定が可能

タイトル

画面の器に取得した単位とテーブルデータをセットする

 

l  戻り値、パラメータ

種類

内容

戻り値

変数

ResultMap

パラメータ1

 

 

パラメータ2

定数

subBean

パラメータ3

変数

subBean

 

18)   追加ボタンを 2 回押します。

 

19)   追加したパラメータに値を指定します。

l  戻り値、パラメータ

種類

内容

パラメータ4

定数

unitList

パラメータ5

変数

unitList

 

20)   画面右下の登録ボタンを押します。

 

21)   リレーションマネージャ画面でリレーションが追加されたことが確認できます。

 

22)   Web ページへ ResultMap をセットするリレーションを作成します。

l  リレーション情報

種類

内容

ISee関数

戻り値を設定してデータリンクを終了する

タイトル

画面の器を返す

 

l  戻り値、パラメータ

種類

内容

パラメータ

変数

ResultMap

 

23)   リレーションマネージャ画面右下の確定ボタンを押します。

 

 

3.2.1.3 追加イベントのデータリンクを作成(準備処理)

1)     業務ロジック処理の作成を参考に「event」フォルダを作成します

 

2)     event」フォルダに「追加」シナリオを作成します。

 

3)     Webページ情報を変数へ格納するためのリレーションを作成します。

l  リレーション情報

種類

フィールド名

変数

画面情報からassetsを取得する

assets

assets

画面情報からunitを取得する

unit

unit

画面情報からunitListを取得する

unitList

unitList

画面情報からsettlementを取得する

settlement

settlement

画面情報からsubBeanを取得する

subBean

subBean

画面情報からuserNameを取得する

userName

username

 

4)     データベースへの接続を行うシナリオを呼び出すリレーションを作成します。

l  リレーション情報

種類

内容

ISee関数

DBAccess/データベースの接続を開始する

タイトル

「データベースの接続を開始する」を実行する

 

l  戻り値、パラメータ

種類

内容

戻り値

変数

DBConnection

パラメータ1

定数

SampleDatabase.db

パラメータ2

定数

true

 

3.2.1.4 追加イベントのデータリンクを作成(メイン処理)

1)     今日の日付を取得するリレーションを作成します。

l  リレーション情報

種類

内容

ISee関数

現在のシステム日付を取得して返す

タイトル

今日の日付を取得する

 

l  戻り値、パラメータ

種類

内容

戻り値

変数

transactionDate

パラメータ1

定数

yyyy/MM/dd

 

2)     決済結果の置き換えシナリオを呼び出すリレーションを作成します。

l  サブシナリオ情報

種類

内容

ISee関数

Common/チェック状態に応じた決済結果を取得する

タイトル

チェック状態に応じた決済結果を取得する

 

l  戻り値、パラメータ

種類

内容

戻り値

変数

settlement

パラメータ

変数

FormData

 

3)     画面データを登録マップに設定するシナリオを呼び出すリレーションを作成します。

l  サブシナリオ情報

種類

内容

ISee関数

Common/画面のデータを器にセットする

タイトル

画面のデータを器にセットする

 

l  戻り値、パラメータ

種類

内容

戻り値

変数

InsertMap

パラメータ1

変数

FormData

パラメータ2

変数

Settlement

 

4)     登録マップの情報をデータベースへ登録するリレーションを作成します。

l  リレーション情報

種類

内容

ISee関数

データベースのテーブルへ、カラム名と内容のマップを用いて挿入する

タイトル

データベースに器の値を追加する

 

l  戻り値、パラメータ

種類

内容

パラメータ1

変数

DBConnection

パラメータ2

定数

SampleTable

パラメータ3

変数

InsertMap

 

5)     データベースから最新情報を取得するシナリオを呼び出すリレーションを作成します。

l  サブシナリオ情報

種類

内容

ISee関数

Common/更新内容をデータベースから取得する

タイトル

更新内容をデータベースから取得する

 

l  戻り値、パラメータ

種類

内容

戻り値

変数

subBean

パラメータ

変数

DBConnection

 

6)     データベースの最新情報をResultMapにセットするリレーションを作成します。

l  リレーション情報

種類

内容

ISee関数

マップを作成して返す。初期値の指定が可能

タイトル

画面のデータに更新内容をセットする

 

l  戻り値、パラメータ

種類

内容

戻り値

変数

ResultMap

パラメータ1

 

 

パラメータ2

定数

subBean

パラメータ3

変数

subBean

 

7)     データベースの切断シナリオを呼び出すリレーションを作成します。

l  サブシナリオ情報

種類

内容

ISee関数

DBAccess/データベースの接続を終了する

タイトル

データベースの接続を終了する

 

l  戻り値、パラメータ

種類

内容

戻り値

変数

DBConnection

パラメータ

定数

TRUE

 

8)     WebページへResultMapをセットするリレーションを作成します。

l  リレーション情報

種類

内容

ISee関数

戻り値を設定してデータリンクを終了する

タイトル

画面のデータに更新内容をセットする

 

l  戻り値、パラメータ

種類

内容

パラメータ

変数

ResultMap

 

9)     リレーションマネージャ画面右下の確定ボタンを押します。

 

3.2.1.5 更新イベントのデータリンクを作成(準備処理)

1)     event」フォルダに「更新」シナリオを作成します。

 

2)     Webページ情報を変数へ格納するためのリレーションを作成します。

l  リレーション情報

種類

フィールド名

変数

画面情報からassetsを取得する

assets

assets

画面情報からunitを取得する

unit

unit

画面情報からunitListを取得する

unitList

unitList

画面情報からsettlementを取得する

settlement

settlement

画面情報からsubBeanを取得する

subBean

subBean

画面情報からuserNameを取得する

userName

userName

 

3)     データベースへの接続を行うシナリオを呼び出すリレーションを作成します。

l  リレーション情報

種類

内容

ISee関数

DBAccess/データベースの接続を開始する

タイトル

「データベースの接続を開始する」を実行する

 

l  戻り値、パラメータ

種類

内容

戻り値

変数

DBConnection

パラメータ1

定数

SampleDatabase.db

パラメータ2

定数

true

 

3.2.1.6 更新イベントのデータリンクを作成(メイン処理)

1)     今日の日付を取得するリレーションを作成します。

l  リレーション情報

種類

内容

ISee関数

現在のシステム日付を取得して返す

タイトル

今日の日付を取得する

 

l  戻り値、パラメータ

種類

内容

戻り値

変数

transactionDate

パラメータ

定数

yyyy/MM/dd

 

2)     決済結果の置き換えシナリオを呼び出すリレーションを作成します。

l  サブシナリオ情報

種類

内容

ISee関数

Common/チェック状態に応じた決済結果を取得する

タイトル

チェック状態に応じた決済結果を取得する

 

l  戻り値、パラメータ

種類

内容

戻り値

変数

Settlement

パラメータ

変数

FormData

 

3)     画面データを更新マップに設定するシナリオを呼び出すリレーションを作成します。

l  サブシナリオ情報

種類

内容

ISee関数

Common/画面のデータを器にセットする

タイトル

画面のデータを器にセットする

 

l  戻り値、パラメータ

種類

内容

戻り値

変数

UpdateMap

パラメータ1

変数

FormData

パラメータ2

変数

settlement

 

4)     更新マップの情報でデータベースを更新するリレーションを作成します。

l  リレーション情報

種類

内容

ISee関数

データベーステーブルのレコードを更新(Update)する

タイトル

データベースのデータを器で更新する

 

l  戻り値、パラメータ

種類

内容

パラメータ1

変数

DBConnection

パラメータ2

定数

SampleTable

パラメータ3

変数

UpdateMap

パラメータ4

 

 

パラメータ5

定数

AND

 

 

5)     更新条件マップを作成するリレーションパラメータを設定します。

l  リレーション情報

種類

内容

ISee関数

マップを作成して返す。初期値の指定が可能

タイトル

WhereMap

 

l  戻り値、パラメータ

種類

内容

パラメータ1

 

 

パラメータ2

定数

username

パラメータ3

変数

userName

 

6)   データベースから最新情報を取得するシナリオを呼び出すリレーションを作成します。

l  サブシナリオ情報

種類

内容

シナリオ

 Common/更新内容をデータベースから取得する

タイトル

更新内容をデータベースから取得する

 

l  戻り値、パラメータ

種類

内容

戻り値

変数

subBean

パラメータ

変数

DBConnection

 

7)   データベースの最新情報を ResultMap にセットするリレーションを作成します。

l  リレーション情報

種類

内容

ISee関数

マップを作成して返す。初期値の指定が可能

タイトル

画面のデータに更新内容をセットする

 

l  戻り値、パラメータ

種類

内容

戻り値

変数

ResultMap

パラメータ 1

 

 

パラメータ 2

定数

subBean

パラメータ 3

変数

subBean

 

8)   データベースの切断シナリオを呼び出すリレーションを作成します。

l  サブシナリオ情報

種類

内容

シナリオ

 DBAccess/データベースの接続を終了する

タイトル

データベースの接続を終了する

 

l  戻り値、パラメータ

種類

内容

パラメータ1

変数

DBConnection

パラメータ2

定数

TRUE

 

9)   Web ページへ ResultMap をセットするリレーションを作成します。

l  リレーション情報

種類

内容

ISee関数

戻り値を設定してデータリンクを終了する

タイトル

データリンクの戻り値として画面にデータを返す。

 

l  戻り値、パラメータ

種類

内容

パラメータ

変数

ResultMap

 

3.2.1.7 削除イベントのデータリンクを作成(準備処理)

1)   event」フォルダに「削除」シナリオを作成します。

 

2)   Web ページ情報を変数へ格納するためのリレーションを作成します。

l  リレーション情報

種類

フィールド名

変数

画面情報から assets を取得する

assets

assets

画面情報から unit を取得する

unit

Unit

画面情報から unitList を取得する

unitList

unitList

画面情報から settlement を取得する

settlement

Settlement

画面情報から subBean を取得する

subBean

subBean

画面情報から userName を取得する

userName

userName

 

3)   データベースへの接続を行うシナリオを呼び出すリレーションを作成します。

l  リレーション情報

種類

内容

ISee関数

DBAccess/データベースの接続を開始する

タイトル

「データベースの接続を開始する」を実行する

 

l  戻り値、パラメータ

種類

内容

戻り値

変数

DBConnection

パラメータ 1

定数

SampleDatabase.db

パラメータ 2

定数

true

 

3.2.1.8 削除イベントのデータリンクを作成(メイン処理)

1)   データベースを削除するリレーションを作成します。

l  リレーション情報

種類

内容

ISee関数

データベーステーブルのレコードを削除(Delete)する

タイトル

データベースのデータを器で削除する

 

l  戻り値、パラメータ

種類

内容

パラメータ 1

変数

DBConnection

パラメータ 2

定数

SampleTable

パラメータ 3

変数

UpdateMap

パラメータ 4

 

 

パラメータ 5

定数

AND

 

2)   更新条件マップを作成するリレーションパラメータを設定します。

l  リレーション情報

種類

内容

ISee関数

マップを作成して返す。初期値の指定が可能

タイトル

WhereMap

 

l  戻り値、パラメータ

種類

内容

パラメータ 1

 

 

パラメータ 2

定数

userName

パラメータ 3

変数

userName

 

3)   データベースから最新情報を取得するシナリオを呼び出すリレーションを作成します。

l  サブシナリオ情報

種類

内容

シナリオ

 Common/更新内容をデータベースから取得する

タイトル

更新内容をデータベースから取得する

 

l  戻り値、パラメータ

種類

内容

戻り値

変数

subBean

パラメータ

変数

DBConnection

 

4)   Web テーブル情報を Web ページ情報へセットするリレーションを作成します。

l  リレーション情報

種類

内容

ISee関数

マップを作成して返す。初期値の指定が可能

タイトル

テーブルの内容を更新する

 

l  戻り値、パラメータ

種類

内容

戻り値

変数

mainBean

パラメータ 1

 

 

パラメータ 2

変数

subBean

パラメータ 3

定数

subBean

 

5)   Web ページ情報を ResultMap にセットするリレーションを作成します。

l  リレーション情報

種類

内容

ISee関数

マップを作成して返す。初期値の指定が可能

タイトル

画面のデータに更新内容をセットする

 

l  戻り値、パラメータ

種類

内容

戻り値

変数

ResultMap

パラメータ 1

 

 

パラメータ 2

変数

mainBean

パラメータ 3

定数

mainBean

 

6)   データベースの切断シナリオを呼び出すリレーションを作成します。

l  サブシナリオ情報

種類

内容

シナリオ

 Common/更新内容をデータベースから終了する

タイトル

更新内容をデータベースから終了する

 

l  戻り値、パラメータ

種類

内容

パラメータ 1

変数

DBConnection

パラメータ 2

定数

TRUE

 

7)   Web ページへ ResultMap をセットするリレーションを作成します。

l  リレーション情報

種類

内容

ISee関数

戻り値を設定してデータリンクを終了する

タイトル

データリンクの戻り値として画面にデータを返す。

 

l  戻り値、パラメータ

種類

内容

パラメータ

変数

ResultMap

 

3.2.1.9     単独テストの指定方法

作成した処理シナリオの動作を確認するために処理シナリオを単独実行する機能を使用したテスト手順を紹介します。

1)   テスト対象のシナリオを選択します。

 

2)   右クリックしてメニューを表示し「修正」を選択します。

 

3)   リレーションマネージャ画面でキーボードの「F5」を押します。

 

4)   テストパターンの定義画面が表示されます。

 

5)   画面右にある追加ボタンをクリックします。

 

6)   テストパターン名に「成功パターン」と入力して OK ボタンを押します。

 

7)   パターン詳細内容の設定画面が表示されます。

 

8)   入力パラメータの修正ボタンを押します。

 

9)   値の設定画面が表示されます。

 

10) タブの「マップ型」をクリックします。

 

11) タブの「マップ型」内の KEY テキストフィールドに「userName」と入力します。

 

12) 追加ボタンを押します。

 

13) 別画面として再度、値の設定画面が表示されます

 

14) タブの「直値指定」の文字列ラジオボタンが選択された状態で、隣のテキストフィールドに「Test」と入力します。

 

15) 画面右下の確定ボタンを押します。

 

16) 手順 1115 を繰り返し必要なデータを登録します。

Key

Value

unit

Dd

assets

200

settlement

true

 

17) 確定ボタンを押下する

 

18) 期待値の修正ボタンを押下する

 

19) 手順 1113 と同様の手順でマップに KeysubBean」のデータを追加します。

テーブル情報の作成

 

20) タブの「リスト型」をクリックし、追加ボタンを押します。

 

21) 新たに表示された値の設定画面でマップタブを選択します。

テーブル行データの作成

 

22) 手順 1115 と同様に以下の内容を登録します。

Key

Value

assets

200

asset

200 Dd

transactionDate

yyyy/MM/dd 形式で当日日付を入力

user

Test

settlement

true

 

 

23) 確定ボタンを押します。

 

24) 値の設定画面(リストタブ選択中)で、さらに確定ボタンを押します。

 

25) 値の設定画面(期待値)で、さらに確定ボタンを押します。

 

26) 実行ボタンを押します。

 

27) 実行結果が確認できます。

期待出力値と結果値が一致する場合に判別がで表示されます。

 

 

3.3      HTML変換機能での作業手順

動的HTMLへと変換する機能での作業手順を詳しく紹介します。

 

3.3.1  Webスマート変換画面の起動

1)     プロジェクトマネージャ画面でプロジェクトを選択して、右クリックしてメニューを表示し
WebHTMLのスマート変換」をクリックします。

 

2)     (初回限定)作業プロジェクトを作成するために、プロジェクト名を入力します。

 

3)     (初回限定)作業プロジェクトのフォルダパスを設定します。

 

3.3.2  HTMLの登録

変換するHTMLを登録する手順について紹介します。

 

1)     HTMLファイル登録ボタンを押します。

 

2)     登録するHTMLファイルを選択します。

 

3)     Web HTML のスマート変換」画面のテーブルに追加されます。

 

3.3.3  HTML変換ルールの作成

デモプロジェクトの静的HTMLを動的HTMLへ変換するルールの作成手順を詳しく紹介します。

 

3.3.3.1 HTMLの手動変換

Htmlファイルの手動変換の指定方法を詳しく紹介します。

 

1)     変換対象の HTML を選択し「HTML の変換」ボタンをクリックします。

 

2)     左上のツリーでテーブルタグをクリックして変換ボタンを押します。

 

3)     変換後のタグ選択画面が表示されるので、「h:dataTable」をクリックします。

 

4)     確定ボタンを押します。

 

5)     HTMLTABLE変換ルール編集画面が表示されます。

Bean 名、フィールド名、サブ Bean 名を入力して確定ボタンを押します。

項目名

備考

Bean

mainBean

 

フィールド名

subBean

サブ Bean 名と同じ値にする事

サブ Bean

subBean

フィールド名と同じ値にする事

 

 

6)     タグが変換されます。

 

7)     Table タグ配下の span タグをすべて選択し変換ボタンを押します。

Ctrl+クリックで複数選択ができます。

 

8)     手順 24 と同様の手順で「h:outputText」を選択し確定ボタンを押します。

 

9)     タグが変換されます。

 

3.3.3.2 HTMLの自動変換

Html ファイルの自動変換の指定方法を詳しく紹介します。

 

1)     自動変換ボタンを押します。

 

2)     自動変換範囲の選択画面が表示されます。

 

3)     「可能性が高い」を選択して確定ボタンを押します。

 

4)     しばらく待っていると自動変換が完了して、HTML の変換ルール編集画面が更新されます。

ノードの色

意味

暗いオレンジ

可能性が高い

可能性がやや高い

可能性がやや低い

黒色

可能性が低い

変換後

コメント

 

 

3.3.3.3 HTMLの不要な変換ルールの削除

Html ファイルの自動変換で不要な変換ルールが作成された場合の削除方法を紹介します。

 

1)     タグの変換ルールテーブルで「削除ボタン」の行を選択します。

Ctrl+クリックで複数選択ができます。

 

2)     画面右下の削除ボタンを押します。

 

3)     対象の変換ルールが削除されます。

※同様の手順で不要なタグの変換ルールを削除してください。

 

3.3.3.4 HTMLのフォーム名・フィールド名の修正

Htmlファイルの自動変換で不要な変換ルールが作成された場合の削除方法を紹介します。

 

1)     名称一括変換ボタンを押してメニューを表示し、「Edit BeanName」をクリックします。

 

2)     Bean 名一括変換画面が表示されます。

 

3)     Bean 名が「myBean」となっているすべての行でチェックを入れます。

 

4)     画面右上のコンボボックスで「mainBean」を選択し反映ボタンを押します。

 

5)     確定ボタンを押します。

 

6)     Bean名が変換されたことが確認できます。

 

7)     名称一括変換ボタンを押してメニューを表示し、「Edit FieldName」をクリックします。

 

8)     フィールド名一括変換画面が表示されます。

※コンボボックスで Bean を選択することで切り替え可能

 

9)     変更後名称をダブルクリックして変更後の名称を入力します。

 

10)   すべての変更を入力出来たら確定ボタンを押します。

※変更しない場合は入力しない

 

11)   フィールド名が変換されたことが確認できます。

 

12)   変換ルールの指定が完了したら閉じるボタンを押します。

 

3.3.4  HTMLの操作イベント割当の作業手順

動的 HTML へのイベント割当機能の作業手順を詳しく紹介します。

 

3.3.4.1 画面表示初期化イベントの割り当て

1)     変換対象のHTMLを選択します。

 

2)     「イベントの割り当て」ボタンをクリックします。

 

3)     画面コントローラ設定画面が表示されます。

 

4)     デフォルト設定ボタンを押します。

 

5)     デフォルト設定画面が表示されます。

 

6)     プロジェクトパスを指定します。

※実行可能プロジェクトを設置したパスを指定します。

テスト用プロジェクトの設置」を参照

 

7)     その他の項目も設定し、確定ボタンを押します。

種類

IP アドレス

localhost

ポート番号

8080

実行時の言語

JAPANESE

待機時間

6000

 

 

8)     画面左のテーブルの mainBean の行をクリックします。

 

9)     パッケージ名称に「jp.test」と入力します。

 

10)   スコープを「RequestScoped」に変更します。

 

11)   「ページ初期化の設定を表示する」チェックボックスにチェックを入れます。

 

12)   ページ初期化のシナリオの選択ボタンを押します。

 

13)   呼び出すシナリオ「初期化」を選択します。

 

14)   反映ボタンを押します。

 

15)   手順 810,14 と同様の手順で subBean の情報をセット、反映します。

項目名

パッケージ名称

jp.test

スコープ

RequestScoped

 

 

3.3.4.2 画面イベントの割り当て

 

1)     画面左のテーブルの eventAddの行をクリックします。

 

2)     シナリオパスの選択ボタンを押します

 

3)     呼び出すシナリオ「追加」を選択します。

 

4)     反映ボタンを押します。

 

5)     手順 14 と同様の手順で eventUpdate も指定します。

 

6)     画面左のテーブルの subBean の行をクリックします。

 

7)     手順 14 と同様の手順でeventDeleteも指定します。

 

8)     関連ページ情報のリストで mainBean を選択し、追加ボタンを押します。

 

9)     反映ボタンを押します。

 

※関連ページ情報の追加機能について

基本的にイベント処理中にメイン Bean 以外の他の Bean へのアクセスは出来ませんが、この機能

を使用することでイベント処理中に他の Bean の情報を同時にアクセスする事が可能になります。

下のリストから追加したい Bean を選択し、追加ボタンを押すことで引き継ぎクラスとして使用できるようになります。

処理シナリオで関連ページ情報を取得するには FormData から Bean 名をキーとして取得して使用する事が出来ます。

 

3.4      HTMLを指定したルールに従って変換する

Web サーバーで使用できるように Dynamic HTML を生成する必要があります。

そのために HTML ファイルの変換ルールからファイル生成作業について詳しく紹介します。

 

1)     保存ボタンをクリックします。

 

2)     (ログイン前)AiSeeへのログインを行います。 ※ログイン後の2回目以降は省略されます。

 

3)     使用ポイントを確認して、支払暗証番号を入力してOKボタンをクリックします。

 

4)     任意の出力先を指定します。

 

5)     指定した出力先にファイルが出力されます。

 

 

 

3.5      指定したイベント割り当て情報に従ってJavaBeanを生成する

Web サーバーで使用できるように Managed Bean を生成する必要があります。

そのために HTML イベントの割り当て情報からManagedBean の生成作業について詳しく紹介します。

 

1)     「イベントの割り当て」ボタンをクリックします。

 

2)     保存ボタンをクリックします。

 

3)     (ログイン前)AiSeeへのログインを行います。 ※ログイン後の2回目以降は省略されます。

 

3)     使用ポイントを確認して、支払暗証番号を入力してOKボタンをクリックします。

 

4)     任意の出力先を指定します。

 

5)     指定した出力先にファイルが出力されます。

 

 

4       動作確認

この手順では今までに生成した ISee プロジェクトや Dynamic HTMLManaged Bean Web サーバーに設置してブラウザから実行して確認を行います。

 

4.1      動作確認の概要

WebサーバーやISeeServiceなどの実行環境を構築し、ISeeプロジェクトを実行可能プロジェクトに変換して設置します。その後にNetBeansからWebプロジェクトを実行して想定通りに動作する事を確認します。

 

 

4.2      Webサーバー環境の構築

JSF を利用することで簡単に高性能な Web アプリケーションの作成が可能となります。

そのための実行環境である Web サーバー環境の構築について紹介します。

 

4.2.1  Web サーバーについて

このサンプルでは Web サーバーは、Tomcat を使用します。

Tomcat は、NetBeans に組み込まれたものを使用し、サーバーの起動、停止、及び Web アプリケーションの配備は、NetBeans の機能を利用します。

 

4.2.2  NetBeans のインストール

NetBeans をインストールします。インストーラからインストールしてください。

詳細な手順は、別紙「AiSee IDE 設置手順書 開発環境版_v1.docx」の「5 JSF 用の NetBeans 設置手順」を参照してください。

 

1)     NetBeansのインストーラをダブルクリックで起動します。

 

2)     インストーラ画面に従ってインストールを行います。

 

3)     ショートカットアイコンをダブルクリックして、NetBeans が起動することを確認します。

 

4.2.3  HTMLJavaソースをNetBeansへ反映

1)     ダウンロードした変換結果の圧縮ファイルを解凍します

 

2)     Java ソースを NetBeans src フォルダに格納します。

 

 

3)     XHTML ファイルを NetBeans web フォルダに格納します。

 

4.3      ISeeシナリオの実行環境の構築

Web サーバーから ISee シナリオを実行するための環境の構築について紹介します。

 

4.3.1  ISeeシナリオの実行環境について

Webサーバーから呼びされた処理シナリオは、ISeeService上で動作します。

そのため、ISeeService上で実行できるプロジェクトへと変換する必要があります。

 

4.3.2  ISeeServiceのインストール

ISeeServiceをインストールします。
詳細な手順は、別紙「AiSeeIDE設置手順書開発環境版_v1.docx」の「4 ISeeServiceの設置手順」を参照してください。

 

1)     インストーラをダブルクリックして起動します。

 

2)     インストーラ画面に従ってインストールを行います。

 

3)     サービス画面に「ISeeService」が登録されたことを確認します。

 

4.3.3  テスト用プロジェクトファイルを作成する

ISeeIDE のプロジェクトを ISee Service に配備するために、プロジェクトをテスト用プロジェクトへ変換します。

 

1)     プロジェクトノードを選択します。

 

2)     右クリックしてメニューを表示します。

 

3)     「テスト用プロジェクト生成」を選択します。

 

4)     出力先フォルダを選択します。

 

5)     指定したフォルダに対象プロジェクト名の圧縮ファイルが出力されます。

 

4.3.4  テスト用プロジェクトの設置

 

1)     C:\Temp\AiSeeProject」フォルダにテスト用プロジェクトファイルをコピーします。

※「画面表示初期化イベントの割り当て」で指定したパスと同じになるように配置します。

 

2)     右クリックしてメニューの「すべて展開」をクリックします。

 

3)     任意のフォルダにテスト用プロジェクトファイルを解凍します。

 

4.4      設置した実行環境の確認

実行に必要な ISee Service Tomcat の設置状況を確認します。

 

4.4.1  ISeeServiceの設置確認

ISeeServiceがインストールされているか、ISeeServiceが動作しているかを確認します。

 

1)     Windows メニューの「Windows 管理ツール」をクリックし「サービス」をクリックします。

 

2)     表示されたサービス画面に「ISee Service」の状態が「実行中」であるか確認します。

 

3)     実行中以外の場合、「サービスの開始」をクリックします。

 

4.4.2  Webサーバーの設置確認

NetBeansプロジェクトから実行することで連携しているTomcatへのデプロイと起動、さらにブラウザの起動を一度のアクションで行ってくれます。

 

1)     NetBeans プロジェクトの「Web ページ」「ソース・パッケージ」「ライブラリ」にファイルが設置されている事を確認します。

 

4.5      動作確認

作成、設置したISeeプロジェクトやDynamicHTMLなどが想定通りに動作するか、実際にNetBeansプロジェクトを実行してブラウザでの動作を確認します。

 

1)     NetBeansプロジェクトでプロジェクトメニュー「実行」をクリックします。

 

2)     プロジェクトが実行できると Web ページが表示されます。

 

3)     Web ページで動作を確認します。

 

5       参考資料

                                                  

1 空の処理シナリオを作成する手順は、別紙:AiSee Web の詳細操作説明書の「2.3 空の処理シナリオの作成」

を参照

2 Web 用処理シナリオのパラメータの指定する手順は、別紙:AiSee Web の詳細操作説明書の「3.4 Web ページの呼び出しシナリオの必須パラメータ」を参照

3 画面情報から値を取得する手順は、別紙:AiSee Web の詳細操作説明書の「3.6 Web ページの情報から項目の値を取得する」を参照

4 サブシナリオ呼び出しのリレーションの作成する手順は、別紙:AiSee Web の詳細操作説明書の「3.2 サブシナリオの作成」を参照

5 リレーションの作成する手順は、別紙:AiSee Web の詳細操作説明書の「3.1 リレーションの作成」を参照 6 パラメータで ISee 関数を指定する手順は、別紙:AiSee Web の詳細操作説明書の「4.2 リレーション・サブシナリオのパラメータの指定」を参照