mvcConf @:Japan ～ ASP.NET MVC ブート キャンプ ～

クラウドと HTML5 で作成するスケー ラブルな Web アプリ開発術

～ Windows Azure + ASP.NET MVC 編～

株式会社野村総合研究所 勇大地 (いさみ だいち)

Microsoft MVP for Windows Azure

セッションの目的とゴール

目的 ASP.NET MVC × jQuery の開発を学習する マルチデバス向け Web ゕプリ開発を学習する Web ゕプリのクラウド移行を学習する

ゴール ASP.NET MVC × jQuery の開発ができる マルチデバス向けの画面開発ができる クラウド上に Web ゕプリを配置できる

2

今回作成したサンプル

機能 コメント付きで投票 投稿の割合をグラフ化

3

http://mvcconfjapan120611.cloudapp.net/

アジェンダ

クラウド＋ HTML5 が必要な理由は？

HTML5 画面開発のポントは？

クラウドに移行するには？

まとめ

HTML5 と クラウドの振り返り

HTML5 の振り返り

クラウドの振り返り

クラウド上で動く WEB ゕプリ

HTML4 の後継である次期標準仕様

新機能が追加 新規マークゕップタグの登場 新 API（ビデオ・音楽の再生、オフラン実行等）

HTML5の振り返り

・ 約 10 年ぶりの標準仕様改正

・ HTML 4.01 に比べ、適用可能な領域が増した

メリット 柔軟なスケールゕウト／スケールダウン

保守の手間、管理コストを削減

デメリット 環境カスタマズが容易でない ゕーキテクチャが従来と異なる

クラウドの振り返り 1/2

Windows Azure Marketplace

Windows Azure Platform

Windows Azure

コンピュート

•Webロール

•Workerロール

•VMロール

ストレージ

• Blob

• Table

• Queue

• Drive

Azure AppFabric • Service Bus • Access Control • Caching

SQL Azure • RDB • Data Sync • Reporting

DataMarket

Applications

Microsoft Pinpoint

クラウドの振り返り 2/2

クラウドと HTML5 の利用例

demo ...

9

キャッシュ機能

分散 KVS

セッション

永続データ

クラウドプラットフォーム

クラゕント

クラウド上で動く WEB アプリ 1/2

サーバ

２

１

３

クライアント jQuery

サーバ ASP.NET MVC

永続データ、セッション Windows Azure ストレージ サービス Windows Azure AppFabric キャッシュ

クラウド上で動く WEB アプリ 2/2

11

アジェンダ

クラウド＋HTML5 が必要な理由は？

HTML5 画面開発のポントは？

クラウドに移行するには？

まとめ

HTML5 画面開発のポイント HTML5 新機能の利用 マルチデバイス対応 旧ブラウザとの共存

未だに消えない IE6 PC ／スマフォへの対応

jQuery ×

ASP.NET MVC で解決

必修と化した jQuery ！！

jQuery Core DOM 操作等のコゕ機能 jQuery Mobile スマフォ向け jQuery Template テンプレートエンジン jQuery Validate バリデーション jQuery UI UI コンポーネント jQuery Globalization 国際化

ASP.NET MVC との相性が良い！

15

//セレクタ var elem1 = $(‘#my_id’); //属性の操作 var link = $(‘#my_element’).attr(‘href’); //CSSの取得 var color = $(‘#my_element’).css(‘background’); //ベント追加 $(‘#mybutton’).click( function(){ alert(‘ボタン押下’); });

jQuery Core jQuery の主要機能（一部）

jQuery Mobile 1/3 現在のバージョン

は 1.0α4.1 モバル向けプラ

グン Windows Phone 7

にも対応 既存プラグンと

も連携可

<!-- ページ定義 --> <div data-role="page"> <div data-role="header"> Home </div> <div data-role="content"> ああああああ </div> <div data-role="footer"> <h1> &copy; 誰か</h1> </div> </div>

jQuery Mobile 2/3 画面定義

ページ

18

jQuery Mobile 3/3

<!-- ページ定義 --> <a href="#" data-icon="home“ data-iconpos="notext“ data-direction="reverse"> <!-- ページ定義 --> <ul data-role="listview" data-inset="true"> </ul>

画面要素定義

Home ゕコン

リストビュー

19

var dataObject = { name: ‚勇大地", comments: [‚Azureは良いねぇ…‛,‚チャックさんケメーン！"] }; $("#sometmpl").tmpl( dataObject ) .appendTo("ul");

jQuery Template JavaScript のテンプレートエンジン

<script id="sometmpl" type"text/x-jquery-tmpl"> <li>${$i}) ${name}(こめんと: {{each(i,comment) comments}}${comment}{{/each}})</li> </script> <ul></ul>

20

$(function () { $("#my_form").validate({ rules: { my_textbox: { required: true }}, messages: { my_textbox: { required: "1文字くらい入力してほしいお。。。" }} });});

jQuery Validate バリデーションのルールを設定

サーバサイドは ASP.NET MVC 意図通りの HTML を記述可能 URL ルーテゖング モデルバンダ グローバルフゖルタ 単体テストの容易化

jQuery との相性が良い！！

22

[HttpGet] public ActionResult JsonMethod(Person person) { //リクエストデータの表示 Trace.TraceInformation(person.ToString()); //JSON 形式のデータを返す return Json(new Person() { Name = "勇大地", Comment = "緊張して胃が痛い" } , JsonRequestBehavior.AllowGet); }

JSonValueProviderFactory JSON データの送受信（MVC3 の新機能）

HTML5 with jQuery Mobile

demo ...

23

アジェンダ

クラウド＋ HTML5 が必要な理由は？

HTML5 画面開発のポントは？

クラウドに移行するには？

まとめ

Windows Azure 移行のポイント

アセンブリ配置

デバッグ手法の差異

データの永続化

セッションの取り扱い Appendix で

アセンブリ配置 1. 新規「ASP.NET MVC3 Web アプリケーション」を追加 2. 「ソリューション内の Web ロールプロジェクト」を追加 3. ASP.NET MVC 側のプロジェクトを右クリックし、「配置

可能な依存関係の追加」を選択

１. ２. ３.

デバッグ手法の差異 Web デプロイが便利！！ 数秒で再デプロイ可能 Azure SDK 1.4.1 から 要リモートデスクトップ

データの永続化 データの例 量とサイズ 想定される形式

顧客マスタ 在庫マスタ

多い ・関係型 ・頻繁に参照される

入出庫データ 受注データ

多い ・関係型 ・レコードを蓄積

画像データ 動画データ

サズが巨大

・フゔル等

ログ テキスト

サズが小さい

・レコードを蓄積

伝搬メッセージ

サズが小さい

・キュー等

・Blob Storage ・Drive

・Table Storage

・Queue Storage

クラウドのストレージ活用がポイント

安価なスケーラブル Web ゕプリの要点

サンプルのアーキテクチャ

ロードバ

ランサ

Azure AppFabric キャッシュ

テーブル

２

１

３

セッション

永続データ

スケーラブル＆マルチデバイス

IE9

スマートフォン

※認証にはAccess Controlを利用

ASP.NET MVC ＋ Windows Azure

demo ...

30

まとめ

マルチデバイス対応向け開発方法を習得 HTML5 の仕様をキャッチゕップ jQuery の 各種プラグンを学習

クラウドを利用したサービス方法を習得 ゕセンブリ配置に注意 Web デプロを活用 永続化データの取り扱いに留意

appendix.

32

33

//SVG 対応の可否 alert("svg is " + Modernizr.svg); //GPS 位置取得の可否 alert("geolocation is " + Modernizr.geolocation); //ゕプリケーションキャッシュの可否 alert("applicationcache is " + Modernizr.applicationcache);

Modernizr の利用 1/2 ブラウザの HTML5 対応度合いを確認

F12 ツール

34

//<video /> タグへの対応 for (var key in Modernizr.video) { alert(key + " : " + Modernizr.video[key]); } //<audio /> タグへの対応 for (var key in Modernizr.audio) { alert(key + ‚ : ‛ + Modernizr.audio[key]); } //新しい <input /> タグのタプ（ url、date 等） for (var key in Modernizr.inputtypes) { alert(key + " : " + Modernizr.inputtypes[key]); }

Modernizr の利用2/2 ブラウザの HTML5 対応度合いを確認

HTML5 の振り返り ＋ α

2010 2011

1Q 2Q 3Q 4Q 1Q 2Q 3Q 4Q

★ 9/17β版リリース ★ 11/17 Platform Previwe 7リリース

★7/7 4βeta 1リリース ★11/10βeta 7リリース

★6/8 Safari 5リリース

★ 3/15 IE9 製品版リリース（HTML5対応）

★ 3/22 FF4 製品版リリース（HTML5対応）

★ 3/9 Safari 5.0.4 リリース（HTML5対応強化）

★ 3/22 Chrome 11 リリース（HTML5対応強化）

★ 4/13 IE10 Preview（HTML5対応強化）

★ 3/9 Chrome 10 リリース（HTML5対応強化） ★ 2/11 Chrome 9リリース（HTML5対応強化）

★ 2/11 Chrome 9リリース（HTML5対応強化）

主要ブラウザの HTML5 対応により、HTML5 のサービス展開が可能に

草案

最終草案

勧告候補

勧告案

勧告

2012年 2月予定

2014年 予定

2011年 5月現在

2012 年には、HTML4 での普及期だった勧告候補になる予定

現状は最終草案の段階

そろそろ HTML5 を学ぶ頃合

HTML5 の振り返り ＋ α

Azure を無料で使うには？！ 1/2 MSDN に無償で利用する方法が！

http://msdn.microsoft.com/ja-jp/windowsazure/gg674969

・クレジットカード登録不要

・30日間使いたい放題

・次ページ

Azure を無料で使うには？！ 2/2 特別導入プランを利用

特別導入プランの無料枠

・コンピューテゖング

24 時間 * 30日 ＜ 750 時間

・データ転送量

0.5 GB * 30 日 ＜ 20 GB

・SQL Azure

タダ！

・特別導入プラン ・XS ンスタンス × １ ⇒月額無料

学習のステップ

最初はローカルで

次は Azure Pass で

次は特別導入プランで

次は長期運用の他プランで

要クレジットカード

クレジットカード不要

環境構築の方法 Web Platform Installer を利用！

http://msdn.microsoft.com/ja-jp/windowsazure/cc974146

Visual Studio や環境設定も一括実施

セッションデータの共有方法に工夫が必要

ロードバ

ランサ

ユーザ ンスタンス２

ンスタンス１

ンスタンス３

インスタンス１のセッションデータ

インスタンス２のセッションデータ

インスタンス３のセッションデータ

セッションの取り扱い 1/2

セッションの取り扱い 2/2

MSDN Code Galleryのセッションプロバイダ

ASP.NET標準のセッションプロバイダ

自作セッションプロバイダ

Azure AppFabricキャッシュ

概要 Code Galleryのセッションプロバダを利用

ASP.NET標準のセッションプロバダを利用

Access mdb等のプロバダを書き換える

Azure AppFabric キャッシュを利用

利用ストレージ

Table Storage SQL Azure SQL Azure Azure AppFabric キャッシュ

難点 ・タムゕウトしたセッションを自分で削除する必要がある ・SQL Azureに格納するよりも遅い

・タムゕウトしたセッションを自分で削除 ・Azure向けのプロバダではないため、コードがいびつになる

・タムゕウトしたセッションを自分で削除する必要がある

・コストが高め

小 ← コスト＆性能 → 大

セッション共有方法メリデメ

タムゕウトセッションデータを自分で削除

© 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the

part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.