slide1 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
クラウドと HTML5 で作成するスケー ラブルな Web アプリ開発術 ~ Windows Azure + ASP.NET MVC PowerPoint Presentation
Download Presentation
クラウドと HTML5 で作成するスケー ラブルな Web アプリ開発術 ~ Windows Azure + ASP.NET MVC

Loading in 2 Seconds...

play fullscreen
1 / 43

クラウドと HTML5 で作成するスケー ラブルな Web アプリ開発術 ~ Windows Azure + ASP.NET MVC - PowerPoint PPT Presentation


  • 96 Views
  • Uploaded on

クラウドと HTML5 で作成するスケー ラブルな Web アプリ開発術 ~ Windows Azure + ASP.NET MVC 編~. 株式会社野村総合研究所 勇大地 ( いさみ だいち ) Microsoft MVP for Windows Azure. セッションの目的とゴール. 目的 ASP.NET MVC × jQuery の開発を学習する マルチデバイス向け Web アプリ 開発を学習 する Web アプリのクラウド移行を 学習 する ゴール ASP.NET MVC × jQuery の開発ができる

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'クラウドと HTML5 で作成するスケー ラブルな Web アプリ開発術 ~ Windows Azure + ASP.NET MVC' - jorden-park


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
slide1
クラウドと HTML5 で作成するスケー

ラブルな Web アプリ開発術

~ Windows Azure + ASP.NET MVC 編~

株式会社野村総合研究所

勇大地 (いさみ だいち)

Microsoft MVP for Windows Azure

slide2
セッションの目的とゴール
  • 目的
    • ASP.NETMVC × jQueryの開発を学習する
    • マルチデバイス向け Web アプリ開発を学習する
    • Web アプリのクラウド移行を学習する
  • ゴール
    • ASP.NET MVC × jQueryの開発ができる
    • マルチデバイス向けの画面開発ができる
    • クラウド上に Web アプリを配置できる
slide3
今回作成したサンプル
  • 機能
    • コメント付きで投票
    • 投稿の割合をグラフ化

http://mvcconfjapan120611.cloudapp.net/

html5
HTML5 と クラウドの振り返り
  • HTML5 の振り返り
  • クラウドの振り返り
  • クラウド上で動く WEB アプリ
html51
HTML5の振り返り
  • HTML4 の後継である次期標準仕様
  • 新機能が追加
    • 新規マークアップタグの登場
    • 新 API(ビデオ・音楽の再生、オフライン実行等)

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

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

slide7
クラウドの振り返り1/2
  • メリット
    • 柔軟なスケールアウト/スケールダウン
    • 保守の手間、管理コストを削減
  • デメリット
    • 環境カスタマイズが容易でない
    • アーキテクチャが従来と異なる
slide8
クラウドの振り返り2/2

Windows Azure Platform

  • SQL Azure
  • RDB
  • Data Sync
  • Reporting
  • AzureAppFabric
  • Service Bus
  • Access Control
  • Caching

Windows Azure

Marketplace

Windows Azure

DataMarket

  • コンピュート
  • Webロール
  • Workerロール
  • VMロール
  • ストレージ
  • Blob
  • Table
  • Queue
  • Drive

Applications

Microsoft Pinpoint

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

キャッシュ機能

セッション

クライアント

永続データ

分散 KVS

サーバ

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

web 2 2
クラウド上で動く WEB アプリ 2/2
  • クライアント
    • jQuery
  • サーバ
    • ASP.NET MVC
  • 永続データ、セッション
    • Windows Azure ストレージ サービス
    • Windows Azure AppFabric キャッシュ

11

html52
HTML5 画面開発のポイント

jQuery

×

ASP.NET MVC

で解決

  • HTML5 新機能の利用
  • マルチデバイス対応
  • 旧ブラウザとの共存

未だに消えない IE6

PC /スマフォへの対応

jquery
必修と化した jQuery!!
  • jQuery CoreDOM 操作等のコア機能
  • jQuery Mobileスマフォ向け
  • jQuery Template テンプレートエンジン
  • jQuery Validate   バリデーション
  • jQuery UIUI コンポーネント
  • jQuery Globalization 国際化

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

jquery core
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
jQuery Mobile1/3
  • 現在のバージョン は 1.0α4.1
  • モバイル向けプラグイン
  • Windows Phone 7 にも対応
  • 既存プラグインとも連携可
jquery mobile 2 3
jQueryMobile 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>

ページ

jquery mobile 3 3
jQueryMobile 3/3
  • 画面要素定義

<!-- ページ定義 -->

<a href="#"

data-icon="home“

data-iconpos="notext“

data-direction="reverse">

<!-- ページ定義 -->

<ul

data-role="listview"

data-inset="true">

</ul>

Home アイコン

リストビュー

jquery template
jQuery Template
  • JavaScript のテンプレートエンジン

vardataObject = {

name: “勇大地",

comments: [“Azureは良いねぇ…”,“チャックさんイケメーン!"]

};

$("#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
jQuery Validate
  • バリデーションのルールを設定

$(function () {

$("#my_form").validate({

rules: {

my_textbox: { required: true }},

messages: {

my_textbox: {

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

}}

});});

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

jQueryとの相性が良い!!

jsonvalueproviderfactory
JSonValueProviderFactory
  • JSON データの送受信(MVC3 の新機能)

[HttpGet]

public ActionResultJsonMethod(Person person)

{

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

Trace.TraceInformation(person.ToString());

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

return Json(new Person()

{

Name = "勇大地", Comment = "緊張して胃が痛い"

} , JsonRequestBehavior.AllowGet);

}

windows azure
Windows Azure 移行のポイント
  • アセンブリ配置
  • デバッグ手法の差異
  • データの永続化
  • セッションの取り扱い

Appendix で

slide26

現在は必要

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

3.

1.

2.

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

安価なスケーラブル Web アプリの要点

データの永続化

・Blob Storage

・Drive

・Table Storage

・QueueStorage

クラウドのストレージ活用がポイント

slide29
サンプルのアーキテクチャ

Azure AppFabric キャッシュ

セッション

ロードバランサ

IE9

永続データ

テーブル

スマートフォン

※認証にはAccess Controlを利用

スケーラブル&マルチデバイス

slide30
ASP.NET MVC+

Windows Azure

demo ...

slide31
まとめ
  • マルチデバイス対応向け開発方法を習得
    • HTML5 の仕様をキャッチアップ
    • jQueryの各種プラグインを学習
  • クラウドを利用したサービス方法を習得
    • アセンブリ配置に注意
    • Web デプロイを活用
    • 永続化データの取り扱いに留意
modernizr 1 2
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
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]); }

html53
HTML5 の振り返り + α
  • 主要ブラウザの HTML5 対応により、HTML5 のサービス展開が可能に

現在

★ 9/17β版リリース

★ 11/17 PlatformPreviwe7リリース

★ 3/15 IE9 製品版リリース(HTML5対応)

★ 4/13 IE10 Preview(HTML5対応強化)

★7/7 4βeta 1リリース

★11/10βeta 7リリース

★ 3/22 FF4 製品版リリース(HTML5対応)

★ 2/11 Chrome 9リリース(HTML5対応強化)

★ 2/11 Chrome 9リリース(HTML5対応強化)

★ 3/9 Chrome 10 リリース(HTML5対応強化)

★ 3/22 Chrome 11 リリース(HTML5対応強化)

★6/8 Safari 5リリース

★ 3/9 Safari 5.0.4 リリース(HTML5対応強化)

html54
HTML5 の振り返り + α

現在

草案

  • 2012 年には、HTML4 での普及期だった勧告候補になる予定
  • 現状は最終草案の段階

2011年

5月現在

最終草案

2012年

2月予定

勧告候補

勧告案

そろそろ HTML5 を学ぶ頃合

2014年

予定

勧告

slide37

Azure を無料で使うには?! 1/2

  • MSDN に無償で利用する方法が!

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

・30日間使いたい放題

・次ページ

http://msdn.microsoft.com/ja-jp/windowsazure/gg674969

slide38

Azure を無料で使うには?! 2/2

  • 特別導入プランを利用

・特別導入プラン

・XS インスタンス × 1

⇒月額無料

・コンピューティング

24 時間 * 30日 < 750 時間

・データ転送量

0.5 GB * 30 日 < 20 GB

・SQL Azure

 タダ!

特別導入プランの無料枠

slide39

学習のステップ

クレジットカード不要

要クレジットカード

slide40

環境構築の方法

  • Web Platform Installer を利用!

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

http://msdn.microsoft.com/ja-jp/windowsazure/cc974146

slide41

セッションの取り扱い 1/2

  • セッションデータの共有方法に工夫が必要

インスタンス1のセッションデータ

インスタンス1

ロードバランサ

インスタンス2のセッションデータ

インスタンス2

ユーザ

インスタンス3のセッションデータ

インスタンス3

slide42

セッションの取り扱い 2/2

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

タイムアウトセッションデータを自分で削除

小  ←  コスト&性能→  大