[ Siena 目次 ]

検索・照会画面のサンプル

コレクションのデータを条件指定して検索する画面を試作します。
求人情報参照画面を作成した後に、検索画面も欲しくなり、取り組みました。


実際の画面を確認

シンプルなオープニング画面で始まります。数秒したら、自動で検索画面に移ります。
このあたりのテクニックは、表紙画面のサンプルに詳細を記述していますので、興味のある方はご覧ください。
スクリーン1
オープニング画面を挿入したのは、コレクションにデータを入れるタイミングとして使用するためです。初期処理のつもりです。
右下のカウントダウンが０になったとき、次画面に遷移します。
スクリーン2
左側に条件入力エリア、右側に検索結果を表示します。最初は全件を表示しています。
スクリーン3
「社名」に文言を入力して検索ボタンをタッチ(クリック)すると、検索結果が表示されます。社名検索は部分一致検索です。
スクリーン4
「職種」と「雇用形態」を指定して検索ボタンをタッチ(クリック)すると、検索結果が表示されます。この検索は完全一致検索です。
スクリーン5
検索結果の一つをタッチ(クリック)すると、求人詳細画面に遷移します。この画面は、遷移後の画面です。
左上の戻るボタンをタッチ(クリック)すれば、検索結果画面に戻ります。
スクリーン6
条件クリアボタンをタッチ(クリック)すると、条件がクリアされ、全件表示に戻ります。


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

[ 目次 ]
  1. 実際の画面を確認
  2. 事前準備
  3. 仕様確認
  4. 仕組みの解説



事前準備

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

    エクセル表




仕様確認

  1. 画面左側に、検索条件を配置します。
  2. 画面右側に、検索結果を表示します。
  3. 検索方法は、「社名」単独の部分一致検索と、「職種」「雇用形態」を使用した完全一致検索の２種類を実現します。
  4. 「職種」と「雇用形態」はドロップダウンを使用し、選択項目は、データソースの同項目から生成します。
  5. 条件クリアボタンをタッチ(クリック)したら、条件をクリアし、検索結果を全件表示にします。



仕組みの解説

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

  1. タイマー
    2. タイマーが終了したら次画面に遷移するようにしていますが、同時に、このタイミングを利用して、いくつかの初期処理を行っています。
    その処理は、すべて TimerEnd 属性に記述しています。

    まず、データソースの求人情報をコレクション JobList に入れています。
    Clear(JobList);Collect(JobList,Sort(求人情報,求人番号,Ascending));
    と指定している部分がそれです。

    次に、「職種」ドロップダウンの選択内容を生成しています。
    Clear(OccupationTBL);
    Collect(OccupationTBL,{Result:""});
    Collect(OccupationTBL,Distinct(求人情報,職種));
    と指定している部分がそれです。
    ドロップダウンに無選択用の空白が欲しいので、わざわざコレクションに登録しています。 項目名を Result にしているのは、次の Distinct 関数で帰ってくるテーブル(一項目のみ)の項目名が Result だからです。いささか場つなぎ的対応で凌ぎました。

    「雇用形態」ドロップダウンの選択内容も生成しています。
    Clear(TypeOfEmpTBL);
    Collect(TypeOfEmpTBL,{Result:""});
    Collect(TypeOfEmpTBL,Distinct(求人情報,雇用形態));
    と指定している部分がそれです。処理の内容は「職種」と同様です。

    最後に、次画面遷移の処理です。
    If(Timer1!Value=Timer1!End,Navigate(Filter,ScreenTransition!Fade))
    と指定している部分がそれです。オープニング画面の処理については、表紙画面のサンプルに詳述してますので、そちらをご覧ください。
    タイマー1

  2. 社名テキストボックス
    3. 条件クリアボタンが押されたときに中身がクリアされるようにしています。
    Default 属性で、 If(isClearInput,"") と指定している部分がそれです。
    isClearInput がブーリアン変数になっており、条件クリアボタンが押されると True になり、空白になる仕組みです。
    社名テキストボックス1

  3. 社名検索ボタン
    4. ボタンが押されたら、入力された文言での部分一致検索をします。
    OnSelect 属性で、
    If(NameBox!Text<>"",[Clear(JobList), Collect(JobList,Filter(求人情報,NameBox!Text in 社名))]);
    と指定している部分がそれです。 in を使って部分一致を実現するのがポイントです。

    また、入力した条件がクリアされないようにしています。
    UpdateContext({isClearInput:false})
    と指定している部分がそれです。条件クリアボタンの処理と連携しています。
    社名検索ボタン1
    クリア処理とコレクト処理を大括弧[]で括ったら、とりあえず動きました。しかし、文法的に正しいかはわかりません。同様の処理をしたい場合は、Web 等を確認してみてください。

  4. 職種ドロップダウン
    5. 初期処理で生成したコレクションを、選択項目に関連付けています。
    Items 属性で、 OccupationTBL と指定している部分がそれです。
    条件クリアボタンが押されたときに中身がクリアされるようにしています。
    Default 属性で、 If(isClearInput,"") と指定している部分がそれです。
    仕組みは社名テキストボックスと同様です。
    職種ドロップダウン1
    Items 属性の下の Value 属性で、 Result と指定しています。これが項目名になります。テーブルやコレクションが複数の項目を持っているときは、ここで項目を変更します。

  5. 雇用形態ドロップダウン
    6. 初期処理で生成したコレクションを、選択項目に関連付けています。
    Items 属性で、 TypeOfEmpTBL と指定している部分がそれです。
    条件クリアボタンが押されたときに中身がクリアされるようにしています。
    Default 属性で、 If(isClearInput,"") と指定している部分がそれです。
    仕組みは社名テキストボックスと同様です。
    雇用形態ドロップダウン1
    Value 属性の指定は、職種ドロップダウンと同様です。

  6. 職種・雇用形態検索ボタン
    7. 「職種」と「雇用形態」をＡＮＤ条件にして完全一致検索をします。
    OnSelect 属性で、
    If(OccupationBox!Selected!Value<>"" && TypeOfEmpBox!Selected!Value<>"" ,
    [Clear(JobList),Collect(JobList,Filter(求人情報,And(職種=OccupationBox!Selected!Value,雇用形態=TypeOfEmpBox!Selected!Value)))],
    If(OccupationBox!Selected!Value<>"" && TypeOfEmpBox!Selected!Value="",
    [Clear(JobList),Collect(JobList,Filter(求人情報,職種=OccupationBox!Selected!Value))],
    If(OccupationBox!Selected!Value="" && TypeOfEmpBox!Selected!Value<>"",
    [Clear(JobList),Collect(JobList,Filter(求人情報,雇用形態=TypeOfEmpBox!Selected!Value))])));
    と指定している部分がそれです。処理は長々と記述していますが、要するに、
    1. 「職種」「雇用形態」の両方を選択した時
    2. 「職種」のみ選択した時
    3. 「雇用形態」のみ選択した時
    を分岐させているだけです。
    また、選択した条件がクリアされないようにしています。
    UpdateContext({isClearInput:false})
    と指定している部分がそれです。条件クリアボタンの処理と連携しています。
    職種・雇用形態検索ボタン1

  7. 条件クリアボタン
    8. 表示データを全件にして、条件クリア用のブーリアン変数を編集しています。
    OnSelect 属性で、
    Clear(JobList);Collect(JobList,求人情報);
    UpdateContext({isClearInput:true})
    と指定している部分がそれです。
    条件クリアボタン1
    条件クリアする時、テキストボックスやドロップダウンの値をじかに編集すればよいと思っていましたが、そのコーディングは機能しませんでした。理由はわかりませんが、とりあえず場つなぎ的対応で凌ぎました。

  8. ギャラリー
    9. 初期処理でデータ登録したコレクション JobList を、ギャラリーに結びつけます。
    Items 属性で、 JobList と指定している部分がそれです。
    ギャラリー1

  9. 求人番号ラベル
    10. コレクション JobList の「求人番号」を表示します。
    Text 属性で、 ThisItem!求人番号 と指定している部分がそれです。
    求人番号ラベル1
    ギャラリー内のその他の項目も、 ThisItem キーワードを使用して、データを表示しています。

  10. ナビ用四角形
    11. タッチ(クリック)されたら、求人詳細画面に遷移します。
    OnSelect 属性で、 Navigate(Detail,ScreenTransition!Fade)
    と指定している部分がそれです。

    一求人の表示部分全体を、画面遷移用ボタンに見立てる役割をします。
    そのため、枠線も色も完全透過にして、下の情報が見えるようにします。
    ボタンの役割をさせるには、重ねられた要素の一番上に配置する必要があるので、画面右下で Arrange → Order → Bring to Front を行って、一番上に配置してください。
    ナビ用四角形1
    一番上に配置されると、ギャラリー選択時、画面左上の要素ドロップダウンを開いたときに、名前が一番上に表示されます。

  11. 検索結果件数ラベル
    12. 検索結果の件数を表示します。
    Text 属性で、 "( " & CountRows(JobList) & " 件)" と指定している部分がそれです。
    検索結果件数ラベル1
    コレクション JobList の件数を CountRows 関数で取得しています。

  12. 求人詳細の求人番号ラベル
    13. 選択された求人の求人番号を表示します。
    Text 属性で、 Gallery1!Selected!求人番号 と指定している部分がそれです。
    求人詳細の求人番号ラベル1
    他の表示項目も、 Gallery1!Selected キーワードを使用して、データ内容を表示しています。

  13. 戻るボタン
    14. 検索結果画面に戻ります。
    OnSelect 属性で、 Navigate(Filter, ScreenTransition!Fade)
    と指定している部分がそれです。
    戻るボタン1
    戻るボタン用の図形は、図形群の中に準備されています。



感想

TimerEnd 属性の中で、各コレクションにデータ登録をしていますが、いずれも最初にクリア処理をしています。本来であれば必要ないかもしれません。でもこれがないと、開発途中にオープニング画面から何回もテストした時、その度毎にデータが追加されてしまいます。実際にそのような状況に気づいたので、初期処理であってもクリア処理を入れるようにしました。

ドロップダウンの中身を生成するときに Distinct 関数が使えると気付いたときは、ちょっとうれしくなりました。
ただ、無選択用の空白を作る方法はスマートではないなあ、と自覚しています。
もし無選択が必要ないケースであれば、ドロップダウンの Items 属性に直接 Distinct 関数を記述すればよいので、そちらの方法もお勧めです。
もしかしたら、Items 属性に、無選択用の空白も含めて、うまく記述する方法があるのかもしれない、などという気もしています。