AiSee開発環境の画面ビューアの構築説明
設計したHTMLに対して、サーバー側とのアクセス処理が行うため、何らかのフレームワークに適用する必要があります。つまり、HTML を XHTML ＋ Bean に変換する必要があります。
本来この作業を行うためには、フロントエンジニアやフレームワークに詳しい技術者が必要なります。
しかし、AiSee Web Developerを利用すれば、人間の代わりに、MVCモデル中のビューアモデルを構築することができます。設計したHTMLページをフレームワークに適用するため、HTMLページの取り込み、タグ階層情報の解析、ダイナミックHTMLへのAI自動変換などの機能を提供しています。
ファイルの「取込みアイコンをクリック」→「対象のHTMLファイル名を選択」→「開くボタンをクリック」
画面の変換対象Html一覧に、対象ファイルが登録されます。
HTMLタグ階層ツリーにある対象となるタグが、変換される可能性にで色分けがされています。
変換対象のタグを選択し、変換ボタンから変換対象タグの一覧が表示します。変換後のタグボタンをクリックすると、タグの変換が行われます。
以下に、AiSee Web Developerの操作手順を提示します。
AiSee Web Developer中のHTMLアナライザーを起動して、対象のHTMLファイルを選択して取り込みます。変換対象HTML一覧のテーブルに、対象のファイルが登録されます。
AiSee Web Developer HTMLファイルの解析
HTMLファイルの自動変換を行うため、HTMLの内容を解析する必要があります。HTMLページ内の階層パスやタグの種類、属性内容などを解析しながら、データオブジェクト化します。
対象HTML一覧のテーブルにある対象のファイルを選択して、解析ボタンをクリックする。解析結果であるHTMLタグ階層ツリーが表示されます。
AiSee Web Developer のHTMLファイルのAI自動変換解析
AiSee Web Developerの開発環境で、解析済みのHTMLページを、指定フレームワークのダイナミックHTMLへ自動変換することできます。
自動変換を利用する際、変換対象HTMLタグの自動判断、指定対象タグ種類のみの変換など様々な選択オプションがあります。HTMLページ内の条件を満たすタグが、人間の手を煩わせずにフレームワークのルールに従って、自動変換されます。これにより、作業が簡素化されます。
以上の手順で示したように、本来、フロントエンジニアが時間の掛かる手作業を、自動変換によって、大幅に削減し、作業時間も劇的に短縮されます。
自動変換後、画面の中央のテーブルに、変換前のタグ名と変換後のタグ名の一覧が表示されます。必要に応じて、内容を確認できます。
オレンジ：変換すべき
青色：高い
緑色：低い
黒色：変換対象外
灰色：コメント
変換後、変換されたタグ名の色が赤くなります。タグの変換ルールが新たに追加されます。
また、個別のHTMLタグの変換をすることも可能です。手動変換を行う前、デモ画面にある更新ボタンのタグ変換をしていないことが見て判ります（タグ名が赤くなっていない為）。
左側のツリーは、変換元HTMLタグ階層です。右側は、変換先HTMLタグ階層です。現時点、変換処理がまだ行われていないため、両方とも同じ階層ツリーとなります。
変換後、右側のXHTMLタグツリーで対象タグが赤く表示されます。手動変換の場合の手順が、以下になります。