Weitere ähnliche Inhalte
Ähnlich wie わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~ (20)
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
- 2. • HN : 割と普通
• 本拠地 : 横浜近辺
• 肩書き : しがない SI屋
• 趣味 : コードを書く&絵を描く
• 肩書き2 : Microsoft MVP for
Windows Azure
わんくま同盟 名古屋勉強会 #18
- 3. セッションの目的とゴール
• 目的
– ASP.NET MVC × jQuery の開発を学習する
– Web アプリのクラウド移行を学習する
• ゴール
– ASP.NET MVC × jQuery の開発ができる
– クラウド上に Web アプリを配置できる
わんくま同盟 名古屋勉強会 #18
- 6. HTML5 画面開発のポイント
• HTML5 新機能の利用 jQuery
• マルチデバイス対応 ×
• 旧ブラウザとの共存 ASP.NET MVC
で解決
未だに消えない IE6 PC /スマフォへの対応
わんくま同盟 名古屋勉強会 #18
- 7. クラウド上で動く WEB アプリ 1/2
1 セッション
キャッシュ
機能
2
クライアント 永続データ
3 分散 KVS
サーバ
クラウドプラットフォーム
わんくま同盟 名古屋勉強会 #18
- 8. クラウド上で動く WEB アプリ 2/2
• クライアント
– jQuery
• サーバ
– ASP.NET MVC
• 永続データ、セッション
– Windows Azure ストレージ サービス
– Windows Azure AppFabric キャッシュ
わんくま同盟 名古屋勉強会 #18
8
- 11. 必修である jQuery !!
• jQuery Core DOM 操作等のコア機能
• jQuery Mobile スマフォ向け
• jQuery Template テンプレートエンジン
• jQuery Validate バリデーション
• jQuery UI UI コンポーネント
• jQuery Globalization 国際化
ASP.NET MVC との相性が良い!
わんくま同盟 名古屋勉強会 #18
- 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. jQuery Mobile 1/3
現在のバージョン は
1.0β 1
モバイル向けプラグ
イン
Windows Phone 7 に
も対応
既存プラグインとも
連携可
わんくま同盟 名古屋勉強会 #18
- 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>
© 誰か</h1>
</div>
</div>
わんくま同盟 名古屋勉強会 #18
- 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. 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
- 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. 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. サーバサイドは ASP.NET MVC
• 意図通りの HTML を記述可能
• URL ルーティング
• モデルバインダ
• グローバルフィルタ
• 単体テストの容易化
jQuery との相性が良い!!
わんくま同盟 名古屋勉強会 #18
- 21. JSonValueProviderFactory
JSON データの送受信(MVC3 の新機能)
[HttpGet]
public ActionResult JsonMethod(Person person)
{
//リクエストデータの表示
Trace.TraceInformation(person.ToString());
//JSON 形式のデータを返す
return Json(new Person()
{
Name = “割と普通”, Comment = “えろーげ、えろーげ"
} , JsonRequestBehavior.AllowGet);
}
わんくま同盟 名古屋勉強会 #18
- 23. Azure を無料で使う?! 1/2
MSDN に無償で利用する方法が!
・クレジットカード登
録不要
・30日間使いたい
放題
・次ページ
http://msdn.microsoft.com/ja-
わんくま同盟 名古屋勉強会 #18
jp/windowsazure/gg674969
- 24. Azure を無料で使う?! 2/2
特別導入プランを利用 ・特別導入プラン
・XS インスタンス × 1
⇒月額無料
・コンピューティング
24 時間 * 30日 < 750 時間
・データ転送量
0.5 GB * 30 日 < 20 GB
・SQL Azure
タダ!
特別導入プランの無料枠
わんくま同盟 名古屋勉強会 #18
- 25. 学習のステップ
クレジットカード不要
最初はローカルで
次は Azure Pass で
次は特別導入プランで
次は長期運用の他プランで
要クレジットカード
わんくま同盟 名古屋勉強会 #18
- 26. 環境構築の方法
Web Platform Installer を利用!
Visual Studio や環境
http://msdn.microsoft.com/ja- 設定も一括実施
jp/windowsazure/cc974146
わんくま同盟 名古屋勉強会 #18
- 28. アセンブリ配置
1. 新規「ASP.NET MVC3 Web アプリケーション」を追加
2. 「ソリューション内の Web ロールプロジェクト」を追加
3. ASP.NET MVC 側のプロジェクトを右クリックし、「配置可能
な依存関係の追加」を選択
1. 2. 3.
わんくま同盟 名古屋勉強会 #18
- 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
- 33. まとめ
HTML5 な画面開発方法を習得
jQuery の 各種プラグインを学習
Modernizr を学習
ASP.NET MVC3 を学習
クラウドを利用したサービス方法を習得
アセンブリ配置に注意
Web デプロイを活用
永続化データの取り扱いに留意
わんくま同盟 名古屋勉強会 #18