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

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

3. Internet Explorer Mobile
3 Windows Phone

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

5. Internet Explorer Test Drive
http://ietestdrive.com/mobile
• HTML5 のデモ
• パフォーマンスのデモ
• グラフィックスのデモ
• 共通コントロールのデモ
5 Windows Phone

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

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

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

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

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

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

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

13. DOM Storage API
window オブジェクト内
window.localStorage
window.sessionStorage
API: getItem(key)
setItem(key, value)
removeItem(key)
clear()
key(index)
length
13 Windows Phone

14. DOM Storage の注意点
 データは文字列として格納されるので、
必要に応じてデータ型の変換を実施
例:
setItem("mysite.product.price", 59.99);
var price = ParseFloat("mysite.product.price");
 5MB 以上のデータは格納できず、容量を超えて
いると QUOTA_EXCEEDED_ERR という例外発生
14 Windows Phone

15. data:// URI
 HTMLやCSSコンテンツ内にコンテンツを埋め込
む
方法として定義
 ブラウザーとサーバー間のHTTPリクエストを
減らし、パフォーマンス改善
 最大 4GB
 形式
data:[mime-type][;base64],<image data as text>
15 Windows Phone

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

17. WebBrowser コントロール
17 Windows Phone

18. Web サイトのアプリケーション化
 WebBrowser コントロールの利用による実装
 IE Mobile と同等のエンジン (HTML5/CSS3/JavaScript)
 LocalStorageの利用
 読み込みが完了した ページで JavaScript の実行
→ InvokeScript メソッド
 HTML ページから Windows Phone アプリへの通知
→ ScriptNotify イベント
18 Windows Phone

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

20. 例: HTML DOMへのアクセス
 WebBrowserコントロールの InvokeScriptを利用
し、
Evalメソッドを実行
 document.title
 document.URL
 document.cookie
20 Windows Phone

21. WebClient と Webリソース
XML や JSON データ
21 Windows Phone

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

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

24. Expression Blend
クラスからのサンプル データの作成
フィードの内容
24 Windows Phone

25. サンプル データと UI
1. ItemTemplate
2. ドラッグ & ドロップ
サンプル データの指定
25 Windows Phone

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

27. 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. プロジェクトテンプレートで
楽々開発
28 Windows Phone

29. 実装例: Tweet Tileテンプレート
29 Windows Phone

30. 実装例: Webアプリテンプレート L1
30 Windows Phone

31. プロジェクトテンプレートの
作り方
31 Windows Phone

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

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

34. リファレンス
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

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