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

絵描きのこだわり

http://twitter.com/normalian
http://d.hatena.ne.jp/waritohutsu

わんくま同盟名古屋勉強会 #18

• HN ：割と普通
• 本拠地：横浜近辺
• 肩書き：しがない SI屋
• 趣味：コードを書く＆絵を描く

• 肩書き2 ： Microsoft MVP for
Windows Azure


セッションの目的とゴール
• 目的
– ASP.NET MVC × jQuery の開発を学習する
– Web アプリのクラウド移行を学習する

• ゴール
– ASP.NET MVC × jQuery の開発ができる
– クラウド上に Web アプリを配置できる


アジェンダ

はじめに

HTML5 画面開発のポイントは？

クラウドに移行するには？

まとめ


HTML5の振り返り
• HTML4 の後継である次期標準仕様

• 新機能が追加
– 新規マークアップタグの登場
– 新 API（ビデオ・音楽の再生、オフライン実行等）

・約 10 年ぶりの標準仕様改正
・ HTML 4.01 に比べ、適用可能な領域が増した


HTML5 画面開発のポイント
• HTML5 新機能の利用 jQuery
• マルチデバイス対応 ×
• 旧ブラウザとの共存 ASP.NET MVC
で解決

未だに消えない IE6 PC ／スマフォへの対応

クラウド上で動く WEB アプリ 1/2

１セッション
キャッシュ
機能

２

クライアント永続データ

３分散 KVS
サーバ

クラウドプラットフォーム

クラウド上で動く WEB アプリ 2/2
• クライアント
– jQuery

• サーバ
– ASP.NET MVC

• 永続データ、セッション
– Windows Azure ストレージサービス
– Windows Azure AppFabric キャッシュ

8

HTML5 画面開発のポイントは？
 jQuery の紹介
 Modernizr の紹介
 ASP.NET MVC3 の紹介


必修である jQuery ！！
• jQuery Core DOM 操作等のコア機能
• jQuery Mobile スマフォ向け
• jQuery Template テンプレートエンジン
• jQuery Validate バリデーション
• jQuery UI UI コンポーネント
• jQuery Globalization 国際化

ASP.NET MVC との相性が良い！


jQuery Core
 jQuery の主要機能（一部）
//セレクタ
var elem1 = $(‘#my_id’);

//属性の操作
var link = $(‘#my_element’).attr(‘href’);

//CSSの取得
var color = $(‘#my_element’).css(‘background’);

//イベント追加
$(‘#mybutton’).click( function(){
alert(‘ボタン押下’);
});


jQuery Mobile 1/3
 現在のバージョンは
1.0β 1
 モバイル向けプラグ
イン
 Windows Phone 7 に
も対応
 既存プラグインとも
連携可


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>

jQuery Mobile 3/3
 画面要素定義

<a href="#"
data-icon="home“
data-iconpos="notext“
data-direction="reverse">
Home アイコン

<ul
data-role="listview"
data-inset="true">
</ul>

リストビュー

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>


jQuery Validate
 バリデーションのルールを設定
$(function () {
$("#my_form").validate({
rules: {
my_textbox: { required: true }},
messages: {
my_textbox: {
required: "1文字くらい入力してほしいお。。。"
}}
});});


Modernizr の利用 1/2
 ブラウザの HTML5 対応度合いを確認
//SVG 対応の可否
alert("svg is " + Modernizr.svg);

//GPS 位置取得の可否
alert("geolocation is " +
Modernizr.geolocation);

//アプリケーションキャッシュの可否
alert("applicationcache is " +
Modernizr.applicationcache);

F12 ツール


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]); }


サーバサイドは ASP.NET MVC
• 意図通りの HTML を記述可能
• URL ルーティング
• モデルバインダ
• グローバルフィルタ
• 単体テストの容易化

jQuery との相性が良い！！


JSonValueProviderFactory
 JSON データの送受信（MVC3 の新機能）
[HttpGet]
public ActionResult JsonMethod(Person person)
{
//リクエストデータの表示
Trace.TraceInformation(person.ToString());

//JSON 形式のデータを返す
return Json(new Person()
{
Name = “割と普通”, Comment = “えろーげ、えろーげ"
} , JsonRequestBehavior.AllowGet);
}


Azure を無料で使う？！ 1/2
 MSDN に無償で利用する方法が！

・クレジットカード登
録不要
・30日間使いたい
放題

・次ページ
http://msdn.microsoft.com/ja-
jp/windowsazure/gg674969

Azure を無料で使う？！ 2/2
 特別導入プランを利用・特別導入プラン
・XS インスタンス × １
⇒月額無料

・コンピューティング
24 時間 * 30日＜ 750 時間
・データ転送量
0.5 GB * 30 日＜ 20 GB
・SQL Azure
タダ！

特別導入プランの無料枠

学習のステップ
クレジットカード不要

最初はローカルで

次は Azure Pass で

次は特別導入プランで

次は長期運用の他プランで

要クレジットカード

環境構築の方法
 Web Platform Installer を利用！

Visual Studio や環境
http://msdn.microsoft.com/ja- 設定も一括実施
jp/windowsazure/cc974146


Windows Azure 移行のポイント
 アセンブリ配置

 デバッグ手法の差異

 データの永続化

 セッションの取り扱い


アセンブリ配置
1. 新規「ASP.NET MVC3 Web アプリケーション」を追加
2. 「ソリューション内の Web ロールプロジェクト」を追加
3. ASP.NET MVC 側のプロジェクトを右クリックし、「配置可能
な依存関係の追加」を選択

１. ２. ３.


デバッグ手法の差異
 Web デプロイが便利！！
 数秒で再デプロイ可能
 Azure SDK 1.4.1 から
 要リモートデスクトップ


セッションの取り扱い 1/2
 セッションデータの共有方法に工夫が必要
インスタンス１の
セッションデータ
インスタンス１
ロードバラン

インスタンス２の
サ

ユーザインスタンス２

インスタンス３の
インスタンス３


セッションの取り扱い 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に格ロバイダではない
納するよりも遅いため、コードがい
びつになる
小 ← コスト＆性能 → 大

まとめ
 HTML5 な画面開発方法を習得
 jQuery の各種プラグインを学習
 Modernizr を学習
 ASP.NET MVC3 を学習

 クラウドを利用したサービス方法を習得
 アセンブリ配置に注意
 Web デプロイを活用
 永続化データの取り扱いに留意


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

More Related Content

What's hot

Viewers also liked

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

More from normalian

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