Web リソースを活用した簡単アプリケーション開発～ Web と独自テンプレート 活用 のススメ～日本マイクロソフト株式会社デベロッパー & プラットフォーム統括本部デベロッパーエバンジェリスト

大西　彰 (Twitter: @oniak3)

Windows Phone

Agenda Internet Explorer Mobile WebBrowser コントロール WebClient と Web リソース プロジェクトテンプレートで楽々開発 プロジェクトテンプレートの作り方

2

Windows Phone

Internet Explorer Mobile

3

Windows Phone4

Windows Phone 7.5 の IE Mobile モバイル対応

Viewport <meta> タグ W3C Geolocation CSS Media Queries HTML5 Audio, Video ( 全画面再生 ), Canvas

DOM Local Storage と Session Storage Cookie を利用しないデータのキャッシュ方法

Data URI リクエストを減らし、パフォーマンスの改善 最大 4GB

Windows Phone

Internet Explorer Test Drive

5

http://ietestdrive.com/mobile

• HTML5 のデモ• パフォーマンスのデモ• グラフィックスのデモ• 共通コントロールのデモ

Windows Phone

Web サイトの IE Mobile 対応

6

User Agent Viewport CSS3 Media Queries※ PC 版 IE との違いに注意

ブラウザープラグインに非対応など

参考 : http://blogs.msdn.com/b/aonishi/archive/2011/07/04/10182765.aspx

Windows Phone

IE Mobile の User Agent 文字列

7

モバイルサイト優先 Mozilla/5.0 (compatible; MSIE 9.0;

Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0; FujitsuToshibaMobileCommun; IS12T; KDDI)

デスクトップサイト優先 Mozilla/5.0 (compatible; MSIE 9.0;

Windows NT 6.1; Trident/5.0; XBLWP7; ZuneWP7)

Windows Phone

3 種類の Viewport 指定方法

8

指定がない場合は 1,024 ピクセルでレンダリング

モバイルデバイスに最適化されたページを示す 3 種類の Meta タグ

<META name="HandheldFriendly" content="true" />

<META name="MobileOptimized" content="320" />

<META name="Viewport" content="width=device-width" />

Windows Phone

IE Mobile Viewport の制御

9

設定可能なパラメータは３つのみ

<meta name=“Viewport” Content=“ width=device-width, height=device-height, user-scalable=‘yes’"/>

http://msdn.microsoft.com/en-us/library/ff462082(VS.92).aspx

Viewport の幅320 ( 既定値 ) ～ 10,000 ま

でViewport の高さ480 ( 既定値 ) ～ 10,000 ま

でコンテンツの拡大・縮小

‘yes’ ( 既定値 ) または ‘ no’

Windows Phone

CSS3 Media Queries

10

表示デバイスに応じた CSS の選択 W3C の仕様

http://www.w3.org/TR/css3-mediaqueries/

Windows Phone

Media Queries の利用方法

<link rel=“stylesheet” media=“screen and (min-width:480px) and (max-width:800px)” href=“styles.css”>@media screen and (min-width:480px) and (max-width:800px){ /* 480px から 800px */}

<link rel=“stylesheet” media=“screen and (max-device-width:800px)” href=“styles.css”>@media screen and (max-device-width:800px) {/* 横幅が 800px 以内 */}

• 画面の最大幅を指定

• 最小幅と最大幅を指定

11

Windows Phone

LocalStorage / SessionStorage

Cookie を利用しないでデータをキャッシュ

Cookies DOM Storage

4KB 未満リクエストごとに送受信SSL サイトでも暗号化されない

1 ドメインあたり 5MBキーと値のペアを格納

変更に関するイベント

12

Windows Phone

DOM Storage APIwindow オブジェクト内

window.localStoragewindow.sessionStorage

API:getItem(key)setItem(key, value)removeItem(key)clear()key(index)length

13

Windows Phone

DOM Storage の注意点

データは文字列として格納されるので、必要に応じてデータ型の変換を実施例 :setItem("mysite.product.price", 59.99);var price = ParseFloat("mysite.product.price");

5MB 以上のデータは格納できず、容量を超えていると QUOTA_EXCEEDED_ERR という例外発生

14

Windows Phone

data:// URI HTML や CSS コンテンツ内にコンテンツを埋め込

む方法として定義

ブラウザーとサーバー間の HTTP リクエストを減らし、パフォーマンス改善

最大 4GB 形式data:[mime-type][;base64],<image data as text>

15

Windows Phone

Data URI の利用方法 通常の URI を data URI に変更

<img src="http://imagename.png" />

<img src="data:image/png;base64,iVBORw0KGgoAAA..."/>

HTML

.rule { background-image:url(‘http://imagename.png’)}

.rule { background-image:url(‘data:image/

png;base64,iVBORw0KGgoAAA...’) }

CSS

16

Windows Phone

WebBrowser コントロール

17

Windows Phone

Web サイトのアプリケーション化

WebBrowser コントロールの利用による実装 IE Mobile と同等のエンジン

(HTML5/CSS3/JavaScript) LocalStorage の利用 読み込みが完了した ページで JavaScript の実行

→ InvokeScript メソッド HTML ページから Windows Phone アプリへの

通知→ ScriptNotify イベント18

Windows Phone

WebBrowser コントロール主要なAPI ナビゲーションと読み込んだコンテンツの取得

振る舞いの設定

JavaScript の呼び出し

Navigate(Uri uri);NavigateToString(Uri uri, Byte[] data, string headers);string SaveToString();

string Base { get; set; } // オフラインで表示する場合のフォルダbool IsScriptEnabled { get; set; }bool IsGeolocationEnabled { get; set; }

InvokeScript(string script, string[] params)19

Windows Phone

例 : HTML DOM へのアクセス

WebBrowser コントロールの InvokeScript を利用し、Eval メソッドを実行

document.title document.URL document.cookie

20

Windows Phone

WebClient と Web リソース XML や JSON データ

21

Windows Phone

Action データ型 メソッドとイベント

GET String DownloadStringAsync method DownloadStringCompleted event

GET Stream OpenReadAsync method OpenReadCompleted event

POST String UploadStringAsync method UploadStringCompleted event

POST Stream OpenWriteAsync method OpenWriteCompleted event

WebClient クラス

22

Windows Phone

WebClient 非同期通信private void button1_Click(object sender, RoutedEventArgs e)

{

Uri u = new Uri("http://blogs.msdn.com/b/aonishi/rss.aspx");

WebClient cli = new WebClient();

cli.DownloadStringCompleted +=

new DownloadStringCompletedEventHandler(cli_DownloadStringCompleted);

cli.DownloadStringAsync(u);

}

void cli_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)

{

if (e.Error != null) {

MessageBox.Show(" 通信エラーが発生しました : " + e.Error.Message); return;

}

textBlock1.Text = e.Result;

}23

Windows Phone

Expression Blend クラスからのサンプル データの作成

フィードの内容

24

Windows Phone

サンプル データと UI

1. ItemTemplate に コントロールを追加

2. ドラッグ & ドロップサンプル データの指定

25

Windows Phone

XML 文字列の処理 WebClient で XML を返す REST/Web サービスへアクセス LINQ to XML を使った処理

26

// Yahoo! Japan ウェブ検索の例 , e.Result は WebClient の通信結果XNamespace web = "urn:yahoo:jp:srch";resultXml = XElement.Parse(e.Result);var searchResults =from result in resultXml.Descendants(web + "Result")select new SearchResult{ // Get the Title, Description and Url values. Title = result.Element(web + "Title").Value, Description = result.Element(web + "Summary").Value, Url = result.Element(web + "ClickUrl").Value};// 参考 : http://developer.yahoo.co.jp/webapi/search/websearch/v2/websearch.html

Windows Phone

JSON 文字列の処理 WebClient で JSON を返す REST/ サービスへアクセス 受け取った文字列の処理は、 JSON.NET や DynamicJson がおすす

め http://json.codeplex.com http://dynamicjson.codeplex.com/

27

// Yahoo! Japanの電力使用状況 API の戻り値を処理する例// 参考 : http://developer.yahoo.co.jp/webapi/shinsai/setsuden/v1/latestpowerusage.html

ElectricPowerUsage r = new ElectricPowerUsage();JObject o = JObject.Parse(json); // JSON.NETr.Area = (string)o.SelectToken("ElectricPowerUsage.Area");r.Usage = (int)o.SelectToken("ElectricPowerUsage.Usage.$");r.Capacity = (int)o.SelectToken("ElectricPowerUsage.Capacity.$");r.Date = DateTime.Parse((string)o.SelectToken("ElectricPowerUsage.Date"));r.Hour = (int)o.SelectToken("ElectricPowerUsage.Hour");

Windows Phone

プロジェクトテンプレートで

楽々開発

28

Windows Phone29

実装例 : Tweet Tile テンプレート

Windows Phone30

実装例 : Web アプリテンプレート L1

Windows Phone

プロジェクトテンプレートの

作り方

31

Windows Phone32

プロジェクトテンプレートの作成

動作するアプリケーションを完成させ、テンプレートのエクスポート

Windows Phone

まとめ Internet Explorer Mobile WebBrowser コントロール WebClient と JSON プロジェクトテンプレートで楽々開

発 プロジェクトテンプレートの作り方

33

Windows Phone

リファレンスWindows Phone デベロッパー センターhttp://msdn.microsoft.com/ja-jp/windowsphone/default.aspx

Networking and Web Services for Windows Phonehttp://msdn.microsoft.com/en-us/library/gg521151(v=VS.92).aspx

Web Development for Windows Phonehttp://msdn.microsoft.com/en-us/library/ff462082(v=VS.92).aspx

開発者向け情報番組 「 UX-TV 」http://www.ustream.tv/channel/ux-tv

34

© 2011 Microsoft Corporation.

All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.

The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation.

MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.