Web リソースを活用した簡単アプリケーション開発~ Web と独自テンプレート          活用 のススメ~日本マイクロソフト株式会社デベロッパー&プラットフォーム統括本部デベロッパーエバンジェリスト大西 彰 (Twitter: @on...
Agenda   Internet Explorer Mobile   WebBrowser コントロール   WebClient と Web リソース   プロジェクトテンプレートで楽々開発   プロジェクトテンプレートの作り方2 ...
Internet Explorer Mobile3   Windows Phone
Windows Phone 7.5 の IE Mobile モバイル対応    Viewport <meta> タグ    W3C Geolocation    CSS Media Queries    HTML5 Audio, Vi...
Internet Explorer Test Drive                    http://ietestdrive.com/mobile                       •   HTML5 のデモ         ...
Web サイトの IE Mobile 対応 User Agent Viewport CSS3 Media Queries※ PC版 IE との違いに注意   ブラウザープラグインに非対応など        参考:        http...
IE Mobile の User Agent 文字列   モバイルサイト優先           Mozilla/5.0 (compatible; MSIE 9.0;            Windows Phone OS 7.5; Tri...
3種類の Viewport 指定方法 指定がない場合は 1,024 ピクセルで  レンダリング モバイルデバイスに最適化された  ページを示す3種類の Meta タグ    <META name="HandheldFriendly" con...
IE Mobile Viewport の制御   設定可能なパラメータは3つのみ    <meta name=“Viewport” Content=“      width=device-width,       Viewportの幅    ...
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=“sty...
LocalStorage / SessionStorage    Cookie を利用しないでデータをキャッシュ                Cookies     DOM Storage     4KB 未満               ...
DOM Storage APIwindow オブジェクト内     window.localStorage     window.sessionStorage                     API:    getItem(key)  ...
DOM Storage の注意点    データは文字列として格納されるので、     必要に応じてデータ型の変換を実施     例:      setItem("mysite.product.price", 59.99);      var ...
data:// URI HTMLやCSSコンテンツ内にコンテンツを埋め込  む  方法として定義 ブラウザーとサーバー間のHTTPリクエストを  減らし、パフォーマンス改善 最大 4GB 形式  data:[mime-type][;ba...
Data URI の利用方法  通常のURI を data URI に変更  HTML<img src="http://imagename.png" /><img src="data:image/png;base64,iVBORw0KGgoA...
WebBrowser コントロール17   Windows Phone
Web サイトのアプリケーション化 WebBrowser コントロールの利用による実装 IE Mobile と同等のエンジン (HTML5/CSS3/JavaScript) LocalStorageの利用 読み込みが完了した ページで ...
WebBrowser コントロール主要なAPI    ナビゲーションと読み込んだコンテンツの取得     Navigate(Uri uri);     NavigateToString(Uri uri, Byte[] data, string...
例: HTML DOMへのアクセス    WebBrowserコントロールの InvokeScriptを利用     し、     Evalメソッドを実行       document.title       document.URL  ...
WebClient と Webリソース             XML や JSON データ21   Windows Phone
WebClient クラスAction             データ型     メソッドとイベント                            DownloadStringAsync methodGET               ...
WebClient 非同期通信private void button1_Click(object sender, RoutedEventArgs e){     Uri u = new Uri("http://blogs.msdn.com/b/...
Expression Blendクラスからのサンプル データの作成                     フィードの内容24   Windows Phone
サンプル データと UI1. ItemTemplate                      2. ドラッグ & ドロップ                      サンプル データの指定 25   Windows Phone
XML文字列の処理    WebClient で XML を返す REST/Webサービスへアクセス    LINQ to XML を使った処理// Yahoo! Japan ウェブ検索の例, e.ResultはWebClientの通信結果...
JSON 文字列の処理    WebClient で JSONを返す REST/サービスへアクセス    受け取った文字列の処理は、JSON.NET や DynamicJsonがおすすめ       http://json.codeple...
プロジェクトテンプレートで           楽々開発28   Windows Phone
実装例: Tweet Tileテンプレート29   Windows Phone
実装例: Webアプリテンプレート L130   Windows Phone
プロジェクトテンプレートの            作り方31   Windows Phone
プロジェクトテンプレートの作成    動作するアプリケーションを完成させ、テンプレートのエクスポート32   Windows Phone
まとめ    Internet Explorer Mobile    WebBrowser コントロール    WebClient と JSON    プロジェクトテンプレートで楽々開発    プロジェクトテンプレートの作り方33  ...
リファレンスWindows Phone        デベロッパー センターhttp://msdn.microsoft.com/ja-jp/windowsphone/default.aspxWeb Development for Windows...
The information herein is for informational purposes only and represents the current view of                              ...
Upcoming SlideShare
Loading in …5
×

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

1,471 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,471
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

  1. 1. Web リソースを活用した簡単アプリケーション開発~ Web と独自テンプレート 活用 のススメ~日本マイクロソフト株式会社デベロッパー&プラットフォーム統括本部デベロッパーエバンジェリスト大西 彰 (Twitter: @oniak3)
  2. 2. Agenda Internet Explorer Mobile WebBrowser コントロール WebClient と Web リソース プロジェクトテンプレートで楽々開発 プロジェクトテンプレートの作り方2 Windows Phone
  3. 3. Internet Explorer Mobile3 Windows Phone
  4. 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  リクエストを減らし、パフォーマンスの改善  最大 4GB4 Windows Phone
  5. 5. Internet Explorer Test Drive http://ietestdrive.com/mobile • HTML5 のデモ • パフォーマンスのデモ • グラフィックスのデモ • 共通コントロールのデモ5 Windows Phone
  6. 6. Web サイトの IE Mobile 対応 User Agent Viewport CSS3 Media Queries※ PC版 IE との違いに注意  ブラウザープラグインに非対応など 参考: http://blogs.msdn.com/b/aonishi/archive/2011/07/04/10182765.aspx6 Windows Phone
  7. 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. 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. 9. IE Mobile Viewport の制御 設定可能なパラメータは3つのみ <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).aspx9 Windows Phone
  10. 10. CSS3 Media Queries 表示デバイスに応じた CSS の選択 W3C の仕様  http://www.w3.org/TR/css3-mediaqueries/10 Windows Phone
  11. 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. 12. LocalStorage / SessionStorage Cookie を利用しないでデータをキャッシュ Cookies DOM Storage 4KB 未満 1ドメインあたり 5MB リクエストごとに キーと値のペアを格納 送受信 SSL サイトでも 変更に関するイベント12 暗号化されない Windows Phone
  13. 13. DOM Storage APIwindow オブジェクト内 window.localStorage window.sessionStorage API: getItem(key) setItem(key, value) removeItem(key) clear() key(index) length13 Windows Phone
  14. 14. DOM Storage の注意点 データは文字列として格納されるので、 必要に応じてデータ型の変換を実施 例: setItem("mysite.product.price", 59.99); var price = ParseFloat("mysite.product.price"); 5MB 以上のデータは格納できず、容量を超えて いると QUOTA_EXCEEDED_ERR という例外発生14 Windows Phone
  15. 15. data:// URI HTMLやCSSコンテンツ内にコンテンツを埋め込 む 方法として定義 ブラウザーとサーバー間のHTTPリクエストを 減らし、パフォーマンス改善 最大 4GB 形式 data:[mime-type][;base64],<image data as text>15 Windows Phone
  16. 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. 17. WebBrowser コントロール17 Windows Phone
  18. 18. Web サイトのアプリケーション化 WebBrowser コントロールの利用による実装 IE Mobile と同等のエンジン (HTML5/CSS3/JavaScript) LocalStorageの利用 読み込みが完了した ページで JavaScript の実行 → InvokeScript メソッド HTML ページから Windows Phone アプリへの通知 → ScriptNotify イベント18 Windows Phone
  19. 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. 20. 例: HTML DOMへのアクセス WebBrowserコントロールの InvokeScriptを利用 し、 Evalメソッドを実行  document.title  document.URL  document.cookie20 Windows Phone
  21. 21. WebClient と Webリソース XML や JSON データ21 Windows Phone
  22. 22. WebClient クラスAction データ型 メソッドとイベント DownloadStringAsync methodGET String DownloadStringCompleted event OpenReadAsync methodGET Stream OpenReadCompleted event UploadStringAsync methodPOST String UploadStringCompleted event OpenWriteAsync methodPOST Stream OpenWriteCompleted event 22 Windows Phone
  23. 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. 24. Expression Blendクラスからのサンプル データの作成 フィードの内容24 Windows Phone
  25. 25. サンプル データと UI1. ItemTemplate 2. ドラッグ & ドロップ サンプル データの指定 25 Windows Phone
  26. 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.htm26 Windows Phone
  27. 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. プロジェクトテンプレートで 楽々開発28 Windows Phone
  29. 29. 実装例: Tweet Tileテンプレート29 Windows Phone
  30. 30. 実装例: Webアプリテンプレート L130 Windows Phone
  31. 31. プロジェクトテンプレートの 作り方31 Windows Phone
  32. 32. プロジェクトテンプレートの作成 動作するアプリケーションを完成させ、テンプレートのエクスポート32 Windows Phone
  33. 33. まとめ Internet Explorer Mobile WebBrowser コントロール WebClient と JSON プロジェクトテンプレートで楽々開発 プロジェクトテンプレートの作り方33 Windows Phone
  34. 34. リファレンスWindows Phone デベロッパー センターhttp://msdn.microsoft.com/ja-jp/windowsphone/default.aspxWeb Development for Windows Phonehttp://msdn.microsoft.com/en-us/library/ff462082(v=VS.92).aspxNetworking and Web Services for Windows Phonehttp://msdn.microsoft.com/en-us/library/gg521151(v=VS.92).aspx開発者向け情報番組 「UX-TV」http://www.ustream.tv/channel/ux-tv34 Windows Phone
  35. 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.

×