暮井 慧とアプリ開発！　第2回

　こんにちは！　私、暮井 慧（くれい けい）。今日は、Windows ストアアプリで、Windows ストアアプリが作れちゃう「Microsoft Project Siena」を紹介するよ。窓の杜読者のみんなはWindows ストアアプリ大好きだよね！

著者プロフィール

【暮井 慧（くれい　けい）　17歳】　都内の公立高校に通う女子高生。部活は、情報処理研究会。身体を動かすのも好きで、気が向いたときはなぜか体育会系の部活に混ぜてもらっていろんなスポーツをすることも。IT・開発系コミュニティ“プログラミング生放送”のキャラクターとして活動中！

Twitter：@pronama

Webサイト：http://pronama.jp/kei

プログラミング不要？ Project SienaでWindows ストアアプリ開発！

　「Microsoft Project Siena（以下、Project Siena）」は、ビジネスアプリが作れるアプリ。マイクロソフトが開発していて、まだベータ版なの。「Project Siena」っていう名前もコードネームなんだ。

　開発は、アプリに“ビジュアル”と呼ばれるパーツを配置して見た目や動作をカスタマイズ。それと、「Microsoft Excel」の関数みたいな記述でロジックを組むよ。特長は、プログラミング不要ってとこ！　私の印象は……、ちょっとプログラミングセンスがないと難しいかな？　って思うところもあるけど、とりあえず試してみて！

「Project Siena」

　どんなアプリが作れるかというと、何かしらのデータを表示したり操作したりするアプリが作れるの。「Microsoft Excel」、ブログのRSSフィード、Facebook、Twitterやその他のWebサービスなどのデータが扱えて、それらのデータにいろいろできるアプリが作れるってわけ。

　そして、「Project Siena」はWindows ストアアプリでできていて、Windows ストアアプリが作れるよ。だから、タブレットデバイスでも作れるのもポイントだよね。実は今のBeta 3だと、Windows ストアに登録できるところまではできないんだけど、自分のデバイスにインストールしたり、ファイルを渡したりして友達のデバイスにインストールは可能！　　Windows RTで開発はできないから気を付けてね。

ビジュアルを配置してアプリ作成！

　さっそく使ってみよっか。まずはWindows ストアから「Project Siena」をインストールしてね。

　起動した画面がこれ。2014年8月のアップデートで日本語対応！

「Project Siena」を起動

　白い部分がアプリになる画面。右上の［＋］ボタンをタップして、ビジュアルを表示してみて。ボタンやラベルとかアプリ画面のパーツがいろいろあるでしょ？　ここではとりあえずTwitterのデータを表示してみよう。“ソーシャル”の“Twitterでフォロー”をタップして！

“Twitterでフォロー”のビジュアルのセットを配置

　Twitterの認証画面に遷移するからログインしてね。自分のフォローしている人たちのリストが表示されたよね？

　ここでは、大きくふたつのことが起きているよ。ひとつはアプリにTwitterというデータが追加されたこと。もうひとつは、一度にいろいろなビジュアルが配置されていること。

　ビジュアルは、大きさや位置をドラッグして自由に変えてみよう！　上部のコンボボックスには、配置しているビジュアルの選択や名前の変更もできるから覚えておくといいよ。

配置したビジュアルの一覧

　フォローを表示しているビジュアルは、ギャラリーっていうビジュアル。ギャラリーの中にさらにビジュアルがあって、一番目の項目を選択すると、ギャラリー内のビジュアルを編集できて項目の見た目をカスタマイズできるよ。いわゆるテンプレートだね。

ギャラリー内のビジュアル（ギャラリーのテンプレート）

アプリを実行してみよう！

　とりあえず作っているアプリを「Project Siena」の中で動かしてみよっか。

　今のままだとフォローしか表示されていないから、ビジュアル“ソーシャル”の“Twitterでツイート”も選んでみよう。ツイートするためのビジュアルがセットで配置されるよ。これでツイートできるアプリの完成！

“Twitterでツイート”のビジュアルのセットを追加

［プレビュー］ボタン

　アプリの実行は、画面の上部からスワイプ（マウスだと右クリック）して、メニューを表示して、［プレビュー］ボタンをタップ！

　以上でアプリ画面が前面に表示されて、動作を確認したりできるよ。プレビューの終了は、上部メニューの［デザイン］ボタンから。

アプリのプレビューと［デザイン］ボタン

　ツイートできたかな？　フォローしている人の表示は更新する仕組みを実装していないから、変化しないよ。

開発中のアプリをファイルへ保存

［ファイル］メニュー

　開発しているアプリ情報の保存にもふれておくね。上部の［ファイル］メニューから［上書き保存］か［名前を付けて保存］項目を選べばOK。ファイルを“開く”やり方もわかるよね。

　ベータ版だし、強制終了の可能性もあるから、こまめに保存しておこうね。実は私も保存してなくて強制終了で消えちゃったことがあるよ！　みんなは気をつけてね！　あと、ストアアプリって終了の確認みたいなのないから、作りかけのまま間違えて「Project Siena」を終了しちゃわないように注意！

アプリのデータソースを見てみよう！

データソース

　アプリ開発に戻るよ。さっきアプリにデータが追加されたって言ったよね。上部にある［アプリのデータ］メニューの［データソース］項目を選んでみて。

　画面が遷移して、“既存のソース”リストに“Twitter”項目があるでしょ？　今のアプリはTwitterデータを持っているってこと。この画面で、データがどんな構造をしているか、どんな操作ができるかってことを、ある程度調べることもできるよ。Twitterのタイムライン情報は、Twitterデータの“Timeline”関数を使えば取得できそうだね。

Twitterデータソース

　Timelineを選んでいる状態で［テスト］ボタンをタップすると、どんなデータが取得できるかも確認できるよ。データの構成も把握できるね。

　このデータ構造やデータを操作する関数の部分は、ちょっと難しいかな？　今はとりあえずフィーリングで乗り切ろう！

用意されているデータソース

　今回Twitterデータ以外ばっさりカットするけど、［データの追加］ボタンからどんな種類のデータソースが使えるかだけ見ておこう。ExcelファイルとかWebサービスとかいろいろあるよね。おもしろそうなの見つかったかな？

表示するデータのカスタマイズ！

　次は、表示するデータを変えてみよう！　フォローしている人の表示じゃなくて自分のタイムラインの表示に変えるよ。

　アプリのデザイン画面で、フォローを表示しているギャラリーを選択して、下部のメニューの左にある［項目］ボタンをタップ。ここでギャラリーの項目のデータを指定するの。

ギャラリーの項目

　“Fx”って書いてある欄が関数を記述するところ。“Twitter!Following(Twitter!CurrentUser()!screen_name)!users”で、TwitterデータソースのFollowing関数でフォローしている人の情報を指定しているわけ。誰のフォローしている人たちかというと、CurrentUser関数を使って、ログインしているユーザーを指定しているよ。関数を使った記述は、ちょっとややこしいけど、入力補完や簡単な説明も表示されるから、理解の手助けになると思うよ。

　“fx”欄を“Twitter!Timeline()”に変えて、表示するデータをタイムラインにしよう。

項目に表示するデータをタイムラインに変更

　タイムラインのデータを指定したら、ギャラリーの見た目も変わったよね。さらに、ギャラリー中のビジュアルに表示するデータも指定して、いい感じにタイムラインを表示させるよ。

　項目の右上［表示する列の選択］ボタンをタップすると、ギャラリー内の各ビジュアルに何のデータを表示させるか一覧できて、さらに各項目をタップすると値を編集できるから、次のように変えてみよう。ビジュアルの名前の数字の部分は、違う場合もあるよ。

• “Image2!Image”は、“ThisItem!user!profile_image_url”
• “Name1!Text”は、“ThisItem!user!screen_name”
• “ScreenName1!Text”は、“ThisItem!text”

ギャラリーのビジュアルに表示するデータを編集

　ここでの“ThisItem”は、タイムラインのひとつのデータを表していて、そのユーザー（user）のプロフィール画像のURL（profile_image_url）……という感じ。

　以上で、タイムラインの表示ができたよね！　ギャラリー内のビジュアルを追加して表示するデータを選べば、日付とかいろいろ表示もできるからいろいろ試してみてね。

コレクションを使いこなす!?

　「Project Siena」で重要な“コレクション”についても触れておくよ！　コレクションと、ビジュアルのボタンを使って、タイムライン表示を更新してみよう。

　今は、ギャラリーの項目にTimeline関数を直接指定しているけど、これだと項目の内容を更新できないんだよね。Timeline関数で取得できるデータは、コレクションというデータの入れ物に追加して、ギャラリーの項目にはそのコレクションを表示するよう指定するよ。で、コレクションを操作する関数がいろいろあるから、それらを使ってコレクションの内容を書き換えて、ギャラリーの表示が変わるようにするんだ。

　説明だとちょっとわかりにくいかもしれないけど、実際にやってみよう！　タイムラインの更新ボタンとして使うビジュアルのボタンを配置してみて。

ボタンの追加

　ボタンをタップしたときに、コレクションの内容を消して、コレクションにタイムラインのデータを追加するようにカスタマイズしていくよ。

　下部のツールバーから［選択時］ボタンをタップして、“fx”欄に“Clear('C');Collect('C', Twitter!Timeline())”と入力してみて。

ボタン選択時（タップ時）の動作を指定

　“Clear”と“Collect”はコレクションを操作する関数。複数の関数を使うときは「;（セミコロン）」で区切って書くよ。“C”は、コレクションの名前を適当に私が付けただけだから何でもいいよ。

　これで、ボタンを選択時……ここではタップしたときに、コレクション“C”の内容を消して（Clear）、コレクション“C”にTimeline関数の内容を追加する（Collect）動作になるよ。

　上部にある［アプリのデータ］メニューの［コレクション］項目を選んでみて。こんな感じで、“既存のコレクション”リストから、コレクションの情報を確認できるからね。

既存のコレクションの表示

ギャラリーの項目にコレクションを指定gallery-items-collection

　アプリのデザイン画面に戻って、ギャラリーの項目のデータをコレクションに変更しよう。これでコレクションの内容が変わるとギャラリーの表示も変わるよ。つまり、ボタンをタップするたびに最新のタイムラインが見られるってこと！

　アプリをプレビューしてみて動作を確認してみよう！　Twitterアプリとしては微妙だけど、コレクションを使ってギャラリーの表示を変えるやり方はわかったかな？

完成したアプリ

　ビジュアルにはタイマーなんかもあって、タイムラインを自動更新したり、頑張れば最新のツイートだけコレクションに追加もできるかも……。

アプリの発行とインストール

　最後に、作ったアプリをアプリ単体としてインストールできるようにしてみよう！

Windowsのスタート画面の検索から「PowerShell」を管理者権限で実行

　この機能を使うには、開発者用ライセンスがいるんだよね。取得方法は、「PowerShell」を管理者権限で実行して、“Show-WindowsDeveloperLicenseRegistration”と打ち込むだけ。表示されるダイアログにMicrosoftアカウントでサインインすればOK。

　それじゃ、［ファイル］メニューの［発行］項目を選択してね。アプリの情報を設定する画面に遷移するよ。

アプリ情報の設定

　アプリの名前、タイル画像の指定の他に、今回はTwitterを利用しているからAPI Keyなどの設定もしておく必要があるよ。TwitterのAPI Keyの取得方法は前回の内容でも少しふれたから参考にしてみてね。

“PublishedPackage”フォルダー

　［発行］ボタンをタップすれば、保存先の“PublishedPackage”フォルダーの中にいろいろファイルができるよ。

　アプリのインストールは、PublishedPackageフォルダーの“IntallApp.exe”を実行して「このPCにインストール」を選べばOK。

インストーラー

　もし、インストールするとき古いバージョンのアプリがインストール済みの場合は、アンインストールしてからしてね。

おわりに

　というわけで、「Project Siena」の紹介はここまで。どうだったかな？　公式の日本語情報もあるから、Twitter以外のデータソースや、いろいろなビジュアルと関数も調べてみてね。

　追加情報は、プロ生のサイトにも書いておくかも。楽しいアプリができたら私にも教えてね！　それじゃ、また次回！