1 / 43

クラウドと HTML5 で作成するスケー ラブルな Web アプリ開発術 ~ Windows Azure + 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 の開発ができる

jorden-park
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


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

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

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

  4. アジェンダ

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

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

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

  8. クラウドの振り返り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

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

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

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

  12. アジェンダ

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

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

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

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

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

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

  19. 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>

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

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

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

  23. HTML5 with jQuery Mobile demo ...

  24. アジェンダ

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

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

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

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

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

  30. ASP.NET MVC+ Windows Azure demo ...

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

  32. appendix.

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

  34. 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]); }

  35. 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対応強化)

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

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

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

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

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

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

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

More Related