1.
絵描きのこだわり
http://twitter.com/normalian
http://d.hatena.ne.jp/waritohutsu
わんくま同盟 名古屋勉強会 #18

2.
• HN ： 割と普通
• 本拠地 ： 横浜近辺
• 肩書き ： しがない SI屋
• 趣味 ： コードを書く＆絵を描く
• 肩書き2 ： Microsoft MVP for
Windows Azure
わんくま同盟 名古屋勉強会 #18

3.
セッションの目的とゴール
• 目的
– ASP.NET MVC × jQuery の開発を学習する
– Web アプリのクラウド移行を学習する
• ゴール
– ASP.NET MVC × jQuery の開発ができる
– クラウド上に Web アプリを配置できる
わんくま同盟 名古屋勉強会 #18

4.
アジェンダ
はじめに
HTML5 画面開発のポイントは？
クラウドに移行するには？
まとめ
わんくま同盟 名古屋勉強会 #18

5.
HTML5の振り返り
• HTML4 の後継である次期標準仕様
• 新機能が追加
– 新規マークアップタグの登場
– 新 API（ビデオ・音楽の再生、オフライン実行等）
・ 約 10 年ぶりの標準仕様改正
・ HTML 4.01 に比べ、適用可能な領域が増した
わんくま同盟 名古屋勉強会 #18

6.
HTML5 画面開発のポイント
• HTML5 新機能の利用 jQuery
• マルチデバイス対応 ×
• 旧ブラウザとの共存 ASP.NET MVC
で解決
未だに消えない IE6 PC ／スマフォへの対応
わんくま同盟 名古屋勉強会 #18

7.
クラウド上で動く WEB アプリ 1/2
１ セッション
キャッシュ
機能
２
クライアント 永続データ
３ 分散 KVS
サーバ
クラウドプラットフォーム
わんくま同盟 名古屋勉強会 #18

8.
クラウド上で動く WEB アプリ 2/2
• クライアント
– jQuery
• サーバ
– ASP.NET MVC
• 永続データ、セッション
– Windows Azure ストレージ サービス
– Windows Azure AppFabric キャッシュ
わんくま同盟 名古屋勉強会 #18
8

9.
アジェンダ
はじめに
HTML5 画面開発のポイントは？
クラウドに移行するには？
まとめ
わんくま同盟 名古屋勉強会 #18

10.
HTML5 画面開発のポイントは？
 jQuery の紹介
 Modernizr の紹介
 ASP.NET MVC3 の紹介
わんくま同盟 名古屋勉強会 #18

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>
&copy; 誰か</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

17.
jQuery Validate
 バリデーションのルールを設定
$(function () {
$("#my_form").validate({
rules: {
my_textbox: { required: true }},
messages: {
my_textbox: {
required: "1文字くらい入力してほしいお。。。"
}}
});});
わんくま同盟 名古屋勉強会 #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

22.
アジェンダ
はじめに
HTML5 画面開発のポイントは？
クラウドに移行するには？
まとめ
わんくま同盟 名古屋勉強会 #18

23.
Azure を無料で使う？！ 1/2
 MSDN に無償で利用する方法が！
・クレジットカード登
録不要
・30日間使いたい
放題
・次ページ
http://msdn.microsoft.com/ja-
わんくま同盟 名古屋勉強会 #18
jp/windowsazure/gg674969

24.
Azure を無料で使う？！ 2/2
 特別導入プランを利用 ・特別導入プラン
・XS インスタンス × １
⇒月額無料
・コンピューティング
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

27.
Windows Azure 移行のポイント
 アセンブリ配置
 デバッグ手法の差異
 データの永続化
 セッションの取り扱い
わんくま同盟 名古屋勉強会 #18

28.
アセンブリ配置
1. 新規「ASP.NET MVC3 Web アプリケーション」を追加
2. 「ソリューション内の Web ロールプロジェクト」を追加
3. ASP.NET MVC 側のプロジェクトを右クリックし、「配置可能
な依存関係の追加」を選択
１. ２. ３.
わんくま同盟 名古屋勉強会 #18

29.
デバッグ手法の差異
 Web デプロイが便利！！
 数秒で再デプロイ可能
 Azure SDK 1.4.1 から
 要リモートデスクトップ
わんくま同盟 名古屋勉強会 #18

30.
セッションの取り扱い 1/2
 セッションデータの共有方法に工夫が必要
インスタンス１の
セッションデータ
インスタンス１
ロードバラン
インスタンス２の
サ
セッションデータ
ユーザ インスタンス２
インスタンス３の
セッションデータ
インスタンス３
わんくま同盟 名古屋勉強会 #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

32.
アジェンダ
はじめに
HTML5 画面開発のポイントは？
クラウドに移行するには？
まとめ
わんくま同盟 名古屋勉強会 #18

33.
まとめ
 HTML5 な画面開発方法を習得
 jQuery の 各種プラグインを学習
 Modernizr を学習
 ASP.NET MVC3 を学習
 クラウドを利用したサービス方法を習得
 アセンブリ配置に注意
 Web デプロイを活用
 永続化データの取り扱いに留意
わんくま同盟 名古屋勉強会 #18