こんにちは!こんにちは!
開発部のやましーです。

今回は Windows Phone のアプリ開発-社内テスト-マーケットプレースへの提出の流れを簡単に紹介します。

Windows Phone 7.5 - Mango とは

Windows Phone 7.5 とはMicrosoft社製のスマートフォン用 OS が搭載されたスマートフォン端末です。既に英語圏の国では Windows Phone 7.0 が発売済みでしたが、Windows Phone 7.5 で日本語を含むアジア言語がサポートされ、日本でも2011年8月25日にひっそりと発売となりました。

Windows Phone 7.5 の開発コードネームは Mango（マンゴー）と呼ばれているため、Windows Phone 系の情報サイトでは「Windows Phone Mango がリリース」や「Mango 端末」などと表現されることがあります。

Mango


日本では2011年8月25日にフライング気味に発売されたようですが、実際のリリースは2011年の秋（9月末頃？）とのことです。

Windows Phone Mango 紹介サイト

アプリの開発に必要なもの

以下を準備することでアプリを開発してマーケットプレースへ提出できます。

アプリの開発に必要なもの

• Windows Phone 7.1 SDK (ダウンロードはApp Hubから)

Windows Phone 7.1 SDK には下記の内容が含まれています。

• Visual Studio 2010 Express for Windows Phone (C#/VB.NETでコードを書いてビルドする統合IDE)
• Expression Blend 4 (ページデザインツール、必須ではないが使うと便利)
• XNA Game Studio 4.0 Refresh (ゲーム開発用)
• Windows Phone Emulator (エミュレーター)
• Windows Phone Developer Registration (実機を開発者アンロックするツール)
• Application Deployment (個別デプロイツール、普段は使わない)

Windows Phone 7.1 SDK のみでアプリの開発とエミュレーター上での動作確認まで可能です。
※ 実機で動作確認をするためには下記が必要です。

実機で動作確認をするために必要なもの

• App Hub メンバーシップ (年間 9,800円、App Hubはこちら)
• Zune ソフトウェア（実機にデプロイするために必要、Zuneはこちら）

App Hub メンバーシップに加入して実機を開発者アンロック状態にすることで、ビルドしたアプリを実機へデプロイしてのデバッグが可能になります。
※ App Hub メンバーシップではなく ChevronWP7 というサイトで開発者アンロック権を購入するような手段も準備されているようですが、まだ開始していないようです。

開発者アンロック

App Hub メンバーシップ登録を終えた後に、Zune ソフトウェアを起動して、開発者アンロックをしたい端末を接続して、端末の画面ロックを解除した状態で、Windows Phone SDK 7.1 に付属の Windows Phone Developer Registration を起動して、App Hub のログインに使う Windows Live ID とパスワードを入力して「登録」ボタンをクリックすると、その端末は開発者アンロック状態になります。

マーケットプレースへの提出に必要なもの

• App Hub メンバーシップ （年間 9800円、App Hubはこちら）

App Hub のアカウント作成（登録）やメンバーシップの購入方法などは App Hub の下記のページに詳しく載っています。

App Hub - アプリケーションの配布および販売に必要な手続きについて

アプリの開発

今回は簡単なテストアプリを作ります。
内容は twitter の ld_tech ユーザーのツイートをリスト表示するだけです（細かいことは次回）。

新規プロジェクトの作成

新規プロジェクトを作成します。

1. Visual Studio 2010 を起動（スタートメニュー→すべてのプログラム→Microsoft Visual Studio 2010 Express→Microsoft Visual Studio 2010 Express for Windows Phone）
2. メニューのファイル→新規作成→プロジェクトを選択する
3. 「新しいプロジェクト」ダイアログが表示される
4. 左上の「インストールされたテンプレート」で「Visual C#」を選択する
5. 中央の「Windows Phone アプリケーション Visual C#」を選択（通常はデフォルトで選択されています）
6. 下の「名前」を PhoneApp1 から適当な名前に変更してOKを押す（今回はテストアプリなので PhoneApp1 のまま作成）
7. 「新しい Windows Phone アプリケーション」ダイアログが表示される
8. 「対象の Windows Phone OS のバージョン」を選択してOKを押す（通常はそのまま Windows Phone OS 7.1 で作成）

これで新規プロジェクトの作成が完成しました。
画面の左側にアプリのデザインプレビュー、中央にxaml（ザムル）、右側にソリューション エクスプローラーが表示されています。

アプリタイトル・ページタイトルの変更

アプリとページのタイトルを変更します。

1. 画面右下に「プロパティ」ウィンドウが表示されていなければメニューの表示→プロパティ ウィンドウで表示
2. デザインプレビュー上の「マイ アプリケーション」をクリック
3. プロパティの「Text」を「livedoor Techブログ」に変更（xaml内のテキストを直接変更する方法もあります）
4. デザインプレビュー上の「ページ名」をクリック
5. プロパティの「Text」を「一覧」に変更

これでアプリとページのタイトルの変更が完了しました。

ツイートの取得

アプリが起動したら twitter の検索APIを使って ld_tech ユーザーのツイートを取得する処理を書きます。
ウェブサービスからRSS/Atomフィードを取得する処理は様々な方法で書けますが、今回のようにお手軽に実装する場合は 大西 彰のお仕事でのブログ の Windows Phone “Mango”: 短いコードでRSS/Atomフィードを一覧表示する方法 ページが参考になります（※ ただしRSS 2.0 / Atom 1.0に限る）。

Syndication アセンブリを追加

RSSフィードを取得するのに使う Syndication というアセンブリを追加します。

1. メニューのプロジェクト→参照の追加
2. 「参照の追加」ダイアログが表示される
3. 「参照」タブに移動する
4. C:\Program Files\Microsoft SDKs\Silverlight\v4.0\Libraries\Client の　System.ServiceModel.Syndication.dll を選択してOKを押す
   （64ビットOSの場合は C:\Program Files (x86)\Microsoft SDKs\Silverlight\v4.0\Libraries\Client）
5. 「Windows Phone XNA アセンブリには、安全に…」という警告が表示されるが「はい」を押す

RSSフィードを取得するコードを書く

アプリが起動したらRSSフィードを取得するコードを書きます。

1. ソリューション エクスプローラーの MainPage.xaml の下の階層にある MainPage.xaml.cs ファイルをダブルクリックして開く
2. コードの最初にある using 群の下に下記を追加
   
3. コンストラクターの InitializeComponent(); の下に下記を追加。ただし cli.DownloadStringCompleted += の行は手入力して += の入力後にタブキーを2回押してメソッドの自動生成を行う。最後に忘れずに cli.DownloadStringAsync(uri); を入力。
   
4. 自動生成された cli_DownloadStringCompleted メソッド内の throw 処理を削除して下記を追加
   

コードの入力は以上です。

ここで動作確認をしてみます。
F5 キーを押すとビルド、エミュレーターの起動（起動していなければ）、デプロイ、デバッグ開始となります。

実行結果


アプリとページのタイトルのみ表示されれば正常です。エミュレーターの左下の「戻る」（矢印）ボタンでデバッグを終了します。

次はアプリのデザインをやります。

アプリのデザイン

アプリのデザインは Visual Studio でも出来ますが、今回はお手軽にデザインするために、Microsoft Expression Blend を使います。

Microsoft Expression Blend

Microsoft Expression Blend は xaml ファイルをビジュアルデザインするツールです。
今回は取得したRSSフィードの中身をリスト表示するデザインです。

アプリにリストを追加

アプリのメインとなるリストを追加します。

1. Blend を起動する（Visual Studio のメニュー→プロジェクト→Expression Blend を開く）
2. Blend 画面の右上にある「データ」タブを開く
3. 「プロジェクト」と「このドキュメント」がリスト表示される
4. その右上にあるアイコン をクリックする
5. 「クラスからのサンプル データの作成」を選択する
6. 「クラスからのサンプル データの作成」ダイアログが表示される
7. 一番下にある「すべてのアセンブリを表示する」をチェックする
8. 「クラスの選択」リスト内の System.ServiceModel.Syndication を展開、その中の SyndicationFeed を選択、OKボタンを押す
9. 「プロジェクト」に「SyndicationFeedSampleData」が追加される
10. 「SyndicationFeedSampleData」の SyndicationFeed を展開する
11. 続いて Items、Title を展開する
12. Title の中の Text : (String) をアプリ画面のメインエリアにドラッグ＆ドロップする
13. 意味不明なアルファベットの羅列のオブジェクトが配置される
14. そのオブジェクトを右クリックして自動サイズ設定→ページ幅に合わせるを選択する
15. そのオブジェクトがアプリのメインエリア全体に広がる
16. そのオブジェクトがアプリのメインとなるリストです
17. 意味不明なアルファベットの羅列はRSSフィードのタイトル項目のダミー値です

現時点ではこんな感じです。

リスト内にもう１つ項目を追加

追加されたリストにはすでにタイトル項目がありますが、更にテキスト項目を追加します。

1. Blend 画面の左下にある「オブジェクトとタイムライン」ウィンドウで一番下の ListBox が選択されていることを確認する
2. 選択されていなければ選択する
3. メニューのオブジェクト→追加テンプレートの編集→生成されたアイテム の編集→現在のテンプレートの編集を選択する
4. 「オブジェクトとタイムライン」内のリストがリスト内のデザイン用に切り替わる
5. TextBlock をクリックして選択する
6. もう一度クリックすると名前を編集できるようになるので名前を Title に変更する
7. これがRSSフィードのタイトル項目です
8. 続いて Blend 画面の一番左のアイコン をダブルクリックする
9. TextBlock が1つ追加される
10. 追加された TextBlock をクリックして名前を Summary に変更する
11. 右上の「データ」タブの SyndicationFeed から Summary の中の Text : (String) を、先ほど名前を付けた Summary の上にドラッグ＆ドロップする
12. これがRSSフィードのテキスト項目です

リストの整形

リスト内の項目の整形をします。

1. 「データ」タブが開かれているところの左にある「プロパティ」タブをクリックする
2. 「オブジェクトとタイムライン」内の StackPanel を右クリックする
3. グループ化設定→Borderを選択する
4. 追加された Border を全て展開する
5. Border、StackPanel、Title、Summary の4つのオブジェクトがあることを確認する
6. Border をクリックして選択する
7. プロパティの「概観」内にある Background が No brush になっているのを確認する
8. No brush の右にある小さい四角をクリックする
9. システム リソース→PhoneAccentBrushを選択する
10. 項目の一部が水色に変わる
11. 次に角を丸くするためにプロパティの「概観」内にある CornerRadius を 10 にする
12. 角が丸くなる
13. プロパティの「レイアウト」内にある Margin の上下をそれぞれ 5 に変更する
14. リストアイテムの上下に隙間が空く
15. 同じく Padding の上下左右を 10 に変更する
16. リストアイテム内に余白ができる
17. 「オブジェクトとタイムライン」内の StackPanel を選択する
18. プロパティの「レイアウト」内の Width を 450 に変更する
19. 続いて高さを自動調整するために Height の数値の右にある全画面表示のようなアイコンをクリックする

だいたいこんな感じで。


ためしに F5 キーを押して実行してみます。

実行結果


あれ、なぜか完成していますね。
細かいレイアウトはその他のプロパティの値を調整することで、デザイン画面を見ながら調整できます。

デザインが終わったので Blend を閉じて Visual Studio に戻ります。

次はマーケットプレースへの提出をやります。

マーケットプレースへの提出（社内テスト用）

マーケットプレースへの提出には配布対象が2種類あって、ひとつは パブリック Marketplace、もうひとつは プライベート ベータテスト です。後者のプライベート ベータテストは iOS アプリのベータ版を配布するときに便利な TestFlight のようなもの です。今回は社内テスト向けなのでプライベート ベータテスト向けに配布します。

マーケットプレースへの提出の際に必要なもの

マーケットプレースへ提出する際に下記のものが必要となるので準備しましょう。

• アプリのアイコン画像3種類（99x99、173x173、200x200）
• スクリーンショット（480x800、最低1枚必要）
• マーケットプレース背景画像（1000x800、オプション）

アイコン画像は自分で作るとして、スクリーンショットはエミュレーターの右上にあるツールで撮ることができます。デバッグ実行状態だと実行画面の右側にパフォーマンス値が表示されてしまうので、エミュレーター上でホームボタンを押してスタート画面に戻り、左にフリックしてアプリ一覧からアプリを起動すると、パフォーマンス値が表示されない状態で起動できます。

マーケットプレースへの提出の前に - Marketplace Testkit

マーケットプレースでは恐らく機械による自動テストと人間による手動テストでアプリの動作チェックが行われています。提出してから承認されるまでに数日を要することが多いため、テストの失敗を未然に防ぐために事前チェック項目のテストができる Marketplace Testkit というツールがあります。

今回は Marketplace Testkit を使って提出前のテストを実施します。

Visual Studio のメニュー→プロジェクト→Marketplace Testkit を開くを選択すると Marketplace Testkit を開始します。
左の「アプリケーションの詳細」「自動テスト」「監視対象のテスト」「手動テスト」の順に進みます。

アプリケーションの詳細

ここではマーケットプレースで必要となるアイコン、スクリーンショットを参照します。まずは大きなアプリケーション タイル、小さなアプリケーション タイル、Marketplace タイルを設定します。そしてアプリケーションのスクリーン ショットを1つ設定します。

自動テスト

ここではプロジェクトの実行ファイル、アイコン、スクリーンショットが正常かどうかテストします。実施にはプロジェクトがリリース用にビルドされている必要があります。リリース用にビルドするには Visual Studio のツールバー上にある Debug を Release に切り替えてからメニューのビルド→ソリューションのビルドでビルドします。

「テストの実行」ボタンを押すと下記のような結果が表示されます。

結果	テスト名	テストの説明	結果の詳細
成功	XAP パッケージの用件	XAP ファイルサイズとコンテンツファイルの検証
成功	機能の検証	アプリケーションの機能の検証	[情報]：アプリケーションで使用される機能：ID_CAP_NETWORKING
成功	図像	アプリケーションのアイコンの検証
成功	スクリーンショット	スクリーンショットの検証

アイコンやスクリーンショットのサイズが正しくないと警告されます。また、機能の検証の結果の詳細に ID_CAP_NETWORKING と表示されて、このアプリがネットワークを利用することを自動検出してくれます。カメラや電話帳などにアクセスするコードが含まれる場合には ID_CAP_ISV_CAMERA や ID_CAP_CONTACTS などが表示されます。これらは WMAppManifest.xml ファイルに記載します。標準でほとんどの機能を「使う」ようになっていますが、アプリが利用する機能は自動判別なので特に開発者が ID_CAP_* を追加したり削除する必要はありません。特定の機能を利用するコードを書いた覚えがないのに ID_CAP_* が表示される場合は、どこかで利用されているのでチェックするなどします。ただし、今回検出された ID_CAP_NETWORKING はネットワークを使わない場合でも付与されるらしく、全くネットワークを使わないアプリの場合には WMAppManifest.xml ファイルを編集して ID_CAP_NETWORKING を削除すれば検出されなくなります。

監視対象のテスト

ここではテスト実施者がアプリケーションを実際に使用して、全ての操作を実施した場合の状況をテストします。このテストは実機で行う必要があります。Zune ソフトウェアを起動して、開発者アンロック状態の端末を接続して、端末の画面ロックを解除した状態で、Visual Studio のツールバー上のプロジェクトのターゲットを Windows Phone Device に切り替えます。

「アプリケーションを起動」を押すと実機でアプリが起動するので、自分で操作します。

今回はRSSフィードを表示する1ページのみなので、リストを下までスクロールして、上まで戻ることを何度か繰り返し、最後の「戻る」ボタンでアプリを終了します。しばらくすると結果が表示されます。

結果	テスト名	テストの説明	結果の詳細
成功	起動時間	アプリケーションの起動時間の検証です。	[警告]：アプリケーションの起動に 5.2 秒かかりました。これは、起動時間が 5 秒という許容範囲に迫っています。
成功	ピーク時のメモリ消費量	アプリケーションのピーク時のメモリ消費量の検証	[情報]：アプリケーションで使用されるピーク メモリは 15.84 MB です。
成功	アプリケーションの終了	すべての例外が処理され、アプリケーションが予期せず終了されていないことの検証です。	[情報]：ハンドルされない例外は発生しませんでした。例外が発生して処理されている場合は、アプリケーションでユーザー フレンドリなメッセージが表示され、応答していることを確認してください。
成功	[戻る] ボタンの仕様	[戻る] ボタンを押したときの適切な動作の検証です。

起動時間の項目で警告がでています。実装方法に問題があるのかも知れませんが今回はテストアプリなのでこのままにします。
その他、アプリのピーク時のメモリ消費量が多い場合や、ハンドルされていない例外が発生した場合、戻るボタンのテストが正しく実施されていない場合などに警告がでます。

手動テスト

これは、アプリケーションのページ遷移の挙動や応答速度などのテストすべき項目を手動でテストして成功・失敗を付けていくチェックシートです。今回は割愛します。

マーケットプレースへの提出

今回は 社内テスト 用に プライベート ベータテスト 向けにアプリを提出します。
マーケットプレースへのアプリの提出手順については App Hub の下記のページに詳しく載っています。

App Hub - Windows Phone 7 アプリの提出フロー
プライベート ベータテストにアプリを提出する手順の説明 ← これを見ながら

以下のような手順です。

1. App Hub で実行ファイルをアップロードする
2. 説明を入力する
3. 画像をアップロードする
4. ベータテスターのメールアドレスを入力する
5. 提出完了
6. App Hub から完了通知のメールが届く
7. ダウンロードリンクをベータテスターへ通知
8. ベータテスターが実機にてダウンロードする
9. ベータテスターが実機にてレビュー（星の数とコメント）を投稿する

社内テストを行う際は、テストを行う実機端末がサインインしている Windows Live ID を ベータテスターのメールアドレス を入力してくださいの欄に入力します。メールアドレスは最大 100 件 まで入力できるようです。テストを行う実機端末は開発者アンロックされている必要はありません。

マーケットプレースへの提出が完了して、しばらくすると Congratulations! テストアプリ for Windows Phone is now available to the Windows Live ID participants you named as reviewers. という内容のメールが届いて、そのメール内にテストアプリのダウンロードリンクが書かれているので、そのダウンロードリンクをテスターに通知してテストしてもらいます。

プライベート ベータテスト向けに配布したアプリは他からは見えないので、個人レベルであればアプリの レビュー機能 を使って不具合報告をすることで、App Hub 内でレビュー結果（星の数とコメント）を閲覧することができます。社内テストであれば独自のバグ追跡システムなどで管理するでしょう。

テストが完了したら App Hub 内で「ベータを終了」を指示することで、ベータテスターへの配布が停止します。また、プライベート ベータテスト向けに配布したアプリの有効期限は90日であり、それを過ぎるとダウンロードできなくなります。

全てのテストが完了すれば、今度は 、パブリック Marketplace の方に提出することで、正式リリースとなります。

おわり

以上が Windows Phone 7.5 のアプリ開発-社内テスト-マーケットプレースへの提出の流れとなります。

次回はアプリ開発時のTIPSなどを紹介します。