Web リソースを活用した簡単アプリケーション開発(Windows Phone)

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

大西彰 (Twitter: @oniak3)

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

2 Windows Phone

Internet Explorer Mobile

3 Windows Phone

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
4 Windows Phone

Internet Explorer Test Drive

http://ietestdrive.com/mobile

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

5 Windows Phone

Web サイトの IE Mobile 対応
 User Agent
 Viewport
 CSS3 Media Queries
※ PC版 IE との違いに注意
 ブラウザープラグインに非対応など
参考:
http://blogs.msdn.com/b/aonishi/archive/2011/07/04/10182765.aspx
6 Windows Phone

IE Mobile の User Agent 文字列
 モバイルサイト優先
 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)
7 Windows Phone

3種類の Viewport 指定方法
 指定がない場合は 1,024 ピクセルで
レンダリング
 モバイルデバイスに最適化された
ページを示す3種類の Meta タグ
<META name="HandheldFriendly" content="true" />
<META name="MobileOptimized" content="320" />
<META name="Viewport" content="width=device-width" />

8 Windows Phone

IE Mobile Viewport の制御
 設定可能なパラメータは３つのみ
<meta name=“Viewport” Content=“
width=device-width, Viewportの幅
320 (既定値) ～ 10,000 まで
height=device-height, Viewportの高さ
480 (既定値) ～ 10,000 まで
コンテンツの拡大・縮小
user-scalable=„yes‟ „yes‟ (既定値) または „no‟
"/>
http://msdn.microsoft.com/en-us/library/ff462082(VS.92).aspx

9 Windows Phone

CSS3 Media Queries
 表示デバイスに応じた CSS の選択
 W3C の仕様
 http://www.w3.org/TR/css3-mediaqueries/

10 Windows Phone

Media Queries の利用方法
•
<link rel=“stylesheet” media=‚screen and (max-device-
width:800px)‛ href=“styles.css”>
@media screen and (max-device-width:800px) {
/* 横幅が 800px 以内 */
}

•
<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 */
}
11 Windows Phone

LocalStorage / SessionStorage

 Cookie を利用しないでデータをキャッシュ
Cookies DOM Storage
4KB 未満 1ドメインあたり 5MB
リクエストごとにキーと値のペアを格納
送受信
SSL サイトでも変更に関するイベント
12
暗号化されない
Windows Phone

DOM Storage API
window オブジェクト内
window.localStorage
window.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 に変更

HTML
<img src="http://imagename.png" />

<img src="data:image/png;base64,iVBORw0KGgoAAA..."/>
CSS
.rule { background-image:url(‘http://imagename.png’)}

.rule { background-image:
url(‘data:image/png;base64,iVBORw0KGgoAAA...’)
} 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
 ナビゲーションと読み込んだコンテンツの取得
Navigate(Uri uri);
NavigateToString(Uri uri, Byte[] data, string headers);
string SaveToString();

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

 JavaScript の呼び出し
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

WebClient クラス
Action データ型メソッドとイベント
DownloadStringAsync method
GET String
DownloadStringCompleted event
OpenReadAsync method
GET Stream
OpenReadCompleted event
UploadStringAsync method
POST String
UploadStringCompleted event

OpenWriteAsync method
POST Stream
OpenWriteCompleted event

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 を使った処理
// 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.htm
26 Windows Phone

JSON 文字列の処理
 WebClient で JSONを返す REST/サービスへアクセス
 受け取った文字列の処理は、JSON.NET や DynamicJsonがおすすめ
 http://json.codeplex.com
 http://dynamicjson.codeplex.com/
// Yahoo! Japanの電力使用状況APIの戻り値を処理する例
// 参考: http://developer.yahoo.co.jp/webapi/shinsai/setsuden/v1/latestpowerusage.html

ElectricPowerUsage r = new ElectricPowerUsage();
JObject o = JObject.Parse(json); // JSON.NET
r.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");
27 Windows Phone

プロジェクトテンプレートで
楽々開発

28 Windows Phone

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

29 Windows Phone

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

30 Windows Phone

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

31 Windows Phone

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

32 Windows Phone

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

33 Windows Phone

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

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

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

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

34 Windows Phone

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.

© 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.

Web リソースを活用した簡単アプリケーション開発(Windows Phone)

More Related Content

Similar to Web リソースを活用した簡単アプリケーション開発(Windows Phone) (20)

More from Akira Onishi (11)

Web リソースを活用した簡単アプリケーション開発(Windows Phone)