[ Siena 目次 ]

プロトタイピングの模擬事例
求人情報参照画面

プロトタイピングの模擬事例として、求人情報参照画面をメトロアプリで試作します。
サーバーやＤＢ環境が整わない時点でのプロトタイピングを想定し、ProjectSiena で、検討のたたき台となる画面を作成します。
使い方のメモの中で、プロトタイプ作成ツールとしての可能性に触れました。その一例として、取り組みました。

実際の画面を確認

シンプルなオープニング画面で始まります。数秒したら、自動で参照画面に移ります。
このあたりのテクニックは、表紙画面のサンプルに詳細を記述していますので、興味のある方はご覧ください。


以下に、作成時のポイントを記述します。

[ 目次 ]

1. 実際の画面を確認
2. 事前準備
3. 仕様確認
4. 仕組みの解説
• タイマー
• 求人一覧ギャラリー
• ギャラリー内の求人番号ラベル
• 受理日で降順ボタン
• 求人番号ラベル

事前準備

1. データソースとして読み込むエクセル表を作成します。
「受理日」「求人番号」「社名」「事業内容」「職種」「雇用形態」「賃金」「就業場所」「仕事内容」「備考」のエクセル表を作成し、テーブル変換しておきます。
スペースの都合上、すべての項目が見えていませんが、実際には、全ての項目が入力されています。
テーブル変換の手順は、こちら（サンプルで気付いたポイント）に記しています。興味のある方はご覧ください。

仕様確認

1. 画面右側に、求人情報の一覧を表示します。基本的な項目のみ表示します。
2. 画面左側に、一覧から選択された求人の詳細情報を表示します。こちらは、項目すべてを表示します。
3. 一覧の並び替え処理を、検討の際の材料として実現します。
4. 検討のたたき台になるよう、基本機能を明解に実現します。

仕組みの解説

ここでは、貼り付けた部品の属性を ExpressView で確認します。
部品を選んで右下の ExpressView ボタンをクリックすれば、画面右に開きます。
以下、画像をクリックすると拡大画面が表示されます。

1. タイマー
オープニング画面から求人参照画面に遷移する際、データソースとして読み込んでいるデータを、コレクション JobList に入れます。
TimerEnd 属性で、
Clear(JobList);Collect(JobList,Sort(求人情報一覧,受理日,Ascending))
と指定している部分がそれです。
If(Timer1!Value=Timer1!End,Navigate(List,ScreenTransition!Fade))
としている部分は、次画面遷移の処理です。



2. 求人一覧ギャラリー
タイマー終了時にデータ登録したコレクション JobList を、ギャラリーに結びつけます。
Items 属性で、 JobList と指定している部分がそれです。

画面検討過程では、一覧に表示する項目を何にするのか、一覧の表示位置をどこにするのか、求人一個のサイズをどれくらいにするのか、などが話題になるのでしょうか。


3. ギャラリー内の求人番号ラベル
コレクション JobList の「求人番号」項目を表示します。
Text 属性で、 ThisItem!求人番号 と指定している部分がそれです。

ギャラリー内のその他の項目も、同様の関係付けによりデータを表示しています。


4. 受理日で降順ボタン
求人一覧のデータを、受理日(降順)で並び替えます。
OnSelect 属性で、
Clear(JobList);Collect(JobList,Sort(求人情報一覧,受理日,Descending))
と指定している部分がそれです。

ギャラリー内をソートするのではなく、コレクション JobList の中身を一旦クリアし、データソースをソートしてコレクションに入れ直しています。
もう一つの並べ替えボタンも、同様の処理をしています。


5. 求人番号ラベル
ギャラリー内で選択された求人情報の「求人番号」を表示するように設定します。
Text 属性で、 Gallery1!Selected!求人番号 と指定している部分がそれです。

画面左側の他の項目も、この項目と同様の関係付けをしています。