デスクトップ、ブラウザー、Windows Phone で動く Flashcards.Show Version 2
みなさん、こんにちは。Windows 開発統括部の古内です。今回も少し古い記事になってしまいますが、2011 年 2 月 17 日に Developing for Windows Blog に投稿された 「 Flashcards.Show Version 2 for the Desktop, Browser, and Windows Phone 」 の翻訳をお届けします。Windows Azure (クラウド サービス) をバックエンドとしながら、3 つの異なるプラットフォーム (Windows 7、Silverlight、Windows Phone) で動かすサンプル アプリケーションを紹介したものです。もちろんソース コードもあります。
日本でもついに Windows Phone 7.5 を搭載したスマートフォンの発売が始まりました。ぜひこのサンプル アプリケーションを参考に、3 スクリーン アプリケーションの開発にチャレンジしてみてください!
デスクトップ、ブラウザー、Windows Phone で動く Flashcards.Show Ver. 2
Flashcards.show アプリケーションの提供が開始されてから数か月が経ちました。このアプリケーションは主に、開発者用のリファレンスや Windows 7 の優れた機能のデモとして使用されています。Flashcards の最初のバージョンでは、あらゆる種類のデッキを作成してカードを使用することはできましたが、作成したカードを他のユーザーと共有するには、電子メールでデッキ ファイルを送信するしかありませんでした。
図 1: Flashcards.Show の "ゲーム" モード
マイクロソフトでは、この点を踏まえて Flashcards.Show Version 2 の開発に着手しました。Version 2 の目標は、ユーザーどうしがコンピューターを通じてデッキを簡単かつシームレスに共有できるようにすることでした。考え方はシンプルです。ユーザーがデッキをクラウドにアップロードし、デッキを共有したい相手にメッセージを送信できるようにします。メッセージを受信したユーザーがそこに含まれているリンクをクリックすると、Web ブラウザーが起動して Silverlight アプリケーションが実行され、共有されたデッキを "プレイ" できるようになります。Silverlight アプリケーションによって共有デッキが動的にダウンロードされ、WPF アプリケーションの場合と同じようにデッキが表示されます。これでユーザーは、Learning、Matching、Memory の 3 つのゲームのいずれかを起動できるようになります (WPF アプリケーションと同様のユーザー エクスペリエンスです)。
図 2: Flashcards.Show の Memory ゲームを Silverlight アプリケーションとして IE で実行
メモ: 共有デッキにはいくつか制限があります。デッキの上限サイズは 5 MB で、動画や音声は使用できません。制限事項はすべて機能に因るものであり、技術的な制限ではありません。なぜなら、開発に長い時間をかけたくなかったからです。
これで、クラウド経由でデッキを共有できる WPF アプリケーションと、デッキをプレイできる Silverlight アプリケーションができました。次に、Silverlight アプリケーションを Windows Phone で実行してみましょう。Silverlight は Windows Phone 開発モデルなので、アプリケーションは正しく実行されるはずです。実行すると、ご覧のように問題なく動作しました。
図 3: Flashcards.Show を Windows Phone エミュレーターで実行
Flashcards.Show アプリケーションは Windows Phone 上では Silverlight アプリケーションとして実行され、WPF アプリケーションが Web のSilverlight で共有したデッキを表示できます。これで同じコンテンツとゲームを、Windows 上、Web の Silverlight 上、そして Windows Phone 上で楽しむことができます。
このアプリケーションをダウンロードするには、Flashcards.Show ClickOnce インストールを使用してください。コードは MSDN コード ギャラリーの Flashcards にあります。
これで、Windows Azure をクラウド サービスとして使用し、3 つの異なるプラットフォームで実行可能な単一アプリケーションが完成しました。この Flashcards.Show の実装の良いところは、(そうなるように意図されたものですが、) たくさんのコードとリソースを、WPF、Silverlight、Windows Phone 間で共有できることです。
図 4: Flashcards.Show のアーキテクチャ概観
Flashcards.Show アプリケーションのしくみ
Flashcards.Show アプリケーションは次の 2 つのコンポーネントで構成されています。
- クライアント アプリケーション – Windows 用の WPF、Web 用の Silverlight、Windows Phone
- クラウド サービス – Azure ストレージを使用して Windows Azure 上で実行される一連の Web サービス
この記事ではクラウドについては説明せず、Silverlight および Windows Phone の実装を中心に見ていきます。
Flashcard.Show Version 2 のソース コードをダウンロードすると、1 つの Visual Studio ソリューション ファイル (FlashCardsSolution) に以下の 10 種類のプロジェクトが含まれているのがわかります。
- FlashCards.UI.Phone – Windows Phone アプリケーションです。複数のページとリソースが含まれています。
- FlashCards.UI.SL – Silverlight アプリケーションです。複数のページとリソースが含まれています。
- FlashCards.UI.WPF – メインの Windows アプリケーションです。Admin モードと Game モードが含まれています。
- FlashCards.ViewModel.Phone – MVVM アーキテクチャのビュー モデルです。 Windows Phone アプリケーションで使用します。
- FlashCards.ViewModel.SL – MVVM アーキテクチャのビューモデルです。Silverlight アプリケーションで使用します。
- FlashCards.ViewModel.WPF – MVVM アーキテクチャのビューモデルです。Windows アプリケーションで使用します。
- FlashCardsServices – Windows Azure プロジェクトです。一緒に展開されるサービスを参照します。
- FlashCardsServices.Contracts – 複数の Flashcards.Show アプリケーションが使用するサービスの定義です。
- FlashCardsServices.Entities – Web サービスのモデルです。
- FlashWCFWebRole – Web サービスです。複数の Flashcards.Show アプリケーションで使用します。
上のリストを見ると、UI プロジェクトとビューモデル プロジェクトが重複していることに気が付きます。
まず最初に必要なのは、目的のプラットフォーム (Windows、Silverlight、Windows Phone) 用にコンパイルすることです。ターゲット CLR にコンパイルするのが唯一の方法です。その理由については、Shawn Burke 氏が 「3-Screen Coding: Sharing code between Windows Phone, Silverlight, and .NET (3 スクリーン用のコーディング: Windows Phone、Silverlight、.NET 間のコード共有)」 というセッションの中で説明しているので、どうぞご覧ください。今回のサンプルでは Burke 氏が触れているライブラリは使用しませんが、このライブラリを使えば作業がずっと楽になるはずです。
ただし、コードを複製しなければならない、というわけではありません。特に、アプリケーションのビューモデル (MVVM の一部) については、それが当てはまります。すべてのクライアントは基本的に同じモデルを使用しているので、ロジックは同じですし、同じゲームと画面フローを表示します。左下の図を見るとわかるように、メインのビューモデルとして使用しているのは WPF ビューモデル (FlashSards.ViewModel.WPF) であり、Windows Phone のビューモデル (FlashSards.ViewModel.Phone) と Silverlight ビューモデル (FlashSards.ViewModel.SL) については、単にビューモデル ファイルにリンクしているだけです。小さい矢印は関連ファイルがリンクされていることを示しています (左下の画像をクリックすると拡大表示されます)。つまり、すべてのクライアントで同じ 1 つのビューモデルを使用しているのです。
UI には少し細工が必要です。ここでの Silverlight 3 ランタイムと WPF 4 ランタイムの違いは、Silverlight アプリケーションを再作成する方が簡単だという点です (Silverlight 3 をターゲットにしたのは、Windows Phone に簡単に移植できるようにしたため)。Silverlight プロジェクトの FlashCards.UI.SL では、多くの WPF 機能を Silverlight の機能を使用して (真似して) 再現しています。
Silverlight XAML の作成とデータ バインドの使用では、.NET と WPF のスキルが大いに役に立ちます。Silverlight 4 ではなく Silverlight 3 を選んだのは、Windows Phone Silverlight ランタイムのバージョンが 3 であり、Silverlight から Windows Phone への移植をできるだけ容易にするためです。そして、まさに意図したとおり、Silverlight から Windows Phone への移植をとても簡単に行うことができました。Silverlight アプリケーションを Windows Phone で実行できるようにするためにかかった日数は、3 日程度でした。
左下の図を見るとわかるように、Windows Phone UI プロジェクトの FlashCards.UI.Phone ファイルの多くは (下の画像で折りたたまれた状態で表示されているフォルダーも含めて) リンク ファイルであり、 Silverlight Web アプリケーション実装の FlashCards.UI.SL にリンクしています。
リンクできなかったファイルは、Views フォルダーの下にあります。その 1 つである XAML ファイルは、Windows Phone でのページの表示方法に直接関係しています。携帯電話の画面は非常に小さいので、表示できるオブジェクトの数も少なくなります。このため、XAML の実装内容は似ているものの、若干異なっています。
通常の C# コードとは異なり、XAML は #ifdef をサポートしていないので、ゲームのすべてのビューについて新しい XAML を作成する必要がありますが、この場合も既存の XAML の内容の大部分を流用することができます。
この実装については取り上げるべき内容が膨大にあるため、ここでは詳しくは取り上げません。ソース コードがあるので、ぜひダウンロードしてください (ドキュメントもあります)。また、Channel 9 でショート ビデオ (英語) を公開しています。
Flashcards.show のバージョン 2 をサポートしてくれた Arik Poznanski 氏に感謝します。
Twitter では、Windows Phone に関する発表をツイート (WP7DEV) しているのでフォローしてみてください。
私のツイート (Yochay) もぜひフォローしてください。
無料ツールをお試しください。無料のトレーニングや無料の Jump Start ビデオ コースについてもぜひご利用ください。