無償のオンライン型開発環境「Windows App Studio」入門：特集：ノンコーディングでユニバーサルWindowsアプリを作ろう（3/5 ページ）

ユニバーサルWindowsアプリを、1行のコードも書かずに開発できるツール「Windows App Studio」。その開発からストアへの公開、Visual Studioでの編集までを解説する。

[山本康彦，BluewaterSoft／Microsoft MVP for Windows Platform Development]

コンテンツを追加する

　［Content］画面で、コンテンツを追加してみよう。Windows App Studioで作成するアプリのメイン画面は、Hubコントロールが使われている。Hubコントロールには複数のセクションを配置できる（Windows App Studioでは6つまで）。それぞれのセクションにコンテンツを追加していくことが、Windows App Studioでのアプリ作成の基本だ（次の画像）。

セクションに追加できるコンテンツ
作業メニューで［Content］（赤丸内）を選び、下に並んでいるコンテンツのタイル（赤枠内）を選んで、空いているセクションの一番左にそのコンテンツを追加する。
基本的な作業の流れは次のようになる。コンテンツのタイルをクリックすると基本情報（セクションタイトルや検索キーワードなど）を入れるダイアログが出てくる。入力して［Confirm］（＝確認）ボタンをクリックすると、ダイアログは消えて、セクションにそのコンテンツが追加される。そこで一度［SAVE］ボタンをクリックして保存。あらためて、追加したコンテンツの［Edit］リンクをクリックして、詳細な設定を行う。
追加できるコンテンツには、大きく2種類ある。1つはWebコンテンツで、RSSフィードやBing検索結果、Facebookのページなどを表示できる。もう1つは、内部に持っているコンテンツだ（［Html］と［Collection］、緑枠内）。特別なコンテンツとして、サブ画面や任意のリンクを追加するための［Menu］がある（紫枠内）。

　例えば、RSSフィードをセクションに追加してみよう。次の画像で説明するような手順になる。

入力後、［Confirm］ボタンをクリック

▼

［SAVE］ボタンをクリックしてから、［Edit］リンクをクリック

▼

セクションにRSSフィードを追加する
上： 先ほどの画面で［RSS］タイルをクリックすると、基本情報を入れるダイアログが出てくる。セクション名とRSSフィードのURLを入力して、［Confirm］（＝確認）ボタンをクリックする。
中： ［SAVE］ボタン（赤枠内）をクリックして保存し、作成したコンテンツの［Edit］リンク（赤丸内）をクリック。
下： ここで「List page」（セクションとサブ画面に表示される一覧、緑枠内）と「Detail page」（＝詳細画面、紫枠内）を選んで、それぞれに表示する内容を必要ならば変更し、［SAVE］ボタンで保存し、［戻る］ボタン（赤丸内）で前の画面に戻る。なお、この画面の下方の「Bindings」に指定されているデータのサンプルは、［DATA］リンク（赤枠内）で表示できる。

サブ画面を追加する

　アプリのメイン画面に置けるセクションは、最大で6つまでだ。それより多くのコンテンツをアプリに持たせるには、サブ画面を作って、メイン画面からサブ画面に遷移できるようにする。それには、メイン画面のセクションに［Menu］を追加する（次の画像）。

入力後、［Confirm］ボタンをクリック

▼

［SAVE］ボタンをクリックしてから、［展開］リンク（赤丸内）をクリック

▼

セクションにメニューを追加する
上： 作業メニューで［Content］を選び、下に並んでいるコンテンツのタイルから［Menu］をクリックすると、このダイアログが出てくる。メニューに付ける名前を入力して、［Confirm］ボタンをクリック。
中： ［SAVE］ボタンをクリックしてから、作成したメニューの［展開］リンク（赤丸内）をクリック。
下： 展開された青い枠の中に、メニューから遷移するサブ画面のコンテンツを好きなだけ追加できる（追加する手順は、メイン画面のセクションと同様）。

　なお、［Menu］には通常のコンテンツの他に、［MenuAction］も追加できる（上の画像で紫色のタイル）。［MenuAction］には、ユニバーサルWindowsアプリが解釈できるURIプロトコルを指定する（HTTPやFTPなど、あるいは、他のアプリを呼び出すプロトコルも可）。ちなみに、セクションとしてWebページのリンク集を作るには、［Menu］と［MenuAction］を使うとよい。

公開用の情報を設定する

　アプリの魅力を高めるには、配色や背景画像（作業メニュー［Themes］で設定する）、ライブタイルやスプラッシュスクリーン（作業メニュー［Tiles］で設定する）なども重要だ。作業自体は難しくないので、本稿では割愛させていただく（Windows App Studioの「方法〜スタイル、タイル、スプラッシュとは」を参考にしてほしい）。

　アプリが完成したら、［Publish Info］のページに移って公開用の情報を設定する。［Publish Info］では、アプリの言語を設定することと、ストアとの関連付けを行うことが必須*9の作業になる（次の画像）。

［Associate App with the Store］リンクをクリック

▼

公開用の情報を設定する
上： 作業メニューで［Publish Info］を選ぶと、この画面になる。
（1）： アプリ名。アプリを作り始めたときに入力した名前が表示されているはずだ。
（2）：【必須】 アプリの言語。ストアに申請するときの説明文と同じ言語を指定する。
（3）： アプリの説明。これはストアに掲載される説明ではない（アプリに埋め込まれる）。次の（4）をONにすると、アプリのチャームに表示される（Phoneではアプリバーから別画面が開く）。
（4）： アプリの説明をアプリのチャームに表示するかどうか。
（5）： このトグルスイッチとリンクを使って、Microsoft pubCenterの広告をアプリに挿入する。
（6）：【必須】 このリンクを使って、ストアとの関連付けを行う。これを行っていないと、ストアへアップロードするパッケージは作成できない。
（7）：【必須】 プライバシーポリシーのWebページのURLを入力する*9。
下： ［Associate App with the Store］リンクをクリックすると、このダイアログが出てくる。ここに入力すべき情報は、ストアでアプリの名前を予約すると入手可能になる（次で説明する）。なお、Windows 8.1上でVisual Studio 2013が利用できる場合は、ソースコードをダウンロードしてからVisual Studio上でストアとの関連付けを行った方が楽である（「連載：Windowsストア・アプリ開発入門：第12回　Windowsストアで公開する(3/8)」参照）。

*9　本稿執筆時点では、プライバシーポリシーのリンクも必須である。Windows App Studioの説明によれば、「未指定の場合はプライバシーポリシーが自動生成される」となっている（（7）には "Otherwise, a privacy statement will be created for you." とある）。しかし、まだ実装が不完全らしく、Windowsストアアプリにリンク先のないプライバシーポリシーのリンクが生成されてしまう。そのままではストアの審査に通らない（アプリの機能が不完全と見なされる）ので、Web上にプライバシーポリシーのページを作り、そのURLを設定する必要がある（あるいは、ソースコードをダウンロードしてプライバシーポリシーのリンクを消す。この10月からの認定要件では、プライバシーポリシーの提示義務があるのは個人情報を収集するアプリのみとなっている）。なお、独自のドメインやブログサイトなどを持っていなくても、プライバシーポリシーのページは工夫次第で何とかなる。「連載：Windowsストア・アプリ開発入門：第12回　Windowsストアで公開する」を参照してほしい。

　ストアとの関連付けのために入力すべき情報は、ストアでアプリの名前を予約すると入手できるようになる。アプリの名前を予約する手順は、MSDNの「アプリ名の入力」を参照してほしい。また、入力すべき情報を調べる方法は、Windows App Studioの「方法」の中の「Windows ストアでのアプリの公開方法」（次の画像）をご覧いただきたい。

ストアとの関連付けに必要な情報の調べ方
Windows App Studioの「方法〜Windows ストアでのアプリの公開方法」より。なお、［App Identity］に関して「この情報は引用符で囲む必要があります」と書かれているが、誤りである。実際には、入力する際に引用符（＝ダブルクォート）で囲ってはいけない（囲むと［Confirm］ボタンをクリックした時点でエラーになる）。