あいてぃーとふぼふ

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

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

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

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

デジャヴか…

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

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

今回からはWP７アプリに関する画面の実装に着手します！手始めにまずは「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の開発環境に付属してる無償版の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アプリは、画面上方から落下してくる音符を画面下のボタンでリズムよく押していく、いわゆるリズムゲーというものです。ビーマニとかポップンみたいなものと言ってしまえばその通りです。ということで今回は、画面構成と画面遷移、ならびにデータモデルの設計を実施しました。

画面構成と画面遷移図

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

データモデル

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

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

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

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

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

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

Theme Resources for Windows Phone

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

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

ということで、前回はアイデアを2つにまで絞り込みました。今回はもう少しアイデアを煮詰めたうえで、どちらか一方のアイデアに絞り込みたいと思います。

あっち向いてホイ（仮）はどうですか？

とりあえず、アプリケーションの完成形をイメージするために、先行してイラストを描いてみました。う～ん…やはりというかなんというか。とりあえず、実現するとかなり気持ち悪い感じのアプリケーションになるであろうことは明らかですね（汗。作ってみるのも面白そうではありますが、プレイするにしても賢者モードの発動が必要不可欠となります。そもそも他人に紹介するのも勇気がいります。はじめてのアプリですので、やはり色々と宣伝はしたいですし…。うむむ…

メトロちゃん（仮）はどうですか？

やはり同様に、メトロちゃんを描いてアプリケーションのアイデアを煮詰めてみました。色々と考えてみましたが、基本的なストーリーはこうなりました。ロボットやリンゴが覇権を争うスマフォ業界において彗星のごとく現れたメトロちゃんが、WP7のシェアを拡大するために地球を一周してロボットやリンゴを一掃します。ただしこの際、敵を倒すためにはタイミングよく画面下のアプリケーションバーボタンを押す必要があります。つまり、俗にいう「リズムゲー」にするのが、比較的簡単に実現できそうで面白いかな～と思ったわけです。実装自体もSilverlightの機能を最大限に利用すれば、100行足らずのソースコードで実現できるかもしれません。

キミに決めた！

ということで、今回作成するアプリケーションは「メトロちゃん（仮）」に決定しました！「あっち向いてホイ（仮）」も非常に捨てがたいんですが、一発目のアプリがアレだと何だか人間性を疑われそうで怖いです。ということで、次回からは実装に入りつつ技術的な懸念事項や画面構成などを検討したいと思います。

今回は、作成するWP7アプリケーションのアイデアを考えてみたいと思います。ということで、実際にわたしが考えたアイデアを以下に公開しちゃいます！それにしても、やっぱりアイデアを出すのが一番大変だったりしますよね～。なんだかお疲れにゃんキャット♪

アイデアA：リーマン（仮）

このゲームでは、上司の絡み酒にしこたま付き合わされたサラリーマンが、押し寄せる吐き気をコントロールしつつ愛する家族の待つ我が家を目指すというゲームです。プレイヤーが操作するサラリーマンは、基本的に千鳥足のため常にふらふらしています。このため、加速度センサーの傾きでうまく制御しつつ、マンホールや通行人を避けて進みます。もしこれらに当たってしまうと、「SUSHIORI=STOCK（寿司折りストック）」…つまりライフが減少してしまいます。また、プレイ中は常に「GERO=GAGE（ゲロゲージ）」が上昇していくため、定期的に電信柱を見つけてゲージを解放してあげる必要があります。この際、ゲージのギリギリ具合によって「SOKAI-POINT（爽快ポイント）」が溜まる仕組みとなっており、このポイントによるランキング機能も実装することにしましょう。寿司折りがなくなるか、ゲロゲージが最大値をオーバーすると「GEeeM=OVER（ゲェームオーバー）」となります。他にも、ゲロゲージを一定時間溜めてフラッシュオーバーさせることにより発動可能な「GERO=SENSITIVE（ゲロの領域）」などの要素も考えてみました。ということで、個人的にはイチオシのアイデアです！…がいかんせん、全体的に下品すぎましたかね。でも結構気に入ったので時間があれば作ってみたいかも。

アイデアB：あっち向いてホイ（仮）

このゲームはとてもシンプルで、美少女と「ジャンケン」して「あっち向いてホイ」をするだけの内容です。西暦20ｘｘ年、ピュアな紳士たちの社交場では「あっち向いてホイ」が大流行～、みたいな時代背景です（謎。システムとしては、「ジャンケン」の入力にアプリケーションバーのボタンコントロールを利用したり、「あっち向いてホイ」の入力にToolkitのGestureServiceクラスなどを利用すれば、実装自体はそこまで難しくなさそうです。また肝心の美少女も、１枚絵と上下左右を向いた差分を用意すれば、これまた工数は抑えられそうです。ただし、バカ正直に作成すると単調なゲームになってしまいそうなので、リズミカルに入力しないと失敗するような要素を設けたりしたいところですね。また、何連勝できたかをランキングとして記録できるようにすれば、最低限のやりこみ要素も確保できそうです。でもこれ…実現したらかなり気持ち悪い感じのゲームになりそう…。

アイデアC：メトロちゃん（仮）

このゲームは、あえてユルい感じを演出することにより万人受けを狙います（言い切った）。でも正直いうと、あまり具体的な内容は決まっていません。だって1日で3つもアイデア出すとか無理ですよ…（汗。でも工数などを考慮すると、今回作成するアプリでは、ワンキーだけで遊べるような単純＆爽快なゲームが一番ニーズに合っているのかもしれません。イラストに関しても、ユルいデフォルメキャラクターなら描くのも大した手間じゃありませんしね。

どれを採用する？

ということで、3つのアイデアを出してみたわけなんですが、このうちのどれを採用するか…それが問題ですね。あ、でも「リーマン」は除外しますよ！だってアプリケーションの審査で撥ねられそうな内容ですし、そもそも前回決めたコンセプトは「萌え系アプリ」だったわけで。…ってあれ？じゃあ、なんで「リーマン」なんて考えたんだろ…（´・ω・｀；）

わたしもそろそろなにかしら、WindowsPhone7のアプリケーションを作って公開したいなぁ～。ということで！ここから数回にわたり、WP7アプリケーションの開発工程を記していきたいと思います。なおこの企画は、なんか突発的に思いついたのものですので、突然終了するかもしれないことをあらかじめお断りしておきます！(｀・ω・´)ゞ

課題を決めよう！

今回は、あくまでマーケットプレイスにアプリケーションを公開することが最優先事項よ♪＠みずほ先生。このため、あまり高度なアプリケーションは作成しません。…といいますか、高度なアプリを作るスキルがありません。また仕事や夏コミなどの都合上、あまり時間を割くこともできません。このため、できれば6月中に簡単なアプリをマーケットプレイスに公開するところまで漕ぎ着けたいところです。今回はこれを最重要な課題としましょう。

開発プラットフォームを決めよう！

WP7アプリケーションの開発に使用するプラットフォームは、UIアプリの開発に特化した「Silverlight」と、ゲームアプリの開発に特化した「XNA」のいずれかを選択することが可能です。「Silverlight」を利用する場合、XAMLと呼ばれるマークアップ言語とイベント駆動型のプログラミング手法により、比較的短かい期間でUIベースのアプリケーションを構築することが可能です。また「XNA」を利用する場合、低レベルかつ豊富なAPIを利用することができるため、自由度が高く高速なアプリケーションを構築することが可能です。前述のとおり今回は、開発にあまり時間を割くことができません。このため、開発効率の高いSilverlightを選択することにします。

コンセプトを決めよう！

とはいえ、単純なアプリケーションをただ作ってもあまり面白くないですよね。なので、WP7のアプリケーションを公開しているマーケットプレイスをすこし調べてみました。その結果、予想していた通り…いわゆる萌え系アプリはまだ少ないようです。このため、このあたりに付け入る隙（？）がありそうですね。ということで、コンセプトは萌え系アプリで行きましょう！でも萌え系というからには、どうしてもゲーム要素が強くなりそうです。限られた工数で実現するためには…どうしましょうか？そうですね！難しいことは明日考えましょう⊃_д_)⊃

すっかり忘れていましたが、今日は毎年夏に開催される日本最大級の同人誌即売会…略して「夏コミ」のサークル当落発表日です！今回で80回を数えるこのイベントは、毎年8月の第二週の金～日曜日を利用した三日間で開催されます。わたしも密かにサークル参加の申し込みをしておりました♪さてさて、当落結果は…？

サークルカットはこちら！

受かってましたー！(ﾟ´Д`ﾟ)ﾟということで、モトスクウェアソリューションは「2011年8月13日(土)」に東京ビックサイトの「東地区 “Ｓ” ブロック 21b」で出展させていただきます～！詳細な告知は近日中に別ページでご紹介させていただくつもりですが、取り急ぎサークルカットはこちらになっております！同人誌の内容は、VS2010の擬人化キャラクター「ローザ」とWP7の擬人化キャラクター「メトロ」が、先行き不安なWindowsPhone7について、その概要をコミカルチックに解説します。あとそれとは別に、CD-Rか何かの媒体でWP7開発のハウツー集みたいなものも配布できればいいなぁ～なんて考えてます。まだ全然未着手ですが…。

ということで、ご都合のよろしい方はぜひとも上記のスペースまでお越しいただけましたら幸いです～。お茶菓子は出せませんが、とびきりの笑顔でおもてなしさせていただきます…( ◞≼●≽◟ ◞౪◟ ◞≼●≽◟ )

Windows8のデモムービーが公開されました！

先月開催されたMDF（マイクロソフトが主催する技術者向けのフォーラム）でも、バルマーさんが「来年のリリースするWindows 8は…」みたいな発言をしていました。このため今後は、2012年のリリースに向けて色々と情報が出てきそうな感じです(*≧∀≦)ﾉ

ユーザインタフェイスはメトロ！

Windows8のユーザインタフェイスには、WindowsPhone7と同様にMetroデザインが採用されるようです。上記のデモムービーや左記の画像でも、スタート画面などにMetro独特のライブタイルなインタフェイスが使用されていることがご覧いただけます。もちろん、Officeなどのアプリケーションを利用する場合は、従来のWindows7などと同様にデスクトップ画面が表示される模様です。また、Windows8のソフトウェアキーボードなどもWindowsPhone7とだいぶ似ていますよね。このことからも、マイクロソフトは今後もMetro UIを推していくようです♪

Windows8のベータ版は8月公開予定？

一部の情報筋による情報では、Windows8 のベータ版は8月ごろのリリースを予定しているようです。なおベータ版のOSは、MSDNを通じて技術者のみにリリースされるのが通例です。しかしながら、ムービーを見る限りでは現時点でもかなりの仕上がりなようですので、その完成度次第ではRC版を待たずに一般の方々に公開される可能性もありそうですね。なのはともあれ、今後の展開に期待です♪