あいてぃーとふぼふ

実録☆WP7アプリケーション開発!(第9話)

突然ですが、この連載もいよいよ最終回(打ち切り)!今回は、作成したWP7アプリケーションをAppHubの審査に申請して公開する手順を記載します。

AppHubの申請手順

AppHubに申請を依頼する手順は大きく5つに分類されます。各手順ごとに順を追ってみていきましょう!

手順1

アプリケーションの名前やバージョン情報の設定、およびXAPファイルのアップロードを実施します。現状では、まだ日本のマーケットプレイスが開設されていないため、「既定の言語」には”英語(インターナショナル)”を指定しておくとよいでしょう。「バージョン」には”0.1”など”1.0″未満の値を指定することも可能です。また「アプリケーションパッケージ」でアップロードするXAPファイルは、必ずReleaseビルドしたXAPファイルを指定します。

その他の「開発者メモ」や「テスターノート」、「技術的な例外適用を必要とする」といった項目は、特別なテスト手順がある場合やテスターさんと連絡を取りたい場合に利用するとよさそうです。ただし今回は、これらの項目にWP7アプリ(ゲーム)のプレイ方法などを一切記載しませんでした。にもかかわらず、審査の結果はバッチリOKでした!ストーリーをクリアしないと利用できないメニューとかもあったりしたのですが…、どうやらテスターさんが意外と何とかしてくれちゃっ たするみたいです。スゴク優秀です♪

手順2

アプリケーションの説明やカテゴリ、キーワードなどを指定します。気を付けるべきポイントは「詳細説明」の記載方法です。前述のとおり今回は”英語(インターナショナル)”なマーケットプレイスにアプリを公開するため、説明文は英語で記載する必要があります。ただし、今回のアプリでは日本人をメインターゲットとして利用していますので、日本語の説明文も併せて記載する必要があります。さらに、UIは日本語表記のみである旨を英語で記載する必要があります。この3つの条件を満たすことにより、英語なマーケットプレイスでも日本人向けのアプリを公開することが可能となります。その他の項目はよくわからないのでデフォルトのままにしましたが、問題なく審査を通過することができました。

手順3

各種画像をアップロードします。まずはマーケットプレイス用の画像を「173×173」「99×99」「200×200」のスリーサイズで指定します。この際に指定する画像は、3つとも同一の絵柄とし、かつXAPファイル内の画像「ApplicationIcon」や「Background」と酷似した内容とする必要があります。「背景の画像」はオプションですが、アプリケーションがピックアップされた際にマーケットプレイスのトップ画面で利用する背景画像を「1000×800」で指定します。「スクリーンショット」には、文字通りアプリケーションのスクリーンショットを「480×800」で最大8枚まで指定することが可能です。なお本手順で指定する画像は、すべて透明色を利用していないPNG画像を指定する必要がありますので注意してください!

手順4

試供版の有無や金額などを指定します。今回ぼアプリは無償としますので、「アプリケーションの価格」には”$0.00”を指定します。なお、アプリを有料とする場合は口座の情報やらなんやらをあらかじめ海外のマイクロソフトに提出しておく必要があるようです。これは非常に面倒くさそうですので、有料なアプリを公開するのは日本のマーケットプレイスが開設されてからでも遅くはないんじゃないかな~と思います。

手順5

最後に「申請して認定を依頼」ボタンを押下すれば作業が完了します。お疲れ様でした~♪

なお、申請完了後に任意のタイミングでアプリを公開したい場合は「認定をパスした後~」にチェックを入れればOKです。ただしその場合は、公開を指示してからアプリケーションが公開されるまでに1日近くかかる場合もありますのでご注意ください。

審査期間はどのくらい?

今回作成したWP7アプリの場合、審査期間にはおよそ3日を要しました。ただし、審査期間中は一日ごとに「変更済み」の日付が更新されるようですので、審査プロセスがきちんと実施されていることを認識することが可能です。入試の結果発表を待つ学生たちのような気分で、ジ~ッと審査結果を待ちましょう。

ホントは全12話の予定でした…

じつはこの連載…、本当は全12話の予定でした。当初の予定では、10話でAppHubの申請が却下されたときの内容を公開し、11話でアプリの修正とAppHubへの再申請を実施、そして12話でアプリ公開&大団円!となるハズでした。…でしたのですが、8話でクソマジメに審査規約を読み込んでしまったせいか、なんとAppHubの審査に一発で通ってしまいました。べ、べつにうれしくなんかないんだからねッξ〃Д〃)ξ

…ということで総括!

今回作成したアプリケーション「MetroGnome」では、コンセプトの立案から実装完了までに約2週間、審査期間をあわせても実に3週間足らず(しかも片手間)で公開まで漕ぎ着けることができました!このように、非常に短期間で開発できるところもWP7アプリの魅力です♪

ということで、無事アプリケーションの公開と相成りましたので、今回をもちまして本連載は一旦終了とさせていただきます~。却下(リジェクト)された時の手順などを記載することができなくなってしまいましたが…一発で申請に通った事例も珍しいとは思いますので、これはこれでアリなのかなと。

あまり参考にならなくて申し訳ありませんが、今回の連載で記載 したような流れで、WP7アプリの作成と公開が可能となります。みなさんもぜひ、WP7アプリの開発に挑戦してみてみましょう~!それでは、ご愛読ありがとうございました~(*≧∀≦)ノ

痛IDEにメトロちゃんが仲間入り!…ローザさんは?

なななんと!一部で有名なあの「痛IDE」にWP7の非公式擬人化キャラクター「メトロ」ちゃんが仲間入りしました~!(*≧∀≦)ノ

痛IDEとは、アプリケーションの開発環境である「Visual Studio 2010」のスタートページやエディタの背景画像に、日本の二次元産業である「萌え」を取り入れようという素晴らしいコンセプトの拡張機能です。今回のこの夢のコラボは、痛IDEの作成者である初音さんのご厚意で実現しました!あ、でも、痛IDEの画像は随時募集中だそうです(´・ω・`)

これで開発効率20%UPは間違いありませんね(当社比)!ただし顧客先で利用するのは…ちょっぴし勇気がいりますけどね♪

今回はなぜかVS2010の非公式擬人化キャラクター「ローザ」さんを差し置いてのメトロちゃん採用なわけで。しかもいつの間にかクラウディアさんまで痛IDEに追加されていたりするわけで。これはもう…ローザさんが黙っていない…((;゚Д゚))) 擬人化キャラクターたちの仁義なき戦いはもう…はじまっている…かも?

クイズ?年の差なんて

Windows Azureの擬人化キャラクター(?)クラウディアさんが活躍する「クラウドガール」。その物語に登場するキャラクターのプロフィールが公開されています。クラウディアさんの誕生日も記載されていますので、逆算して年齢を割り出すことも容易ですよ。しかし、よもやクラウディアさんに実のお兄さんがいたなんて知りませんでした~。でもこのプロフィールで突っ込むべきところは何と言ってもココ↑でしょう。まぁ深い意味はないですが、いつまでも仲のいい夫婦ってホント素敵ですよね~♪

あ、あとここ数日作成していたWP7アプリケーション「MetroGnome(メトロノーム)」を、マーケットプレイスに公開するための審査に提出しました~!詳しい手順などはまた後日に掲載したいと思いますが、これでしばらくは対コミケ戦線に専念できそうです。

あとあと、どうでもいいですけど、「クイズ!年の差なんて」が通じない若手に本気でジェネレーションギャップを感じました。(´・ω・`)

実録☆WP7アプリケーション開発!(第8話)

今回は、WP7アプリケーションが満たすべき内容について規約している「Application Certification Requirements for Windows Phone」を紐解いてみましょう。残念ながら上記の規約はいまだ日本語化されていないため、今回はこれを適当に和訳しつつ要点だけをまとめていってあげるんだからねッξ〃Д〃)ξ …規約は主に以下の7章で構成されています。かなり文章多めですが、くじけずに順を追ってみていきましょう。

  • 1. Application Certification Requirements
  • 2. Application Policies
  • 3. Content Policies
  • 4. Application Submission Requirements
  • 5. Technical Certification Requirements
  • 6. Additional Requirements for Specific Application Types
  • 7. Change History

1. Application Certification Requirements

この章では、アプリケーションが審査を経てマーケットプレイスに公開されるまでのプロセスが記載されています。たとえば、アプリを登録するためには開発者がAppHubからXAPをアップロードして、そのあとでマイクロソフトが色々と審査をして大丈夫なら署名を追加したXAPをマーケットプレイスに公開してあげるけど、だめだったらXAPのアップロードからやり直しなんだからねッξ〃Д〃)ξ …みたいなことが記載されています。ほかにも、アプリケーションを更新する場合はもう一度審査を受けてもらう必要があるんだからねッξ〃Д〃)ξ …みたいなことも記載されています。図解もされていますので、一度眺めておけばよいレベルの規約だと思います。

2. Application Policies

この章では、主にアプリケーションが満たすべき要件に関する規約が記載されています。たとえば、50MB以上のデータをダウンロードするような場合は、パケット代とかの問題もあるからちゃんとユーザに通知してよね!とか、位置情報を取得する場合はちゃんとマイクロソフト謹製のAPIを使ってよね!みたいなことが記載されています。ほかにも、トライアル版を提供するならフル版の機能や品質が十分わかるものにしてよね!といった内容や、プッシュ通知を使うアプリケーションで留意すべき項目などが記載されています。実装よりも要件レベルの内容ですので、設計段階で目を通しておきたい規約となっています。

3. Content Policies

この章では、主にアプリケーションの商標や表現に関する規約が記載されています。例えば商標に関しては、ブランド商品名やロゴマークなどを利用する場合は ちゃんと許可を取ってくださいね~、といった内容が記載されています。また表現に関しては、中傷的だったり差別的な内容や、ドラッグなどの教育上よろしくない内容、 過度に暴力的だったり直接的にエッチな内容は禁止されています。ちなみに、アダルトに関する条件はわりとあやふやに記載されていますので、 少しばかりエッチな内容なら問題なさそうなんだからねッξ〃Д〃)ξ

4. Application Submission Requirements

この章では、アプリケーションの実体となるXAPファイルや、審査を申請する際の規約が記載されています。結構重要なことが記載されていますので、各節ごとに内容を見ていきましょう。

4.1 Installation Package Validation

アプリケーションの本体となるXAPファイルに関する内容が記載されています。「ApplicationIcon.png」や「Background.png」といった画像が必要であることなど、基本的にはVisual StudioやExpression Blendでプロジェクトを作成していればすべて満たされているはずの規約が記載されています。XAPファイルの最大サイズは255MBまでという点には留意しておきたいところです。

4.2 Application Code Validation

ソースコードに関する規約が記載されています。たとえば、COMの呼出しやP/Invokeの利用は禁止されていたり、XAPファイルはReleaseビルドで生成する必要があります。また、「System.Windows.Controls」名前空間に属するクラスのメソッドを利用している場合は、「Microsoft.Xna.Framework.Game」と「Microsoft.Xna.Framework.Graphics」アセンブリを利用してはいけないとのことです。…え、マジですか?

4.3 Phone Capabilities Detection

Capabilitiesに関する内容が記載されています。Capabilitiesとは、そのアプリケーションでどんな機能を利用するかをあらかじめ宣言しておく項目であり、「WMAppManifest.xml」に定義します。このため、アプリケーションで利用する機能はちゃんと宣言して、利用しない機能の宣言はしっかりと削除しておきましょうといった内容が記載されています。なおCapabilitiesの編集には、「Windows Phone Developer Tools January 2011 Update」に含まれる「Capability Detection Tool」を利用すると便利だそうですが、最近はAppHubにXAPをアップロードする際に自動で判定されるそうです。なので、Capabilitiesに関してはあまり気にしなくて良いかもしれません。

4.4 Language Validation

アプリケーションのUIに使用する言語に関する内容が記載されています。UIに使用する言語は、マーケットプレイスでターゲットとして申請した国の言語をちゃんと利用しましょうとのことです。まぁ、当たり前といえば当たり前ですよね。

4.5 Windows Phone Marketplace Iconography

審査後にマーケットプレイスで利用する画像に関する内容が記載されています。「99 x 99」「173 x 173」「200 x 200」の3種類のサイズの画像を用意する必要があります。この画像は、4.1節で作成した「ApplicationIcon.png」や「Background.png」に酷似した画像である必要があります。ほかにも、マーケットプレイスでピックアップされた時の背景として「1000 x  800」の画像を用意するとのことですが、これは任意だそうです。なお、これらの画像はすべて透明色を利用していないPNG形式である必要があります。

4.6 Application Screenshot

アプリケーションのスクリーンショットを「480 x 800」のサイズで複数用意しましょうとのことです。これも、透明色を利用していないPNG形式である必要があります。

5. Technical Certification Requirements

この章では、開発者にとって最も重要な規約が記載されています。これらの規約を意識して、しっかりと実装を行いましょう!各節ごとに内容を見ていきます。

5.1 Application Reliability

5.1.1項では、アプリケーションは複数の端末で同じように起動しなければいけないと記載されています。なお現状では、端末の画面サイズは1つに統一されていますので、この規約をあまり意識する必要はないかもしれません。強いて挙げるなら、端末の性能に依存したロジックの組み方をしないように気を付けるくらいでしょう。

5.1.2.項では、アプリケーションは予期せぬエラーで突然終了していはいけないと記載されています。審査中に一度でも突然終了したら却下するからねッξ〃Д〃)ξ …と記載されています。落ちるにしても、きちんとわかりやすいエラーメッセージを表示すれば問題ないそうです。ただし、メッセージの内容があまりに汎用的過ぎる場合はやはりNGにするそうです。

5.1.3項では、アプリケーションは3秒以上固まってはいけないと記載されています。俗にいう3秒ルールです(違。回避できない場合は、プログレスバーとかビジーインジケータを表示して、ちゃんと動いていることをアピールできれば問題ないそうです。

5.2 Performance and Resource Management

5.2.1項では、起動後5秒以内に最初の画面が表示されることと記載されています。基本的に「SplashScreenImage.jpg」を利用していれば問題なさそうですが、それでも起動後20秒以内にはアプリケーションが操作できる必要があるとのことです。俗にいう20秒ルールです(違。

5.2.2項では、アプリケーションを終了させた後に速攻で再度起動した場合においても、上記の5.2.1項を満たしている必要があるとのことです。なかなかに手堅いですね。

5.2.3項では、…あれ?この項は消されたのかな?

5.2.4項では、バックボタンに関する規約がこれでもかと記載されています。たとえば、バックボタンを押したら必ず前の画面に戻る必要があるんだからね!とか、最初の画面でバックボタンを押したらアプリケーションを終了させてよね!とか、コンテキストメニューとかダイアログを表示している時にバックボタンを押したら前の画面に戻らずにそれらのウインドウを閉じるだけにしなさいよね!とか、ゲームをプレイしている時にバックボタンを押した場合はポーズ状態にするだけでいいんだからねっ!とか。バックボタンまじ天使

5.2.5項では、メモリの使用量に関する規約が記載されています。基本的にDeviceStatusクラスのApplicationPeakMemoryUsage値…つまりメモリ使用量が90MBを超えないことが条件だそうです。

5.2.6項では、トライアル版に関する規約が記載されています。トライアル版であるかどうかを判定するAPIはあまり頻繁に呼び出さないでよね!だそうです。

5.3 Phone Functionality

5.3.1項では、とにかくアプリケーションは電話の邪魔をするなということが記載されています。アプリケーションを実行しているときに電話がかかってきてもすぐに出られるようにだとか、アプリケーションを終了させた後ですぐに電話がかけられること、みたいな内容です。電話が使えなきゃ電話じゃないじゃない、ということみたいです。

5.3.2項は、5.3.1項のSMSもしくはMMSバージョンです。

5.3.3項は、電話がかかってきても勝手にアプリケーションを終了させないでよね!ということが記載されています。電話がかかってきた後でどうするかはあくまでユーザが決める、ということですね。

5.4 Security

5.4.1項は、アプリケーションがウイルスなど悪意のあるものではないことと規約されています。当たり前です。

5.4.2項は、MSILがタイプセーフであることが規約されています。MSILとは、C#で記載したプログラムをコンパイルした後に生成される低レベルな言語のことであり、この状態でアンセーフなコードにならないことを規約しています。もっとも、C#でプログラミングする際に明示的にアンセーフモードなどを利用しない限り問題はないはずです。

5.5 Content Validation

5.5.1項は、マーケットプレイスの説明文に利用する言語を規約しています。やはりマーケットプレイスでターゲットとする国の言語を利用しなさいよね!とのことです。

5.5.2項は、UIの文字とか画像などが、テーマの背景色(ダークもしくはライト)によって見えなくなってしまわないことを規約しています。Expression BlendのDeviceタブを利用して、しっかりとテーマごとの見え方を確認する必要があるということですね。ほかにも、既定のリソース「Theme Resources for Windows Phone」を積極的に利用することも非常に有効です。

5.6 Technical Support Information

この節では、アプリケーション名やバージョン情報や連絡先などを、簡単に見つけられる場所に記載することを規約しています。About画面とか作っておいてよねッξ〃Д〃)ξ …ということらしいです。

6. Additional Requirements for Specific Application Types

この章では、アプリケーションの種類に応じて追加で満たすべき規約について記載されています。せっかくですので、ここも各節ごとにさらりと見てみましょう。

6.1 Location Aware Application

位置情報を利用するアプリケーションの規約が記載されています。たとえば、ユーザが位置情報センサーを無効にしてもアプリ落ちんなよ?といったことや、位置情報が取得できなくなった旨をちゃんとユーザに通知しましょう、みたいな内容です。

6.2 Push Notifications Application

プッシュ通知を利用するアプリケーションの規約が記載されています。たとえば、そのアプリケーションでプッシュ通知を利用するかどうかは独自の設定画面から設定できるようにしておいてくださいね、みたいな内容です。

6.3 Applications Running under a Locked Screen

ApplicationIdleDetectionModeをDisabledに設定した場合の規約が記載されています。この機能を無効化すると、画面がロックされててもバックグラウンドでアプリケーションを動作させ続けることが可能なのですが、それをする場合はちゃんとバッテリー消費量が最小になるような仕組みをしっかり実装しておいてよね!みたいな内容が事細かに記載されています。たとえば、UI更新やタイマーの類は一切止めてよね!とか、その状態でバッテリーが120時間以上持続するようにしてよね!みたいな内容です。是が非でもApplicationIdleDetectionModeを使いたくなくなる規約です。

6.4 Music + Videos Hub Application

ハブに連携するアプリケーションの規約が記載されています。たとえば、アプリケーションは必ずハブのマーキーリストに表示されるようにしてねとか、履歴リストとか新着リストと必ず同期させてねといった内容がズラリと並んでいます。要するに、ハブと統合させてあげるんだからしっかりと統一性をもたせてよねっξ〃Д〃)ξ …てことらしいです。

6.5 Non Music + Videos Hub Applications That Play Media

ハブに連携しないアプリケーションでBGMとかを使う場合の規約が記載されています。たとえば、ボリュームとかは独自の設定画面から変更できるようにしておいてね!といった内容や、音楽を再生している時にアプリケーションを起動した場合は、再生中の音楽を停止してBGMを流していいかどうかをユーザに確認してよね?といった内容が記載されています。細かいよぅ~。

6.6 Photo Extras

写真を加工するアプリケーションの規約が記載されています。たとえば、写真を選択しないでアプリを起動した場合は、PhotoChooserで選択画面をちゃんと表示してよね!とか。あと、写真を加工するアプリケーションなら当然「Extras.xml」は含まれているんでしょうね?とか記載されていますが、WP7.1では「Extras.xml」は不要になりますのでご注意ください。

6.7 Photo Sharing Applications

写真を共有するアプリケーションの規約が記載されています。ほぼ6.6節と同様の規約で、やはり写真を選択しないでアプリを起動した場合は、PhotoChooserで選択画面をちゃんと表示してよね!みたいな内容が記載されています。

7. Change History

この章はそのものズバリ更新履歴ですね。規約が変更された場合に、その箇所と内容が追記されていきます。

…ということで一気に紐解いてみましたが…。多い、多すぎるよ、カテジナさん!(゚´Д`゚)゚。 でも、読んでみるとわかるとおり、その大半がユーザビリティに関する規約だったりします。つまり、これもすべてわたしのアプリを使ってくれるアナタの・た・め♪ …と思えば、苦でも何でもないんだからねッ!ξ〃Д〃)ξ

実録☆WP7アプリケーション開発!(第7話)

ということで、前回までのような感じで実装を進めていくと、WP7のアプリケーションが作れます!かなりザックリですが、実装なんて十人十色です。べ、別に面倒くさくなった訳じゃないんだからねっξ〃Д〃)ξ ということで、今回からはアプリケーションの実装が完了したという前提で、アプリケーションをマーケットプレイスに登録するまでの過程を記載していきます。

マーケットプレイスとは?

WP7のアプリケーションを一般に公開するための唯一の方法は、マイクロソフトが運営している「MarketPlace(マーケットプレイス)」と呼ばれるサイトにアプリケーションを登録することです。しかしながら、マーケットプレイスにアプリケーションを登録するためには、必ず「AppHub(アップハブ)」と呼ばれるサイトからアプリケーションの審査を申請する必要があります。これによりマイクロソフトは、マーケットプレイスに危険なアプリや品質の悪いアプリケーションが登録されないようにしているわけです。要約すると、WP7のアプリは必ずAppHubの審査を経てマーケットプレイスに公開する必要があるということです。まぁ開発者の観点からしてみても、マイクロソフトにアプリケーションのテストをしてもらえるのであれば文句はありません。

MVVMによるゲーム開発

わたしが作成しているWP7アプリケーションの実装作業は概ね完了しました。バグ取りやパフォーマンスチューニングもほぼほぼ完了していますので、残りの作業はゲームバランスの調整とイラストの作成くらいです。このため、来週中にはAppHubの審査に出せそうです。

今回のアプリケーションは、左記の画像のように画面上部から落ちてくるキャラクターを、リズムに合わせてタイミングよく画面下部のアプリケーションボタンでクリックするというゲームです。プラットフォームにはSilverlightを利用しており、MVVMアーキテクチャにより実装しています。このため、ゲームロジック自体のステップ数はコメントも含めて、なんと200行未満で記述できています。自分でも、ゲーム開発とMVVMがここまで相性がいいとは驚きです。ちなみに、落下してくるキャラクターはObservableCollectionで制御し、メインとなるゲームロジックはすべてビューモデルに集約させています。なお、今回のアプリを実装した時にいくつかハマったポイントがありましたので、備忘録として以下に記載しておきますね。

PivotコントロールのSelectedIndexにバインドするとハマる

表題のとおりです。PivotコントロールのSelectedIndexにバインドすると画面表示時に例外が発生する場合があります。正確にいうと、バインディングしたソースの値が0以外の場合、確実に例外が発生します。たとえば今作成しているアプリでは、ストーリーモードとしてPivotコントロールによるコミックを実装しています。このため、最後に表示されたページのインデックスを分離ストレージに保存しておき、再度画面を表示したときにそのページを復元できるようにしています。この際、 PivotコントロールのSelectedIndexにビューモデルのプロパティをバインドしているわけですが、最後に表示したページが最初のページ以外(つまりインデックスが0以外)である場合、確実に例外が発生します。

このため、今回はこれを回避するようなビヘイビアを作成してその場を凌ぎました。どうやらLoadedイベントの発生以降であれば、SelectedIndexへのバインドも問題ないようでしたので、OnAttachedでバインディングを一旦廃棄して、Loadedで再構築しています。こんな感じで、バグの回避と未サポートの機能を補うためのビヘイビアやトリガーアクションが大量に出来上がりました(汗。

他にもハマりどころがたくさんあるので、隙をみて小出しにしていきたいと思ってるんだからねッξ〃Д〃)ξ

世代を超えるガンダムAGE!

ガンダムの新作がはじまるそうですよ~!その名も「機動戦士ガンダムAGE(エイジ)」!今年の秋から放送開始予定ですので、制作もかなり進んでいるものと思われます。

制作はレベルファイブ!ターゲットは…

企画協力には、「レイトン教授」シリーズや「イナズマイレブン」などで有名なレベルファイブさんが参加されるそうです。このため、メディアミックス展開にもかなり力を入れてきそうですね。キャラクターもイナズマイレブン子供や一部の女性をターゲットにした愛らしい感じのデザインなので、キャラクターグッズなども作りやすいかもしれません。

もちろん、ガンダムということですので、ガンプラの展開にもかなり力を入れていくようです。しかも今回のガンプラは、なんと本体や各パーツにICチップを内蔵するらしいです。これにより、いろいろなパーツを組み合わせた自分だけのガンプラを作ることができて、しかもおもちゃ屋さんとかにあるゲーム機でも遊べるように工夫がされているみたいです。そう…まさに「リアルプラモ狂四郎」!時代がやっと追いつきました!(`・ω・´)b
機動戦士ガンダムAGE プラモデル公式サイト

デジャヴか…

ストーリーは3世代にわたって展開されるらしいので、かなり壮大な物語になりそうですね。また主役機は「AGE-1」という名称らしく、こちらも物語が進むにつれてAGE-1~3へと進化していくそうです。…ところでこのガンダム、なんかどっかで見たようなデザインじゃありません?とか考えていたら思い出しました。どことなく「鉄人28号FX」に似てるんですよね~!…え?わたしだけ?なにはともあれさすがは「AGE」!デザインも世代を超えて親しみやすい感じになってます。

ということで、10月の放送開始が待ち遠しいですね~!なにはともあれ、モトスクウェアソリューションは「機動戦士ガンダムAGE」を応援します!

実録☆WP7アプリケーション開発!(第6話)

今回からはWP7アプリに関する画面の実装に着手します!手始めにまずは「ABOUT」画面を作成しましょう!

ビューモデルの作成

まずはビューモデルを作成します。ビューモデルというのは、「ビュー(画面)」と「モデル(データ)」の橋渡しをするためのクラスです。本来ならば、前回作成したようなデータモデルを「モデル」とするのが良いお手本なのですが、今回作成する「ABOUT」画面はモジュールのバージョンや著作権情報などを表示する画面です。このため今回の「ABOUT」画面において「モデル」とする情報は、アセンブリの情報を記述するための「AssemblyInfo.cs」ファイルに記載された内容とします。このファイルから情報を取得できれば「ABOUT」画面にはもってこいですよね!ということで、「AssemblyInfo.cs」の情報を取得するための方法を含め、ビューモデル「AboutPageViewModel」はこんな感じで実装できそうです。

なお、今回作成したビューモデルは、いわば読み取り専用のビューモデルです。このため、ビューとビューモデル間において相互にデータをやり取りしたり、ビューからビューモデルの処理(コンストラクタ以外)を呼び出したりすることはありません。もしこれらを行いたい場合は、「INotifyPropertyChanged」や「ICommand」などを利用したりする必要がありますのでご注意ください。でも最初はカンタンなビューモデルから理解するほうがカンタンです。

ビューの作成

ビューは適当にコントロールを配置しましょう!ポトぺタでもいいですが、パネルやリソースを積極的に活用すると統一性があって保守しやすい画面になります。この辺りはVSを使用できる人であれば説明不要ですよね(汗。ということで今回は、せっかくビューモデルを先行して作成しましたので、このビューモデルを利用してビューの調整やバインディングを作成していきましょう。

ブレンドのススメ

上記で作成したビューを「Expression Blend」で表示すると、画面右端とかそのへんに「Data」タブが表示されていると思います。もし見当たらない場合は、メインメニューなどを調べてどうにか表示しましょう!

このタブから変なアイコン(Create Sample Data)をクリックして「Create Sample Data from Class」メニューを選択すると、ダイアログが開いてビューモデルを選択することができます。

この一覧から先程作成したビューモデルを迷わず選択することにより、「Data」タブの中に「AboutPageViewModelSampleData」みたいな項目が作成されます。じつはこれ、ExpressionBlendがビューモデルをもとに自動生成してくれたサンプルデータです。「Data」タブ内の「AboutPageViewModel」をビューにドラッグアンドドロップすると、このサンプルデータ(ビューモデル)とビューが関連付けられるため、これによりサンプルデータに基づいたビューの実装や調整が可能になります。

ちなみにこの状態であれば、データバインドの作成もリストからビューモデルのプロパティを選択するだけで簡単に作成することが可能です。スゴク便利です。

なお上記の手順では、あくまでビューとビューモデルのサンプルデータが関連付いているにすぎません。このため、ビューと実際のビューモデルを関連付けるためには、例えばビューのXMALの先頭で上記のように記述することで実現することが可能です。

ということで、駆け足でしたがこんな感じで画面を実装していきましょう!…というか、なんかもう内容がグダグダですね…(汗

 

実録☆WP7アプリケーション開発!(第5話)

今回はデータモデルを作成していきたいと思います。設計がしっかりできていればモデルの実装はそれほど難しくありません。

データモデルの実装

WP7の開発環境に付属してる無償版のVSには、データモデルをデザインするためのツールは付属していません。このため、設計図をもとにしてクラスをひとつひとつ手動で作成する必要があります。非常に面倒ですが…開発環境がタダなので文句は言えませんね。実際の実装イメージは左記のとおりです。こんな感じでデータモデルを作成していきます。なお、各プロパティに付与している属性の意味はのちほどご説明します。

シリアライズとデシリアライズ

データモデルは、その名の通りデータを保持するオブジェクトです。このため、分離領域やXMLファイルなど、様々な媒体から取得ないしは保存することを前提とします。今回作成するゲームでも、画面上方から落下してくる音符のタイミングやボタンのインデックス、そのほか楽曲の情報などはXMLファイルから読み込むようにしようと思います。このため、XMLファイルをクラスオブジェクトに変換(デシリアライズ)できるような仕組みが必要となります。また、このXMLファイルはあらかじめ作成しておく必要があるわけですが、手動でチマチマ作成するのは困難です。そこで、実際にゲームをプレイしたデータ(ボタンをおしたタイミングなど)を利用してXMLファイルを作成することができれば、開発工数をグッと短縮できそうです。この場合は逆に、クラスオブジェクトをXMLファイルに変換(シリアライズ)できる必要があるわけです。これらを実現するためには「DataContractSerializer」クラスを利用すると便利です!

「DataContractSerializer」クラスを利用する場合、クラスオブジェクトのシリアライズとデシリアライズは左記の実装例のように実現することが可能となります。肝となるのは「WriteObject」と「ReadObject」メソッドのみですので、そのほかの部分はお好きなように実装してください。たったこれだけの実装で、クラスとXMLファイルを相互に変換することが可能となります。

データモデルに付与した属性

データモデルを作成する際に付与した属性は、「DataContractSerializer」クラスの変換処理に利用されます。「DataContract」属性は、そのクラスがシリアライズおよびデシリアライズ可能であることを示し、「DataMember」属性はそのプロパティを変換の対象にするという意味を持ちます。逆に「IgnoreDataMember」属性を付与すると、そのプロパティを変換の対象から除外することが可能です。たとえば前述したデータモデルの例では、「PositionTimeSpan」プロパティを「IgnoreDataMember」属性により対象外としていますよね。本当は「Position」プロパティをTimeSpan型にすれば「PositionTimeSpan」プロパティなんて不要なのですが、TimeSpanを「DataContractSerializer」で変換すると”PT4.449S”といったヘンテコな文字列になりやがります。できれば時間は”00:00:02.551”みたいな形式でXMLに保存&読込できると後々編集しやすいですよね~。このため、XMLに変換されるのは「Position」プロパティの値のみとし、プログラム側では「PositionTimeSpan」プロパティを利用することにより帳尻を合わせています。こういう使い方が良いかどうかはさておいて、こういう使い方もできるということで…(; ̄ー ̄

そんなこんなでデータモデルの実装はバッチリですね!( `・ω・´)b

実録☆WP7アプリケーション開発!(第4話)

今までの説明では、今ひとつゲームの内容が不明瞭でしたので少し補足しますね。今回作成するWP7アプリは、画面上方から落下してくる音符を画面下のボタンでリズムよく押していく、いわゆるリズムゲーというものです。ビーマニとかポップンみたいなものと言ってしまえばその通りです。ということで今回は、画面構成と画面遷移、ならびにデータモデルの設計を実施しました。

画面構成と画面遷移図

このWP7アプリケーションは、5つの画面で構成します。「MAIN」画面はアプリ起動時に表示される画面でメインメニューを有します。「STORY」画面はPivotコントロールを利用して物語をコミック的に見せる画面です。「ATTACK」画面は好きな楽曲を選択してプレイできる画面です。ハイスコアの表示もこの画面で実施します。また、ストーリーモードをすべてクリアしないと画面できないメニューとします。「ABOUT」画面では著作権情報などを表示しようと思います。最後に「GAME」画面は文字通りゲームの肝となる画面です。画面構成はこんな感じになりそうですね。

データモデル

実装に取り掛かる前に、先行してデータモデルを設計してしまいましょう。今回はSilverlightを利用しますので、MVVMを用いた実装とします。このため、どうしてもデータモデルの設計を先に済ませておく必要がりますね。今回のWP7アプリでは、主にリソースのブリッジとして利用するデータモデルと永続領域に保存するために利用するデータモデルの二種類を利用します。

まず「MusicalScore」は、1つの楽曲を表すモデルです。「MusicalInformation」として楽曲のタイトルや著作権などを保持し、「MusicalSetting」では背景画像や音符の落下速度を保持します。また「MusicalNote」をリストで保持することにより、音符に対応するボタンとタイミングを保持します。なおこの「MusicalScore」はシリアライズ可能なクラスとすることにより、リソースとして格納しておいたXMLからオブジェクトを生成できるようにします。このようにすれば、楽曲の編集や追加をXMLファイルにより行うことができるためです。また「GameScore」はゲームのプレイにより生成されたスコアなどを保持し、「GameSettings」はストーリーのクリア有無などの設定情報を保持します。これらは永続領域に保存するデータモデルです。

とりあえず、最低限これだけ設計しておけば実装に着手できそうです。次回はデータモデルのシリアライズ方法などを紹介しつつ、データモデルを一気に実装しちゃいたいと思います♪

実録☆WP7アプリケーション開発!(第3.5話)

今回から実装を進めていきたいと思っていたんですが、…あまり時間が取れなくて全然進んでいません(汗。でもでも、WP7の開発開発には「Expression Blend」というデザイナ向けのツールが同梱されているため、このように時間がない場合でも画面レイアウトくらいはサクッと作成できちゃいます。そこで今日はちょっとだけ画面レイアウトのお話を。

リソースのご利用は積極的に!

じつは左記の画面、ほんの1時間足らずで作成したものなのですが、それにしてはメトロデザインな感じに作成できているんじゃないかな~と思っていたりします。このように、短時間で適度な文字色や空白を含んだ画面デザインを作成するための秘訣は、ズバリ『リソース』にあります。WP7には、あらかじめ非常にたくさんのリソースが定義されており、これらを利用することにより短期間でリッチな画面を作成することが可能なんです。そのうえ、異なるアプリやOS標準画面との統一感も演出できて一石二鳥です!WP7に定義されているリソースは以下のサイトをご参照ください。

Theme Resources for Windows Phone

ちなみに上記の画面では、MarginやForegroud、FontSizeといったプロパティに指定する値において、定数や数値のたぐいは一切使用していません。すべて上記で定義されているリソースを利用しています。他にも、アクセントカラーと同一色を適用できる「PhoneAccentBrush」をはじめ、見出しの文字列に使用する「PhoneTextTitle1Style」~「PhoneTextTitle3Style」といったスタイルや、ちょっとした表題に利用できる「PhoneTextSubtleStyle」なんてスタイルも用意されています。また意外と知られていませんが、TextBlockのスタイルに「PhoneTextBlockBase」を指定してあげるだけでも、適切なマージンが自動的に設定されるので見た目がいい感じになります。

WP7アプリの画面を実装する際にはぜひとも、標準で用意されているリソースを積極的に利用することをお勧めします!