クラウドと html5 で作成するスケー ラブルな web アプリ開発術 ～ windows...
DESCRIPTION
クラウドと HTML5 で作成するスケー ラブルな Web アプリ開発術 ～ Windows Azure + ASP.NET MVC 編～. 株式会社野村総合研究所 勇大地 ( いさみ だいち ) Microsoft MVP for Windows Azure. セッションの目的とゴール. 目的 ASP.NET MVC × jQuery の開発を学習する マルチデバイス向け Web アプリ 開発を学習 する Web アプリのクラウド移行を 学習 する ゴール ASP.NET MVC × jQuery の開発ができる - PowerPoint PPT PresentationTRANSCRIPT
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 AzureMarketplace
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> © 誰か </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/2MSDN 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.