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 サイトの開発紹介です。

 

 

 

 

では、いつものようにニュースから。

 

 

PHP 5.4 by Brian Swan

Windows Azure のクラウドサービスにおいて PHP 5.4 をインストールし、使用する方法に関しての Blog ポスト。

Windows Azure チームではよりよい PHP アプリケーションのホスト環境を提供するため、アプリケーションのデプロイ前に PHP のバージョン指定ができるような仕組みを模索中、とのことですが、その前に自分でバージョンを選びたいぜ、というときにぜひ。

 

Introducing AzureQuery

MVP の David Pallmann が作成した AzureQuery の紹介。

AzureQuery は、javaScript から Windows Azure Storage にアクセスするためのライブラリです。AzureQuery のプロジェクトは OSS として CodePlex にてホストされています。

 

 

Flatterist by Steve Marx

Flatterist SMS by Wade Wegner

クラウドカバー(とマイクロソフト)を卒業した Steve Marx と Wade による Flatterist の SMS 版の紹介。Steve の Flatterist はマイクロソフト時代に作成されたもので、今回 Wade が携帯にテキストメッセージを送信する SMS 機能を追加したものです。

 

 

Win8 Developer Blog

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”) として、提供が始まっています。

image

 

 

 

ということで、今回のクラウドカバーは、この Windows 8 および Visual Studio 2012、そして Windows Azure SDK for .NET を活用した、Windows Azure Web サイト機能の紹介になります。

 

解説は、仮想環境から配信された Jon Galloway です 🙂

image

 

 

早速、新しい Visual Studio のスタート画面が登場。

今回は、ASP.NET Web フォーム、MVC 4 の紹介をしながら、Windows Azure Web サイトへのデプロイまでの流れを紹介します。

image

 

 

最初に作成するのは、Web フォームのプロジェクト。

Visual Studio 2012 でプロジェクトの作成を始めると NuGet を使いながら関連するアセンブリ(パッケージ)の追加が行われます(画面左下の紫色の部分に取得中のパッケージ情報が現れます)。これによりプロジェクトテンプレートが依存している外部パッケージに更新があった際には、それを取り入れた形でプロジェクトが作成させることになります!

image

 

 

さて、Visual Studio 2012 では、Web フォームのテンプレートが更新され、すっきりしたデザインの Web ページになっています。

image

 

 

 

 

また、アダプティブ レンダリングにより、モバイルに最適化した画面表示を組み込めるような Web テンプレートになっています。例えば、ブラウザの幅を狭くすると、先ほどの Web 表示が下記のようなスタイルに切り替わります。

image

 

 

 

この部分、具体的には CSS の中でモバイル用のスタイルを定義しており、media クエリーにより、画面幅が条件に合致する際には、モバイル用のスタイルで表示する、といった作りになっています。

image

 

 

また、CSS の編集が効率的にできるように、Ctrl + j により色の選択機能(Color Picker)が立ち上がります。この Color Picker では、初期値として、その CSS 内で使用されている色が表示されます。

image

 

 

また、他の Web サイトやデータから色を選択することも可能で、Opacity(不透明度)の設定も簡単に設定できるようになっています。

image

 

 

 

また、Web フォームにおけるモデル バインディングのサポートが加わりました。これは ASP.NET MVC ではおなじみの機能でもありますが、あらかじめ定義しておいたオブジェクト(モデル)の情報をもとに、そのモデルに最適化したページを容易に作成できる機能です。

今回のクラウドカバーでは、”Issue” クラスを元に、DBContext および、データ初期化のためのクラスを用意しています。

image

 

 

モデル バインディングの機能により、特定のモデル(今回であれば “Issue”)に最適化されたページが作成され、そこから検索(クエリ)や、リスト表示、詳細表示、およびデータの更新などを行うことが可能になります。

 

image

 

 

ポイントは、コントローラーの使用において、ItemType の指定で、型付けしておく、ということになります。また、一覧表示を行う際に呼び出すメソッドを指定しておくことで(今回は SelectMethod=”GetIssues” の部分) 画面と、ロジックの連携が可能になっています。

 

image

 

 

今回の GetIssue の実装は下記のようになっていますが、オプショナルな引数として、DateTime を取得するようにしています。この部分は、先ほどのデモの中で、テキストボックスに日付をいれてデータのフィルターを行っていましたが、そこに適用されるロジックになります。美しいですねー。

 

image

 

 

また、モデルバインディングのご利益として、コーディング時には型情報に基づき、適切な入力候補が表示されます。

image

 

 

 

また、HTML のコード補完機能として、例えば、”video” と入力した後にタブを2回押すと、<video> タブの典型的な使用方法が挿入されます。audio でも同様で、最新の HTML5 標準に対応した Web 作成を支援しています。

 

image

 

 

なお、今回紹介した 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 になった、というわけです。

image

 

また、”Internet Application” は基本的に Web フォームのテンプレートと同じで、アカウントコントローラーなどの機能を含む Web になります。“Intranet Application” は社内向けアプリケーションということで、認証として Windows 認証を用いた Web のテンプレートになります。

また、”Mobile Application” は jQuery Mobile のテンプレートを利用したモバイル向けのテンプレートで、”Web API” は HTTP サービスを実装するためのテンプレートです。

 

ということで MVC 3 の際のテンプレート(以下)、

 

image

 

と MVC 4 の際のテンプレート(以下)を比べると、ずいぶん充実した感じがしますね 🙂

 

image

 

 

 

今回のクラウドカバーでは Internet Application を使って説明をします。

プロジェクトの作成を始めると、Web フォームの際と同じように NuGet を活用し外部のパッケージを活用したプロジェクト作成が行われます。また、基本的な外観やスタイルは Web フォームと同様になっています。

 

また、MVC 4 (ならびに ASP.NET 4.5 Web フォーム)においては、ASP.NET のメンバーシップ機能を用いた認証のほか、外部の認証機関を使ってユーザー認証を行うことが可能になっています。

 

image

 

 

 

この認証連携の設定は、App_Start における AuthConfig においてあらかじめコードがコメントアウトされた形で用意されており、それを利用するだけで簡単に外部の認証機関との連携ができるようになています。

image

 

上記のように Google との連携用コードのコメントアウトをはずし、デバッグ実行すると、その設定を確認して画面が表示されます。ここで “Google” のボタンを押すと、Google のサイトに飛んで gmail の ID での認証を行うことになります(クラウドカバーでは Jon が事前に Google にログインしていたため、認証済みな状態として、扱われています)。

 

image

 

さて、Google での認証が終わると、Google 側から認証済みユーザーの情報を今回作成している Web に渡してもいいか、という確認が行われます。Google での認証では、この際に Gmail のアドレスも渡されるので、渡してOKかの確認が出ています。

image 

 

今回の MVC 4 アプリケーションではこの時に受け取った Gmail のアドレス、あるいはユーザー設定の任意の文字をユーザー名として使用する作りになっています。

image

 

ということで、Google の認証機能と連携した Web があっという間に出来上がりました。すごい!

image

 

 

お次の話題は、MVC 4 における強化ポイントにおける Web API について。Web API はプロジェクトテンプレートから選択することもできますが、既存の MVC 4 プロジェクトに追加することも可能です。

追加する場合は、Controllers 配下がよいかと思います。

 

image

 

 

コントローラーのテンプレートとして今回は、”API Controller with empty read/write actions” を選択します。

image

 

すると Rest 形式で操作するための API テンプレートが作成されますので、これを利用しつつ提供したい Web サービス(Web API)を実装します。

image

 

 

 

以上、ざっと Visual Studio 2012 を使った Web フォームならびに MVC 4 での開発を見てきました。

最後にいよいよ Windows Azure Web サイトへのデプロイを紹介します。

 

まず、新しくなった Windows Azure の “新しい” ポータルにアクセスします。

 

image

 

 

つづいて Web サイトの作成を行います。

image

 

 

次に、作成された Web サイトの管理ページから、発行用のプロファイルデータをローカル PC にダウンロードします。

 

image

 

 

 

このプロファイルを、Visual Studio 2012 で読み込むことで、Windows Azure へのデプロイが容易になります。

Visual Studio 2012 に戻り、ソリューションエクスプローラーにて先ほど作成したプロジェクトを選択し、右クリックで出てきたメニューの中から「発行」 (Publish) を選択します。

 

するとダイアログが出てくるので、そのダイアログにて先ほどダウンロードしたプロファイルデータを読み込ませると、発行に必要な情報が用意されます。

image

 

 

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!

image

 

 

    Introducing Asynchronous Cross-Account Copy Blob

    Windows Azure ストレージにおいて、アカウント(サブスクリプション)をまたがるデータのコピーを行うためのコードの紹介です。

    Windows Azure ストレージでは、Geo-Replication の機能により、地域ごと(米国、欧州、およびアジアの3地域)にデータセンター間でのデータ同期を行っており、データの保管に注力していますが、明示的にデータのバックアップを取りたい、といったニーズがある場合にこのようなコードを活用いただけるかと思います。

    また、Azure ではデータセンター内の通信は無償のため、同一データセンター内でのバックアップに関しては、ストレージの容量分とトランザクションの費用で、またデータセンターをまたがる場合にはそれに加えて通信費の費用でバックアップを実行いただけます。

     

     

    今回の Nick のデモでは、プライベートコンテナーを使用している場合のデータのコピーということで、Shared Access Signature を利用したコピーを行っています。この際に、Share を開始するタイミング、Share を中止するタイミング、ならびに Share における権限設定、などを行うことができます。

    image

     

     

     

     

    以上、クラウドカバー Episode 87、「Visual Studio 2012 を使った Windows Azure Web サイト機能の活用: ASP.NET Web フォームおよび MVC 4」、の紹介でした。

     

    Enjoy!

    Comments (0)

    Skip to main content