[ Siena 目次 ]

サンプルで気付いたポイント

『AdventureWorks』や『Health Cost Calculator』などのサンプルを通して気づいた点を、いくつか取り上げます。

  1. リファレンスページの紹介
  2. 関数マニュアルの紹介
  3. エクセル表のテーブル変換
  4. エクセルファイルの読み込み
  5. 要素の貼り付け
  6. 要素名の変更
  7. Altキーで貼り付け要素を確認
  8. ギャラリーへのデータ指定
  9. ThisItem の活用
  10. OnSelect で処理記述
  11. ExpressView で詳細設定を確認・変更
  12. ブーリアン変数による VideoPrayer の 一時停止/解除 コントロール
  13. おすすめ習得法　サンプルアプリの完全コピー
  14. おすすめとは言えない習得法　より複雑なサンプルアプリの完全コピー
  15. 注意事項



リファレンスページの紹介

TechNet のこのページ を知っておけば、左のメニューから様々なデータソースの見方や関数リファレンス・ビジュアルリファレンスに飛ぶことができるので、結構便利かと思います。 日本語版のページが提供されるようになりました。



関数マニュアルの紹介

関数マニュアルのページは こちら(http://http://technet.microsoft.com/ja-jp/library/dn690139(v=vs.111).aspx)です。 Beta3 になって、新しくなったようです。日本語版が提供されています。

旧バージョンは こちら(http://siena.blob.core.windows.net/beta/ProjectSienaBetaFunctionReference.html)です。 英語ではありますが、チュートリアルの動画を見たり、ダウンロードしたサンプルで使用されている関数をここで確認したりすると、結構使えます。エクセル関数の亜流くらいの気分で、私は取り組みました。



エクセル表のテーブル変換

エクセル表をデータソースとして使用する場合、作成した表をテーブルに変換しておかなければなりません。

テーブル変換とは、作成した表のどこかのセルを選択した状態で、
  1. 「挿入」タブをクリック
  2. 「テーブル」をクリック
  3. 「先頭行をテーブルの見出しとして使用する」にチェックを入れる
  4. OKボタンをクリック
を行います。これで、ただの表ではなく、テーブルとして扱われます。

ついでに、テーブル名をわかりやすい名前に変更します。
  1. テーブル変換した表内のセルをクリック
  2. 「デザイン」タブをクリック
  3. 左上の「テーブル名」に、わかりやすい名前を入力
これで、テーブル名が変更できます。

ちなみに、ProjectSiena を起動してデータソースを読み込むとき、このテーブル名が表示され、そこにチェックを入れて読み込むことになります。
ProjectSiena が英語仕様なので、念のため、私はテーブル名を半角英数字で入力しました。



エクセルファイルの読み込み

エクセルファイルをデータソースとして読み込む手順は、以下のようになります。
  1. ProjectSiena を起動
  2. 右クリックで画面上部にメニューを表示
  3. "App Data"ボタンをクリック
  4. "Data Sources"メニューをクリック
  5. "Excel"メニューをクリック
  6. ファイル参照ボタン（ファイル名入力スペースの右側のボタン）をクリック
  7. ファイルの保管場所を表示
  8. ファイルをチェックして、"開く"ボタンをクリック
  9. "Select All"をクリック（一部のテーブルだけ読み込む場合は、読み込むテーブルのチェックボックスをチェック）
  10. "Import Data"ボタンをクリック
これで、インポートされたデータ内容が表示されます。



要素の貼り付け

イメージ・ラベル・ギャラリー・リストボックスなど、データを反映する要素は、右上のプラス記号をクリックして、必要なものを貼り付けます。



要素名の変更

要素名を変更したいときは、その要素を選択して、左上のドロップダウンメニュー（左がスクリーン名、右がその他の要素名）の中身を変更すれば、変えられます。
色々な処理記述をした後でも、名前の変更が処理記述に反映されているように感じました。１００％変更されるかは、ちょっとわかりません。



Altキーで貼り付け要素を確認

要素を色々貼り付けると、時々、どこに貼り付けたのかわからなくなります。また、要素が重なってくると、編集したい要素が選択しにくくなります。
そんな時は、Altキー を押してください。押している間、要素名が画面に表示されます。Altキーを押した状態で、対象の要素をクリックすれば、Altキーを外しても、クリックした要素が選択されています。

それでも要素がクリックしにくい、という時は、左上のドロップダウンメニューから対象の要素を選択してください。これが一番確実に選択できます。



ギャラリーへのデータ指定

チュートリアルにもある通り、ギャラリーにデータを割り当てると、結構面白いことができます。
試しにイメージギャラリーを貼り付けた後、ギャラリーへのデータ指定を行います。

  1. 貼り付けたギャラリーを選択
  2. 画面下部の "Items" ボタンをクリック
  3. 開いた小窓に選択したいテーブル名が出ている場合は、それをクリック

これでギャラリーとデータが結びつきます。

ギャラリーは、ギャラリーという枠と、枠の中の個々の表示領域の二層構造になっています。
ギャラリーへのデータ指定は、ギャラリーという枠に対して行います。
一方、枠内に並べるイメージの参照指定は、個々の表示領域に対して行います。

ギャラリー周辺をクリックした際、ギャラリーという枠が選択されているか、個々の表示領域が選択されているのか、注意してください。選択されている要素によって、画面下部に表示されるメニューの内容が変わってきます。

個々の表示領域の設定をするときは、ギャラリーの中の一番最初の表示領域(横型ギャラリーなら一番左、縦型ギャラリーなら一番上)を選択してください。
うまく選択できない場合は、ギャラリーの枠を選択したのち、左上に表示されるペン型ボタンをクリックしても選択できます。

『AdventureWorks』のエクセルを読み込んで、上記手順を行うと、結構都合よくイメージデータが表示されます。



ThisItem の活用

ProjectSiena の新規ファイルを開いて、『AdventureWorks』のエクセルファイルを読み込み、テキスト付き（もしくはキャプション付き）のギャラリーを貼り付けて、上記の「ギャラリーへのデータ指定」を行うと、都合よくイメージや文言が表示されます。

ギャラリーの一番目の文言を選んで、画面下部の"Text"ボタンをクリックすると、

ThisItem!Sport

という指定が出てきます。"ThisItem!"を付けることで、ギャラリーに結びつけたデータの項目を参照できるみたいです。

上記で紹介した関数マニュアルのページでも、「"ThisItem"というキーワードは便利だぞ」らしきことが書いてあるようです。



OnSelect で処理記述

イメージやボタンがクリックされたときに行う処理は、画面下部に表示される"OnSelect" ボタンをクリックして指定します。
『AdventureWorks』では、ギャラリー内の写真をクリックしたら動画画面に移動しますが、この処理は、ギャラリー内の一番目のイメージを選択して、"OnSelect" ボタンをクリックすることで確認できます。実際に見てみると、

Navigate(VideoScreen, ScreenTransition!Fade, {videoPause: false})

と記述されていました。
ちなみに、この"OnSelect" ボタンをクリックすると、決まり事として「Navigate,Collect,Remove」の三つが指定しやすいように出てきますが、記述できる関数はこれだけではありません。実際に自分で作り込んでいると、

UpdateContext({videoPause: true})

といった、変数の値を変更する関数をちょくちょく記述します。ここに取り上げた UpdateContext 関数は、動画画面に貼り付けてある"戻るボタン"の処理の中に記述されています。



ExpressView で詳細設定を確認・変更

画面下部のメニューの一番右に、"ExpressView" というボタンがあります。これをクリックすると、選択されている要素の詳細設定を、画面右に大きく表示してくれます。上記の"OnSelect" で記述した処理も、このボタンをクリックすることで確認・変更できます。



ブーリアン変数による VideoPrayer の 一時停止/解除 コントロール

ここで、ブーリアン変数を使用した、ビデオプレーヤーの「一時停止/解除」のコントロールを紹介します。これは、『AdventureWorks』で実際に行われている方法です。

  1. ギャラリーから動画画面に移動する際、ブーリアン変数 videoPause に false を転送し、移動したらすぐに動画が動くようにする。イメージをクリックした際の処理記述は次の通り。
    2. Navigate(VideoScreen, ScreenTransition!Fade, {videoPause: false})

  2. 動画画面からギャラリーに戻る際、ブーリアン変数 videoPause に true を転送し、ビデオプレーヤーを一時停止してから、ギャラリー画面に戻る。戻るボタンをクリックした際の処理記述は次の通り。
    3. UpdateContext({videoPause: true});Navigate(SplashScreen, ScreenTransition!Fade)

  3. 上の二つの処理記述がビデオプレーヤーに反映されるよう、ビデオプレーヤーの詳細設定を ExpressView で開いて、Data グループに入っている DefaultPaused 属性に、videoPause と変数名を入力する。

これで1セットとなって、ビデオプレーヤーの「一時停止/解除」のコントロールが実現します。
特徴は、videoPause をブーリアン変数として定義する記述はない、という点です。処理記述から、それがブーリアン変数であると判断されているようです。

なお、変数名 videoPause は決まり事ではありません。ほかの名前でも問題なく機能します。
また、属性の指定を変数名ではなく、式そのもの（例えば、mode=1 とか…）にしても機能します。式が true なら true の動きをし、false なら false の動きをします。



おすすめ習得法　サンプルアプリの完全コピー

完全コピーとは、要するに新規の状態からモノマネ作成することです。
正直、マニュアルが英語でよくわからなかったので、私は次のことを行いました。

  1. 『AdventureWorks』と『Health Cost Calculator』のチュートリアル（動画）を見る。（サンプル・チュートリアル紹介ページはこちら）
  2. 『AdventureWorks』のサンプルをダウンロードし、とりあえずサンプルを動かす。（サンプルの動かし方はこちら）
  3. 『AdventureWorks』のサンプルと同じ機能を、新規ファイルから作成する。
    4. その際、写真・動画データとエクセルファイルは、サンプルのものをそのまま使用する。
    また、処理記述を一回は自分で考えてみるが、わからないときは、あっさりサンプルの処理記述をカンニングする。カンニングの際は、"ExpressView" を最大限活用する。
  4. プラスアルファの機能を追加する。
    5. サンプルには、画面上に出てくる商品をチェックボックスでチェックして、別画面でチェックした商品を表示する機能はありません。でも、チュートリアルではその方法を紹介していたので、自分もその機能と、チェックした商品の合計金額を表示する機能を追加しました。

これだけでも、関数や変数の使い方とか、ExpressView の使い方とか、Navigate 時の変数の編集方法などがわかりました。



おすすめとは言えない習得法
より複雑なサンプルアプリの完全コピー

上の二本の他にも、次の順番で、三本の完全コピーに取り組みました。気付いたテクニックを合わせてメモしておきます。

PersonnelManager
−気づいたテクニック−
  1. コレクションへの Collect（データ保存）と Remove（データ削除）
  2. ギャラリーで選択された従業員イメージを、別イメージに表示
  3. コレクションからFilter関数で抽出したデータをギャラリーに表示
  4. First関数を使用したコレクションのレコード抽出
    5. Filter関数では、複数レコードが抽出されます。例え結果が1レコードとわかっているケースでも、その1レコードを使う際は、First指定が必要になります。
    自分で何か作成する際には　First(SelectedAssociates)!ID　とか、First(Filter(Assoc,AssignedTo="Shoes")) のような形で使用するケースも多いかと思います。
  5. イメージを、動作によって表示/非表示させる方法。
    6. 方法は、「ブーリアン変数による VideoPrayer の 一時停止/解除 コントロール」に似ています。
    フロアーのある部門をクリックした際に、選ばれた部門名を変数（SelectedDepartment）に転送する。
    一方、イメージのVisible 属性に、SelectedDepartment="Handbags" といった式を入力しておきます。
    式が true なら表示され、false なら非表示になります。

サンプルを見て、初版でこれを完成できる人はすごい、と思います。私は５〜６版を経て、どうにか形になりました。

最初は、コレクションに入れた従業員データの部門名変更をいかに実現するか、とか、ギャラリーで選択された従業員イメージをいかに別イメージに表示するか、といった機能実現に焦点をあて、最後の段階で、フロアーのイメージを使用した完成形に近付けていきました。
ばんばんカンニングして、それでも苦労した記憶があります。


InsuranceBroker
−気づいたテクニック−
  1. イメージの参照アドレスがネット上でも機能すること
  2. スライドバーと表示内容（イメージや金額等の計算結果）の連携

エクセル表やネット上にデータを準備しておいて、何かしらの動的なシミュレーションアプリを実現したいとき、このサンプルアプリが参考になります。

私はこのアプリを完全コピーする際、一部の処理記述を変更しました。
具体的には、4画面目で使用される、 Your Risk Assessment という表示領域です。
サンプルでは、Concatenate 関数を使用して、やたらと文言をつなぎ合わせているのですが、正直わかりづらいコーディングでした。
そこで、年齢や収入によるリスクレベルと、リスクレベルから決定する掛け率（Rate）をエクセル表にしてデータソースとして読み込み、処理の際は、そのテーブルとマッチングして文言を表示したり、マッチングした掛け率で合計金額を計算するようにしました。

この処理変更で気づいたのが、正規化した状態のテーブルをいくつか準備しておけば、簡単なSQL処理に近いレコード抽出ができそうだということです。このあたりは、実際に自分で何か作成すると、感覚がつかめるかと思います。


DressByVideo
−気づいたテクニック−
  1. FirstN関数とShuffle関数の使い方

このアプリは意外と簡単なのでは、と思ったのですが、無作為に商品を抽出して表示するなど、じつはちょっと凝った処理をしていました。
このアプリも、再現するまでにえらい時間がかかりました。

これら三本は、前二本よりはるかに作り込みが必要なアプリでした。
なので、頑張って完全コピーするよりも、関数使用例としてとらえ、"ExpressView" を用いて、関数の使い方とか、処理の連携方法を学習したほうがはるかに得策かもしれません。



注意事項

  1. メモリ容量とメモリ解放
    2. 継続して ProjectSiena を使用していると、不要なメモリの解放がうまく機能していない気がします。一度、タスクマネージャーでメモリ使用量を確認したら、1ギガを超えていることがありました。新規ファイルに切り替えてもメモリ使用量が減らなかったので、このあたりはまだベータ版の課題かもしれません。

  2. 不安定な挙動
    3. 特に『DressByVideo』のサンプルを参照していた頃、ファイルが開かなかったり、開いていたつもりが、いつの間にか新規ファイルに切り替わっていたりすることがありました。容量の問題なのか、ロジックの複雑さの問題なのかわかりませんが、時にそういうことが起きます。なので、自分で何か作成している際には、こまめに上書き保存することをお勧めします。