Windows ストア アプリって何? 開発環境の構築

2014年4月16日(水)
薬師寺 国安

VS2013でWindows ストア アプリを作るには

VS2013をインストールしたら、早速起動してみましょう。起動すると図11のような画面が表示されます。

図11:VS2013を起動した画面(クリックで拡大)

VS2013の背景色は、VS2013メニューの[ツール]ー[オプション]と選択して、「環境」の「全般」メニュー内にある「配色のテーマ」で変更できます(図12)。

図12:「配色のテーマ」を濃色にしている(クリックで拡大)

では、Windows ストア アプリのプロジェクトを作成する手順を解説します。

まず、VS2013のメニューから[ファイル]ー[新規作成]ー[プロジェクト]と選択します(図13)。

図13:プロジェクトを新規作成する(クリックで拡大)

すると「新しいプロジェクト」の画面が表示されます。左カラムのメニューにある「テンプレート」から[Visual Basic]ー[Windows ストア]と選択します。すると、中央の欄内に「新しいアプリケーション(XAML)」という項目が表示されるので、これを選択します。「名前」には「Test1WindowsStoreApp」と指定し、任意の保存するフォルダーを指定します。[OK] ボタンをクリックします(図14)。

図14:新しいプロジェクトを作成する(クリックで拡大)

[OK]ボタンをクリックすると、最初にApp.xaml.vbのコードが表示されますが、これは無視しておいていいです。画面の右に「ソリューションエクスプローラー」というペインがあるので、これをクリックします。すると図15のように、このプロジェクトに含まれている各種ファイルが表示されます(図14)。

図15:ソリューションエクスプローラーを選択して、プロジェクトに含まれるファイルが表示された(クリックで拡大)

図14からMainPage.xamlをダブルクリックします。すると上にデザイン画面、その下にXAML画面、その下に出力画面が表示されます。これらの画面配置は「ペインの交換」という上下矢印のアイコンで変更できます(図16)。

図16:デザイン画面、XAML画面、出力画面が表示されている(クリックで拡大)

左の「ツールボックス」というペインをクリックすると、このVS2013で使用できるコントロールの一覧が表示されます。このコントロールをデザイン画面に配置して、各コントロールにイベントを関連付けしてプログラムを作成していくことになります(図17)。

「ツールボックス」からボタンを配置し、配置したボタンをダブルクリックするとコードエディタが起動して、ボタンをクリックした時の処理を記述できます。

図17:「ツールボックス」からボタンを配置し、ダブルクリックでコードエディタが起動した(クリックで拡大)

Windows ストア アプリ作成で重要なのは…

もちろんバグがなく正常に動作するアプリであることは言うまでもありませんが、それと同じくらいに重要な点があります。それは画面デザイン(UI:ユーザーインターフェース)の美しさと、アプリの操作の分かりやすさ、使いやすさ(UX ユーザーエクスペリエンス)の2点です。

UIが美しく、UXの機能に優れ、みるからにこれぞWindows ストア アプリのお手本だというアプリ作りにチャレンジしてみてください。そのために参考になる資料が下記URLから直接PDFファイルをダウンロードできるようになっています。> Windows 8.1 ユーザー エクスペリエンス ガイドライン(PDF/更新 2014年2月)

この資料をダウンロードして、どのようなUI/UXがWindows ストア アプリに求められているかを勉強してみるのもいいでしょう。しかし、まだWindows ストア アプリの初心者は、ここまで考える必要はありません。とりあえずはWindows ストア アプリをVS2013で作成できることを目標とし、ある程度力が付き、Windows ストアに申請できるだけのアプリ作成が可能になった時点で、この「Windows 8 UXGuide.pdf」を読みなおしてみることをおすすめします。

今回はここまでで終わりです。Windows ストアとはどんなもので、Windows ストア アプリを作成するには何が必要かについて書いてきました。次回は、いよいよ実際にWindows ストア アプリを作成してみます。とはいっても、まだWindowsストアに申請できるようなアプリを作成するわけではありません。とりあえずは、次回は、Windows ストア アプリの初めの一歩について解説していきます。お楽しみに。

<編集部より> 3ページ目の図版の背景色を「淡色」から「濃色」に変更しました。(2014.05.12)

薬師寺国安事務所

薬師寺国安事務所代表。Visual Basic プログラミングと、マイクロソフト系の技術をテーマとした、書籍や記事の執筆を行う。
1950年生まれ。事務系のサラリーマンだった40歳から趣味でプログラミングを始め、1996年より独学でActiveXに取り組む。1997年に薬師寺聖とコラボレーション・ユニット PROJECT KySS を結成。2003年よりフリーになり、PROJECT KySS の活動に本格的に参加、.NETやRIAに関する書籍や記事を多数執筆する傍ら、受託案件のプログラミングも手掛ける。Windows Phoneアプリ開発を経て、現在はWindows ストア アプリを多数公開中

Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。Microsoft MVP for Development Platforms - Windows Phone Development(Oct 2012-Sep 2013)。Microsoft MVP for Development Platforms - Client Development(Oct 2013-Sep 2014)。Microsoft MVP for Development Platforms-Windows Platform Development (Oct 2014-Sep 2015)。

連載バックナンバー

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています