クラウドと HTML5 で作成するスケーラブルな Web アプリ開発術～ Windows Azure + ASP.NET MVC 編～

クラウドと HTML5 で作成するスケー ラブルな Web アプリ開発術～ Windows Azure + ASP.NET MVC 編～株式会社野村総合研究所勇大地 (いさみだいち) Microsoft MVP for Windows Azure

セッションの目的とゴール • 目的 • ASP.NETMVC × jQueryの開発を学習する • マルチデバイス向け Web アプリ開発を学習する • Web アプリのクラウド移行を学習する • ゴール • ASP.NET MVC × jQueryの開発ができる • マルチデバイス向けの画面開発ができる • クラウド上に Web アプリを配置できる

今回作成したサンプル • 機能 • コメント付きで投票 • 投稿の割合をグラフ化 http://mvcconfjapan120611.cloudapp.net/

アジェンダ

HTML5 とクラウドの振り返り • HTML5 の振り返り • クラウドの振り返り • クラウド上で動く WEB アプリ

HTML5の振り返り • HTML4 の後継である次期標準仕様 • 新機能が追加 • 新規マークアップタグの登場 • 新 API（ビデオ・音楽の再生、オフライン実行等）・約 10 年ぶりの標準仕様改正・ HTML 4.01 に比べ、適用可能な領域が増した

クラウドの振り返り1/2 • メリット • 柔軟なスケールアウト／スケールダウン • 保守の手間、管理コストを削減 • デメリット • 環境カスタマイズが容易でない • アーキテクチャが従来と異なる

クラウドの振り返り2/2 Windows Azure Platform • SQL Azure • RDB • Data Sync • Reporting • AzureAppFabric • Service Bus • Access Control • Caching Windows Azure Marketplace Windows Azure DataMarket • コンピュート • Webロール • Workerロール • VMロール • ストレージ • Blob • Table • Queue • Drive Applications Microsoft Pinpoint

クラウドと HTML5 の利用例 demo ...

クラウド上で動く WEB アプリ 1/2 キャッシュ機能１セッション２クライアント永続データ分散 KVS ３サーバクラウドプラットフォーム

クラウド上で動く WEB アプリ 2/2 • クライアント • jQuery • サーバ • ASP.NET MVC • 永続データ、セッション • Windows Azure ストレージサービス • Windows Azure AppFabric キャッシュ 11

アジェンダ

HTML5 画面開発のポイント jQuery × ASP.NET MVC で解決 • HTML5 新機能の利用 • マルチデバイス対応 • 旧ブラウザとの共存未だに消えない IE6 PC ／スマフォへの対応

必修と化した jQuery！！ • jQuery CoreDOM 操作等のコア機能 • jQuery Mobileスマフォ向け • jQuery Template テンプレートエンジン • jQuery Validate 　バリデーション • jQuery UIUI コンポーネント • jQuery Globalization 国際化 ASP.NET MVC との相性が良い！

jQuery Core • jQueryの主要機能（一部） //セレクタ var elem1 = $(‘#my_id’); //属性の操作 var link = $(‘#my_element’).attr(‘href’); //CSSの取得 var color = $(‘#my_element’).css(‘background’); //イベント追加 $(‘#mybutton’).click( function(){ alert(‘ボタン押下’); });

jQuery Mobile1/3 • 現在のバージョンは 1.0α4.1 • モバイル向けプラグイン • Windows Phone 7 にも対応 • 既存プラグインとも連携可

jQueryMobile 2/3 • 画面定義  <div data-role="page"> <div data-role="header"> Home </div> <div data-role="content"> ああああああ </div> <div data-role="footer"> <h1> © 誰か</h1> </div> </div> ページ

jQueryMobile 3/3 • 画面要素定義  <a href="#" data-icon="home“ data-iconpos="notext“ data-direction="reverse">  <ul data-role="listview" data-inset="true"> </ul> Home アイコンリストビュー

jQuery Template • JavaScript のテンプレートエンジン vardataObject = { name: “勇大地", comments: [“Azureは良いねぇ…”,“チャックさんイケメーン！"] }; $("#sometmpl").tmpl( dataObject ) .appendTo("ul"); <script id="sometmpl" type"text/x-jquery-tmpl"> <li>${$i}) ${name}(こめんと: {{each(i,comment) comments}}${comment}{{/each}})</li> </script> <ul></ul>

jQuery Validate • バリデーションのルールを設定 $(function () { $("#my_form").validate({ rules: { my_textbox: { required: true }}, messages: { my_textbox: { required: "1文字くらい入力してほしいお。。。" }} });});

サーバサイドは ASP.NET MVC • 意図通りの HTML を記述可能 • URL ルーティング • モデルバインダ • グローバルフィルタ • 単体テストの容易化 jQueryとの相性が良い！！

JSonValueProviderFactory • JSON データの送受信（MVC3 の新機能） [HttpGet] public ActionResultJsonMethod(Person person) { //リクエストデータの表示 Trace.TraceInformation(person.ToString()); //JSON 形式のデータを返す return Json(new Person() { Name = "勇大地", Comment = "緊張して胃が痛い" } , JsonRequestBehavior.AllowGet); }

HTML5 with jQuery Mobile demo ...

アジェンダ

Windows Azure 移行のポイント • アセンブリ配置 • デバッグ手法の差異 • データの永続化 • セッションの取り扱い Appendix で

現在は必要 アセンブリ配置 • 新規「ASP.NET MVC3 Web アプリケーション」を追加 • 「ソリューション内の Web ロールプロジェクト」を追加 • ASP.NET MVC 側のプロジェクトを右クリックし、「配置可能な依存関係の追加」を選択３. １. ２.

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

安価なスケーラブル Web アプリの要点 データの永続化・Blob Storage ・Drive ・Table Storage ・QueueStorage クラウドのストレージ活用がポイント

サンプルのアーキテクチャ Azure AppFabric キャッシュ１セッションロードバランサ IE9 ２永続データテーブル３スマートフォン ※認証にはAccess Controlを利用スケーラブル＆マルチデバイス

ASP.NET MVC＋ Windows Azure demo ...

まとめ • マルチデバイス対応向け開発方法を習得 • HTML5 の仕様をキャッチアップ • jQueryの各種プラグインを学習 • クラウドを利用したサービス方法を習得 • アセンブリ配置に注意 • Web デプロイを活用 • 永続化データの取り扱いに留意

appendix.

Modernizrの利用 1/2 • ブラウザの HTML5 対応度合いを確認 //SVG 対応の可否 alert("svg is " + Modernizr.svg); //GPS 位置取得の可否 alert("geolocation is " + Modernizr.geolocation); //アプリケーションキャッシュの可否 alert("applicationcache is " + Modernizr.applicationcache); F12 ツール

Modernizrの利用2/2 • ブラウザの HTML5 対応度合いを確認 //<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]); }

HTML5 の振り返り＋ α • 主要ブラウザの HTML5 対応により、HTML5 のサービス展開が可能に現在 ★ 9/17β版リリース ★ 11/17 PlatformPreviwe7リリース ★ 3/15 IE9 製品版リリース（HTML5対応） ★ 4/13 IE10 Preview（HTML5対応強化） ★7/7 4βeta 1リリース ★11/10βeta 7リリース ★ 3/22 FF4 製品版リリース（HTML5対応） ★ 2/11 Chrome 9リリース（HTML5対応強化） ★ 2/11 Chrome 9リリース（HTML5対応強化） ★ 3/9 Chrome 10 リリース（HTML5対応強化） ★ 3/22 Chrome 11 リリース（HTML5対応強化） ★6/8 Safari 5リリース ★ 3/9 Safari 5.0.4 リリース（HTML5対応強化）

HTML5 の振り返り＋ α 現在草案 • 2012 年には、HTML4 での普及期だった勧告候補になる予定 • 現状は最終草案の段階 2011年 5月現在最終草案 2012年 2月予定勧告候補勧告案そろそろ HTML5 を学ぶ頃合 2014年予定勧告

Azure を無料で使うには？！ 1/2 • MSDN に無償で利用する方法が！・クレジットカード登録不要・30日間使いたい放題・次ページ http://msdn.microsoft.com/ja-jp/windowsazure/gg674969

Azure を無料で使うには？！ 2/2 • 特別導入プランを利用・特別導入プラン・XS インスタンス × １ ⇒月額無料・コンピューティング 24 時間 * 30日＜ 750 時間・データ転送量 0.5 GB * 30 日＜ 20 GB ・SQL Azure 　タダ！特別導入プランの無料枠

学習のステップ クレジットカード不要要クレジットカード

環境構築の方法 • Web Platform Installer を利用！ Visual Studio や環境設定も一括実施 http://msdn.microsoft.com/ja-jp/windowsazure/cc974146

セッションの取り扱い 1/2 • セッションデータの共有方法に工夫が必要インスタンス１のセッションデータインスタンス１ロードバランサインスタンス２のセッションデータインスタンス２ユーザインスタンス３のセッションデータインスタンス３

セッションの取り扱い 2/2 • セッション共有方法メリデメタイムアウトセッションデータを自分で削除小　　←　　コスト＆性能→　　大

クラウドと HTML5 で作成するスケーラブルな Web アプリ開発術～ Windows Azure + ASP.NET MVC 編～