わんくま同盟名古屋勉強会18回目 asp.net...
DESCRIPTION
TRANSCRIPT
わんくま同盟名古屋勉強会 #18
絵描きのこだわり
http://twitter.com/normalian
http://d.hatena.ne.jp/waritohutsu
わんくま同盟名古屋勉強会 #18
• HN : 割と普通
• 本拠地 : 横浜近辺
• 肩書き : しがない SI屋
• 趣味 : コードを書く&絵を描く
• 肩書き2 : Microsoft MVP for
Windows Azure
わんくま同盟名古屋勉強会 #18
セッションの目的とゴール
• 目的
– ASP.NET MVC × jQuery の開発を学習する
– Web アプリのクラウド移行を学習する
• ゴール
– ASP.NET MVC × jQuery の開発ができる
– クラウド上に Web アプリを配置できる
わんくま同盟名古屋勉強会 #18
アジェンダ
はじめに
HTML5 画面開発のポイントは?
クラウドに移行するには?
まとめ
わんくま同盟名古屋勉強会 #18
• HTML4 の後継である次期標準仕様
• 新機能が追加
–新規マークアップタグの登場
–新 API(ビデオ・音楽の再生、オフライン実行等)
HTML5の振り返り
・ 約 10 年ぶりの標準仕様改正
・ HTML 4.01 に比べ、適用可能な領域が増した
わんくま同盟名古屋勉強会 #18
HTML5 画面開発のポイント
• HTML5 新機能の利用
• マルチデバイス対応
• 旧ブラウザとの共存
未だに消えない IE6 PC /スマフォへの対応
jQuery
×ASP.NET MVC
で解決
わんくま同盟名古屋勉強会 #18
キャッシュ機能
分散 KVS
セッション
永続データ
クラウドプラットフォーム
クライアント
クラウド上で動く WEB アプリ 1/2
サーバ
2
1
3
わんくま同盟名古屋勉強会 #18
• クライアント
– jQuery
• サーバ
– ASP.NET MVC
• 永続データ、セッション
– Windows Azure ストレージサービス
– Windows Azure AppFabric キャッシュ
クラウド上で動く WEB アプリ 2/2
8
わんくま同盟名古屋勉強会 #18
アジェンダ
はじめに
HTML5 画面開発のポイントは?
クラウドに移行するには?
まとめ
わんくま同盟名古屋勉強会 #18
HTML5 画面開発のポイントは?
jQueryの紹介
Modernizrの紹介
ASP.NET MVC3 の紹介
わんくま同盟名古屋勉強会 #18
必修である jQuery !!
• jQuery Core DOM 操作等のコア機能
• jQuery Mobile スマフォ向け
• jQuery Template テンプレートエンジン
• jQuery Validate バリデーション
• jQuery UI UI コンポーネント
• jQuery Globalization 国際化
ASP.NET MVC との相性が良い!
わんくま同盟名古屋勉強会 #18
//セレクタ
var elem1 = $(‘#my_id’);
//属性の操作
var link = $(‘#my_element’).attr(‘href’);
//CSSの取得
var color = $(‘#my_element’).css(‘background’);
//イベント追加
$(‘#mybutton’).click( function(){
alert(‘ボタン押下’);
});
jQuery Core jQueryの主要機能(一部)
わんくま同盟名古屋勉強会 #18
jQuery Mobile 1/3現在のバージョンは
1.0β 1モバイル向けプラグイン Windows Phone 7 にも対応既存プラグインとも連携可
わんくま同盟名古屋勉強会 #18
<!-- ページ定義 -->
<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">
<!-- ページ定義 --><uldata-role="listview"data-inset="true">
</ul>
画面要素定義
Home アイコン
リストビュー
わんくま同盟名古屋勉強会 #18
var dataObject = {
name: ‚割と普通",
comments: [‚Azureは良いねぇ…‛,‚MVC3 Webロールが欲しい"]
};
$("#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>
わんくま同盟名古屋勉強会 #18
$(function () {
$("#my_form").validate({
rules: {
my_textbox: { required: true }},
messages: {
my_textbox: {
required: "1文字くらい入力してほしいお。。。"
}}
});});
jQuery Validateバリデーションのルールを設定
わんくま同盟名古屋勉強会 #18
//SVG 対応の可否
alert("svg is " + Modernizr.svg);
//GPS 位置取得の可否
alert("geolocation is " + Modernizr.geolocation);
//アプリケーションキャッシュの可否
alert("applicationcache is " + Modernizr.applicationcache);
Modernizrの利用 1/2ブラウザの HTML5 対応度合いを確認
F12 ツール
わんくま同盟名古屋勉強会 #18
//<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 対応度合いを確認
わんくま同盟名古屋勉強会 #18
サーバサイドは ASP.NET MVC• 意図通りの HTML を記述可能
• URL ルーティング
• モデルバインダ
• グローバルフィルタ
• 単体テストの容易化
jQuery との相性が良い!!
わんくま同盟名古屋勉強会 #18
[HttpGet]
public ActionResult JsonMethod(Person person)
{
//リクエストデータの表示
Trace.TraceInformation(person.ToString());
//JSON 形式のデータを返す
return Json(new Person()
{
Name = “割と普通”, Comment = “えろーげ、えろーげ"
} , JsonRequestBehavior.AllowGet);
}
JSonValueProviderFactory JSON データの送受信(MVC3 の新機能)
わんくま同盟名古屋勉強会 #18
アジェンダ
はじめに
HTML5 画面開発のポイントは?
クラウドに移行するには?
まとめ
わんくま同盟名古屋勉強会 #18
Azure を無料で使う?! 1/2 MSDN に無償で利用する方法が!
http://msdn.microsoft.com/ja-
jp/windowsazure/gg674969
・クレジットカード登録不要
・30日間使いたい放題
・次ページ
わんくま同盟名古屋勉強会 #18
Azure を無料で使う?! 2/2特別導入プランを利用
特別導入プランの無料枠
・コンピューティング
24 時間 * 30日< 750 時間
・データ転送量
0.5 GB * 30 日 < 20 GB
・SQL Azure
タダ!
・特別導入プラン・XS インスタンス× 1⇒月額無料
わんくま同盟名古屋勉強会 #18
学習のステップ
最初はローカルで
次は Azure Pass で
次は特別導入プランで
次は長期運用の他プランで
要クレジットカード
クレジットカード不要
わんくま同盟名古屋勉強会 #18
環境構築の方法 Web Platform Installer を利用!
http://msdn.microsoft.com/ja-
jp/windowsazure/cc974146
Visual Studio や環境設定も一括実施
わんくま同盟名古屋勉強会 #18
Windows Azure 移行のポイント
アセンブリ配置
デバッグ手法の差異
データの永続化
セッションの取り扱い
わんくま同盟名古屋勉強会 #18
アセンブリ配置1. 新規「ASP.NET MVC3 Web アプリケーション」を追加
2. 「ソリューション内のWeb ロールプロジェクト」を追加
3. ASP.NET MVC 側のプロジェクトを右クリックし、「配置可能な依存関係の追加」を選択
1. 2. 3.
わんくま同盟名古屋勉強会 #18
デバッグ手法の差異
Web デプロイが便利!! 数秒で再デプロイ可能 Azure SDK 1.4.1 から 要リモートデスクトップ
わんくま同盟名古屋勉強会 #18
セッションデータの共有方法に工夫が必要ロードバラン
サ
ユーザ インスタンス2
インスタンス1
インスタンス3
インスタンス1のセッションデータ
インスタンス2のセッションデータ
インスタンス3のセッションデータ
セッションの取り扱い 1/2
わんくま同盟名古屋勉強会 #18
セッションの取り扱い 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向けのプ
ロバイダではないため、コードがいびつになる
・タイムアウトしたセッションを自分で削除する必要がある
・コストが高め
小 ← コスト&性能 → 大
セッション共有方法メリデメ
わんくま同盟名古屋勉強会 #18
アジェンダ
はじめに
HTML5 画面開発のポイントは?
クラウドに移行するには?
まとめ
わんくま同盟名古屋勉強会 #18
まとめ
HTML5 な画面開発方法を習得 jQueryの各種プラグインを学習 Modernizr を学習 ASP.NET MVC3 を学習
クラウドを利用したサービス方法を習得 アセンブリ配置に注意 Web デプロイを活用 永続化データの取り扱いに留意