Web リソースを活用した簡単アプリケーション開発(Windows Phone)
-
date post
21-Oct-2014 -
Category
Technology
-
view
1.647 -
download
4
description
Transcript of Web リソースを活用した簡単アプリケーション開発(Windows Phone)
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
設定可能なパラメータは3つのみ
<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.