わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~

2,337 views

Published on

Published in: Travel
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,337
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~

  1. 1. 絵描きのこだわりhttp://twitter.com/normalianhttp://d.hatena.ne.jp/waritohutsu わんくま同盟 名古屋勉強会 #18
  2. 2. • HN : 割と普通• 本拠地 : 横浜近辺• 肩書き : しがない SI屋• 趣味 : コードを書く&絵を描く• 肩書き2 : Microsoft MVP for Windows Azure わんくま同盟 名古屋勉強会 #18
  3. 3. セッションの目的とゴール• 目的 – ASP.NET MVC × jQuery の開発を学習する – Web アプリのクラウド移行を学習する• ゴール – ASP.NET MVC × jQuery の開発ができる – クラウド上に Web アプリを配置できる わんくま同盟 名古屋勉強会 #18
  4. 4. アジェンダはじめに HTML5 画面開発のポイントは? クラウドに移行するには?まとめ わんくま同盟 名古屋勉強会 #18
  5. 5. HTML5の振り返り• HTML4 の後継である次期標準仕様• 新機能が追加 – 新規マークアップタグの登場 – 新 API(ビデオ・音楽の再生、オフライン実行等) ・ 約 10 年ぶりの標準仕様改正 ・ HTML 4.01 に比べ、適用可能な領域が増した わんくま同盟 名古屋勉強会 #18
  6. 6. HTML5 画面開発のポイント• HTML5 新機能の利用 jQuery• マルチデバイス対応 ו 旧ブラウザとの共存 ASP.NET MVC で解決未だに消えない IE6 PC /スマフォへの対応 わんくま同盟 名古屋勉強会 #18
  7. 7. クラウド上で動く WEB アプリ 1/2 1 セッション キャッシュ 機能 2クライアント 永続データ 3 分散 KVS サーバ クラウドプラットフォーム わんくま同盟 名古屋勉強会 #18
  8. 8. クラウド上で動く WEB アプリ 2/2• クライアント – jQuery• サーバ – ASP.NET MVC• 永続データ、セッション – Windows Azure ストレージ サービス – Windows Azure AppFabric キャッシュ わんくま同盟 名古屋勉強会 #18 8
  9. 9. アジェンダはじめに HTML5 画面開発のポイントは? クラウドに移行するには?まとめ わんくま同盟 名古屋勉強会 #18
  10. 10. HTML5 画面開発のポイントは? jQuery の紹介 Modernizr の紹介 ASP.NET MVC3 の紹介 わんくま同盟 名古屋勉強会 #18
  11. 11. 必修である jQuery !!• jQuery Core DOM 操作等のコア機能• jQuery Mobile スマフォ向け• jQuery Template テンプレートエンジン• jQuery Validate バリデーション• jQuery UI UI コンポーネント• jQuery Globalization 国際化 ASP.NET MVC との相性が良い! わんくま同盟 名古屋勉強会 #18
  12. 12. jQuery Core jQuery の主要機能(一部)//セレクタ var elem1 = $(‘#my_id’);//属性の操作 var link = $(‘#my_element’).attr(‘href’);//CSSの取得 var color = $(‘#my_element’).css(‘background’);//イベント追加$(‘#mybutton’).click( function(){ alert(‘ボタン押下’);}); わんくま同盟 名古屋勉強会 #18
  13. 13. jQuery Mobile 1/3 現在のバージョン は 1.0β 1 モバイル向けプラグ イン Windows Phone 7 に も対応 既存プラグインとも 連携可 わんくま同盟 名古屋勉強会 #18
  14. 14. 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
  15. 15. jQuery Mobile 3/3 画面要素定義<!-- ページ定義 --><a href="#" data-icon="home“ data-iconpos="notext“ data-direction="reverse"> Home アイコン<!-- ページ定義 --><ul data-role="listview" data-inset="true"></ul> リストビュー わんくま同盟 名古屋勉強会 #18
  16. 16. jQuery Template JavaScript のテンプレートエンジンvar dataObject = { name: ‚割と普通", comments: [‚Azureは良いねぇ…‛,‚MVC3 Webロールが欲しい"] };$("#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> わんくま同盟 名古屋勉強会 #18
  17. 17. jQuery Validate バリデーションのルールを設定$(function () { $("#my_form").validate({ rules: { my_textbox: { required: true }}, messages: { my_textbox: { required: "1文字くらい入力してほしいお。。。" }} });}); わんくま同盟 名古屋勉強会 #18
  18. 18. Modernizr の利用 1/2 ブラウザの HTML5 対応度合いを確認//SVG 対応の可否alert("svg is " + Modernizr.svg);//GPS 位置取得の可否alert("geolocation is " +Modernizr.geolocation);//アプリケーションキャッシュの可否alert("applicationcache is " +Modernizr.applicationcache); F12 ツール わんくま同盟 名古屋勉強会 #18
  19. 19. 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]); } わんくま同盟 名古屋勉強会 #18
  20. 20. サーバサイドは ASP.NET MVC• 意図通りの HTML を記述可能• URL ルーティング• モデルバインダ• グローバルフィルタ• 単体テストの容易化 jQuery との相性が良い!! わんくま同盟 名古屋勉強会 #18
  21. 21. JSonValueProviderFactory JSON データの送受信(MVC3 の新機能)[HttpGet]public ActionResult JsonMethod(Person person){ //リクエストデータの表示 Trace.TraceInformation(person.ToString()); //JSON 形式のデータを返す return Json(new Person() { Name = “割と普通”, Comment = “えろーげ、えろーげ" } , JsonRequestBehavior.AllowGet);} わんくま同盟 名古屋勉強会 #18
  22. 22. アジェンダはじめに HTML5 画面開発のポイントは? クラウドに移行するには?まとめ わんくま同盟 名古屋勉強会 #18
  23. 23. Azure を無料で使う?! 1/2 MSDN に無償で利用する方法が! ・クレジットカード登 録不要 ・30日間使いたい 放題 ・次ページ http://msdn.microsoft.com/ja- わんくま同盟 名古屋勉強会 #18 jp/windowsazure/gg674969
  24. 24. Azure を無料で使う?! 2/2 特別導入プランを利用 ・特別導入プラン ・XS インスタンス × 1 ⇒月額無料 ・コンピューティング 24 時間 * 30日 < 750 時間 ・データ転送量 0.5 GB * 30 日 < 20 GB ・SQL Azure タダ! 特別導入プランの無料枠 わんくま同盟 名古屋勉強会 #18
  25. 25. 学習のステップ クレジットカード不要最初はローカルで 次は Azure Pass で 次は特別導入プランで 次は長期運用の他プランで 要クレジットカード わんくま同盟 名古屋勉強会 #18
  26. 26. 環境構築の方法 Web Platform Installer を利用! Visual Studio や環境 http://msdn.microsoft.com/ja- 設定も一括実施 jp/windowsazure/cc974146 わんくま同盟 名古屋勉強会 #18
  27. 27. Windows Azure 移行のポイント アセンブリ配置 デバッグ手法の差異 データの永続化 セッションの取り扱い わんくま同盟 名古屋勉強会 #18
  28. 28. アセンブリ配置1. 新規「ASP.NET MVC3 Web アプリケーション」を追加2. 「ソリューション内の Web ロールプロジェクト」を追加3. ASP.NET MVC 側のプロジェクトを右クリックし、「配置可能 な依存関係の追加」を選択 1. 2. 3. わんくま同盟 名古屋勉強会 #18
  29. 29. デバッグ手法の差異 Web デプロイが便利!! 数秒で再デプロイ可能 Azure SDK 1.4.1 から 要リモートデスクトップ わんくま同盟 名古屋勉強会 #18
  30. 30. セッションの取り扱い 1/2 セッションデータの共有方法に工夫が必要 インスタンス1の セッションデータ インスタンス1 ロードバラン インスタンス2の サ セッションデータユーザ インスタンス2 インスタンス3の セッションデータ インスタンス3 わんくま同盟 名古屋勉強会 #18
  31. 31. セッションの取り扱い 2/2 セッション共有方法メリデメ MSDN Code ASP.NET標準の 自作セッション Azure AppFabric Galleryのセッショ セッションプロバイ プロバイダ キャッシュ ンプロバイダ ダ概要 Code Galleryの ASP.NET標準の Access mdb等 Azure AppFabric セッションプロバイ セッションプロバイ のプロバイダを キャッシュを利用 ダを利用 ダを利用 書き換える利用スト Table Storage SQL Azure SQL Azure Azure AppFabricレージ キャッシュ難点 ・タイムアウトした ・タイムアウトした ・タイムアウトし ・コストが高め セッションを自分 セッションを自分 たセッションを で削除する必要 で削除 自分で削除す がある ・Azure向けのプ る必要がある ・SQL Azureに格 ロバイダではない 納するよりも遅い ため、コードがい びつになる 小 ← コスト&性能 → 大 わんくま同盟 名古屋勉強会 #18
  32. 32. アジェンダはじめに HTML5 画面開発のポイントは? クラウドに移行するには?まとめ わんくま同盟 名古屋勉強会 #18
  33. 33. まとめ HTML5 な画面開発方法を習得 jQuery の 各種プラグインを学習 Modernizr を学習 ASP.NET MVC3 を学習 クラウドを利用したサービス方法を習得 アセンブリ配置に注意 Web デプロイを活用 永続化データの取り扱いに留意 わんくま同盟 名古屋勉強会 #18

×