Mais conteúdo relacionado Semelhante a Mvc conf session_5_isami (20) Mvc conf session_5_isami1. mvcConf @:Japan
~ ASP.NET MVC ブート キャンプ ~
クラウドと HTML5 で作成するスケー
ラブルな Web アプリ開発術
~ Windows Azure + ASP.NET MVC 編~
株式会社野村総合研究所
勇大地 (いさみ だいち)
Microsoft MVP for Windows Azure
2. セッションの目的とゴール
目的
ASP.NET MVC × jQuery の開発を学習する
マルチデバス向け Web ゕプリ開発を学習する
Web ゕプリのクラウド移行を学習する
ゴール
ASP.NET MVC × jQuery の開発ができる
マルチデバス向けの画面開発ができる
クラウド上に Web ゕプリを配置できる
2
8. クラウドの振り返り 2/2
Windows 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
10. クラウド上で動く WEB アプリ 1/2
1 キャッシュ
セッション
機能
2
クラゕント 永続データ
3 分散 KVS
サーバ
クラウドプラットフォーム
11. クラウド上で動く WEB アプリ 2/2
クライアント
jQuery
サーバ
ASP.NET MVC
永続データ、セッション
Windows Azure ストレージ サービス
Windows Azure AppFabric キャッシュ
11
14. 必修と化した jQuery !!
jQuery Core DOM 操作等のコゕ機能
jQuery Mobile スマフォ向け
jQuery Template テンプレートエンジン
jQuery Validate バリデーション
jQuery UI UI コンポーネント
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(‘ボタン押下’);
});
15
16. jQuery Mobile 1/3
現在のバージョン
は 1.0α4.1
モバル向けプラ
グン
Windows Phone 7
にも対応
既存プラグンと
も連携可
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>
© 誰か</h1>
</div>
</div>
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. 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
21. サーバサイドは ASP.NET MVC
意図通りの HTML を記述可能
URL ルーテゖング
モデルバンダ
グローバルフゖルタ
単体テストの容易化
jQuery との相性が良い!!
22. JSonValueProviderFactory
JSON データの送受信(MVC3 の新機能)
[HttpGet]
public ActionResult JsonMethod(Person person)
{
//リクエストデータの表示
Trace.TraceInformation(person.ToString());
//JSON 形式のデータを返す
return Json(new Person()
{
Name = "勇大地", Comment = "緊張して胃が痛い"
} , JsonRequestBehavior.AllowGet);
}
22
26. アセンブリ配置
1. 新規「ASP .NET MVC3 Web アプリケーション」を追加
2. 「ソリューション内の Web ロールプロジェクト」を追加
3. ASP.NET MVC 側のプロジェクトを右クリックし、「配置
可能な依存関係の追加」を選択
1. 2. 3.
28. データの永続化 安価なスケーラ
ブル Web ゕプ
データの例 量とサイズ 想定される形式 リの要点
顧客マスタ 多い ・関係型
在庫マスタ ・頻繁に参照される
入出庫データ 多い ・関係型
受注データ ・レコードを蓄積
画像データ サズが巨 ・フゔル等 ・Blob Storage
動画データ 大 ・Drive
ログ サズが小 ・レコードを蓄積
テキスト さい ・Table Storage
伝搬メッセー サズが小 ・キュー等 ・Queue Storage
ジ さい
クラウドのストレージ活用がポイント
29. サンプルのアーキテクチャ
Azure
1 セッション AppFabric
ロードバ
キャッシュ
ランサ
IE9
2
永続データ
テーブル
3
スマートフォン
※認証にはAccess Controlを利用
スケーラブル&マルチデバイス
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. 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. 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. 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. 学習のステップ
クレジットカード不要
最初はローカルで
次は Azure Pass で
次は特別導入プランで
次は長期運用の他プランで
要クレジットカード
40. 環境構築の方法
Web Platform Installer を利用!
Visual Studio や環境
http://msdn.microsoft.com/ja 設定も一括実施
-jp/windowsazure/cc974146
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. © 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.