７日間でWindows 10 アプリ開発者になる方法

  • Article

helloworld

Windows 10 がいよいよリリースされました。

今回リリースした Windows 10 でも継続され、さらにパワーアップしました。具体的には、Windows 10 では、ユニバーサル Windows プラットフォーム (以下、UWP)が導入されたことにより、Windows アプリだけでなく、Windows Phone や Xbox、Surface Hub、HoloLens でも利用できるユニバーサルなアプリを作成することができるようになりました。

今回は、このユニバーサル Windows アプリケーションを 1 日ずつ 1 ステップずつ進めて 7 日間でストアに公開できるところまで理解できる内容になっています。実際に作業する際は、Windows デベロッパー センター の最新情報も合わせてご参照ください。

 

 

 

1 日目 開発環境を作る

はじめに、Windows ストアプリを開発するための開発環境を整えてみましょう。UWP アプリを作成するには、Windows 8.0 以降の Windows OS がインストールされた PC と、統合開発ツールの Visual Studio 2015が必要です。Mac 環境の場合は、Apple から提供されている 「BootCamp」 または、各社から提供されている仮想化ソフト (Parallels, VMware Fusion 等) を使って Windows の環境をご用意ください。

■OS：Windows 8.0, 8.1, 10
■開発ツール：Microsoft Visual Studio 2015

clip_image002[10]

Visual Studio 2015 には複数のエディションが存在します。ユーザータイプによって利用できるソフトウェアが異なります。学生さんや個人の方でこれから趣味や勉強がてらアプリ開発を始めてみるなら Visual Studio Community 2015 を無料でお使いいただけます。オープンソースプロジェクト、アカデミックな研究、非商業的使用を前提としたアプリの開発者の方も合わせてお使いいただきます。

創立5年未満のスタートアップ、もしくは法人化を目指す起業家の方は、マイクロソフトのスタートアップ支援プログラム 「BizSpark」 にご登録いただくことで、Visual Studio with MSDN を最大 3 年間無料でご利用いただけます。すでに開発経験があり、多機能な  Visual Studio を使って開発を行いたい方や、企業内でチーム開発を行う場合には有料の Visual Studio with MSDN をご利用ください。いずれのエディションの Visual Studio でも UWP アプリ開発を行っていただけるようになっています。より詳細な情報につきましては Visual Studio 2015 製品の概要ページをご覧ください。

エディション

費用

ユーザータイプ

Visual Studio Community

無料

学生、個人、 非エンタープライズ組織開発者

Visual Studio Professional with MSDN

有料

個人開発者や小規模チーム

Visual Studio Enterprise with MSDN

有料

中～大規模チーム

Visual Studio のインストール前に、システム要件を満たしているか確認してください。必要なシステム要件はエディションによって異なります。

clip_image002Visual Studio 2015 のインストール時に、インストールの場所や種類を選択する画面が表示されます。
・インストールする場所をデフォルトから変更したい場合には、ここで任意のインストール場所を指定します。
・インストールの種類は、「標準」 と 「カスタム」 の 2 択となります。今回は、「カスタム」 を選択してみましょう。
[次へ] ボタンで 「機能の選択」 を行います。

 

clip_image004[10]

今回は、「ユニバーサル Windows アプリ開発ツール」 チェックボックスにチェックを入れて [次へ] ボタンでインストールを進めます。インストールが終了すると、画面上に「セットアップが完了しました。」メッセージが表示されます。

 

 

 

 

2 日目 言語とテンプレート

UWP アプリを開発する際に使用する開発言語についてご紹介いたします。UWP アプリは、複数の言語の中から自分の使いやすい言語を選択して開発を進めることができます。例えば、これまでに .NET で開発の経験がある方は C# や VB をお使いいただき、ネイティブで開発をされている方は C または C++ をお使いいただけます。その場合、ユーザーインターフェイス (UI) の部分は XAML を使用します。Web 系の開発者の方であれば、JavaScript に HTML または CSS をお使いいただけます。

次の図は、UWP アプリのプログラミングモデルを表した図になります。Windows 10, Windows 8, Windows Phone, Xbox 間のプログラミングコードは、Windows Kernel Service 上で共通の Windows ランタイムを用いた UWP を採用したことで、どのプラットフォームのアプリとでも共通化できるようになりました。

clip_image002[6]■開発に使用できる言語環境

  • C# + XAML
  • VB.NET + XAML
  • C++ + XAML
  • C++ + DirectX
  • HTML + JavaScript + CSS3

では実際に UWP アプリ開発をやってみましょう。

clip_image004[12]

1 日目でインストールした Visual Studio 2015 を起動します。初回起動時に、サインインが求められます。Microsoft アカウントを使ってサインインすることで、Visual Studio の配色テーマやキーバインドなどの開発環境をカスタマイズした設定が、別の Visual Studio にサインインするとすぐに適用されるので便利です。

clip_image006[10]

初回起動時には、「スタートページ」 が表示されます。Visual Studio 2015 をインストールすると、いくつかの開発言語の定義済みのプロジェクトテンプレートが同時にインストールされます。新規にプロジェクトを作成するには、「開始」 メニュー → 「新しいプロジェクト」 を選択します。

Visual C#、Visual Basic､Visual C++、JavaScript をはじめとする様々な開発言語別に、アプリや Web 開発など目的に合ったプロジェクトが用意されています。ここで使いたいプロジェクトテンプレートが見つからない時は 「オンライン」 からもインターネット経由で公開されているテンプレートを入手することが可能です。

clip_image008[10] 今回は、「新しいプロジェクト」 ウィンドウの 「インストール済み」 → 「テンプレート」 → 「Visual C#」 → 「Windows」 → 「ユニバーサル」 → 「空白のアプリ (ユニバーサル Windows)」 の順に選択して、テンプレートの UWP アプリ用のプロジェクトと新規作成します。名前、場所、ソリューション名は任意で指定することができます。「OK」 ボタンをクリックすると自動的にプロジェクトが生成されます。

 

 

3 日目 画面デザイン

さて次は、実際のアプリの画面デザインに関する話をしておきます。

ストアアプリは Windows Phone からスレート PC、マルチスクリーンのデスクトップまで幅広い端末がターゲットとなります。そのため、画面のデザインを行う際には、最少：1024 × 764、推奨： 1366 × 768 以上のサイズを考慮してデザインするのがよいでしょう。タブレット型端末の場合には、縦横対応も必要になります。アプリの画面解像度については、最大解像度に関する規定はとくにありませんが、解像度に応じて情報量を変化させ、高解像度でもきれいに見えるようなデザインになっていることが望ましいです。

ここからは 2 日目に作成した UWP アプリ用のプロジェクトを起動し、アプリの画面デザインを触ってみましょう。Visual Studio によって作成されたプロジェクト内容は、「ソリューションエクスプローラー」 ウィンドウに表示され、複数のフォルダやファイルがツリー状に表示されます。

clip_image002[8]

  • Properties：アプリのプロパティ情報
  • 参照
  • Assets：アプリ起動時に表示される画像ファイル
  • App.xaml：アプリの C# コードファイル
  • ApplicationInsights.config：構成ファイル
  • MainPage.xaml：アプリ画面の XAML ファイル
  • Package.appxmanifest：設定情報を含むマニュフェストファイル
  • project.json：コマンド実行を定義するファイル

UWP アプリの画面デザイン定義は、C# を使っている場合、XAML を用いた MainPage.xaml で行われます。「ソリューションエクスプローラー」 の 「MainPage.xaml」 をダブルクリックして起動します。

clip_image004[14]

デフォルトだと Windows Phone のデザインが読み込まれます。MainPage.xaml タブの直下に配置されているデザインパターンの選択リストから Tablet (タブレット) や Desktop (デスクトップ)、Xbox などのさまざまなデバイスで表示したときにどうなるかを確認できるようになっています。
※今回は「13.3” Desktop (1280×720) 100%スケール」を選択して作業を進めます。

clip_image006[12]

Visual Studio 画面左に配置されている 「ツールボックス」 ボタンをクリックして、ツールボックスを表示しておきます。

  1. 「ツールボックス」 ウィンドウ → 「TextBox」 アイコンを MainPage.xaml のコントロール上にドラッグアンドドロップして配置します。
  2. 「プロパティ」 ウィンドウ → 「共通」 → 「Text」 を空にします。
  3. オプションで 「テキスト」 でフォントやサイズを変更しておきます。
  4. 「ツールボックス」 ウィンドウ → 「Button」 アイコンを先ほどと同様に MainPage.xaml のコントロール上にドラッグアンドドロップで配置します。
  5. 「プロパティ」 ウィンドウ → 「共通」 → 「Content」 に任意の文字列を入力します。例えば、「ここをクリック！」 など。
  6. オプションで 「テキスト」 でフォントやサイズを変更します。
  7. 必要に応じてデザインのコントロール上で設置したアイテムのサイズを調整します。

XAML ウィンドウを確認すると、自動的に XAML コードが足されていることが分かります。

clip_image008[12]

 

4 日目 ロジックの実装

アプリの画面を XAML や HTML/CSS を使ってデザインした後は、C# や VB、JavaScript のコード側でビジネスロジックを記述し実装していきます。記述は、各イベントからだけでなく、メソッドや変数を直接記述することもできます。

Visual Studio 上で 3 日目に開いていた MainPage.xaml を表示します。コントロールに配置したボタンをダブルクリックしてみましょう。MainPage.xaml.cs タブで C# コードファイルが表示されます。カーソルはボタンをクリックしたときの動作を定義する場所に置かれていますのでそのまま記述をしていきます。

textBox.Text = “Hello, World!”;

Visual Studio では、インテリセンスと呼ばれているコード入力候補やヒントを示す自動補完機能が備わっています。

  • メンバー一覧：トリガーになる文字(ピリオド(.))を入力すると、名前空間、クラス、関数、変数などメンバーの一覧が表示されます。
  • クイックヒント：コード内の識別子の宣言全体が表示されます。

インテリセンスを活用することで、スピーディーに、より正確にコーディングを進めることができるので、開発効率の向上に繋がります。

clip_image010[10]

また、Visual Studio は行ごとに構文を自動的にチェックし、問題を発生させる可能性のあるコードの下に波線を表示させる便利な機能も搭載しています。

  • 赤い波線は、エラーが発生する原因になるコードに対して表示されます。
  • 赤い波線にカーソルを合わせると表示されるライトバルブ(電球)機能を使うことで、エラーを修正するための候補を表示させて対処することができます。

clip_image012[10]

  • 緑色の波線は警告、紫の波線はその他の種類のエラーを示しています。カーソルを合わせるとそれぞれヒントが表示されます。

clip_image014[10]

プログラムを記述する際には、各ステップにどのような処理が行われているのかコメントを書いておくようにしましょう。コメントの書き方は開発言語によって異なりますが、C# の場合は/(スラッシュ)を使います。
// 行末までがコメント
/// コードブロック直前の特別なコメント

clip_image016[10]

Visual Studio では、コードスニペットにより、ショートカットを入力することであらかじめ用意されたコードの一部を自動挿入できる機能があります。例えばC#の場合、#if と入力するとヒントが表示され、ここで Tab キーを 2 回押すことでスニペットによるコード挿入が行われます。C# および C++ のコードスニペットのショートカット一覧表は MSDN の「コードスニペット」サイトでチェックすることができます。

clip_image018[10]

Visual Studio は、他にも個人やチーム向けの生産的な開発が行えるための機能がたくさん搭載されており、開発において優位性の高い開発ツールです。

 

5 日目 デバッグ実行

アプリの作成が完了したら、デバッグ実行を行ってみましょう。アプリをローカル上で直接実行する方法から、Visual Studio のシミュレーター機能を使った実行など様々な環境でのデバッグが可能です。実行するデバイスを選択するには、「ローカルコンピューター」 のドロップダウンリストより選ぶことができます。ここに表示されていないデバイスのエミュレーターについては、「新しいエミュレーターをダウンロード」 からインターネット経由で入手することができるものもあります。

clip_image002[10]

  • ローカルコンピューター：自分の Windows マシン上で実行
  • シミュレーター：選択しているシミュレーターを使って実行する場合
  • リモートコンピューター：リモート端末上で実行したい場合
  • Device：実機デバイスがある場合

 

clip_image004[16]Visual Studio からローカル上でデバッグ実行を行う場合は F5 または [デバッグ] から [デバッグの開始] メニューよりデバッグを実行することができます。デバッグ実行時に 「Windows 10 の開発者モードを有効にする」 旨、メッセージが表示された場合には、画面に従い、有効化を行ってください。

ローカルコンピューターでデバッグ実行を開始すると、最初にスプラッシュ画面が表示されます。しばらくするとアプリ画面が表示され、アプリを操作しながらデバッグを行うことができます。デバッグ実行中は [診断ツール] ウィンドウが表示され、イベントや使用するメモリ使用量、CPU 使用率の状態を確認することができます。

clip_image006[14]

タッチ機能を備えていないマシン上で開発した場合や、様々な解像度で確認したい場合などにシミュレーターを使うと便利です。シミュレーターを使ってアプリ実行を行う場合はデバッグモードを [ローカルコンピューター] から [シミュレーター] に変更しデバッグを実行します。

clip_image008[14]

シミュレーターは、検証するのに便利なだけでなく、アプリ公開の際にも役立つ機能もあるのでここで簡単に機能と使い方について説明しておきましょう。

Web ブラウザが自動的に起動し、「シミュレーターでの Windows ストアアプリの実行」 サイトが表示されます。

アイコン

説明
image [常に手前に表示]
image [マウスモード] マウス操作の場合はこのまま使います。
image [基本タッチモード] マウスを使わずタッチ操作の場合はこのモードに設定しておきます。
image [縮小/拡大タッチモード] 指で画面を縮小、拡大した時の動作を確認できます。
image [回転タッチモード] タブレットや Windows Phone などの画面を回転した時の動作を確認できます。
image [時計まわりに回転する(90°)] 時計まわりに回転した時の動作をシュミレーションする時に使います。
image [反時計まわりに回転する(90°)] 時計まわりに回転した時の動作をシュミレーションする時に使います。
image [解像度の変更] 画面サイズと解像度が、画面の幅(インチ)、ピクセル幅×高さ、画面比率、%で一覧表示されます。シュミレーションする画面のサイズと解像度を選択できます。
image [スクリーンショットをコピー] シミュレーション上のアプリのスクリーンショットを取ることができ、ファイルはローカルの 「ピクチャ」 フォルダ → 「Windows Simulator」 に格納されます。アプリの公開申請時に提出するスクリーンショットはこの機能を活用して取っておくとよいでしょう。
image [スクリーンショットの設定] スクリーンショットのファイル保存場所を変更できます。
image [ネットワークプロパティの変更] シュミレーションするネットワークのプロファイル名やネットワークコストの種類、データの限度の情報フラグ、ローミングの状態を設定できます。
image [ヘルプ]

 

 

6 日目 アプリのパッケージ化

UWP アプリを Windows ストアアプリで公開するためには、Exe ファイルのような実行ファイルを用意するのではなく、アプリをパッケージ化したものが必要になります。そのために準備しなくてはいけないものをチェックしていきましょう。基本的には、Windows 8 のストアアプリの公開時に必要な内容と変わりません。

■公開までに準備しなくてはいけないこと

  1. アプリ画像の選択
  2. アプリで使っている機能チェック
  3. アプリのパッケージの作成
  4. パッケージの自動テスト

1. アプリ画像の用意
公開するアプリには、Windows 10 のスタート画面でアプリアイコンとして表示させるための画像や、実際にストアに公開される際のアプリ紹介用の画像、アプリのスクリーンショットなど複数の異なるサイズの画像が必要です。画像は、アプリを起動する前の大切な顔になるので、アプリ内での統一感のあるロゴやイメージを用いた直観的なデザインであることが望ましいです。それぞれのサイズの画像は、単に同じデザインの画像を拡大または縮小せず、画像サイズに合わせてデザインするようにしてください。

アプリのパッケージに含めるものではありませんが、公開の際に必ず必要になりますので用意しておくようにしましょう。公開申請時に必須な画像は 4 種類になりますが、アプリを使うユーザーの好みでアプリアイコンを拡大、縮小できるようにさまざまなサイズの画像を含めておくことをお勧めします。アプリ画像がコード内で定義されている場所や、各画像で適用できるファイル形式など各画像に関する詳しい解説については「アプリ画像選択」サイトでご確認ください。

必須

画像の種類

サイズ

-

タイル小

70×70

必須

タイル中

150×150

-

タイル大

310×310

-

タイルワイド

310×150

必須

ストアロゴ

50×50

-

バッジロゴ

24×24

必須

スプラッシュスクリーン

620×300

必須

アプリケーションアイコン

30×30

2. アプリで使っている機能チェック
アプリに関するさまざまな設定はマニュフェストファイル (Package.appxmanifest) に格納されます。Visual Studio でマニュフェストファイルを選択し、[機能] タブで表示されている機能の中から、実際にアプリが使用する機能を選択しておきます。例えば、インターネット接続を行う場合には、”インターネット (クライアント)” にチェックが入っていることを確認してください。また逆に使用しない機能については外しておきます。

clip_image012[12]

3. アプリのパッケージの作成

Visual Studio の [プロジェクト] の中に [ストア] というメニューがあり、その中から [アプリパッケージの作成] を選択することで、アプリのパッケージの作成を行うことができます。
ここでは 2 種類のパッケージを作成することができます。

  • ストアに公開する用のパ��ケージ
  • ローカルでデバッグする用のパッケージ

clip_image014[12]

ストアにアップロードするためのパッケージを作成する際には、Microsoft アカウントが必要です。Microsoft アカウントを持っていない場合は、「Microsoftアカウント登録手続き」 サイトからいつでも行うことができます。アカウントを作成する場合には次の 2 つの方法があります。

  • 普段使用している電子メールアドレスを、Microsoft アカウントとして利用する方法
  • 新しくメールアドレスを作成して、Microsoft アカウントとして利用する方法

※現在、〇〇〇@outlook.jp、@outlook.com、@hotmail.com という Microsoft のドメインのメールアドレス作成が可能です。

4. パッケージの自動テスト

パッケージの作成が完了後は、作成したアプリが Windows ストアに公開するための要件を満たしているかどうかをアプリ認定キット (WACK) というツールを使ってテストします。このテストは実際のストア審査でも行われているため、事前にテストを行っておくことをお勧めします。このテストツールを手動で呼び出したい場合は Windows 上で 「Windows App Certification Kit」 で検索してください。

 

 

7 日目 ストアへの公開

いよいよ最終日。Windows ストアを通じてアプリを提供するために必要なアプリ開発者登録、アプリ提出、公開までの流れを説明します。

開発者アカウント登録
開発者アカウントの登録はMicrosoftデベロッパーセンター内の登録サイトから行います。 開発者アカウントを開設するためには、Microsoftアカウントおよび年間登録料、支払いのためのクレジットカードが必要です。

  • 個人用 1,847円
  • 会社 9,800円 

clip_image018[12]clip_image020[10]

  • [発行者表示名] 必須
    ストア公開時に発行者として表示される名前です。使用可能な名前を指定する必要があります。
  • [姓名] 必須
  • [メールアドレス] 必須
  • [電話番号] 必須
  • [Webサイト]
  • [住所] 必須
  • [住所2]
  • [市区町村] 必須
  • [都道府県] 必須
  • [郵便番号] 必須
  • [メールで優先する言語] 必須
    日本語を選択しておきます
  • [プロモーションコード]
    MSDN、DreamSpark、またはその他のプログラムのプロモーションコードをお持ちの場合は、それを入力することで登録費用を節約できます。
  • [課金] 必須
    クレジットカード/デビットカード、または PayPal でのお支払になります。

アプリの提出
Windows ストアにアプリを申請は「開発者ダッシュボード」サイトから行います。Visual Studio の [プロジェクト] → [ストア] → [アプリパッケージのアップロード] メニューを順にたどっていくことで同サイトへアクセスすることもできます。
▼ 開発者ダッシュボード画面: 「新しいアプリの作成」 ボタンで開始
clip_image022[10] 

アプリの申請に必要な情報を画面に従って入力していきます。

  • アプリ情報
  • アプリの名前登録
  • 価格、公開先の国、カテゴリーの設定
  • サービス利用の設定
  • 年齢区分の設定
  • 暗号化使用の有無等
  • パッケージのアップロードと説明
  • パッケージの登録
  • ストアへの公開情報

続いてパッケージ提出ページで Visual Studio で作成したパッケージ (.appxupload ファイル) をアップロードし、アプリの説明の登録内容を入力します。次に進み、審査担当者へコメント入力ページが表示されたらアプリを審査する担当者に説明しておきたい内容を入力します。例えばアプリによるサービスへのログインが必要な場合は、テストアカウントのユーザー名とパスワードを入れておきます。

テスト審査と審査結果
テスト審査は提出するタイミングなどによって異なりますが、早い時は数時間で終わることもあります。審査結果が合格の場合は見事ストアへ公開となります。不合格の場合には認定レポート内容を確認し、どのテスト項目で、何の条件が満たしていなかったのかを理解するようにしましょう。不合格だった部分を修正し、再びアプリ提出をしてみてください。

Windows ストアには、企業や個人開発者が公開した世界中のアプリが用意されています。地域によってダウンロードできるアプリが異なる場合があります。Windows ストアへのアクセスは、Windows 10 のタスクバーまたはスタートから [ストア] アイコンを選んでストアアプリを起動します。ストアアプリでは、アプリを検索したり、「Windows ストア」 の 「アプリのトップチャート」 メニュー → 「絞り込む」 でダウンロード数の多いアプリや高評価、人気上昇中のアプリの絞り込みを行うことができます。またゲームやミュージック、映画とテレビのダウンロードもここからダウンロードして楽しむことができます。

clip_image024[10]

アプリ紹介ページでは、アプリの機能概要やスクリーンショット、アプリの発行者名などを閲覧することができ、ダウンロードするための 「ダウンロード」 ボタンが設置されています。もしすでに自分の Windows マシン上に対象のアプリがインストールされている場合には 「開く」 ボタンが表示され、ここからアプリを起動することも可能です。また、アプリをダウンロードしたユーザーからの評価とレビュー投稿もここに表示されます。

clip_image026[10]

お疲れ様でした。

ここからは皆さんがお持ちのノウハウやアイディアをもとに、多くの Windows ユーザーの心をつかむような素敵なストアアプリを一つでも多く生み出していただけることを期待しています。最後まで読んでいただき、どうも有難うございました。

 

参考情報

Windows デベロッパー センター
Visual Studo 2015
Windows 10 SDK
Microsoft アカウント
BizSpark
DreamSpark
Dev Center ベネフィット
Evangelist Eye まとめページ

執筆者

 

spk-ayayu

日本マイクロソフト株式会社 デベロッパー エバンジェリズム統括本部

テクニカル エバンジェリスト 戸倉 彩

https://blogs.msdn.com/b/ayatokura/