わんくま同盟名古屋勉強会18回目 ASP.NET...

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

絵描きのこだわり

http://twitter.com/normalian

http://d.hatena.ne.jp/waritohutsu

http://twitter.com/normlian

http://d.hatena.co.jp/waritohutsu


• HN ：割と普通

• 本拠地：横浜近辺

• 肩書き：しがない SI屋

• 趣味：コードを書く＆絵を描く

• 肩書き2 ： Microsoft MVP for

Windows Azure


セッションの目的とゴール

• 目的

– ASP.NET MVC × jQuery の開発を学習する

– Web アプリのクラウド移行を学習する

• ゴール

– ASP.NET MVC × jQuery の開発ができる

– クラウド上に Web アプリを配置できる


アジェンダ

はじめに

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

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

まとめ


• HTML4 の後継である次期標準仕様

• 新機能が追加

–新規マークアップタグの登場

–新 API（ビデオ・音楽の再生、オフライン実行等）

HTML5の振り返り

・約 10 年ぶりの標準仕様改正

・ HTML 4.01 に比べ、適用可能な領域が増した


HTML5 画面開発のポイント

• HTML5 新機能の利用

• マルチデバイス対応

• 旧ブラウザとの共存

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

jQuery

×ASP.NET MVC

で解決


キャッシュ機能

分散 KVS

セッション

永続データ

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

クライアント

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

サーバ

２

１

３


• クライアント

– jQuery

• サーバ

– ASP.NET MVC

• 永続データ、セッション

– Windows Azure ストレージサービス

– Windows Azure AppFabric キャッシュ

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

8


アジェンダ

はじめに



まとめ



jQueryの紹介

Modernizrの紹介

ASP.NET MVC3 の紹介


必修である jQuery ！！

• jQuery Core DOM 操作等のコア機能

• jQuery Mobile スマフォ向け

• jQuery Template テンプレートエンジン

• jQuery Validate バリデーション

• jQuery UI UI コンポーネント

• jQuery Globalization 国際化

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


//セレクタ

var elem1 = $(‘#my_id’);

//属性の操作

var link = $(‘#my_element’).attr(‘href’);

//CSSの取得

var color = $(‘#my_element’).css(‘background’);

//イベント追加

$(‘#mybutton’).click( function(){

alert(‘ボタン押下’);

});

jQuery Core jQueryの主要機能（一部）


jQuery Mobile 1/3現在のバージョンは

1.0β 1モバイル向けプラグイン Windows Phone 7 にも対応既存プラグインとも連携可

<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 画面定義

ページ

jQuery Mobile 3/3

<a href="#" data-icon="home“data-iconpos="notext“data-direction="reverse">

<uldata-role="listview"data-inset="true">

</ul>

画面要素定義

Home アイコン

リストビュー


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>


$(function () {

$("#my_form").validate({

rules: {

my_textbox: { required: true }},

messages: {

my_textbox: {

required: "1文字くらい入力してほしいお。。。"

}}

});});

jQuery Validateバリデーションのルールを設定


//SVG 対応の可否

alert("svg is " + Modernizr.svg);

//GPS 位置取得の可否

alert("geolocation is " + Modernizr.geolocation);

//アプリケーションキャッシュの可否

alert("applicationcache is " + Modernizr.applicationcache);

Modernizrの利用 1/2ブラウザの HTML5 対応度合いを確認

F12 ツール


//<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 対応度合いを確認


サーバサイドは ASP.NET MVC• 意図通りの HTML を記述可能

• URL ルーティング

• モデルバインダ

• グローバルフィルタ

• 単体テストの容易化

jQuery との相性が良い！！


[HttpGet]

public ActionResult JsonMethod(Person person)

{

//リクエストデータの表示

Trace.TraceInformation(person.ToString());

//JSON 形式のデータを返す

return Json(new Person()

{

Name = “割と普通”, Comment = “えろーげ、えろーげ"

} , JsonRequestBehavior.AllowGet);

}

JSonValueProviderFactory JSON データの送受信（MVC3 の新機能）


アジェンダ

はじめに



まとめ


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

http://msdn.microsoft.com/ja-

jp/windowsazure/gg674969

・クレジットカード登録不要

・30日間使いたい放題

・次ページ


Azure を無料で使う？！ 2/2特別導入プランを利用

特別導入プランの無料枠

・コンピューティング

24 時間 * 30日＜ 750 時間

・データ転送量

0.5 GB * 30 日＜ 20 GB

・SQL Azure

タダ！

・特別導入プラン・XS インスタンス× １⇒月額無料


学習のステップ

最初はローカルで

次は Azure Pass で

次は特別導入プランで

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

要クレジットカード

クレジットカード不要


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

http://msdn.microsoft.com/ja-

jp/windowsazure/cc974146

Visual Studio や環境設定も一括実施


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

Galleryのセッションプロバイダ

ASP.NET標準の

セッションプロバイダ

自作セッションプロバイダ

Azure AppFabric

キャッシュ

概要 Code Galleryの

セッションプロバイダを利用

ASP.NET標準の

セッションプロバイダを利用

Access mdb等

のプロバイダを書き換える

Azure AppFabric

キャッシュを利用

利用ストレージ

Table Storage SQL Azure SQL Azure Azure AppFabric

キャッシュ

難点・タイムアウトしたセッションを自分で削除する必要がある・SQL Azureに格納するよりも遅い

・タイムアウトしたセッションを自分で削除・Azure向けのプ

ロバイダではないため、コードがいびつになる

・タイムアウトしたセッションを自分で削除する必要がある

・コストが高め

小 ← コスト＆性能 → 大

セッション共有方法メリデメ


アジェンダ

はじめに



まとめ


まとめ

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

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

わんくま同盟名古屋勉強会18回目 ASP.NET...

Travel

Transcript of わんくま同盟名古屋勉強会18回目 ASP.NET...