今回のテーマは「クラウド ファースト時代のアーキテクチャ・システム構築の革新」ということでしたが、数年先のビジョンを提示してマイクロソフトプラットフォームの先進性をアピールするというより、キャズム理論でいうところのアーリーアダプターとアーリーマジョリティとの断絶を、アーキテクチャに対する思考様式で埋めるためのセッション構成を意識しました。（その反面クラウドネイティブな方々には少し物足りない内容だったのかも知れません。）

私とアークウェイ 福井さんのほうでは、クラウドアプリケーション設計における関心事がオンプレミスのそれとは変化してきていることを説明しました。今回最も重要なメッセージは「これからのクラウドアプリケーションではクラウドインフラに障害が起きることを前提に、分析・設計を行うべき」というものです。

何度か外部セミナーなどで紹介していますので、以下の図を既にご覧になっている方もいらっしゃると思いますが、指標としてはシステムが完全であることを追及する「平均故障間隔（Mean Time Between Failure）」よりもシステムの障害からいかに早く復旧できるかを追及する「平均復旧時間（Mean Time To Repair）」のほうを重要視するということです。

今回はその障害を前提としたクラウドアプリケーション構築の視点として以下の2点を中心に説明しました。

• 障害の発生に備えるための分析
• 負荷を管理するための設計

これより先の説明はぜひセッション資料と動画でお楽しみください。こちらのセッション2-1になります。
https://www.microsoftvirtualacademy.com/training-courses/maf14

MVA（Microsoft Virtual Academy）でご覧いただければ、10問ほどの理解度チェックを受けることができます。

こういうテスト的なものは本能的に避けたくなる方もいらっしゃいますが（私もそうですので）、むしろ先にチェックいただくと、セッションの最重要ポイントを押さえておけるように作成したつもりです。

セッション資料はもとより、50分ほどの動画をチェックするより多くのポイントが獲得できるのも、お得です。

来月に開催される GoAzure 2015 へのご参加登録がまだの方は合わせてどうぞ！

これらを実現するアプリケーションの典型的なアーキテクチャとはどのような特徴を持つのでしょうか？
私は以下の図のように考えています。

図１：モダンアプリケーションの典型的なアーキテクチャ

考察の出発点は、やはりデバイス類が多様化かつ高性能になったということです。ほんの少し前の時代のPCより高性能なスマートフォンも珍しくなくなった現在、シンクライアント時代のようにサーバー側でロジックを処理し、その結果を表示用データとともに生成し、デバイス側はレンダリングだけ、といったスタイルではせっかくのスマートデバイスの能力が活かせません。むしろ、デバイス側でできる処理に必要なデータを提供し、加工や表示データの生成などのタスクを行わせることでデバイス本来の性能を活かすことができるはずです。最近ではBootstrapのようなレスポンシブなUIを実装しやすい技術も出てきて、デバイスの種類や画面サイズに応じて最適な表示を行うことが簡単にできるようになったため、サーバー側の負荷も減らすことができる上に対応デバイスの追加にも柔軟に対応することができます。そしてカメラやGPS、ジャイロセンサー、加速度センサー、光センサーなどのセンサー類を活かして、よりリッチなユーザー体験を提供できるようになりました。

言わばデバイス側がリッチクライアント化しつつあるために、バックエンドのサーバーとオフライン状態になっても多くのタスクを問題なくこなすことができるようになってきています。もう１つ、クライアントとサーバー間のインターフェイス業界標準プロトコルを利用することで、デバイスとプラットフォーム間が疎結合化され、一方の変更がもう一方へ悪影響を与えるリスクがかなり減りました。

しかしながら、情報の流れはクライアントからサーバーへの一方通行とは限りません。例えば株価や在庫の変動、ニュース速報などサーバー側で起きたイベントを適切なタイミングでクライアント側に通知したい状況も多くなってきています。従来なら定期的にクライアント側からサーバー側へポーリングを行っていたでしょうが、それでは無駄にデバイスのバッテリーを消費してしまいます。そのような場合サーバー側からクライアント側にプッシュ通知することで、サーバー側の変更を素早く反映できます。また、オフライン状態にあったクライアントがつながり次第サーバー側の変更を同期することもできます。

こうやって見ると、クライアントとサーバーとの間のタスクの分担がクライアント側に寄った分、サーバー側の負担が軽くなったような感じがします。このようなアーキテクチャは「Thin Client」に対して「Thin Server」と呼ばれることがあります。WindowsストアアプリはまさにこのThin Serverアーキテクチャを採用していると言えます。（Thin Serverアーキテクチャについては丸山 不二夫先生のFacebook「ノート」に詳しい考察が載っています。）

では、今まで議論してきたモダンアプリケーションのアーキテクチャにマイクロソフト技術を適用してみます。

アーキテクチャを検討するに当たっては、どのような制約があるかを意識する必要があります。制約の内容によっては適用される技術が変わってきます。また、アーキテクチャを決定するためにその他の重要な要素としては、シナリオ、品質要件（非機能要件）がありますが、今回のシナリオは、顧客との関係を深めるためのキャンペーン用Webサイトを構築する、とします。

制約としては以下のようなものが考えられます。
. スマートフォン、タブレット、PCなど、ほとんどどのデバイスからでもアクセスできる。
. Facebook、Twitter などとのSNS連携に対応する。
. 顧客情報など秘匿性の高いデータはクラウドに保存しない。
. クラウドからオンプレミス環境のシステムへ安全にアクセスできる。
. 従業員は社内システムのアカウントを使って、クラウドへのシングルサインオンに対応する。
. 顧客から興味のあるキーワードを聞いておき、関連する情報やニュースを一斉に配信する。

これらの要件を満たすための技術選択についてまとめてゆきます。

1. マルチデバイス対応
マルチデバイス対応には、Webとネイティブアプリの両方の選択肢があります。ネイティブアプリには、各デバイスの機能を100%活用できる反面、配布の問題があります。今回はキャンペーンでもありますので、Webアプリ形式にします。表示はASP.NET MVCでレスポンシブデザインに対応します。また、データのやり取りはASP.NET Web APIを使いRESTベースでBLOBデータ以外は基本的にJSON形式で行います。またキャンペーン中にアクセスが急増した場合の対策としてAzure Web Sitesにアプリケーションをホストし、オートスケーリング機能を活用します。

2. ハイブリッド対応
顧客情報はオンプレミス環境に従来から顧客データベースがあるので、こちらと連携することにします。VPN環境を構築することも考えられますが、期間限定のためあまり環境を変えたくないことと、AzureホストサービスとしてWeb Sitesを選択したので、Hybrid Connectionsの採用を決定しました。（注：2014/9/30現在Hybrid Connectionsはプレビュー版のため、参考情報あるいは評価目的にてご利用ください。）

3. 認証
Webサイトを提供する企業の従業員は、既に自社内のActive Directoryで認証されています。その資格情報を同じく自社内のADFS（Active Directory Federation Services）を使ってSAMLなどクラウドで利用可能なセキュリティトークンに変換し、Azure Active Directoryでシングルサインオンさせます。顧客に対しても同じくAzure Active DirectoryでFacebookやTwitterアカウントで認証可能です。

4. 通知
サーバーからの情報をリアルタイムに漏らさず通知したいのならSignalRが適切と考えられますが、今回のシナリオではNotification Hubのほうが合っているでしょう。マイクロソフト、Apple、Googleがそれぞれ持っている既存の通知インフラを活用できるのも、マルチデバイス対応の点で優れていると考えられます。

これまでの技術選択を反映した初期アーキテクチャを以下に描いてみます。

図２：キャンペーンWebサイトの初期アーキテクチャ

この初期アーキテクチャをベースにスケーラビリティ、可用性、パフォーマンスなどの品質要件、新たな機能要件などを検討しながら徐々に洗練させてゆきます。

マイクロソフトでは、代表的なシナリオパターンにおける参照アーキテクチャを公開しているので、こちらを参考に自分なりの初期アーキテクチャを描いてみてはどうでしょうか。

前回はCloud OSによって、同じアプリケーションがオンプレミスでもクラウドでも動作するようになる、という話をしました。では、今日なぜそのようなアプリケーションが必要とされているのでしょうか？そしてどのような価値をもたらすのでしょうか？

従来の業務アプリケーションは、財務会計、生産管理、顧客管理、人事給与、など定型的な業務プロセスを正しい順番に実行することでデータが一貫されていることを重視しています。これらのアプリケーションは多くの企業で基幹業務・バックオフィスシステムの一部を構成し、それがゆえに10年以上のライフサイクルを持つものも珍しくありません。

これに対し、現在はより直接的に業務を支援し、顧客やパートナーのビジネススピードや消費者のライフスタイルに合わせたソリューションを提供することがITに求められています。キャズム理論で有名なジェフリー・ムーアは前者を「Systems of Record」、後者を「Systems of Engagement」と名付けましたが、今日のアプリケーションにはまさにユーザーとのエンゲージメントを高めるための機能や仕掛けなどが求められていると言えるでしょう。マイクロソフトではこのようなアプリケーションのことを「モダンアプリケーション」と呼んでいます。

しかしながら、従来型の業務アプリケーションは役割を終えて、全てがモダンアプリケーションにシフトしてゆく、ということではありません。むしろモダンアプリケーションは、従来型の業務アプリケーションの能力を包含し拡張され、より多くのユーザーにリーチすることでビジネスを広げるという新しい価値を提供するのです。

また、モダンアプリケーションがクラウドで動作するのは、社内ユーザーよりもはるかに多くの社外の顧客やパートナー、消費者がアプリケーションを利用するからであり、かつこれらのユーザーには季節による変動や市場の変化への迅速な対応が求められるからです。

 
図1: モダンアプリケーションと従来型の業務アプリケーションとの関係

ではモダンアプリケーションはどのようなビジネス機会をもたらすのでしょうか？以下３点で説明します。

1. 顧客エクスペリエンスの向上

モダンアプリケーションでは、利用シーン（オフィス内、移動中、家庭内、など）によって異なるデバイスを使っても、同じシナリオに沿ってアプリケーションやデータを利用できます。また、タッチやジェスチャー、音声認識などのNUI（Natural User Interface）技術と高DPI・高速なグラフィック能力・高解像度オーディオなどの能力を持つデバイスとの組み合わせが高い没入感を提供します。

これらが顧客エクスペリエンスを向上させ、結果的に顧客のロイヤリティを高めることにつながります。

例えば、英国の保険会社であるAvivaは、モバイルアプリを自動車のドライバー向けに配布し、運転中の挙動データを収集します。それらのデータはオンプレミス環境の見積システムと連携し、個人別に保険の見積額を算出するためのスコアを提示します。また、ドライバーはこのスコアをソーシャルメディアで他のドライバーと共有し競うことで、ますます安全運転を心掛け保険料を低く抑えることができます。

詳細は”UK Insurance Firm Uses Mobile App and Cloud Platform to Track Driving Behavior”で参照することができます。

図2：Aviva のモバイルアプリとの連携による保険料見積システム

2. 新しい市場への進出を含む顧客リーチの拡大

モダンアプリケーションがクラウドに展開されるということは、世界中の顧客とつながる機会が得られるということです。しいては現在のビジネスに新しい機会をもたらしたり、新しい市場への進出をサポートすることになります。また、要求に応じて柔軟にスケールできるので、システムリソースの制限によりビジネス機会を逸することを気にする必要がありません。

例えば、英国の航空会社であるeasyJetはヨーロッパを代表する格安航空会社として知られていますが、乗客自ら座席予約ができるシステムについて天候を始めとした状況の変化に迅速に対応でき、かつ大きな投資をせずに済むソリューションを探した結果、座席予約システムをクラウドに拡張し、オンプレミス環境にある発券システムとのハイブリッド構成を採用しました。これによりフライトの検索、座席の選択、そしてチケットの購入という一連の予約プロセスがシームレスかつスケーラブルにつながり、より多くの顧客に満足してもらえるようになりました。

詳細は”Leading European Airline Improves Service and Scalability with Hybrid Cloud Solution”で参照することができます。

図3：EasyJetの座席予約システム

3. ビジネスパフォーマンスの向上

インメモリDB機能を導入することで従来よりもアプリケーションの性能を大きく向上させることが可能になります。また、前回説明したようにビッグデータと呼ばれる急速に増大するデータ、とりわけ大量の非構造化データや複雑なデータを収集し、新しい分析ツールで自ら顧客や市場のトレンドを理解し迅速に変化に対応できるようになります。更に今後は機械学習による予測分析によって、ビジネスの変化を先んじて捉えてほぼリアルタイムに顧客の要求に応えることも可能になるでしょう。

例えば、ジブラルタルに本社があるオンラインゲームの最大手であるbwin.partyでは、毎日100万人以上がスポーツやカジノゲーム、ポーカーなどに賭けています。2010年の合併でシステムを統合しましたが、以来それぞれの顧客からのアクセスによる深刻な性能問題に悩まされました。この課題に対しbwin.partyはSQL Server 2014のインメモリOLTP機能を採用することで、15,000リクエスト/秒から250,000リクエスト/秒という驚異的な性能を得て、コストを削減しながら売上を拡大することができました。

詳細は”Gaming Site Can Scale to 250,000 Requests Per Second and Improve Player Experience”で参照することができます。

図4：bwin.partyサイトの性能のbefore/after

Cloud OSの能力を引き出して大きなビジネス価値を生み出す、そのためにはアプリケーションがいかに多くの顧客やパートナー、消費者を惹きつけ、満足度を高めるかが重要です。3社の事例を見てもわかるようにマイクロソフトはモダンアプリケーションを開発するのにまったく異なる技術スキルを要求してはいません。始めは小さくともインパクトのあるユーザー体験シナリオを考えて、実践してみてください。

次回はモダンアプリケーションの典型的なアーキテクチャと技術の適用例について議論します。

デバイス、アプリケーション、ビッグデータ、そしてクラウド。これらの領域に起きている変化はメガトレンドと呼ばれ、ITの世界に大きなシフトを起こすものとして日々色々なニュースが流れているのはご存知のことと思います。

調査会社も様々な数字を挙げて、ITにおいて大きな機会があることを伝えています。
例えば、
· 17か国に渡るインフォメーションワーカーの52%が仕事に3つ以上のデバイスを利用している（出典：Forrester Research）。
· 外部向けアプリケーションの実装の25%がモビリティ、クラウド、分析とソーシャルへの対応に費やされるであろう（出典：Gartner）。
· 2020年までにデジタルデータの総サイズは40ゼタバイトになり、そのうちの90%は非構造化データとなるであろう（出典：IDC）
· 2020年までにIT総支出の45%はクラウド関連になるであろう（出典：Forrester Research）。

このようにクラウドを始めとした技術革新のスピードは速く、その技術革新を前提としたビジネスへの応用もますます活発になってきています。

この状況は技術者にとっては活躍の機会が増えて非常にうれしいことである一方、今利用可能な技術のなかから何を採用するか、いつどのようなかたちでクラウドに対応するか、といった選択の責任も重くなってきていることを実感されている方も多いのではないでしょうか？

でも悲観的になることはありません。技術とビジネスの環境変化に適応するために技術者が行わなければならない意思決定をサポートするためにプラットフォームがあるのです。

マイクロソフトはそのような環境の変化に対応するためのプラットフォームのビジョンと戦略を「Cloud OS」と呼んでいます。

技術者にとってCloud OSの最も魅力的な点を挙げるとしたら、以下のことになるでしょう。
「Cloud OSならあなたが１つのスキルセットをマスターすればアプリケーションやデータをどこにでも配置できる」

あらゆるアプリケーションをすぐにクラウドに乗せる、という決定を下せる企業や組織はないでしょう。でもその間も技術変革は続いています。いよいよクラウドに乗せるという決定が下されたときに技術者としてすぐに対応できるものでしょうか？

Cloud OSであればオンプレミスでもクラウドでも同じ基盤技術を利用できるため、オンプレミスからクラウドへの移行もスムーズに行きます。技術者であるあなたは、来るべきクラウドへの移行の時期が熟するのを待ちつつ、オンプレミス環境で以下の技術を活用し準備を整えておけばよいのです。

1. フレキシブルな開発環境
Cloud OSでは従来からの.NET Frameworkに加え、JavaScript、Java、PHP、Ruby、Pythonといった様々な言語でアプリケーションを開発するためのSDKやライブラリを提供しています。マイクロソフトはMicrosoft Open Technologies（https://msopentech.com/）という関連会社を設立し、OSSに対しても多大な投資を行っています。また、チーム開発基盤であるTeam Foundation Serverの様々な機能をVisual Studio Onlineというクラウドサービスとしても利用可能です。つまり、オンプレミス環境で運用されるアプリケーションだとしてもクラウド上で開発・テストを行うことができます。

2. 一元化された管理
System Centerは自社やお客様のデータセンターのみならず、Azureにあるコンピューティングリソースのプーリングやプロビジョニングなどの自動化やシステム運用を一元的に管理できます。果てしなく増大するストレージ容量、地理的にまたがるシステムの冗長構成やディザスタリカバリーへの対策も、クラウドを含めて管理可能です。

3. 共通のアイデンティティ
Active Directoryのグループポリシーを採用する企業や組織は多いですが、クラウドではまったく別の認証技術の利用を余儀なくされているのが一般的だと思います。システムのハイブリッド対応に認証は避けて通れない技術の１つですが、Active Directory Federation ServiceとAzure Active Directoryを利用すれば、他のクラウドも含めてシングルサインオン環境を構築することが易しくなります。逆にクラウドからActive Directory技術を適用することも簡単なので、SaaSマーケットへの参入を検討しているISVには強力な技術ソリューションと思われます。

4. 統合化された仮想化技術
AzureのコンピューティングリソースはHyper-V技術をベースとしたファブリックコントローラーで制御されています。つまり、Hyper-Vの仮想マシンはオンプレミスとクラウドを自由に行き来できるということです。また仮想ネットワークやファイルシステムの仮想化も高レベルで統合されているので、これからのアプリケーションは自らの配置場所を意識することはほとんどなくなってゆくでしょう。ちなみに前述のSystem Centerを使えば仮想マシンやオブジェクト、データの移動が更に簡単になります。

5. 包括的なデータプラットフォーム
RDBMSとしてSQL ServerはPaaSとしてのSQL Databaseに加え、IaaSとして仮想マシン上に配置することで、スケーラビリティや性能（SQL Server 2014からIn-Memory OLTP技術も取り込みました）はもちろんコストやコンプライアンスなどの面でも柔軟な選択肢を提供します。またNoSQLとしてはAzure Storageがあり、そしてBig Data を処理するための業界標準プラットフォームであるHadoopもオンプレミス環境に加え、HDInsightというクラウドサービスとしても利用可能です。トータルとしてあらゆる種類のデータを大量にかつ高速に処理可能なデータプラットフォームを提供しています。

このようにCloud OSは複数のCPU、ストレージ、ネットワークを抽象化し、しかもアプリケーションを配置・運用できる場所をクラウドにまで広げるという意味で、まさにクラウド時代のプラットフォームと言えます。

前述の5つの技術要素を活用してソフトウェアの設計・開発・運用を行えば、あなたのアプリケーションにクラウドのコア特性を取り入れたことになります。

図１： Cloud OSによる一貫したプラットフォーム（出典： Introducing Cloud OS for architects - https://download.microsoft.com/download/B/C/8/BC864212-F00D-483D-9CAD-CE5593EE010D/Introducing_Cloud_OS_for_Architects.pdf）

もちろんCloud OSはソフトウェア技術者に留まらず、プラットフォームとしてあらゆるステークホルダーに多くの恩恵をもたらします。

まとめとして、ここでは大きく分けて４つの領域におけるCloud OSのメリットを紹介します。

1. データセンターを変容する
これまでデータセンターは必要に応じてサーバーを増やしながら成長してきました。その結果データセンターの規模は不規則に広がり複雑化したため、管理が困難かつコスト高になってきました。このような状況において仮想化によるサーバーのコンソリデーションは増大する複雑性に対する解決策になります。
Cloud OSではこれを更に進化させて、個別のサーバーよりむしろコンピューティングリソースの単位でデータセンター全体を管理するというアプローチで、自社であってもサービスプロバイダーのものであっても、あるいはパブリッククラウドであっても、アプリケーションが必要とするときにコンピューティング、ネットワーク、及びストレージの能力を用意できます。

2. あらゆるデータに対する洞察を解放する
OLTPシステムに代表される従来の構造化されたデータセットからフラットファイルに存在するログやストリーミングデータまで、現在はかつてないほど多くのデータソースが存在します。このデータの多様性と蓄積される速度の増大に対処し、これら大容量のデータから利用可能な情報を取り出してビジネス上の洞察を得ようというのが、ビッグデータの中心的なアイデアです。
Cloud OSではあらゆる種類のデータから、新しい洞察を得るために情報をマイニングできる包括的なデータプラットフォームを提供します。しかも毎回ITの専門家にリクエストすることなしに、あらゆる人々が自らExcelやPower BIのような慣れているツールを利用して深い洞察を生み出し、それを視覚化し、共有することができます。

3. 人中心のITを強化する
デバイスの増加とともに、ITのコンシューマー化が進み、ユーザーはより頻繁に仕事で“サポート外のデバイス”を持ち込むようになりました。ユーザーはスマートフォンから個人と会社のメールの両方にアクセスできることを望み、タブレットからイントラネットやダッシュボードほかファイアウォールの内側にあるリソースにアクセスできることを望んでいます。
Cloud OSでは会社のガバナンスと機密データの管理を維持しながら、どのようなデバイスでも利用できるよう、IT管理者とユーザーの双方をサポートします。

4. ビジネスアプリケーションを革新する
デバイスがインターネットに接続し、大量のデータを駆使してリアルタイムにビジネス上の意思決定に必要な情報を得る、というシナリオが既に当たり前となっている現在、ビジネスアプリケーションが提供すべき機能とそれを構築すべきスピードがますます加速することは間違いないでしょう。しかし同時にエンタープライズにとってどのようなビジネスアプリケーションを構築するか、あるいは導入するかという戦略的な意思決定がより重要になる以上、いくら斬新な技術であろうとビジネス状況を無視して適用することも現実的ではありません。
Cloud OSの強みはまさにビジネス成長のペースに合わせて、必要とされる技術を迅速に取り入れスケールさせる点にあります。

これまで説明してきたようにCloud OSはビジネスとITに機敏性をもたらす統合プラットフォームのビジョンと戦略であり、あらゆる場所から、あらゆるデバイスへユーザーにアプリケーションやデータを提供するということを宣言したことで、マイクロソフトの新たな方向性・世界観に舵を切ったことを明確にしました。

次回はビジネスアプリケーションの革新について、さらに詳しく説明してゆきたいと思います。

de:codeの「Architecture」トラックでは、技術のトレンドに対する高い視点を持ち、長期間に渡ってシステムを進化させ続ける、そのための基盤技術を俯瞰していただくためにお役に立つであろう11のセッションをご提供する予定です。

わたしたちはこれまで事業会社、ITベンダーの技術者や管理者、およびコンサルティングファームのコンサルタントなど様々な立場の方々と意見交換をさせていただいてきましたが、それらの方々に通底する「いづれ自社（あるいはお客様）はクラウドへ打って出てゆくだろう。その時今までのシステム設計の常識がクラウドでも通用するのか？ひょっとしたら今までの常識が非常識になってきているのではないか？」という問題意識に寄り添い、マイクロソフトのクラウドに対する取り組みや基盤技術の選択についてのガイダンスをお伝えしてきました。その手段としてMicrosoft Architect Forum、Tech Fielders といったセミナーや、各種コミュニティでの交流、あるいは現場の技術者の方々とのディスカッション、このFacebookページが存在します。

そして、今回このde:codeに「Architecture」トラックを設けることにより、buildで発表された新技術と、クラウドにも展開可能なアーキテクチャを構築するための基本的知識という、最善の組み合わせの場を提供いたしたいと思っております。

それは一方的な知識の伝達ではなく、設計手法、パターンやガイダンス、そして日本を代表するアーキテクトによるパネルディスカッションという様々なアプローチを通じて、ご参加の皆様の知的好奇心を刺激し設計に対する思考を更に深める機会とならなくてはいけないと考えております。

もちろんトラックのなかから興味のあるセッションだけをつまみ食いいただいてもいいですし、あるいはパネルだけにご参加いただいても構いません。

クラウド時代の本格的到来の前に、もう一度アーキテクチャの重要性について考え、意見交換をし、次の一歩を踏み出すためのきっかけとなれば幸いです。

皆様のご参加をお待ちしております。

de:codeでのセッション詳細はhttps://www.microsoft.com/ja-jp/events/developer/session.aspx をご覧ください。

なお、de:code の情報をいち早くメールで配信するサービス 『de:code アップデート』 も提供しております。ご登録いただいた方の中から抽選で400 名様に de:code ロゴ入り モレスキン ノートブックをプレゼントいたしますので、de:codeのご参加を予定されていない方もぜひご登録ください。
ご登録はこちら： https://www.event-marketing.jp/events/decode/sendmail/SendMailRegist.aspx

1. Windows ストアアプリ プロジェクトの追加

   Windows 8 ストアアプリの作成はスクラッチから行うのではなく、日本マイクロソフトが公開している「Windows 8 アプリ開発体験テンプレート」を利用します。こちらの URL から 「Basic Photo テンプレート XAML/C# 用 Version 1.0」 をダウンロードして [ご利用方法] に従い設定します。
       
   
   ソリューションエクスプローラーでソリューション フォルダを右クリックして、[追加] – [新しいプロジェクト] を選択します。
   
   
   [新しいプロジェクトの追加] ダイアログで [Visual C#] – [Basic Photo for Win8] を選択し、プロジェクト名を ”PicMgrClient” とします。.NET Framework のバージョンは 4.5 であることを確認し、[OK] ボタンを押します。
   
   
   ウィザードから生成された PicMgrClient プロジェクト下の [DataModel] フォルダを右クリックして、[追加] – [既存の項目] を選択します。
    
   
   [PicMgr.WebApi] フォルダ下の [Models] フォルダから “Picture.cs” を選択し、[追加] ボタンの右にある下矢印（▼）をクリックし、[リンクとして追加] を選択します。これは Azure サービスと同じ Picture モデルクラスを使用して、データコントラクトを一致させるための処置です。
   
   
   

2. Azure サービスとの連携ロジックの追加

   ソリューションエクスプローラーから [PicMgrClient] プロジェクト下の [DataModel] フォルダから “SampleDataSource.cs” を開きます。
   SampleDataSource() コンストラクタをコメントアウトします。これはハードコーディングされたコンテンツを使用せず、グループおよびアイテムのコレクションを Azure サービスから取得して作成するためです。
   

   //public SampleDataSource()
   //{
   ・・・（省略）
   //}

   
   System.Collections.Specialized に続き、以下の名前空間の宣言を追加します。（黄色に塗られた部分です。）
   

   using System.Collections.Specialized;
   using System.IO;
   using System.Net.Http;
   using Windows.Data.Json;
   using PicMgr.Models;
   using System.Threading.Tasks;

   
   SampleDataItem() デフォルトコンストラクタを追加します。
   

   public SampleDataItem()
       : base(String.Empty, String.Empty, String.Empty, String.Empty, 
   String.Empty)
   {
   }

   
   SampleDataSource クラスに Azure サービスからデータを取得するメソッドを追加します。これは Azure 側で実装した Web API に対して非同期で HTTP GET 呼び出しを行います（client.GetAsync）。その後、HTTP コンテンツを文字列として読み込み（response.Content.ReadAsStringAsync）、文字列を JSON 配列として扱えるようパースします（JsonArray.Parse）。serviceURI の “websites-name” には「Windows ストアアプリから Windows Azure へアクセスする（その1）」で作成した、Web Site の名前（本ブログの例では”claudia-picmgr”としました）で置き換えます。
   

   public static async Task LoadRemoteDataAsync()
   {
       var serviceURI = 
   "https://websites-name.azurewebsites.net/api/Pictures";
   
       using (var client = new System.Net.Http.HttpClient())
       {
           client.MaxResponseContentBufferSize = 1024 * 1024;
   
           HttpResponseMessage response = 
   await client.GetAsync(serviceURI as string);
   
           response.EnsureSuccessStatusCode();
   
           var result = await response.Content.ReadAsStringAsync();
           var pictures = JsonArray.Parse(result);
       }
   }

   
   この JSON 配列からキー / 値の情報を取り出し、Windows 8 ストアアプリのグリッドビューにグループを固定で１つとそのグループに属する項目を画像の数だけ作成するメソッドを追加します。（ご自分の Azure 環境でお試しになる際は、下記コード内の BLOB URL から画像を入手し、ご自分の Azure Storage BLOB へアップロードした上で URL を置き換えてください。）
   

   private static void CreatePicturesAndPictureGroups(JsonArray array)
   {
       SampleDataGroup group = new SampleDataGroup("Group-1",
   "クラウディア",
   "クラウディア カレンダー画像",
   "https://claudiapicmgr.blob.core.windows.net/pictures/Claudia_pen.png",
   "Group Description: Lorem ipsum dolor sit amet, 
   consectetur adipiscing elit. Vivamus tempor scelerisque lorem in 
   vehicula. Aliquam tincidunt, lacus ut sagittis tristique, 
   turpis massa volutpat augue, eu rutrum ligula ante a ante"
       );
   
       foreach (var item in array)
       {
           var obj = item.GetObject();
           SampleDataItem picture = new SampleDataItem();
   
           foreach (var key in obj.Keys)
           {
               IJsonValue val;
               if (!obj.TryGetValue(key, out val))
                   continue;
   
               switch (key)
               {
                   case "UniqueId":
                       picture.UniqueId = val.GetString();
                       break;
                   case "Title":
                       picture.Title = val.GetString();
                       break;
                   case "SubTitle":
                       picture.Subtitle = val.GetString();
                       break;
                   case "Description":
                       picture.Description = val.GetString();
                       break;
                   case "ImagePath":
                       picture.SetImage(val.GetString());
                       break;
               }
           }
   
           if (group != null)
           {
               picture.Content = picture.Description;
               picture.Group = group;
               group.Items.Add(picture);
           }
       }
       _sampleDataSource.AllGroups.Add(group);
   
   }

   
   LoadRemoteDataAsync メソッドから今のメソッドを呼び出す処理を追加します。（黄色に塗られた部分です。）
   

   var pictures = JsonArray.Parse(result);
   
   CreatePicturesAndPictureGroups(pictures);

   
   PicMgrClient プロジェクトの “App.xaml.cs” を開き、OnLaunched ハンドラ内でここまで実装しました LoadRemoteDataAsync メソッド呼び出しを追加します。（黄色に塗られた部分です。また、ソースコード内のコメントは削除しています。） 
   

   protected override async void OnLaunched(LaunchActivatedEventArgs args)
   {
       Frame rootFrame = Window.Current.Content as Frame;
   
       if (rootFrame == null)
       {
           rootFrame = new Frame();
           SuspensionManager.RegisterFrame(rootFrame, "AppFrame");
   
           if (args.PreviousExecutionState == 
   ApplicationExecutionState.Terminated)
           {
               try
               {
                   await SuspensionManager.RestoreAsync();
               }
               catch (SuspensionManagerException)
               {
               }
           }
   
           await SampleDataSource.LoadRemoteDataAsync();
   
           Window.Current.Content = rootFrame;
       }
       if (rootFrame.Content == null)
       {
           if (!rootFrame.Navigate(typeof(GroupedItemsPage), "AllGroups"))
           {
               throw new Exception("Failed to create initial page");
           }
       }
       SettingsLoad();
   
       Window.Current.Activate();
   }

   
   以下の名前空間の宣言を追加します。（黄色に塗られた部分です。）

   using PicMgrClient.Common;
   using PicMgrClient.Data;

   
   [Shift] + [Ctrl] + [B] キーを押し、PicMgrClient プロジェクトをビルドします。正常にビルドできたら、デバッグモードで起動してみてください。デフォルトのスプラッシュ画面が表示された後、以下のようなグリッドビューが表示されると思います。（画像の読み込みには若干時間がかかるかも知れません。）
   
   
   Windows 8 ストアアプリから Azure サービスへのアクセス自体は正常に動作していますが、画像が切れているようです。グリッドビューのスタイルを調整して、正しく表示されるようにします。
   

3. グリッドビューのスタイル調整

   PicMgrClient プロジェクトの “GroupedItemsPage.xaml” を開き、以下のように "Grouped Items" という名前の<GridView> タグを探します。

   <!-- ほとんどのビューステートで使用される水平スクロール グリッド-->
   <SemanticZoom x:Name="itemGridView"
                 Grid.RowSpan="2"
                 Padding="116,137,40,46">
       <SemanticZoom.ZoomedInView>
           <GridView
       AutomationProperties.AutomationId="ItemGridView"
       AutomationProperties.Name="Grouped Items"
       ItemsSource="{Binding Source=
   {StaticResource groupedItemsViewSource}}"
       ItemTemplate="{StaticResource Standard250x250ItemTemplate}"
       SelectionMode="None"
       IsSwipeEnabled="false"
       IsItemClickEnabled="True"
       ItemClick="ItemView_ItemClick">

   
   

   PicMgrClient プロジェクト下の [Common] フォルダにある “StandardStyles.xaml” を開き、上の黄色で塗られた「Standard250x250ItemTemplate」 を探し、定義を確認します。
   

   <!-- GroupedItemsPage と ItemsPage に表示される、
   グリッドに適した 250 ピクセルの四角形のアイテム テンプレート -->
   <DataTemplate x:Key="Standard250x250ItemTemplate">
       <Grid HorizontalAlignment="Left" Width="250" Height="250">
           <Border Background=
   "{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
               <Image Source="{Binding Image}" Stretch="UniformToFill" 
   AutomationProperties.Name="{Binding Title}"/>
           </Border>
           <StackPanel VerticalAlignment="Bottom" 
   Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
               <TextBlock Text="{Binding Title}" 
   Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" 
   Style="{StaticResource TitleTextStyle}" Height="60" 
   Margin="15,0,15,0"/>
               <TextBlock Text="{Binding Subtitle}" 
   Foreground="{StaticResource 
   ListViewItemOverlaySecondaryForegroundThemeBrush}" 
   Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" 
   Margin="15,0,15,10"/>
           </StackPanel>
       </Grid>
   </DataTemplate>

   
   これを見ると、「Standard250x250ItemTemplate」 の定義を修正すればよいようです。ただし、直接 “StandardStyles.xaml” の内容は変更しません。代わりにカスタマイズされたアイテムテンプレートを定義し、そちらを適用します。
   
   ソリューションエクスプローラーから PicMgrClient プロジェクトを右クリックして、[追加] – [新しい項目] を選択します。[新しい項目の追加] ダイアログから “リソース ディクショナリ” を選択し、ファイル名を “MyResourceDictionary.xaml” とし、[追加] ボタンを押します。
   

   
   “Standard250x250ItemTemplate” の定義をコピーし、<ResourceDictionary> タグの中に以下のテンプレート定義として追加します。修正した個所は黄色に塗られた部分です。Width と Height は元の画像が 16:9 のためにうまく適合するように、Stretch も縦横比を維持しながら、全体のイメージの表示に必要な領域を 100% 使えるように指定しています。
   

   <DataTemplate x:Key="MyGroupedItemTemplate">
       <Grid HorizontalAlignment="Left" Width="384" Height="216">
           <Border Background=
   "{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
               <Image Source="{Binding Image}" Stretch="Uniform"  
   AutomationProperties.Name="{Binding Title}"/>
           </Border>
           <StackPanel VerticalAlignment="Bottom" 
   Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
               <TextBlock Text="{Binding Title}" 
   Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" 
   Style="{StaticResource TitleTextStyle}" Height="60" 
   Margin="15,0,15,0"/>
               <TextBlock Text="{Binding Subtitle}" 
   Foreground="{StaticResource 
   ListViewItemOverlaySecondaryForegroundThemeBrush}" 
   Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" 
   Margin="15,0,15,10"/>
           </StackPanel>
       </Grid>
   </DataTemplate>

   
   
   “GroupedItemsPage.xaml” へ戻り、以下のように "Grouped Items" という名前の<GridView> タグの “ItemTemplate” 属性の値を以下のように変更します。（黄色に塗られた部分です。）
   

   <!-- ほとんどのビューステートで使用される水平スクロール グリッド-->
   <SemanticZoom x:Name="itemGridView"
                 Grid.RowSpan="2"
                 Padding="116,137,40,46">
       <SemanticZoom.ZoomedInView>
           <GridView
       AutomationProperties.AutomationId="ItemGridView"
       AutomationProperties.Name="Grouped Items"
       ItemsSource="{Binding Source=
   {StaticResource groupedItemsViewSource}}"
       ItemTemplate="{StaticResource MyGroupedItemTemplate}"
       SelectionMode="None"
       IsSwipeEnabled="false"
       IsItemClickEnabled="True"
       ItemClick="ItemView_ItemClick">

   
   “StandardStyles.xaml” とカスタマイズされたアイテムテンプレートとをマージするには、”App.xaml” 内に以下のように定義を追加します。
   

   <ResourceDictionary.MergedDictionaries>
   
       <!-- 
           プラットフォームの外観の共通の要素を定義するスタイル
           Visual Studio プロジェクトおよびアイテム テンプレートで必要です
        -->
       <ResourceDictionary Source="Common/StandardStyles.xaml"/>
       <ResourceDictionary Source="MyResourceDictionary.xaml"/>
   </ResourceDictionary.MergedDictionaries>

   
   これで再びビルドし、デバッグモードで実行してみてください。
   

   
   今度はうまく表示されたはずです。
   では、他の部分も調整してみましょう。
   
   以下は “MyResourceDictionary.xaml” です。黄色で塗られた部分を追加します。
   

   <ResourceDictionary
       xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
       xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:local="using:PicMgrClient2">
   
       <DataTemplate x:Key="MyGroupedItemTemplate">
           <Grid HorizontalAlignment="Left" Width="384" Height="216">
               <Border Background=
   "{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
                   <Image Source="{Binding Image}" Stretch="Uniform"  
   AutomationProperties.Name="{Binding Title}"/>
               </Border>
               <StackPanel VerticalAlignment="Bottom" 
   Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
                   <TextBlock Text="{Binding Title}" 
   Foreground="{StaticResource 
   ListViewItemOverlayForegroundThemeBrush}" 
   Style="{StaticResource TitleTextStyle}" Height="60" 
   Margin="15,0,15,0"/>
                   <TextBlock Text="{Binding Subtitle}" 
   Foreground="{StaticResource 
   ListViewItemOverlaySecondaryForegroundThemeBrush}" 
   Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" 
   Margin="15,0,15,10"/>
               </StackPanel>
           </Grid>
       </DataTemplate>
   
       <DataTemplate x:Key="MyGroupDetailItemTemplate">
           <Grid Height="110" Width="480" Margin="10">
               <Grid.ColumnDefinitions>
                   <ColumnDefinition Width="Auto"/>
                   <ColumnDefinition Width="*"/>
               </Grid.ColumnDefinitions>
               <Border Background=
   "{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" 
   Width="110" Height="110">
                   <Image Source="{Binding Image}" Stretch="Uniform" 
   AutomationProperties.Name="{Binding Title}"/>
               </Border>
               <StackPanel Grid.Column="1" VerticalAlignment="Top" 
   Margin="10,0,0,0">
                   <TextBlock Text="{Binding Title}" 
   Style="{StaticResource TitleTextStyle}" TextWrapping="NoWrap"/>
                   <TextBlock Text="{Binding Subtitle}" 
   Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap"/>
                   <TextBlock Text="{Binding Description}" 
   Style="{StaticResource BodyTextStyle}" MaxHeight="60"/>
               </StackPanel>
           </Grid>
       </DataTemplate>
   
       <DataTemplate x:Key="MyStandard80ItemTemplate">
           <Grid Margin="6">
               <Grid.ColumnDefinitions>
                   <ColumnDefinition Width="Auto"/>
                   <ColumnDefinition Width="*"/>
               </Grid.ColumnDefinitions>
               <Border Background=
   "{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" 
   Width="60" Height="60">
                   <Image Source="{Binding Image}" Stretch="Uniform"/>
               </Border>
               <StackPanel Grid.Column="1" Margin="10,0,0,0">
                   <TextBlock Text="{Binding Title}" 
   Style="{StaticResource ItemTextStyle}" MaxHeight="40"/>
                   <TextBlock Text="{Binding Subtitle}" 
   Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap"/>
               </StackPanel>
           </Grid>
       </DataTemplate>
   
   </ResourceDictionary>

   以下は “GroupedItemsPage.xaml” です。黄色で塗られた部分を置き換えます。

   <!-- スナップの場合のみ使用される垂直スクロール リスト -->
   <ListView
       x:Name="itemListView"
       AutomationProperties.AutomationId="ItemListView"
       AutomationProperties.Name="Grouped Items"
       Grid.Row="1"
       Visibility="Collapsed"
       Margin="0,-10,0,0"
       Padding="10,0,0,60"
       ItemsSource="{Binding Source=
   {StaticResource groupedItemsViewSource}}"
       ItemTemplate="{StaticResource MyStandard80ItemTemplate}"
       SelectionMode="None"
       IsSwipeEnabled="false"
       IsItemClickEnabled="True"
       ItemClick="ItemView_ItemClick">

   
   

   以下は “GroupDetailPage.xaml” です。黄色で塗られた部分を置き換えます。
   

   <!-- ほとんどのビューステートで使用される水平スクロール グリッド-->
   <GridView
       x:Name="itemGridView"
       AutomationProperties.AutomationId="ItemGridView"
       AutomationProperties.Name="Items In Group"
       TabIndex="1"
       Grid.RowSpan="2"
       Padding="120,126,120,50"
       ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
       ItemTemplate="{StaticResource MyGroupDetailItemTemplate}"
       SelectionMode="None"
       IsSwipeEnabled="false"
       IsItemClickEnabled="True"
       ItemClick="ItemView_ItemClick">
   
       <GridView.Header>
           <StackPanel Width="480" Margin="0,4,14,0">
               <TextBlock Text="{Binding Subtitle}" Margin="0,0,18,20" 
   Style="{StaticResource SubheaderTextStyle}" MaxHeight="60"/>
               <Image Source="{Binding Image}" Height="400" 
   Margin="0,0,18,20" Stretch="Uniform" 
   AutomationProperties.Name="{Binding Title}"/>
               <TextBlock Text="{Binding Description}" Margin="0,0,18,0" 
   Style="{StaticResource BodyTextStyle}"/>
           </StackPanel>
       </GridView.Header>

   
   

   同じく “GroupDetailPage.xaml” です。黄色で塗られた部分を置き換えます。

   <!-- スナップの場合のみ使用される垂直スクロール リスト -->
   <ListView
       x:Name="itemListView"
       AutomationProperties.AutomationId="ItemListView"
       AutomationProperties.Name="Items In Group"
       TabIndex="1"
       Grid.Row="1"
       Visibility="Collapsed"
       Padding="10,0,0,60"
       ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
       ItemTemplate="{StaticResource Standard80ItemTemplate}"
       SelectionMode="None"
       IsSwipeEnabled="false"
       IsItemClickEnabled="True"
       ItemClick="ItemView_ItemClick">

                            
   こちらはオプションですが、スプラッシュ画面を変更するにはソリューションエクスプローラーから “Package.appxmanifest” をダブルクリックして開き、[アプリケーション UI] タブから [スプラッシュ スクリーン]のパスと [背景色] を適当に変更します。
    
   
   こちらの URL から画像を取得し置き換えると以下のようなスプラッシュ画面に変更できます。
   
   

4. まとめ

   これまで3回に渡って、Windows ストアアプリから Windows Azure へアクセスするためのサンプル アプリをステップ・バイ・ステップ形式にて説明してきました。コードやデータモデルがなるべくシンプルになるよう、何ヶ所か固定で定義してきましたが、どこを修正すればよいか大体当たりがつくようになったかと思われます。
   Windows 8 の一般発売まであと3日になりました。これからも多くの Windows ストアアプリが作成されるかと思いますが、バックエンドに Windows Azure をご利用いただき、 Windows 8・パブリッククラウドサービス双方の強みを活かしたアプリケーションの開発に、今回の説明が少しでもお役に立てば幸いです。
   
                        
   

本エントリーは前回説明しました、「Windows ストアアプリから Windows Azure へアクセスする（その1）」の続きになります。Azure 側の環境構築と、ベースとなる Azure サービスを作成し、デプロイしてみるところまで行きましたので、今回は Windows Azure から画像と詳細情報を公開するロジックを追加して、再デプロイするところまで行きましょう。

1. ASP.NET MVC アプリケーションの作成

   前回作成した PicMgr.WebApi プロジェクトにモデル クラスを追加します。
   [Models] フォルダを右クリックして [追加] – [クラス] を選択します。 
   
   
   クラス名を”Picture.cs” にします。内容を以下のコードに置き換えます。
   

   namespace PicMgr.Models
   {
       using System.Runtime.Serialization;
       using System.Collections.Generic;
       using System.ComponentModel.DataAnnotations;
       using System.Linq;
       using System;
   
       [DataContract]
       public class Picture
       {
   
           [Key]
           public int PrimaryKey { get; set; }
   
           [DataMember]
           public string UniqueId { get; set; }
   
           [DataMember]
           public string Title { get; set; }
   
           [DataMember]
           public string SubTitle { get; set; }
   
           [DataMember]
           public string Description { get; set; }
   
           [DataMember]
           public string ImagePath { get; set; }
   
       }
   }

                    
   [参照設定] で”System.Runtime.Serialization” を追加します。
   
   
   ここで一度 [Shift] + [Ctrl] + [B] キーを押してビルドしてください。
   次に、[Controllers] フォルダを右クリックして[追加] – [コントローラー] を選択します。 
   
   
   コントローラー名を「PicturesController」、モデルクラスは「Picture (PicMgr.Models)」を選択、データコンテキストクラスは新規で「PicMgr.WebApi.Models.PictureContext」をデータコンテキスト型として入力し、追加ボタンを押します。
   
   
   ModelsフォルダにPictureContext.csが作成されていることを確認します。
   
   
   PictureContext.cs の内容は以下のようになっているはずです。
   

   using System;
   using System.Collections.Generic;
   using System.Data;
   using System.Data.Entity;
   using System.Data.Entity.Infrastructure;
   using System.Linq;
   using System.Net;
   using System.Net.Http;
   using System.Web;
   using System.Web.Http;
   using PicMgr.Models;
   using PicMgr.WebApi.Models;
   
   namespace PicMgr.WebApi.Controllers
   {
       public class PicturesController : ApiController
       {
           private PictureContext db = new PictureContext();
   
           // GET api/Pictures
           public IEnumerable<Picture> GetPictures()
           {
               return db.Pictures.AsEnumerable();
           }
   
           // GET api/Pictures/5
           public Picture GetPicture(int id)
           {
               Picture picture = db.Pictures.Find(id);
               if (picture == null)
               {
                   throw new HttpResponseException(
   Request.CreateResponse(HttpStatusCode.NotFound));
               }
   
               return picture;
           }
   
           // PUT api/Pictures/5
           public HttpResponseMessage PutPicture(int id, Picture picture)
           {
               if (ModelState.IsValid && id == picture.PrimaryKey)
               {
                   db.Entry(picture).State = EntityState.Modified;
   
                   try
                   {
                       db.SaveChanges();
                   }
                   catch (DbUpdateConcurrencyException)
                   {
                       return Request.CreateResponse(
   HttpStatusCode.NotFound);
                   }
   
                   return Request.CreateResponse(HttpStatusCode.OK);
               }
               else
               {
                   return Request.CreateResponse(
   HttpStatusCode.BadRequest);
               }
           }
   
           // POST api/Pictures
           public HttpResponseMessage PostPicture(Picture picture)
           {
               if (ModelState.IsValid)
               {
                   db.Pictures.Add(picture);
                   db.SaveChanges();
   
                   HttpResponseMessage response = 
   Request.CreateResponse(HttpStatusCode.Created, picture);
                   response.Headers.Location = 
   new Uri(Url.Link("DefaultApi", new { id = picture.PrimaryKey }));
                   return response;
               }
               else
               {
                   return Request.CreateResponse(
   HttpStatusCode.BadRequest);
               }
           }
   
           // DELETE api/Pictures/5
           public HttpResponseMessage DeletePicture(int id)
           {
               Picture picture = db.Pictures.Find(id);
               if (picture == null)
               {
                   return Request.CreateResponse(
   HttpStatusCode.NotFound);
               }
   
               db.Pictures.Remove(picture);
   
               try
               {
                   db.SaveChanges();
               }
               catch (DbUpdateConcurrencyException)
               {
                   return Request.CreateResponse(
   HttpStatusCode.NotFound);
               }
   
               return Request.CreateResponse(HttpStatusCode.OK, picture);
           }
   
           protected override void Dispose(bool disposing)
           {
               db.Dispose();
               base.Dispose(disposing);
           }
       }
   }

   
   

2. サンプルデータの挿入と Windows Azure SQL データベースへの移行、Web Sites へのデプロイ

   パッケージマネージャーコンソールを表示します。[ツール] - [ライブラリパッケージマネージャー] - [パッケージマネージャーコンソール] を選択します。
   
   
   コンソールから次の２つのコマンドを順番に実行します：
   enable-migrations -ContextTypeName PicMgr.WebApi.Models.PictureContext
   add-migration Initial
   
   
   [Migrations] フォルダがが作成されていることを確認し、”Configuration.cs” を開きます。
   
        
   PicMgr.Models 名前空間の宣言を追加します。
   

   namespace PicMgr.WebApi.Migrations
   {
       using System;
       using System.Data.Entity;
       using System.Data.Entity.Migrations;
       using System.Linq;
       using PicMgr.Models;
   
       ...

   
   

   Seed メソッドに以下のコードを追加して、データの挿入を行います。 （ご自分の Azure 環境でお試しになる際は、下記コード内の BLOB URL から画像を入手し、ご自分の Azure Storage BLOB へアップロードした上で URL を置き換えてください。）
   

   protected override void Seed(
   PicMgr.WebApi.Models.PictureContext context)
   {
       //  This method will be called after migrating to the latest
    version.
   
       //  You can use the DbSet<T>.AddOrUpdate() helper extension method 
       //  to avoid creating duplicate seed data. E.g.
       //
       //    context.People.AddOrUpdate(
       //      p => p.FullName,
       //      new Person { FullName = "Andrew Peters" },
       //      new Person { FullName = "Brice Lambson" },
       //      new Person { FullName = "Rowan Miller" }
       //    );
       //
       string dummy = "\n\nPellentesque porta, mauris quis interdum 
   vehicula, urna sapien ultrices velit, nec venenatis dui odio in augue.
    Cras posuere, enim a cursus convallis, neque turpis malesuada erat,
    ut adipiscing neque tortor ac erat.";
   
       context.Pictures.AddOrUpdate(p => p.UniqueId, new Picture
       {
           UniqueId = "1001",
           Title = "January",
           SubTitle = "January",
           Description = "お正月" + dummy,
           ImagePath = 
   "https://claudiapicmgr.blob.core.windows.net/pictures/Claudia_Jan.jpg"
       });
   
       context.Pictures.AddOrUpdate(p => p.UniqueId, new Picture
       {
           UniqueId = "1002",
           Title = "February",
           SubTitle = "February",
           Description = "バレンタインデー" + dummy,
           ImagePath = 
   "https://claudiapicmgr.blob.core.windows.net/pictures/Claudia_Feb.jpg"
       });
   
       context.Pictures.AddOrUpdate(p => p.UniqueId, new Picture
       {
           UniqueId = "1003",
           Title = "March",
           SubTitle = "March",
           Description = "ひな祭り" + dummy,
           ImagePath = 
   "https://claudiapicmgr.blob.core.windows.net/pictures/Claudia_Mar.jpg"
       });
   
       context.Pictures.AddOrUpdate(p => p.UniqueId, new Picture
       {
           UniqueId = "1004",
           Title = "April",
           SubTitle = "April",
           Description = "桜吹雪" + dummy,
           ImagePath = 
   "https://claudiapicmgr.blob.core.windows.net/pictures/Claudia_Apr.jpg"
       });
   
       context.Pictures.AddOrUpdate(p => p.UniqueId, new Picture
       {
           UniqueId = "1005",
           Title = "May",
           SubTitle = "May",
           Description = "風薫る" + dummy,
           ImagePath = 
   "https://claudiapicmgr.blob.core.windows.net/pictures/Claudia_May.jpg"
       });
   
       context.Pictures.AddOrUpdate(p => p.UniqueId, new Picture
       {
           UniqueId = "1006",
           Title = "June",
           SubTitle = "June",
           Description = "梅雨" + dummy,
           ImagePath = 
   "https://claudiapicmgr.blob.core.windows.net/pictures/Claudia_Jun.jpg"
       });
   
       context.SaveChanges();
   
   }

   
   

   パッケージマネージャーコンソールに戻り、以下のコマンドを実行します。
   update-database
   
   
   ビルドします。これで Azure アプリケーションは完成です。
   

3. Azure Web Sites へのデプロイと動作確認

   ソリューション エクスプローラーから [PicMgr.WebApi] プロジェクトを右クリックし、[発行…] メニューを選択します。
   
    
   前回のエントリーと同様に「Web を発行」ダイアログが表示されますので、[設定] タブを選択します。
   [データベース] の下にある [PictureContext] にリモート接続文字列を入力します。右の[…] を選択し、こちらも前回のエントリーで作成した SQL データベースに接続するための設定情報を参考に以下のように入力します。[テスト接続] ボタンを押してデータベースに接続できることを確認し、[OK] ボタンを押します。
   
   
   [この接続文字列を実行時に使用する（更新先 web.config）] 及び [Code First Migrations を実行する（アプリケーションの起動時に実行する）] をチェックし、[次へ >] ボタンを押して、[プレビュー] タブから [発行] ボタンを押します。
   
   
   アプリケーションが発行されてデプロイが完了すると、前回のエントリーと同様に Web API 対応アプリのデフォルト ページが表示されます。
   
   
   
   今度は URL の後ろに”api/pictures”を追加して、JSON データの内容を確認します。HTTP GET が PicturesController クラスの GetPictures メソッドにバインドされ、SQL データベースへアクセスし、以下のように先ほど Seed メソッドで挿入された内容が返されるはずです。
   

   [
   {"UniqueId":"1001","Title":"January","SubTitle":"January",
   "Description":"お正月 ...（省略）","ImagePath":
   "https://claudiapicmgr.blob.core.windows.net/pictures/Claudia_Jan.jpg"},
   ...（省略）
   {"UniqueId":"1006","Title":"June","SubTitle":"June",
   "Description":"梅雨 ...（省略）","ImagePath":
   "https://claudiapicmgr.blob.core.windows.net/pictures/Claudia_Jun.jpg"}
   ]

              
   Windows Azure Web Sites にクラウドサービス環境を作成し、アプリケーション フレームワーク技術としては ASP.NET MVC Web API、Entity Framework を活用することで、非常に簡単かつ素早く Azure 対応クラウドサービスが作成できることが実感できましたでしょうか？また、Web Sites の高速簡単デプロイ、デスクトップ上の Web サービスが何のコード変更なしに SQL データベースへの移行も含めてクラウド環境に乗っかってしまうのも、なかなか魅力的ではないかと思います。
   
   本エントリーではアプリケーション開発の手順を中心に説明していますが、もう少し詳しく知りたい方は英語ですが「Deploying an ASP.NET Web Application to a Windows Azure Web Site and SQL Database」 が参考になるかと思います。
   
   いよいよ次のエントリーでは、Windows ストアアプリからこの Web サービスへアクセスして返された JSON データをグリッドビューにバインドして表示させます。
   
   
          
      

ご都合などが合わなく、残念ながらご参加いただけなかった方々にも以下の URL にてストリーミングおよびスライドが公開されていますので、ぜひご覧ください。
ストリーミング： https://www.ustream.tv/recorded/25927178
スライド： https://www.slideshare.net/DeveloperCamp2012/windows-8-windows-azure

さて、セッション中で最初にお見せしました、Windows ストアアプリから Windows Azure サービスにアクセスし、クラウディアの画像及び説明文を表示するデモの作成手順を本ブログで数回に分けて説明します。  
内部では特に複雑なことはやっていません。Windows 8 + Windows Azure 連携がシンプルに実現されている１つの例として何かの参考になれば幸いです。

作成するサンプルの画面例（といっても Windows ストアアプリ側のほうですが）を以下をご覧ください。

では、まずは Azure 側の環境構築と、ベースとなる Azure サービスを作成し、デプロイしてみるところまでステップ・バイ・ステップで説明してゆきます。

1. Web Sites と一緒にSQL データベースを作成します。

   
   WEB SITES タブを選択し、
   
   
   ページ下の NEW を選択します。
   
   
   CREATE WITH DATABASE を選択します。
   
   
   ユニークな URL を入力します。データベースを新規に作成するため、Create a new SQL database を選択します。
   
   
   Web サイト設定ページ右下の右矢印ボタンを押し、次のページにてデータベース設定を指定します。
   
   
   データベース設定ページ右下のチェックボタンを押し、Web サイトが作成されて Running になるまで待ちます。
   
   
   作成した Web サイト名を選択すると、ダッシュボード画面に切り替わります。
   
   
   後ほど Azure へのデプロイに使用するために、publish profile ファイルを保存しておきます。保存先とファイル名を記録しておいてください。
   
   
   一緒に作成した SQL データベースが構築されているか、上部メニューから LINKED RESOURCES を選択し確認します。
   
   
   続いて SQL データベース名を選択し、ダッシュボード画面に切り替えます。後ほど Azure へのデプロイに使用するために、データベース名及びサーバー名を記録しておいてください。
   
   
    

2. Visual Studio 2012 で Windows Azure サービスを作成します。

   
   新しいプロジェクトで空の Visual Studio ソリューションを作成します。ソリューション名を「PicMgr」とします。
   
      
   新しいプロジェクトを追加します。
   
   
   ASP.NET MVC 4 Web アプリケーションを作成します。アプリケーション名を「PicMgr.WebApi」とします。.NET Framework のバージョンは必ず ”4” を選択してください。（2012年10月5日時点ではまだ Azure が .NET 4.5 に対応していません。）
    
   
   プロジェクト テンプレートの種類を Web API にします。OK ボタンを押します。
   
   
   ウィザードが展開されます。[Controllers] フォルダ下の ValuesController.cs の中身を確認してみてください。Get / Post / Put / Delete という REST ベースの CRUD(Create / Read / Update / Delete) 処理が最初から生成されています。

   namespace PicMgr.WebApi.Controllers

   {

       public class ValuesController : ApiController

       {

           // GET api/values

           public IEnumerable<string> Get()

           {

               return new string[] { "value1", "value2" };

           }

           // GET api/values/5

           public string Get(int id)

           {

               return "value";

           }

           // POST api/values

           public void Post([FromBody]string value)

           {

           }

           // PUT api/values/5

           public void Put(int id, [FromBody]string value)

           {

           }

           // DELETE api/values/5

           public void Delete(int id)

           {

           }

       }

   }

   
   F5 を押して、デバッグモードでサービスを起動します。URL に”api/values”を追加して、JSON ファイルの内容を確認します。上記コードの Get () メソッドの内容が返されていることがわかります。    
   
   
   デバッグを終了します。
   
   

3. 作成した ASP.NET MVC 4 アプリケーションを Azure にデプロイします。

   
   プロジェクト名を右クリックして、発行メニューを選択します。
   
   
   「Web を発行」ダイアログの[プロファイル]タブで[インポート(I)…]ボタンを押して、さきほど作成した publish profile ファイルを読み込みます。
   
   
   [接続]タブ、[設定]タブはいづれも[次へ(X) >]ボタンを押して、[プレビュー]タブで[発行(P)]ボタンを押します。
   
   
   発行が完了し、デプロイされると、Web ページが表示されます。URL が Web Sites の作成時に指定したものと同じであることを確認してください。
   
   
   さきほどのデバッグモードと同様にURL に”api/values”を追加して、JSON ファイルの内容を確認すると同じ内容が表示されるはずです。
   
   次のエントリーで Azure から画像と詳細情報を公開するロジックを追加します。

残念ながらご都合がつかなかった、あるいはセミナーのご案内自体が届かなかった（大変申し訳ありません）方々にはこちらのセッション資料を公開いたしましたので、ご参考にしていただければ幸いです。（12/26現在 私のセッションタイトルが『Windows Azure 対応 サービス設計のツボ』となっておりますが、正しくは『Windows Azureの歩み・現在、そしてこれから』です。早めに修正する予定ですが、混乱させてしまった方にはお詫び申し上げます。）https://www.microsoft.com/japan/powerpro/TF/seminar.mspx#s144

それで本題ですが、『Windows Azureの歩み・現在、そしてこれから』スライドを作成するにあたり、いくつかの公開資料を基に現在のWindows Azureの性能値などを紹介いたしましたので、以下にご参考までにまとめておきます。

1. Windows Azure Compute について：

7 Things to Know About Windows Azure Capacity
https://technet.microsoft.com/en-us/cloud/Gg663909

Windows Azure Training Kit - December 2011 Update
https://www.microsoft.com/download/en/details.aspx?displaylang=en&id=8396 「Presentations」より、
WindowsAzureCompute.pptx

Introduction to Windows Azure: the cloud operating system
https://channel9.msdn.com/Events/BUILD/BUILD2011/SAC-852F

2. Windows Azure Storage について：

Inside Windows Azure storage: what's new and under the hood deep dive
https://channel9.msdn.com/Events/BUILD/BUILD2011/SAC-961T

Windows Azure Training Kit - December 2011 Update
https://www.microsoft.com/download/en/details.aspx?displaylang=en&id=8396 「Presentations」より、
InsideWindowsAzureStorage.pptx

Windows Azure Storage: A Highly Available Cloud Storage Service with Strong Consistency
https://sigops.org/sosp/sosp11/current/2011-Cascais/printable/11-calder.pdf

3. SQL Azureについて：

SQL Azure Connection Management
https://social.technet.microsoft.com/wiki/contents/articles/sql-azure-connection-management.aspx

Inside SQL Azure
https://social.technet.microsoft.com/wiki/contents/articles/inside-sql-azure.aspx

Best Practices for Handling Transient Conditions in SQL Azure Client Applications
https://windowsazurecat.com/2010/10/best-practices-for-handling-transient-conditions-in-sql-azure-client-applications/

Now Available: SQL Azure Q4 2011 Service Release
https://blogs.msdn.com/b/windowsazure/archive/2011/12/12/now-available-sql-azure-q4-2011-service-release.aspx

How to get to SQL Azure Query Performance Data
https://blogs.msdn.com/b/benko/archive/2011/12/15/how-to-get-to-sql-azure-query-performance-data.aspx

それと、Windows Azure SDKの各バージョンの主な内容については以下のWebページを参考にしました。

Windows Azure SDK 1.3以降のWhat’s new：
https://msdn.microsoft.com/en-us/library/windowsazure/gg441573.aspx

MSDNブログより：

Windows Azure SDK 1.0
https://blogs.msdn.com/b/jnak/archive/2009/11/13/november-2009-release-of-the-windows-azure-tools-and-sdk.aspx

Windows Azure SDK 1.1
https://blogs.msdn.com/b/jnak/archive/2010/02/01/february-2010-release-of-the-windows-azure-tools-for-microsoft-visual-studio-v1-1.aspx

Windows Azure SDK 1.2
https://blogs.msdn.com/b/jnak/archive/2010/06/07/june-2010-release-of-the-windows-azure-tools-sdk.aspx

Windows Azure SDK 1.3
https://blogs.msdn.com/b/windowsazure/archive/2010/11/29/just-released-windows-azure-sdk-1-3-and-the-new-windows-azure-management-portal.aspx

Windows Azure SDK 1.4
https://blogs.msdn.com/b/windowsazure/archive/2011/03/09/now-available-updated-windows-azure-sdk-and-windows-azure-management-portal.aspx

Windows Azure SDK 1.5
https://blogs.msdn.com/b/windowsazure/archive/2011/09/15/announcing-windows-azure-sdk-1-5-windows-azure-tools-for-microsoft-visual-studio-2010-and-new-service-management-features.aspx

Windows Azure SDK 1.6
https://blogs.msdn.com/b/windowsazure/archive/2011/11/14/updated-windows-azure-sdk-amp-windows-azure-hpc-scheduler-sdk.aspx

Windows Azure Training Kit に収録されたプレゼンテーション資料は（も？）内容的にかなり充実しておりますので、これを見るためだけでもダウンロードされることをお勧めいたします。

あぁ、でも後でオンデマンドでも見る価値はあると思います。何せScott Guthrie、Dave Campbell、Mark Russinovich の3巨頭揃い踏み。

「誰だっけ？」という方のために簡単に紹介しておくと左側から、

Scott Guthrie – Windows Azure プラットフォームの開発チームのトップ。Windows Azure SDKやWindows Azure Tools for Microsoft Visual Studioなどの開発ツールは彼の指揮の下にあります。SilverlightやASP.NET MVCのイメージが強い方もいらっしゃると思いますが、今はマイクロソフトの PaaS 戦略をドライブするキーマンの一人です。

Dave Campbell - マイクロソフトのテクニカル フェローにして、SQL Serverの父とも言える存在。もちろんSQL Azureの設計・開発も指揮しています。今年2月に来日し、その時の講演の様子がここで見られます。https://www.microsoft.com/japan/sqlserver/2008/r2/fact/event/default.mspx

Mark Russinovich - 「Windows Internals」（翻訳では第4版が最新）の共著にあるように、Windows の最深部に精通している数少ないエンジニアの一人。彼もまたマイクロソフトのテクニカル フェローであり、Windows Azure でもファブリックコントローラーなどのコア技術の設計・開発を指揮しています。彼の「Inside Windows Azure」セッションはTechEdやPDC、Buildコンファレンスでも非常に人気があります。

当日のアジェンダは以下のようになっています。

9:00 – 10:30 a.m. – Getting Started with Windows Azure
Learn how to get started building applications for Windows Azure with the Windows Azure SDK & Tools from Microsoft Corporate VP Scott Guthrie.

10:45 – 12 p.m. – Cloud Data & Storage
Join Microsoft Technical Fellow Dave Campbell and learn how to use SQL Azure and Windows Azure storage services in your cloud applications.

12:15 – 1:15 p.m. – Channel9 Cloud Cover Show Live
Join Steve Marx and Wade Wegner for this special live edition to see some fresh Windows Azure demos and hear answers to common Windows Azure questions.

1:30 – 2:30 p.m. – Developing Windows Azure Applications with Visual Studio
In this session, Jay Schmelzer will show you how to use Visual Studio to its full potential to develop, debug, and deploy cloud applications.

2:45 – 3:45 p.m. – Building Scalable Cloud Applications
Do you want to build applications that are highly scalable, loosely coupled, and highly available? Then tune in for this session to learn about key Windows Azure services and patterns from David Aiken.

4:00 – 5:00 p.m. – Expert Panel Q&A featuring Scott Guthrie, Dave Campbell, and Mark Russinovich!

詳細は明かせませんが、Scott Guthrieが素敵なデモを用意しているようです。

とはいえ、やはり圧巻なのはExpert Panel Q&Aですね。

Twitterのハッシュタグ #WindowsAzure で質問を受け付けて、その場で答えてくれるそうなので、日頃の疑問やうっ憤（！？）をぶつけてみるのもよいかも。

本セミナーの翌週12月19日（月）は日本マイクロソフトで「Windows Azure 対応サービス設計のツボ」セミナーです。英語漬けで疲れたらこちらで・・・