[ Siena 目次 ]

商品カタログのサンプル

ギャラリー機能を中心に、商品カタログのアプリを試作します。
選んだ商品の合計金額を計算する機能も実現します。

こうしたタイプのアプリは、 Project Siena が最も得意とする分野の一つではないかと思います。 マイクロソフトが提供するサンプル Dress by Video や Windows 8 Devices にも、同様の側面があるかと思います。
(マイクロソフトのサンプルページは こちら )


実際の画面を確認

シンプルなオープニング画面で始まります。数秒したら、自動でメイン画面に移ります。
このあたりのテクニックは、表紙画面のサンプルに詳細を記述していますので、興味のある方はご覧ください。
スクリーン1
オープニング画面の挿入には、初期処理を入れるタイミングとして使用する意味もあります。
スクリーン2
メイン画面が表示されました。上段には、選択されているカテゴリーの商品インデックス、下段には、上段で選択された商品のカラーバリエーションが表示されています。
スクリーン3
上段の商品を変えると、下段の表示内容も変わります。二つほどチェックしておきます。
スクリーン4
画面左端のカテゴリーを Shoes に変えました。上段・下段ともに、靴の表示に切り替わりました。 ここでも二つほどチェックしておきます。 左下の Selected List ボタンをタッチ(クリック)し、チェックした商品の一覧を表示します。
スクリーン5
チェックした商品の一覧が表示されました。プラスボタン(もしくはマイナスボタン)をタッチ(クリック)すると、数量が変わり、合計金額も変わります。 Remove ボタンをタッチ(クリック)すると、その商品が削除されます。


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

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



事前準備

  1. 商品画像を準備します。 ワード、エクセルのお絵かき工房 さんのフリー画像を使用しました。今回の目的に最適で、なおかつシンプルでいいなあ、と感心した次第です。
    メガネ
    シューズ
  2. データソースとして読み込むエクセル表を作成します。 今回作成するテーブルは４種類です。
    • カテゴリー
      画面左端に表示するメニュー用のテーブルです。
      エクセル表 カテゴリー

    • メガネ商品用
      メガネ商品の情報が入っています。
      表の右側が切れてしまいましたが、「商品コード」「商品名」「型番」「色」「価格」「イメージの保管場所」「カテゴリー名」「インデックス用フラグ」「インデックス順序」を入力してあります。
      エクセル表 メガネ商品

    • シューズ商品用
      シューズ商品の情報が入っています。項目はメガネ商品と同様です。
      エクセル表 シューズ商品

    • 税率用
      当日日付の消費税率を持ってこられるよう、テーブルにしました。
      エクセル表 税率用

    テーブル変換の手順は、こちら（サンプルで気付いたポイント）に記しています。興味のある方はご覧ください。



仕様確認

  1. 画面右に、選択されているカテゴリーの商品を表示します。左端のカテゴリーを変えると、画面右の商品表示も変わります。
  2. 上段にインデックス用商品、下段には、上段で選択されている商品のカラーバリエーションを表示します。
  3. 下段のチェックボックスをチェックして、選択商品リストに追加します。チェックを外すと、選択商品リストから削除します。
  4. Selected List ボタンをチェックして、選択商品リストを表示します。
  5. 選択商品リストのプラスボタン(もしくはマイナスボタン)をタッチ(クリック)して、その行の数量を変更します。変更に応じて合計金額も変わります。
  6. 選択商品リストの Remove ボタンをタッチ(クリック)して、その行の商品を選択商品リストから削除します。



仕組みの解説

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

  1. 表紙画面のタイマー
    2. タイマーが終了したら次画面に遷移するようにしていますが、同時に、このタイミングを利用して、初期処理を行っています。
    TimerEnd 属性で、
    Clear(SelectedList);
    If(Timer1!Value=Timer1!End,Navigate(Main,ScreenTransition!Fade))
    と指定している部分がそれです。
    表紙画面のタイマー
    Interval 属性は、1カウント毎の秒数のようです。

  2. カテゴリー用リストボックス
    3. カテゴリー名をデータソースから参照しています。
    Items 属性で、 Sort(Categories,ListOrder) と指定している部分がそれです。

    今回はカテゴリーが少ないので効果がないですが、もっとカテゴリーがあるときには、カテゴリーテーブルの ListOrder 順で表示する仕組みです。
    複数選択ができないよう、 Multiple 属性を False にしています。
    カテゴリー用リストボックス
    商品情報を１テーブルに集約しているのであれば、そのテーブルのカテゴリー項目の内容から Distinct 関数で編集する方法も考えられます。

  3. 上段ギャラリー
    4. インデックス用の商品を表示します。
    Items 属性で、
    Sort(Filter(If(Listbox1!Selected!Name="Glasses",Glasses,Shoes),
    UseAsIndex=true),OrderOfIndex)
    と指定している部分がそれです。
    上段ギャラリー
    インデックス用に使用する商品の UseAsIndex 項目に true を設定してあるので、その商品のみ表示します。

  4. 上段のイメージ
    5. 上段用に抽出されたデータのイメージを表示します。
    Image 属性で、 ThisItem!ImageURL と指定している部分がそれです。
    上段のイメージ
    表示している商品名も、 ThisItem キーワードを使用して表示しています。

  5. 下段ギャラリー
    6. 上段で選択された商品のカラーバリエーションを表示します。
    Items 属性で、
    Filter(If(Listbox1!Selected!Name="Glasses",Glasses,Shoes),
    ModelNumber=Gallery1!Selected!ModelNumber)
    と指定している部分がそれです。
    型番項目( ModelNumber )が同じ商品を抽出して表示しています。
    下段ギャラリー
    下段の商品イメージ・色・価格は、上段同様、 ThisItem キーワードを使用して表示しています。

  6. 下段チェックボックス
    7. 下段チェックボックス
    in というキーワードは、結構便利な印象があります。

  7. 選択商品リストボタン
    8. このボタンをタッチ(クリック)すると、選択商品リストを表示します。
    OnSelect 属性で、 Navigate(List, ScreenTransition!Fade)
    と指定している部分がそれです。
    選択商品リストボタン

  8. 選択商品ギャラリー
    9. 選択商品リストに登録された商品を表示します。
    Items 属性で、 Sort(SelectedList,Category,Ascending)
    と指定している部分がそれです。
    選択商品ギャラリー
    本来であれば、カテゴリー＋商品コードでソートしようと思っていましたが、ソートキーは１項目しか指定できないようです。

  9. 選択商品イメージ
    10. 選択商品リストのイメージを表示します。
    Image 属性で、 ThisItem!ImageURL と指定している部分がそれです。
    選択商品イメージ
    その他の項目も、 ThisItem キーワードを使用して表示しています。各行の小合計は、 Text(Price * Quantity,"###,###") の計算式を入れています。

  10. プラスボタン
    11. このボタンをタッチ(クリック)して、数量を増やします。
    OnSelect 属性で、
    UpdateIf(SelectedList,ProductCode=ThisItem!ProductCode,{Quantity:Quantity+1})
    と指定している部分がそれです。
    プラスボタン
    ここで UpdateIf 関数ではなく Update 関数を使えたらなあ、と思いつつ、使い方が今ひとつわかっていません。
    ちなみに、プラスボタンとマイナスボタンのイメージは、ペイントで自作しました。

  11. マイナスボタン
    12. このボタンをタッチ(クリック)して、数量を減らします。
    OnSelect 属性で、
    If(ThisItem!Quantity>1,UpdateIf(SelectedList,ProductCode=ThisItem!ProductCode,
    {Quantity:Quantity-1}))
    と指定している部分がそれです。
    マイナスボタン
    数量が０にならないよう、数量が１のときはマイナスしません。

  12. Remove ボタン
    13. この行の商品を選択商品リストから削除します。
    OnSelect 属性で、
    Remove(SelectedList, ThisItem) と指定している部分がそれです。
    Remove ボタン
    RemoveIf 関数にしなくてよい点を、気に入っています。

  13. 税抜合計
    14. 税抜合計金額を表示します。
    Text 属性で、
    Text(Sum(SelectedList,Price * Quantity),"#,###,###")
    と指定している部分がそれです。
    税抜合計

  14. 消費税額
    15. 消費税額を表示します。
    Text 属性で、
    Text(RoundDown(WithoutTax!Text*LookUp(Tax,SrartingDate<=Today()
    && EndDate>=Today(),TaxRate)/100,0),"#,###,###")
    と指定している部分がそれです。
    消費税額
    やや式がごちゃついていますが、 LookUp 関数で消費税率をテーブルから持ってきて計算している、ということです。

  15. 税込合計
    16. 税込合計金額を表示します。
    Text 属性で、
    Text(WithoutTax!Text + CTax!Text,"#,###,###")
    と指定している部分がそれです。
    税込合計

  16. アイテム数
    17. 選択した商品の数量合計を表示します。
    Text 属性で、
    Sum(SelectedList,Quantity) & " items" と指定している部分がそれです。
    アイテム数



感想

やはりこうしたタイプのアプリは、画像さえ揃っていれば、思いのほか早く作成できます。
動作もそれほど違和感はないのですが、一点だけ気になりました。

それは、選択商品リストの数量を更新した時の表示です。
明らかに、一回データを消してから再表示しました、といった挙動をします。

UpdateIf 関数を使用し、その行の数量項目のみ更新しているので、処理の負担は軽いものと思っていました。

しかし実際には、その行以降の行を削除＆再登録したような表示の仕方でした。
コレクションに対する更新は、思った以上に処理負担が重い、ということかもしれません。

数字だけがピョコッと変わるものと思っていたので、そこはちょっと意外でした。

とはいえ、きれいな画像を使用したアプリを作りたいと思わせるだけの可能性を感じさせる、ギャラリー機能でした。