Visual Studio 2012 を使った Windows Azure Web サイト機能の活用：ASP.NET Web フォームおよび MVC 4 〜 クラウドカバー Episode 87
久々にご紹介するクラウドカバーは、「Episode 87 - Jon Galloway on What's New in VS 2012, ASP.NET 4.5, ASP.NET MVC 4 and Windows Azure Web Sites」。
Visual Studio 2012 を使った、ASP.NET WebForm および MVC 4 による Windows Azure Web サイトの開発紹介です。
では、いつものようにニュースから。
Windows Azure のクラウドサービスにおいて PHP 5.4 をインストールし、使用する方法に関しての Blog ポスト。
Windows Azure チームではよりよい PHP アプリケーションのホスト環境を提供するため、アプリケーションのデプロイ前に PHP のバージョン指定ができるような仕組みを模索中、とのことですが、その前に自分でバージョンを選びたいぜ、というときにぜひ。
MVP の David Pallmann が作成した AzureQuery の紹介。
AzureQuery は、javaScript から Windows Azure Storage にアクセスするためのライブラリです。AzureQuery のプロジェクトは OSS として CodePlex にてホストされています。
◆ Flatterist SMS by Wade Wegner
クラウドカバー（とマイクロソフト）を卒業した Steve Marx と Wade による Flatterist の SMS 版の紹介。Steve の Flatterist はマイクロソフト時代に作成されたもので、今回 Wade が携帯にテキストメッセージを送信する SMS 機能を追加したものです。
Windows 8 の RTM (Release to Manufacture の略で、開発が完了した（工場への出荷が始まった、という意味です）のお知らせです（8/15 のBlog エントリ紹介です）。
通常のリリース前に Windows 8 に触れることができる、というのは MSDN サブスクライバーのメリットですので、ぜひインストールして、楽しんでください！
◆ Visual Studio 2012 の MSDN サブスクライバー向け提供の開始
同じく、Visual Studio 2012 が RTM となり、MSDN サブスクライバー向けの提供が開始されています。
さて、Windows Azure な開発者としては、Windows Azure SDK の更新も気になるところですが、こちらは Web Platform Installer を立ち上げていただければ、新しい SDK (“Windows Azure SDK for .NET(VS 2012) – June 2012 SP1”) として、提供が始まっています。
ということで、今回のクラウドカバーは、この Windows 8 および Visual Studio 2012、そして Windows Azure SDK for .NET を活用した、Windows Azure Web サイト機能の紹介になります。
解説は、仮想環境から配信された Jon Galloway です :-)
早速、新しい Visual Studio のスタート画面が登場。
今回は、ASP.NET Web フォーム、MVC 4 の紹介をしながら、Windows Azure Web サイトへのデプロイまでの流れを紹介します。
最初に作成するのは、Web フォームのプロジェクト。
Visual Studio 2012 でプロジェクトの作成を始めると NuGet を使いながら関連するアセンブリ（パッケージ）の追加が行われます（画面左下の紫色の部分に取得中のパッケージ情報が現れます）。これによりプロジェクトテンプレートが依存している外部パッケージに更新があった際には、それを取り入れた形でプロジェクトが作成させることになります！
さて、Visual Studio 2012 では、Web フォームのテンプレートが更新され、すっきりしたデザインの Web ページになっています。
また、アダプティブ レンダリングにより、モバイルに最適化した画面表示を組み込めるような Web テンプレートになっています。例えば、ブラウザの幅を狭くすると、先ほどの Web 表示が下記のようなスタイルに切り替わります。
この部分、具体的には CSS の中でモバイル用のスタイルを定義しており、media クエリーにより、画面幅が条件に合致する際には、モバイル用のスタイルで表示する、といった作りになっています。
また、CSS の編集が効率的にできるように、Ctrl + j により色の選択機能（Color Picker)が立ち上がります。この Color Picker では、初期値として、その CSS 内で使用されている色が表示されます。
また、他の Web サイトやデータから色を選択することも可能で、Opacity(不透明度）の設定も簡単に設定できるようになっています。
また、Web フォームにおけるモデル バインディングのサポートが加わりました。これは ASP.NET MVC ではおなじみの機能でもありますが、あらかじめ定義しておいたオブジェクト（モデル）の情報をもとに、そのモデルに最適化したページを容易に作成できる機能です。
今回のクラウドカバーでは、”Issue” クラスを元に、DBContext および、データ初期化のためのクラスを用意しています。
モデル バインディングの機能により、特定のモデル（今回であれば “Issue”)に最適化されたページが作成され、そこから検索（クエリ）や、リスト表示、詳細表示、およびデータの更新などを行うことが可能になります。
ポイントは、コントローラーの使用において、ItemType の指定で、型付けしておく、ということになります。また、一覧表示を行う際に呼び出すメソッドを指定しておくことで（今回は SelectMethod=”GetIssues” の部分） 画面と、ロジックの連携が可能になっています。
今回の GetIssue の実装は下記のようになっていますが、オプショナルな引数として、DateTime を取得するようにしています。この部分は、先ほどのデモの中で、テキストボックスに日付をいれてデータのフィルターを行っていましたが、そこに適用されるロジックになります。美しいですねー。
また、モデルバインディングのご利益として、コーディング時には型情報に基づき、適切な入力候補が表示されます。
また、HTML のコード補完機能として、例えば、”video” と入力した後にタブを２回押すと、<video> タブの典型的な使用方法が挿入されます。audio でも同様で、最新の HTML5 標準に対応した Web 作成を支援しています。
なお、今回紹介した Web フォームの機能は、ASP.NET 4.5 の機能であり、Windows Azure においては .NET Framework 4.5 の環境をまだ提供できておりませんので、今しばらくお待ちください。
さて、引き続き MVC 4 による開発の紹介です。
まず、MVC 4 に関しては、.NET Framework 4.5 および 4 にて動作が可能です。つまり Windows Azure で今すぐ ASP.NET の最新開発環境を使いたい！、という場合は MVC 4 を選択いただければよいかと思います。
Visual Studio 2012 にて MVC 4 のプロジェクトを作成すると、さらに細かなテンプレート指定が可能です。
まず、今回の MVC 4 の特徴として挙げられているのが、”Empty” テンプレートが、より空っぽになった、ということです。MVC 3 までは設定ファイル以外に若干のコードが入っていましたが、MVC 4 ではそれらは “Basic” と名前を変え（ MVC 3 の “Empty” = MVC 4 の “Basic”)、”Empty” はより Empty になった、というわけです。
また、”Internet Application” は基本的に Web フォームのテンプレートと同じで、アカウントコントローラーなどの機能を含む Web になります。“Intranet Application” は社内向けアプリケーションということで、認証として Windows 認証を用いた Web のテンプレートになります。
また、”Mobile Application” は jQuery Mobile のテンプレートを利用したモバイル向けのテンプレートで、”Web API” は HTTP サービスを実装するためのテンプレートです。
ということで MVC 3 の際のテンプレート（以下）、
と MVC 4 の際のテンプレート（以下）を比べると、ずいぶん充実した感じがしますね :-)
今回のクラウドカバーでは Internet Application を使って説明をします。
プロジェクトの作成を始めると、Web フォームの際と同じように NuGet を活用し外部のパッケージを活用したプロジェクト作成が行われます。また、基本的な外観やスタイルは Web フォームと同様になっています。
また、MVC 4 (ならびに ASP.NET 4.5 Web フォーム）においては、ASP.NET のメンバーシップ機能を用いた認証のほか、外部の認証機関を使ってユーザー認証を行うことが可能になっています。
この認証連携の設定は、App_Start における AuthConfig においてあらかじめコードがコメントアウトされた形で用意されており、それを利用するだけで簡単に外部の認証機関との連携ができるようになています。
上記のように Google との連携用コードのコメントアウトをはずし、デバッグ実行すると、その設定を確認して画面が表示されます。ここで “Google” のボタンを押すと、Google のサイトに飛んで gmail の ID での認証を行うことになります（クラウドカバーでは Jon が事前に Google にログインしていたため、認証済みな状態として、扱われています）。
さて、Google での認証が終わると、Google 側から認証済みユーザーの情報を今回作成している Web に渡してもいいか、という確認が行われます。Google での認証では、この際に Gmail のアドレスも渡されるので、渡してＯＫかの確認が出ています。
今回の MVC 4 アプリケーションではこの時に受け取った Gmail のアドレス、あるいはユーザー設定の任意の文字をユーザー名として使用する作りになっています。
ということで、Google の認証機能と連携した Web があっという間に出来上がりました。すごい！
お次の話題は、MVC 4 における強化ポイントにおける Web API について。Web API はプロジェクトテンプレートから選択することもできますが、既存の MVC 4 プロジェクトに追加することも可能です。
追加する場合は、Controllers 配下がよいかと思います。
コントローラーのテンプレートとして今回は、”API Controller with empty read/write actions” を選択します。
すると Rest 形式で操作するための API テンプレートが作成されますので、これを利用しつつ提供したい Web サービス（Web API)を実装します。
以上、ざっと Visual Studio 2012 を使った Web フォームならびに MVC 4 での開発を見てきました。
最後にいよいよ Windows Azure Web サイトへのデプロイを紹介します。
まず、新しくなった Windows Azure の “新しい” ポータルにアクセスします。
つづいて Web サイトの作成を行います。
次に、作成された Web サイトの管理ページから、発行用のプロファイルデータをローカル PC にダウンロードします。
このプロファイルを、Visual Studio 2012 で読み込むことで、Windows Azure へのデプロイが容易になります。
Visual Studio 2012 に戻り、ソリューションエクスプローラーにて先ほど作成したプロジェクトを選択し、右クリックで出てきたメニューの中から「発行」 (Publish) を選択します。
するとダイアログが出てくるので、そのダイアログにて先ほどダウンロードしたプロファイルデータを読み込ませると、発行に必要な情報が用意されます。
Validate を行った後、Publish を行うと、実際に Windows Azure へのデプロイが開始されます。
このように Visual Studio 2012 を使うことでこれまで以上に効率的に Web の開発が可能となり、また Windows Azure の Web サイト機能を利用することで、それら Web を簡単に Azure 上でホスティングすることが可能になります（もちろん、クラウドならではのスケールの特徴はそのままに）。
最後に、ASP.NET のサイトにおいて、ASP.NET 4.5 を紹介するドキュメント、ビデオなどが用意されています。特に ASP.NET 4.5 に関するビデオでは、ScottHa (スコット ”ハー”）こと Hanselman による良質なビデオがたくさんあるので、ぜひご覧ください。
最後に恒例の Tip Of The Week!
◆ Introducing Asynchronous Cross-Account Copy Blob
Windows Azure ストレージにおいて、アカウント（サブスクリプション）をまたがるデータのコピーを行うためのコードの紹介です。
Windows Azure ストレージでは、Geo-Replication の機能により、地域ごと（米国、欧州、およびアジアの３地域）にデータセンター間でのデータ同期を行っており、データの保管に注力していますが、明示的にデータのバックアップを取りたい、といったニーズがある場合にこのようなコードを活用いただけるかと思います。
また、Azure ではデータセンター内の通信は無償のため、同一データセンター内でのバックアップに関しては、ストレージの容量分とトランザクションの費用で、またデータセンターをまたがる場合にはそれに加えて通信費の費用でバックアップを実行いただけます。
今回の Nick のデモでは、プライベートコンテナーを使用している場合のデータのコピーということで、Shared Access Signature を利用したコピーを行っています。この際に、Share を開始するタイミング、Share を中止するタイミング、ならびに Share における権限設定、などを行うことができます。
以上、クラウドカバー Episode 87、「Visual Studio 2012 を使った Windows Azure Web サイト機能の活用： ASP.NET Web フォームおよび MVC 4」、の紹介でした。
Enjoy!