非プログラマーのためのWindowsストアアプリ作成ツール
マイクロソフトがリリースした新たなWindowsストアアプリ開発ツール「Microsoft Project “Siena”」を使ってみた
プログラミングの知識は不要。Office製品を扱うような手軽さでWindowsストアアプリが作成できるツール「Project “Siena”」の概要を実際のアプリ作成を通して紹介する。
※2017/06/09追記： 2013年にベータ版で公開されたMicrosoft Project Sienaは2017年6月現在でも使用可能となっていますが、正式版としてアップデートされる可能性はほぼないといえます。同様のツールにMicrosoft PowerAppsがありますので、今後はこちらを利用することをお勧めします。
Project “Siena”
Visual Studio Online “Monaco”（コード名）がクラウド向けのアプリをクラウドで開発するためのツールだとしたら、先日、マイクロソフトがベータ版をリリースした「Project “Siena”（コード名）」（以下、Siena）はWindowsストアアプリを開発するためのWindowsストアアプリだ。日本国内からもWindowsストアからインストールが可能となっている。
Windowsストアアプリを開発するといっても、C#やVisual Basicなどのプログラミング言語を使ってじかにコーディングを行う必要はない。画面上にビジュアル要素を配置し、それらと何らかのデータソース（＝アプリで使用するデータ）を関連付けていくことで極めて簡単にWindowsストアアプリを作成できる。それもそのはず、Sienaのベータ版リリースに合わせて公開されたS. Somasegarのブログによれば、Sienaはビジネスエキスパート、ビジネスアナリスト、コンサルタントが彼らの持つOfficeアプリを扱うスキルを活用してWindowsストアアプリを作成することに主眼が置かれている。とはいえ、出来上がったアプリはHTML／JavaScriptで動作するので、これらのコードに手を加えて見た目や挙動をカスタマイズするといったことも可能なようだ。
以下ではExcelファイルをデータソースとしてちょっとしたアプリを作成しながら、Sienaがどんなものかを見てみよう。
SienaでのWindowsストアアプリ開発の実際
Sienaを起動すると以下のような画面が表示される。画面最下部のアプリバーは実際には常に画面上に表示され、選択状態のオブジェクトに応じて、使用可能なツールが表示されるようになっている。
ビジュアル要素の配置とデータソースの作成
画面を右クリックすると、以下のようなアプリバーが画面上部に表示される。ここでは、アプリやデータソース、アプリの画面（＝スクリーン）の新規作成などが行える。右端の［Preview］ボタンをクリックすると、アプリを実行できる（とはいえ、アプリのオーサリング中でもその実際の動作が目で見て確認できるので［Preview］ボタンを押す回数は極めて少ない）。
最初の図「Sienaの起動画面」で画面中央に表示されているのが、これから作成するWindowsストアアプリのUI（ユーザーインターフェース）となる。右上にある［＋］ボタンをクリックすると、次の画面のようにビジュアル要素が用意されたパレット状の領域が表示されるので、ここから必要なデータを配置していく。
用意されているビジュアル要素はラベル、ボタン、イメージなど、開発者にとってはおなじみのものだがその種類はそれほど多くはない。例えば、現状はWebページを表示するためのビジュアル要素などはないようだ。その一方でビデオ、オーディオ、カメラなどを扱うためのビジュアル要素が最初から用意されているのは気になるところだ（ただし、本稿ではこれらを使う時間が無かったのでここでは扱わない）。
ここでは他のビジュアル要素よりも幅の広い［Galleries］をクリックしてみよう。すると、次に示すように、さらに何種類かのギャラリーが表示される。ここでは縦にアイコンが並んだ［Image Gallery］をクリックする。すると、中央のUI画面に次のようにイメージギャラリーが表示され、左下にはこれに接続するデータソースを指定するためのフライアウトが表示される。
前述したとおり、ここでは以下のようなExcelファイルをデータソースとして利用する。
| ID | Animal | Image | R | G | B |
|---|---|---|---|---|---|
| 1 | Cat | C:\Users\Public\Pictures\animals\A001.png | 240 | 230 | 140 |
| 2 | Pig | C:\Users\Public\Pictures\animals\A005.png | 255 | 182 | 193 |
| 3 | Lion | C:\Users\Public\Pictures\animals\A009.png | 255 | 215 | 0 |
| 4 | Giraffe | C:\Users\Public\Pictures\animals\A017.png | 50 | 205 | 50 |
| 5 | Camel | C:\Users\Public\Pictures\animals\A025.png | 160 | 82 | 45 |
| 6 | Dolphin | C:\Users\Public\Pictures\animals\A037.png | 173 | 216 | 230 |
| 7 | Frog | C:\Users\Public\Pictures\animals\A041.png | 144 | 238 | 144 |
| 8 | Squid | C:\Users\Public\Pictures\animals\A053.png | 128 | 225 | 230 |
| 9 | Octopus | C:\Users\Public\Pictures\animals\A057.png | 255 | 0 | 0 |
Animal列の内容は動物の種類を、Image列の内容はその動物の画像を表示するために、R／G／Bの各値は背景色で塗りつぶすために使用する。
注意するのはExcelの表はテーブル形式にしておく必要があることだ。これにはExcelでデータソースとしたい部分を選択して［挿入］タブにある［テーブル］を選択する（次の画面はテーブル形式に変更しようとしているところ）。
これをしておかないと、データソースとしてインポートできないので注意しよう。
なお、ここで使用した画像はMSDNの「Windows アプリ アート ギャラリー」で提供されているものを使わせてもらった。画像群はパブリックなピクチャフォルダー（通常は「C:\Users\Public\Pictures」）に保存しておくか、個人のピクチャフォルダーの下に保存しておく。パブリックなピクチャフォルダーにうまくアクセスできない場合は、個人のピクチャフォルダーを使ってみてほしい（この場合、上のフルパスに含まれている「Public」は個々のユーザー名となる）。
フライアウトで［Add Data Source］をクリックすると、［Data Source］画面が表示されるので、ここでデータソースとしてインポートするものを選択する。［Excel］［Windows Azure Mobile Services］［REST］［RSS Feed］［SharePoint］をデータソースに指定可能だが、ここでは［Excel］を選択する。すると、次のようにファイルを選択できるようになるので、ファイルピッカーを使って、Excelファイルを指定する。
ファイルを指定すると以下の図のようにインポートするテーブルを選択する画面が表示されるので、テーブルを選択して［Import data］ボタンをクリックする。
［Import data］ボタンをクリックすると、左側にあるようにExcelのテーブルがデータソースとしてインポートされる。ネコがカワイイ。
これで基本となるギャラリーの配置とデータソースの作成は完了だ。左上にある［戻る］ボタンをクリックして、元の画面に戻ろう。
ビジュアル要素とデータソースの関連付け
元の画面に戻ったら、イメージギャラリーが選択された状態で左下の［Items］をクリックすると［'テーブルx'］という項目が追加されているのが分かる（ここでは「'テーブル8'」となっている）。これを選択すれば以下の画面のようにギャラリーに動物の画像が表示される。
このように、データソースを用意し、ビジュアル要素をUI画面に配置して、それらを関連付け（＝バインド）していくことで、簡単にデータをブラウズしたり操作したりするアプリが作成できる。とはいえ、これだけでは画面が寂しいので、イメージギャラリーで項目を選択したら、選択されたイメージを画面に表示するとともに、背景色を変更してみよう。また、動物の種類も画面に表示してみる。これらの作業もビジュアル要素を配置して、データをつなぎ合わせていくだけだ。
ここでは次のように、イメージとラベルを配置して、画面全体のバランスを調整した。イメージを選択して画面下部のアプリバーで［Design］－［Image Position］ボタンをクリックすると画像の表示方法を選択できる。ここでは［Fit］を選択している。これ以外にもラベルのフォントサイズやアラインメントなども調整しているが、これらについては実際にSienaを操作してみればすぐに設定方法が分かるだろう。
イメージギャラリーで画像を選択したときに、イメージにその画像を表示するには、イメージギャラリーではなくイメージの側でデータを関連付ける。これには、イメージを選択して左下にある［Data］ボタンをクリックする。すると、アプリバーの表示内容が変わり［Image］［Tooltip］などのボタンが表示されるので、ここでは［Image］ボタンをクリックする（［Design］ボタンを押して、見た目の調整をしていない場合には［Data］ボタンはなく、そのまま［Image］ボタンが表示されているので、ここでの説明と実際の画面が異なっている場合がある）。すると次のように、フライアウトが表示されるので、ここで関連付ける要素を選択する。
フライアウトには［Gallery1!Selected］という項目が表示されているのが分かる（次の画面）。これが現在イメージギャラリーで選択されている項目を表しているので、これを選択して、次に表示される項目でさらに［Image］を選択する。これにより、「Gallery1!Selected!Image」と表示される。この「Image」はExcelのテーブルで指定した列である。
これだけでイメージギャラリーで選択された項目の画像が右側にも表示されるようになる。同様にしてラベルのテキストの設定も行う（ラベルが選択された状態で［Text］ボタンをクリックし「Gallery1!Selected!Animal」を指定）。
背景色の設定では、Sienaが標準で提供している関数を使用してみよう。何もビジュアル要素がないところをクリックしたら［Design］ボタンをクリックする。すると、［Fill］ボタンが表示されるので、これをクリックして、フライアウトで「RGBA(Gallery1!Selected!R, Gallery1!Selected!G, Gallery1!Selected!B, 1)」と入力する。RGBA関数は名前のとおり、引数に受け取った各RGB＋アルファ値からその色値を返す関数だ。Sienaではこれ以外にもデータの列／行を取得／操作するための関数が用意されている。詳細については関数のリファレンスページ（英語）を参照してほしい。
以上で画面は次のようになる。
スクリーンの遷移
最後にスクリーン（＝画面）の遷移を試してみよう。といっても、表示する要素は先ほどと同じく、イメージ、ラベルとして、背景色も変更する。そのためには、画面の何もない部分を右クリックしてアプリバーを上部に表示して、［Add Screen］ボタンをクリックする。
画面遷移のトリガーにはイメージギャラリーのイベントを使用しよう。上部のアプリバーで［Screen1］を選択して最初の画面に戻り、イメージギャラリー内の先頭の項目を選択すると、下部のアプリバーに［OnSelect］ボタンが表示される。これをクリックし、表示されたフライアウトで［Navigate］をクリックする（次の画面を参照）。すると、フライアウトの表示内容が変わるので、ここで遷移先（ここでは［Screen2］）と遷移時の画面効果を選択する。画面効果にどんなものがあるかは実際に試してみてほしい。
［Navigate］をクリック
2つ目のスクリーンにはイメージとラベルを配置して、最初のスクリーンと同じもの（イメージの［Data］－［Image］、ラベルの［Text］、スクリーン2の［Design］－［Fill］）を設定する。最後にイメージを選択して下部のアプリバーで［OnSelect］ボタンをクリックし、フライアウトで遷移先に［Screen1］を設定する。これで、2つ目のスクリーンの画像をクリックすれば最初のスクリーンに戻れるようになる（本来は［戻る］ボタンを設置すべきだが、ここでは省略をしている）。
これでアプリは完成だ。画面上部のアプリバーにある［Preview］ボタンをクリックして動作を確認しておこう。
ライオンを選択
ライオンをクリック
上の画面でライオンを選択すると、中央の画面に遷移する。中央の画面でライオンをクリックすると、下の画面に遷移する。
まとめ
このように、Sienaではプログラミングというよりは、オーサリング的な手法を用いて、簡単にWindowsストアアプリを作成できる。興味のある方は、インストールして実際に触ってみてはいかがだろうか。
本稿ではサンプルに合わせて、データソースとなるExcelファイルを独自に作成していたが、実際にはすでに存在しているデータ（Excelファイルや各種のサービスで提供されるデータ）を行／列形式のデータとしてアクセスし、そこから何らかの洞察（Insight）を得るための簡便なツールとして使うためのものだろう。関数のリファレンスページ（英語）を見ると、行／列形式のデータを使って計算をしたり、集計したりするための関数が用意されていることからも分かる。こうした関数と、時間不足で本稿では調べきれなかった「コレクション」を使っていくことがSienaで意義のあるデータ分析を行うコツになると思われる。
コレクション以外にも本稿では説明し切れていない項目が多数ある。「Microsoft Project Sienaの公式サイト（英語）」には参考となる情報も掲載されているので、そちらも参照されたい。
まだベータ版ではあるが、これからのSienaの進化に期待しよう。
