集中企画
暮井 慧とアプリ開発！ 第3回
「Windows App Studio」でノンコーディング アプリ開発！
（2014/9/11 16:24）
こんにちは！ 私、暮井 慧（くれい けい）。今回は、Windows ストアアプリが作れるWebアプリ「Windows App Studio」を紹介するよ。Windows Phoneアプリも同時に作れるんだけど、日本ではあんまし関係ないよね……？
著者プロフィール
【暮井 慧（くれい けい） 17歳】 都内の公立高校に通う女子高生。部活は、情報処理研究会。身体を動かすのも好きで、気が向いたときはなぜか体育会系の部活に混ぜてもらっていろんなスポーツをすることも。IT・開発系コミュニティ“プログラミング生放送”のキャラクターとして活動中！
Twitter：@pronama
Webサイト：http://pronama.jp/kei
「Windows App Studio」でノンコーディング アプリ開発！
「Windows App Studio」は、Windows ストアアプリとWindows Phoneアプリが、プログラミング不要で作れるWebアプリだよ。マイクロソフトが提供していて、前回の「Microsoft Project Siena」とは別のアプローチで簡単にアプリ開発するみたいだね。「Microsoft Project Siena」よりさらに簡単に開発できるよ。
アプリの作り方は、アプリのテンプレートを選んで、テキストや写真などコンテンツを追加して、見た目をデザインすればいいだけの簡単ステップ！ 作るのに向いているアプリは、会社案内とかカタログとかテキストや写真で構成できるアプリかな。
- Windows App Studio - Microsoft
- http://appstudio.windows.com/
作ったアプリは、直接デバイスにインストールできるパッケージと、Windows ストアに公開できるパッケージをダウンロードできるよ。ソースコードもダウンロードできるから「Windows App Studio」で作ったアプリを元に「Visual Studio」で開発していくこともできるんだ。
サンプルとして、「Windows App Studio」で作られた“「Windows App Studio」の使い方”のアプリも用意されているよ。どんなことができるか確認してみてね。
- Windows App Studio Sample App app for Windows in the Windows Store
- http://apps.microsoft.com/windows/en-us/app/282b4888-5e2e-4569-be0d-cfc83cb18e52
テンプレートを選んでアプリ作成！
さっそくアプリを作っていくよ！ 「Windows App Studio」のプロジェクト作成ページにアクセスして、元になるテンプレートを選ぼう。「Windows App Studio」では、Microsoftアカウントが必要だよ。
- Choose your template - Windows App Studio - Microsoft
- http://appstudio.windows.com/projects/create
いろいろテンプレートがあるでしょ？ どれもそう大きく内容は変わらないんだけどね。今回は“Empty App”でゼロから始めてみるけど、いろいろなテンプレートの方ものぞいてみてね。
“Empty App”を選んで、［Create］ボタンをクリックして進めよう！
あと、作ったアプリや、作りかけのアプリのプロジェクトは、オンラインに保存されて、左上にあるリンクの“My Projects”から選べるから覚えておいてね。
アプリにコンテンツを追加！
［Content］タブに、セクションって呼ばれるコンテンツを追加していってみよう。
追加できるコンテンツとなるデータは、RSS/HTML/YouTube/Flickr/Bing/Facebook/Instagramから選べるの。
“Basic Sections”領域の［Html］ボタンをクリックすると、HTMLで構成する自由な文書をアプリに追加できるよ。セクションの名前とデータを自由に入力してみて！ 後から修正できるからとりあえず［Confirm］ボタンをクリックしちゃってOKだよ。
［Confirm］ボタンを押すと画面はこんな感じになったよね？ “HTML”セクションが追加されて、［Edit］ボタンから編集が可能だよ。別のタブや編集画面に移動する前には、毎回右上の［Save］ボタンから保存するようにしてね。
［Edit］ボタンをクリックするとこんな画面。［DATA］タブからデータの編集ができるよ。
それから、Windows ストアアプリでどんな感じに見えるかは、左下の［Windows Preview］ボタンからいつでもチェック可能！
こういう風にコンテンツを追加していくの。簡単だよね？
RSSフィードのコンテンツを追加！
次は、アプリ実行時に動的に変わるコンテンツとして、RSSフィードを追加してみよっか。［Rss］ボタンをクリックして、セクションのタイトルと、RSSフィードのURLを入力するだけ！
［SAVE］ボタンで保存して、“RSS”セクションを［Edit］ボタンから編集してみよう。RSSセクションでは、リスト表示と1記事だけを表示する2種類のページができて、それぞれのレイアウトが選べるの。
“Layout”領域からいろいろレイアウトを選んで、好きなのを決めてね。Windows Phoneアプリのプレビューにもすぐに反映されるよ。
さらに“Bindings”のところで、RSSフィードの何のデータを表示するか選べるよ。テキスト欄の右部分をクリック！
……というように、RSSフィードなどのデータから、Windows ストアアプリやWindows Phoneに似合ったデザインのページが作れちゃうんだ。他のセクションのデータだと、YouTubeのプレイリストや検索結果、Flickrの写真、Facebookのページのタイムラインなんかを同じ感じで表示できるよ。
メニューを追加！
［Menu］ボタンをクリックしてメニューを追加すると、“Menu”セクションの中にさらにセクションを追加していくことができるよ。
全然難しくないよね？
“Basic sections”領域の“MenuAction”セクションを追加すると、“Data Configuration”プルダウンメニューの［HTTP］項目からWebサイトにリンクしたり、［Email］項目からメーラーを開いたりもできるようになるよ。
メニューセクション内のセクションは［Edit item］ボタンから編集できて、タイル画像も変更できるよ。タイルに使いやすい画像が「Windows App Studio」にあらかじめ用意されているから、ここから選んでもいいし、もちろんオリジナルな画像の設定もできるからね。
以上でとりあえず、アプリのコンテンツの追加は終了！
アプリのテーマの編集！
次は、［Themes］タブを選んでみて。ここでアプリのテーマを編集できるよ。［Select］ボタンをクリックして３種類から選んでね。
暗めの“Dark Style”、明るめの“Light Style”を元に色の変更もできるし、“Custom Style”を選ぶと、［Background Image］ボタンから背景イメージの設定もできるよ。
タイルやスプラッシュの設定！
Windows ストアアプリで特徴的なタイルに関する設定や、スプラッシュスクリーンなどの設定は［Tiles］タブからするんだよ。
［Tiles］タブの［TILES］タブからタイルの種類を選択してね。くるくるオモテウラに回転する“Flip template”、画像を切り替えて表示する“Cycle template”、横長のタイルのときテキストを表示できる“Iconic template”の3種類。タイル画像やテキストを設定しよう。“Cycle template”は、今回割愛しちゃったコレクションというセクションを用意して画像を用意していないと使えないよ。
［SPLASH & LOCK］タブからアプリ起動時に表示されるスプラッシュスクリーンの画像も設定できるよ。“Lock screen background”ってのは、Windows Phone向けのロック画面の背景のこと。
アプリを公開する準備！
アプリを公開するための情報は［Publish Info］タブから設定するよ。アプリのアイコンや、タイトル（App title）、説明（App description）、言語（Language）なんかを設定しよう。［Include about page］スイッチをONにしておくと、アプリの設定に［About］項目が追加されて、ここで入力した説明をアプリから見られるようになるよ。
ここで残念な発見をしちゃったんだけど、説明を日本語で書くとエラーになる場合があるみたい……。この後のパッケージ作成でエラーになったら疑ってみて。
Windows ストアで公開する場合は、“Store Association”領域から“Associate App with the Store”画面を開いて必要な情報の設定が必要。
今回、Windows ストアにアプリを登録する手順は省略するね。ちなみに、開発者アカウントを作るには、個人アカウントで2,000円弱ぐらいの支払いがいるよ。
一応、必要な情報を見ておくと……次の4種類。
- App Identity：ダッシュボードで、各アプリの“サービス“の“Live サービス サイト”から参照できる“アプリケーション ID”の値
- App Display Name：予約した“アプリの名前”
- Published ID：アカウント情報の“発行者の表示名”
- Publisher Name：アカウント情報の“発行者 ID”
- Windows デベロッパーセンター ダッシュボード
- https://appdev.microsoft.com/StorePortals/ja-JP/Home/Index
- Windows デベロッパーセンター アカウント情報
- https://appdev.microsoft.com/StorePortals/ja-jp/Account/Profile/Update
アプリの完成！
いよいよアプリの完成だよ！ 右上の［Finish］ボタンをクリックしてみて！
右上の［Generate］ボタンをクリックして、必要なパッケージを生成しよう。
［Publish packages］スイッチがONなら、Windows ストアに公開するためのパッケージが生成されるの。ただし、きちんと［Publish Info］タブの“Associate App with the Store”画面で情報を入力しておくがあるよ。［Installable packages］がONなら、PCに直接インストールできるパッケージを生成できるの。
最後に［Generate］ボタンをクリックして、しばらくするとパッケージができあがるよ！
Windows PhoneとWindows ストアアプリの両方のパッケージができて、ソースコードは「Visual Studio 2013」のユニバーサルプロジェクト形式としてダウンロードできるよ。
アプリのインストール！
直接Windows 8.1 PCにインストールする方法を紹介するね。“Prerequisites”領域にある“Install Windows 8.1 Certificate”リンクから証明書をダウンロードしてインストール。“Add-RootCertificate.ps1”を「PowerShell」で実行しよう。
続いて“Installable Packages”領域にある“Windows 8.1 installable package”リンクからファイルをダウンロード。ダウンロードされた“Add-AppDevPackage.ps1”を「PowerShell」で実行しよう。
これでアプリがインストールされたはず！ うまくできたかな？
おわりに
「Windows App Studio」の紹介はここまで！ 目的があえば、簡単にそれなりのアプリができそうでしょ？ Beta版だから今後どうなるかはわからないけど、今のところ公式ブログも頻繁に更新されているね。
- Windows App Studio News - Site Home - MSDN Blogs
- http://blogs.msdn.com/b/windows_app_studio_news/
いつものように補足は、プロ生のサイトに書いておくね。
ひとまず、今回のアプリ開発特集は一区切り。また近いうちに会えるといいな。感想、教えてね！