App Studio を使って、ブラウザ上で 5 分で Windows ストアアプリ（RSS リーダー）を作ってみる

[アーティクル]
04/12/2014

App Studio は、Windows Phone のアプリをブラウザ上で簡単に開発できる、という Web サービスです。この度、この App Studio が Windows ストアアプリへの出力にも対応して、一つのプロジェクトから Windows Phone のアプリと Windows ストアアプリの両方を作れるようになったとのことで、試してみました。

App Studio

https://appstudio.windowsphone.com/

個人的な感想

結論から書くと、この App Studio はモバイル向けのアプリケーションを作る上での流れをつかむうえで、とても良いサービスなのかなと感じました（Windows Phone アプリやWindows ストアアプリに限らず）。特に初心者におすすめですが、完成したアプリはユニバーサルアプリとしてのソースコードをダウンロードできるので、これをベースに機能を付け加えていくということもできるので、様々な活用の方法があるのではないでしょうか。

全体の流れ

基本的に上のメニューの流れです（アプリ開発の画面で出てくるので、後ほど解説します）。一般的なアプリ開発の流れに沿っていると思います。そんなにカスタマイズしなければ、本当に 5 分程度で RSS リーダーは作れてしまいます。

プロジェクトを作る
コンテンツを決める
テーマ（デザイン）を決める
アイコン（アプリの顔）を設定する

公開に必要な情報を決める
完了！

順次やっていきましょう。

準備

App Studio (https://appstudio.windowsphone.com/) にアクセスすると、以下のような画面が出てきます。右上の「Start New Project」から始めます。

ログインするように求められるのでログインします。

プロジェクトを作る画面がこちらです。いくつかのサンプルアプリのプロジェクトが用意されています。

今回はゼロから作ってみたいので、「Empty App」を選びます。（もっといろいろな作り方を知りたい場合は、サンプルアプリをベースに作ってみるのも良いと思います）

Empty App を選ぶと、確認画面が出てくるので、[Create] を選んで次に進みます。プレビューに表示されている、この空のアプリケーションをどんどんカスタマイズしていきます。

そして以下の画面が開発のメイン画面です。ここから開発を進めていきましょう！

コンテンツを決める

アプリにとって何よりコンテンツが王様です。どのようなコンテンツを表示するかで、アプリの価値はほぼ決まると言ってもいいでしょう。なのでどのようなコンテンツを表示するかを決める画面がこちらになります。

左側にはプレビューが、右側にはコンテンツの設定画面が出ています。

何はともあれ、左上のタイトル表示を変えてみましょう。標準だと「Empty App」という名前が入っています。今回はこれを「RSS リーダー」に変更してみました。

Windows Phone のプレビュー画面も変わるのが確認できるかと思います。

次にメインコンテンツである RSS を追加してみます。画面右側の Basic Section の中にある RSS というアイコンをクリックします。

すると RSS の設定を行う以下のような画面が出てきます。とはいえ、名前と URL を指定するだけです。今回は私のこのブログを表示してみます。終わったら [Create] を押します。

すると RSS がプレビュー画面に表示されます。プレビュー画面はタッチのエミュレートもできますよ！

ちなみに左下の [Windows Preview] というボタンを押すと、Windows ストアアプリ版のプレビュー画面が出てきます。ストアアプリ版は画面が大きいのでポップアップの中に表示してくれます。

ここまで確認できれば画面右上の [Save] ボタンを押して保存してください。保存しないと設定が消えてしまいます。

グレーアウトされれば保存されています。

※今回は RSS だけの表示にしてみますが、2個目の RSS を表示したり、Facebook の情報なども表示でき、最大 6 画面まで設定できるようになっています。画面の切り替えは横スクロールで行えます。

以上でコンテンツの設定は完了です。

テーマ（デザイン）を決める

次にテーマ（デザイン）の設定です。画面上部のメニューから [Theme] をクリックします。

すると以下のような画面が表示され、テーマの設定を行えるようになります。

標準だと「Dark Style」が選択されていますが、ちょっと味気ないのでデザイン変更しておいたほうが良いかと思います。「Custom Style」を選択しましょう。

アプリバーのスタイルを変えてみます。[Application Bar] の右側にあるカラーパレットから色を選択できます。

次に背景も画像に変更してみます。[Background Image] のチェックボックスにチェックを入れます。

背景画像の選定をします。そのためアップロードボタンを押します。

すると以下のような画面が出てきます。自分のコンピュータの中の画像や OneDrive の画像から選べますが、とりあえず一番右の App Studio Garelly にたくさんの画像があるので、こちらから選ぶと楽です。

様々な画像が表示されるので、好きな画像を選択し、[Select] を押して決定します。

背景画像がプレビュー画面に反映されているのを確認したら [Save] します。[Windows Preview] も選択して、Windows ストアアプリだとどのような表示になるのかも確認しておきましょう。

次は Tiles に移ります。

タイルを決める

タイルはアプリの顔となるものです。魅力的であればあるほどアプリの起動頻度が高まります。いくつかのテンプレートがありますので、今回はFlip template で進めてみます。

文字を入力するところは [Title], [Back title], [Back content] の3種類、そしてその他のグレーの四角には画像を挿入できます。文字を入力してみて、プレビュー画面が変わるのを確認しながら進め、次に画像は App Studio resources から適切なものを選んでみてください。