Mvc conf session_5_isami

1,271 views
1,201 views

Published on

mvcConf @:Japan ~ ASP.NET MVC ブートキャンプ ~ の資料です

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,271
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
35
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Mvc conf session_5_isami

  1. 1. mvcConf @:Japan~ ASP.NET MVC ブート キャンプ ~クラウドと HTML5 で作成するスケー ラブルな Web アプリ開発術 ~ Windows Azure + ASP.NET MVC 編~ 株式会社野村総合研究所 勇大地 (いさみ だいち) Microsoft MVP for Windows Azure
  2. 2. セッションの目的とゴール 目的  ASP.NET MVC × jQuery の開発を学習する  マルチデバ゗ス向け Web ゕプリ開発を学習する  Web ゕプリのクラウド移行を学習する ゴール  ASP.NET MVC × jQuery の開発ができる  マルチデバ゗ス向けの画面開発ができる  クラウド上に Web ゕプリを配置できる 2
  3. 3. 今回作成したサンプル 機能 コメント付きで投票 投稿の割合をグラフ化 http://mvcconfjapan120611.cloudapp.net/ 3
  4. 4. アジェンダ クラウド+ HTML5 が必要な理由は? HTML5 画面開発のポ゗ントは? クラウドに移行するには? まとめ
  5. 5. HTML5 と クラウドの振り返り HTML5 の振り返り クラウドの振り返り クラウド上で動く WEB ゕプリ
  6. 6. HTML5の振り返り HTML4 の後継である次期標準仕様 新機能が追加 新規マークゕップタグの登場 新 API(ビデオ・音楽の再生、オフラ゗ン実行等) ・ 約 10 年ぶりの標準仕様改正 ・ HTML 4.01 に比べ、適用可能な領域が増した
  7. 7. クラウドの振り返り 1/2 メリット 柔軟なスケールゕウト/スケー ルダウン 保守の手間、管理コストを削減 デメリット 環境カスタマ゗ズが容易でない ゕーキテクチャが従来と異なる
  8. 8. クラウドの振り返り 2/2Windows Azure Platform Azure AppFabric SQL Azure • Service Bus • RDB • Access Control • Data Sync • Caching • Reporting Windows Azure Marketplace Windows Azure DataMarket コンピュート ストレージ Applications •Webロール • Blob •Workerロール • Table •VMロール • Queue Microsoft • Drive Pinpoint
  9. 9. クラウドと HTML5 の利用例demo ... 9
  10. 10. クラウド上で動く WEB アプリ 1/2 1 キャッシュ セッション 機能 2クラ゗ゕント 永続データ 3 分散 KVS サーバ クラウドプラットフォーム
  11. 11. クラウド上で動く WEB アプリ 2/2 クライアント  jQuery サーバ  ASP.NET MVC 永続データ、セッション  Windows Azure ストレージ サービス  Windows Azure AppFabric キャッシュ 11
  12. 12. アジェンダ クラウド+HTML5 が必要な理由は? HTML5 画面開発のポ゗ントは? クラウドに移行するには? まとめ
  13. 13. HTML5 画面開発のポイント HTML5 新機能の利用 jQuery マルチデバイス対応 × 旧ブラウザとの共存 ASP.NET MVC で解決未だに消えない IE6 PC /スマフォへの対応
  14. 14. 必修と化した jQuery !! jQuery Core DOM 操作等のコゕ機能 jQuery Mobile スマフォ向け jQuery Template テンプレートエンジン jQuery Validate バリデーション jQuery UI UI コンポーネント jQuery Globalization 国際化 ASP.NET MVC との相性が良い!
  15. 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(‘ボタン押下’);}); 15
  16. 16. jQuery Mobile 1/3 現在のバージョン は 1.0α4.1 モバ゗ル向けプラ グ゗ン Windows Phone 7 にも対応 既存プラグ゗ンと も連携可
  17. 17. jQuery Mobile 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. 18. jQuery Mobile 3/3 画面要素定義<!-- ページ定義 --><a href="#" data-icon="home“ data-iconpos="notext“ Home ゕ゗コン data-direction="reverse"><!-- ページ定義 --><ul data-role="listview" data-inset="true"></ul> リストビュー 18
  19. 19. jQuery Template JavaScript のテンプレートエンジンvar dataObject = { 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> 19
  20. 20. jQuery Validate バリデーションのルールを設定$(function () { $("#my_form").validate({ rules: { my_textbox: { required: true }}, messages: { my_textbox: { required: "1文字くらい入力してほしいお。。。" }} });}); 20
  21. 21. サーバサイドは ASP.NET MVC 意図通りの HTML を記述可能 URL ルーテゖング モデルバ゗ンダ グローバルフゖルタ 単体テストの容易化 jQuery との相性が良い!!
  22. 22. JSonValueProviderFactory JSON データの送受信(MVC3 の新機能)[HttpGet]public ActionResult JsonMethod(Person person){ //リクエストデータの表示 Trace.TraceInformation(person.ToString()); //JSON 形式のデータを返す return Json(new Person() { Name = "勇大地", Comment = "緊張して胃が痛い" } , JsonRequestBehavior.AllowGet);} 22
  23. 23. HTML5 with jQuery Mobiledemo ... 23
  24. 24. アジェンダ クラウド+ HTML5 が必要な理由は? HTML5 画面開発のポ゗ントは? クラウドに移行するには? まとめ
  25. 25. Windows Azure 移行のポイント アセンブリ配置 デバッグ手法の差異 データの永続化 セッションの取り扱い Appendix で
  26. 26. アセンブリ配置1. 新規「ASP .NET MVC3 Web アプリケーション」を追加2. 「ソリューション内の Web ロールプロジェクト」を追加3. ASP.NET MVC 側のプロジェクトを右クリックし、「配置 可能な依存関係の追加」を選択 1. 2. 3.
  27. 27. デバッグ手法の差異 Web デプロイが便利!! 数秒で再デプロイ可能 Azure SDK 1.4.1 から 要リモートデスクトップ
  28. 28. データの永続化 安価なスケーラ ブル Web ゕプデータの例 量とサイズ 想定される形式 リの要点顧客マスタ 多い ・関係型在庫マスタ ・頻繁に参照される入出庫データ 多い ・関係型受注データ ・レコードを蓄積画像データ サ゗ズが巨 ・フゔ゗ル等 ・Blob Storage動画データ 大 ・Driveログ サ゗ズが小 ・レコードを蓄積テキスト さい ・Table Storage伝搬メッセー サ゗ズが小 ・キュー等 ・Queue Storageジ さい クラウドのストレージ活用がポイント
  29. 29. サンプルのアーキテクチャ Azure 1 セッション AppFabric ロードバ キャッシュ ランサ IE9 2 永続データ テーブル 3スマートフォン ※認証にはAccess Controlを利用 スケーラブル&マルチデバイス
  30. 30. ASP.NET MVC +Windows Azuredemo ... 30
  31. 31. まとめ マルチデバイス対応向け開発方法を習得 HTML5 の仕様をキャッチゕップ jQuery の 各種プラグ゗ンを学習 クラウドを利用したサービス方法を習得 ゕセンブリ配置に注意 Web デプロ゗を活用 永続化データの取り扱いに留意
  32. 32. appendix. 32
  33. 33. Modernizr の利用 1/2 ブラウザの HTML5 対応度合いを確認//SVG 対応の可否alert("svg is " + Modernizr.svg);//GPS 位置取得の可否alert("geolocation is " +Modernizr.geolocation);//ゕプリケーションキャッシュの可否alert("applicationcache is " +Modernizr.applicationcache); F12 ツール 33
  34. 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]); } 34
  35. 35. HTML5 の振り返り + α 主要ブラウザの HTML5 対応により、HTML5 のサービス展開 が可能に 2010 2011 1Q 2Q 3Q 4Q 1Q 2Q 3Q 4Q ★ 9/17β版リリース ★ 11/17 Platform Previwe 7リリース ★ 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. 36. HTML5 の振り返り + α 草案 2012 年には、HTML4 での普 及期だった勧告候補になる予定 2011年 現状は最終草案の段階 5月現在 最終草案 2012年 2月予定 勧告候補 勧告案そろそろ HTML5 を学ぶ頃合 2014年 予定 勧告
  37. 37. Azure を無料で使うには?! 1/2 MSDN に無償で利用する方法が! ・クレジットカー ド登録不要 ・30日間使いた い放題 ・次ページhttp://msdn.microsoft.com/ja-jp/windowsazure/gg674969
  38. 38. Azure を無料で使うには?! 2/2 特別導入プランを利用 ・特別導入プラン ・XS ゗ンスタンス × 1 ⇒月額無料 ・コンピューテゖング 24 時間 * 30日 < 750 時間 ・データ転送量 0.5 GB * 30 日 < 20 GB ・SQL Azure タダ! 特別導入プランの無料枠
  39. 39. 学習のステップ クレジットカード不要 最初はローカルで 次は Azure Pass で 次は特別導入プランで 次は長期運用の他プランで 要クレジットカード
  40. 40. 環境構築の方法 Web Platform Installer を利用! Visual Studio や環境http://msdn.microsoft.com/ja 設定も一括実施 -jp/windowsazure/cc974146
  41. 41. セッションの取り扱い 1/2 セッションデータの共有方法に工夫が必要 インスタンス1の セッションデータ ゗ンスタンス1 ロードバ ランサ インスタンス2の セッションデータユーザ ゗ンスタンス2 インスタンス3の セッションデータ ゗ンスタンス3
  42. 42. セッションの取り扱い 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向けのプロバ がある るよりも遅い ゗ダではないため、 コードがいびつになる タ゗ムゕウト セッションデー 小 ← コスト&性能 → 大 タを自分で削除
  43. 43. © 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.

×