20120616 java script+html5とc#+xamlで作るwindows8アプリ 16 9
Transcript of 20120616 java script+html5とc#+xamlで作るwindows8アプリ 16 9
![Page 1: 20120616 java script+html5とc#+xamlで作るwindows8アプリ 16 9](https://reader036.fdocuments.net/reader036/viewer/2022062418/556600d9d8b42a2a4d8b4e77/html5/thumbnails/1.jpg)
JavaScript + HTML5 と C# + XAML で作る Windows 8 アプリ
小島 富治雄
VSUG DAY – Summer ( 2012.06.16 )
![Page 2: 20120616 java script+html5とc#+xamlで作るwindows8アプリ 16 9](https://reader036.fdocuments.net/reader036/viewer/2022062418/556600d9d8b42a2a4d8b4e77/html5/thumbnails/2.jpg)
VSUG DAY - Winter 2012.06.16
自己紹介• 小島 富治雄• @Fujiwo• 福井コンピュータ株式会社• Microsoft MVP C# (2005-2012)
2
![Page 3: 20120616 java script+html5とc#+xamlで作るwindows8アプリ 16 9](https://reader036.fdocuments.net/reader036/viewer/2022062418/556600d9d8b42a2a4d8b4e77/html5/thumbnails/3.jpg)
VSUG DAY - Winter 2012.06.16
アジェンダ
1. Windows 8
2. Metro スタイル
3. WinRT とは何か
4. デモ
![Page 4: 20120616 java script+html5とc#+xamlで作るwindows8アプリ 16 9](https://reader036.fdocuments.net/reader036/viewer/2022062418/556600d9d8b42a2a4d8b4e77/html5/thumbnails/4.jpg)
VSUG DAY - Winter 2012.06.16
Windows 8
![Page 5: 20120616 java script+html5とc#+xamlで作るwindows8アプリ 16 9](https://reader036.fdocuments.net/reader036/viewer/2022062418/556600d9d8b42a2a4d8b4e77/html5/thumbnails/5.jpg)
VSUG DAY - Winter 2012.06.16
二本立て !• Metro スタイル UI• 従来デスクトップ
Windows 8
![Page 6: 20120616 java script+html5とc#+xamlで作るwindows8アプリ 16 9](https://reader036.fdocuments.net/reader036/viewer/2022062418/556600d9d8b42a2a4d8b4e77/html5/thumbnails/6.jpg)
VSUG DAY - Winter 2012.06.16
4エディションWindows 8Windows 8 ProWindows 8 EnterpriseWindows RT
Windows 8
x86x64
ARM
![Page 7: 20120616 java script+html5とc#+xamlで作るwindows8アプリ 16 9](https://reader036.fdocuments.net/reader036/viewer/2022062418/556600d9d8b42a2a4d8b4e77/html5/thumbnails/7.jpg)
VSUG DAY - Winter 2012.06.16
従来デスクトップ アプリ Metro スタイル アプリ
Windows 8x86/x64
• 従来通りWin32 API
• .NET• Silverlight• ほとんどそのまま動作
• 全画面• 新 API “WinRT”• C#/VB+XAML• JavaScript+HTML5• C++ + XAML で
ネイティブ アプリも可• Market Place で配布
• 審査ありWindows RTARM
×
Windows 8 と Windows RT
![Page 8: 20120616 java script+html5とc#+xamlで作るwindows8アプリ 16 9](https://reader036.fdocuments.net/reader036/viewer/2022062418/556600d9d8b42a2a4d8b4e77/html5/thumbnails/8.jpg)
VSUG DAY - Winter 2012.06.16
「 Metro スタイルアプリなら全て他の Windows 8 と互換性がある」わけではない
○ HTML + JavaScript で作ったもの
○ C# + XAML で作ったもの× C++ + XAML
ネイティブなので Windows RT ではバイナリ互換なし
Windows RT
![Page 9: 20120616 java script+html5とc#+xamlで作るwindows8アプリ 16 9](https://reader036.fdocuments.net/reader036/viewer/2022062418/556600d9d8b42a2a4d8b4e77/html5/thumbnails/9.jpg)
VSUG DAY - Winter 2012.06.16
Metro スタイル
![Page 10: 20120616 java script+html5とc#+xamlで作るwindows8アプリ 16 9](https://reader036.fdocuments.net/reader036/viewer/2022062418/556600d9d8b42a2a4d8b4e77/html5/thumbnails/10.jpg)
VSUG DAY - Winter 2012.06.16
大きく GUI の考え方を変える必要これまでの GUI と混ぜられない
Metro スタイル
![Page 11: 20120616 java script+html5とc#+xamlで作るwindows8アプリ 16 9](https://reader036.fdocuments.net/reader036/viewer/2022062418/556600d9d8b42a2a4d8b4e77/html5/thumbnails/11.jpg)
VSUG DAY - Winter 2012.06.16
タッチ & マウス / キーボード基本フルスクリーン
カスケード ウィンドウじゃないタイトルバー、従来のメニューがない
横長横スクロール
Metro スタイル
![Page 12: 20120616 java script+html5とc#+xamlで作るwindows8アプリ 16 9](https://reader036.fdocuments.net/reader036/viewer/2022062418/556600d9d8b42a2a4d8b4e77/html5/thumbnails/12.jpg)
VSUG DAY - Winter 2012.06.16
新たな GUI への対応ライブタイル
バッチチャームアプリ バートースト通知セマンティック ズーム
Metro スタイル アプリ
![Page 13: 20120616 java script+html5とc#+xamlで作るwindows8アプリ 16 9](https://reader036.fdocuments.net/reader036/viewer/2022062418/556600d9d8b42a2a4d8b4e77/html5/thumbnails/13.jpg)
VSUG DAY - Winter 2012.06.16
通常明示的に「終了」しない裏に回ってもサスペンド状態で継続( メモリ不足になったときなどに )
不意に終了される他のタブレットやスマートフォン同様状態保存のタイミングも変わってくる
「サスペンド時に状態保存」
Metro スタイル
![Page 14: 20120616 java script+html5とc#+xamlで作るwindows8アプリ 16 9](https://reader036.fdocuments.net/reader036/viewer/2022062418/556600d9d8b42a2a4d8b4e77/html5/thumbnails/14.jpg)
VSUG DAY - Winter 2012.06.16
Metro アプリ ライフサイクル
アクティブ
非アクティブ
実行開始(Activate)
一時停止(Suspend)
終了(Terminate)
実行再開(Resume)
要状態の保存
![Page 15: 20120616 java script+html5とc#+xamlで作るwindows8アプリ 16 9](https://reader036.fdocuments.net/reader036/viewer/2022062418/556600d9d8b42a2a4d8b4e77/html5/thumbnails/15.jpg)
VSUG DAY - Winter 2012.06.16
Metro スタイル アプリ – 移植性
![Page 16: 20120616 java script+html5とc#+xamlで作るwindows8アプリ 16 9](https://reader036.fdocuments.net/reader036/viewer/2022062418/556600d9d8b42a2a4d8b4e77/html5/thumbnails/16.jpg)
VSUG DAY - Winter 2012.06.16
従来デスクトップアプリからの移植は容易?
UI が全然違うので困難API が異なるので困難
Windows Phone 7 アプリからの移植は容易?
XAML 部分は似ている将来は可能に?
Metro スタイル – 移植性
![Page 17: 20120616 java script+html5とc#+xamlで作るwindows8アプリ 16 9](https://reader036.fdocuments.net/reader036/viewer/2022062418/556600d9d8b42a2a4d8b4e77/html5/thumbnails/17.jpg)
VSUG DAY - Winter 2012.06.16
Windows Phone 7Silverlight for Windows Phone
.NET 4 相当
XNA (Xbox と共通 )
Windows 8WinRT + DirectX.NET 4 、 4.5
どちらも Metro UI だが…
![Page 18: 20120616 java script+html5とc#+xamlで作るwindows8アプリ 16 9](https://reader036.fdocuments.net/reader036/viewer/2022062418/556600d9d8b42a2a4d8b4e77/html5/thumbnails/18.jpg)
VSUG DAY - Winter 2012.06.16
タブレットとスマートフォンでコードの共通化 ?
iOS や Android と同様
Windows Phone 8 で統合化の動き ?
![Page 19: 20120616 java script+html5とc#+xamlで作るwindows8アプリ 16 9](https://reader036.fdocuments.net/reader036/viewer/2022062418/556600d9d8b42a2a4d8b4e77/html5/thumbnails/19.jpg)
VSUG DAY - Winter 2012.06.16
WinRT とは何か ?
![Page 20: 20120616 java script+html5とc#+xamlで作るwindows8アプリ 16 9](https://reader036.fdocuments.net/reader036/viewer/2022062418/556600d9d8b42a2a4d8b4e77/html5/thumbnails/20.jpg)
VSUG DAY - Winter 2012.06.16
何それ ?.NET と何が違うの ?
WinRT
![Page 21: 20120616 java script+html5とc#+xamlで作るwindows8アプリ 16 9](https://reader036.fdocuments.net/reader036/viewer/2022062418/556600d9d8b42a2a4d8b4e77/html5/thumbnails/21.jpg)
VSUG DAY - Winter 2012.06.16
デスクトップアプリ用従来の Win32 API
Merto スタイル アプリ用“WinRT”
WinRT とは何か ?
![Page 22: 20120616 java script+html5とc#+xamlで作るwindows8アプリ 16 9](https://reader036.fdocuments.net/reader036/viewer/2022062418/556600d9d8b42a2a4d8b4e77/html5/thumbnails/22.jpg)
VSUG DAY - Winter 2012.06.16
Win32 API とは別のWindows RunTime
Win32 API を置き換えるMetro アプリ用
.NET とは別もの.NET は API ではない
WinRT とは何か ?
![Page 23: 20120616 java script+html5とc#+xamlで作るwindows8アプリ 16 9](https://reader036.fdocuments.net/reader036/viewer/2022062418/556600d9d8b42a2a4d8b4e77/html5/thumbnails/23.jpg)
VSUG DAY - Winter 2012.06.16
Win 32 API WinRT
従来の API 新 API
C スタイル OOP スタイル主に デスクトップ アプリ用
主に Metro スタイル アプリ用
Win 32 API と WinRT の比較
![Page 24: 20120616 java script+html5とc#+xamlで作るwindows8アプリ 16 9](https://reader036.fdocuments.net/reader036/viewer/2022062418/556600d9d8b42a2a4d8b4e77/html5/thumbnails/24.jpg)
VSUG DAY - Winter 2012.06.16
![Page 25: 20120616 java script+html5とc#+xamlで作るwindows8アプリ 16 9](https://reader036.fdocuments.net/reader036/viewer/2022062418/556600d9d8b42a2a4d8b4e77/html5/thumbnails/25.jpg)
VSUG DAY - Winter 2012.06.16
COM ベースの API.NET ではないWin32 API よりはオブジェクト指向C++ で書かれている
WinRT とは何か ?
![Page 26: 20120616 java script+html5とc#+xamlで作るwindows8アプリ 16 9](https://reader036.fdocuments.net/reader036/viewer/2022062418/556600d9d8b42a2a4d8b4e77/html5/thumbnails/26.jpg)
VSUG DAY - Winter 2012.06.16
Metro アプリの開発環境
• HTML5/CSS3 + JavaScript• C#, VB + XAML
• Silverlight 感覚• C++ + XAML
WinRT 上で動作
New!
New!
New!
状況に合わせて
選択
![Page 27: 20120616 java script+html5とc#+xamlで作るwindows8アプリ 16 9](https://reader036.fdocuments.net/reader036/viewer/2022062418/556600d9d8b42a2a4d8b4e77/html5/thumbnails/27.jpg)
VSUG DAY - Winter 2012.06.16
• 描画エンジンは Internet Explorer と同じ (Trident)
• JavaScript エンジンは Chakra
• WinJS で WinRT が使える
HTML5/CSS3 + JavaScript ?
![Page 28: 20120616 java script+html5とc#+xamlで作るwindows8アプリ 16 9](https://reader036.fdocuments.net/reader036/viewer/2022062418/556600d9d8b42a2a4d8b4e77/html5/thumbnails/28.jpg)
VSUG DAY - Winter 2012.06.16
参考 : C++ + XAML?
• ネイティブ コード + XAML• C++ とは言っても、従来の C++ を拡張し
たもの
C++/CX• C++/CLI ではない• C++11 ではない
![Page 29: 20120616 java script+html5とc#+xamlで作るwindows8アプリ 16 9](https://reader036.fdocuments.net/reader036/viewer/2022062418/556600d9d8b42a2a4d8b4e77/html5/thumbnails/29.jpg)
VSUG DAY - Winter 2012.06.16
C#/VB から呼べるCLI から呼ぶ仕組みがある型は自動変換
JavaScript から呼べるJavaScript から WinRT の API をコール“WinJS”
WinRT とは何か ?
![Page 30: 20120616 java script+html5とc#+xamlで作るwindows8アプリ 16 9](https://reader036.fdocuments.net/reader036/viewer/2022062418/556600d9d8b42a2a4d8b4e77/html5/thumbnails/30.jpg)
VSUG DAY - Winter 2012.06.16
言語プロジェクション
C++( ネイティブ )
C#/VB( マネージ )
CLR
JavaScriptChakr
a
WinMDWindows MetaData( 型情報 )
WinRT(COM ベースネイティブ )
![Page 31: 20120616 java script+html5とc#+xamlで作るwindows8アプリ 16 9](https://reader036.fdocuments.net/reader036/viewer/2022062418/556600d9d8b42a2a4d8b4e77/html5/thumbnails/31.jpg)
VSUG DAY - Winter 2012.06.16
WinRT 自体はネイティブ コードWinRT と .NET は似ているが型が少し違う
IIterable<T> ⇔ IEnumerable<T>
参考 : .NET 4.5 で Metro アプリ向けに非同期が強化
Windows 8 は .NET 3.5 が入っていない.NET 4.5 は Windows Vista に対応しない
WinRT と .NET
![Page 32: 20120616 java script+html5とc#+xamlで作るwindows8アプリ 16 9](https://reader036.fdocuments.net/reader036/viewer/2022062418/556600d9d8b42a2a4d8b4e77/html5/thumbnails/32.jpg)
VSUG DAY - Winter 2012.06.16
従来の Win32 API は呼べるの ?
DirectX は呼べる
Metro アプリ
DirectX 11.1
![Page 33: 20120616 java script+html5とc#+xamlで作るwindows8アプリ 16 9](https://reader036.fdocuments.net/reader036/viewer/2022062418/556600d9d8b42a2a4d8b4e77/html5/thumbnails/33.jpg)
VSUG DAY - Winter 2012.06.16
参考 : デスクトップ アプリの開発環境
従来通りC++ + Win32APIC#, VB + .NET 4, 4.5
Win32 API, .NET, Silverlight 上で動作
![Page 34: 20120616 java script+html5とc#+xamlで作るwindows8アプリ 16 9](https://reader036.fdocuments.net/reader036/viewer/2022062418/556600d9d8b42a2a4d8b4e77/html5/thumbnails/34.jpg)
VSUG DAY - Winter 2012.06.16
WinRT での開発の特徴
•非同期プログラミング•UI コードの分離
![Page 35: 20120616 java script+html5とc#+xamlで作るwindows8アプリ 16 9](https://reader036.fdocuments.net/reader036/viewer/2022062418/556600d9d8b42a2a4d8b4e77/html5/thumbnails/35.jpg)
VSUG DAY - Winter 2012.06.16
非同期?
•UI スレッドで重い処理を行うと UI が固まる
UI スレッド
イベントハンドラで
時間の掛かる処理
イベント
イベント
同期処理
![Page 36: 20120616 java script+html5とc#+xamlで作るwindows8アプリ 16 9](https://reader036.fdocuments.net/reader036/viewer/2022062418/556600d9d8b42a2a4d8b4e77/html5/thumbnails/36.jpg)
VSUG DAY - Winter 2012.06.16
非同期
UI スレッド
イベント 1
イベント 2
非同期処理別スレッド
イベントハンドラ 1
時間の掛かる処理
イベントハンドラ 2
1 の続き
![Page 37: 20120616 java script+html5とc#+xamlで作るwindows8アプリ 16 9](https://reader036.fdocuments.net/reader036/viewer/2022062418/556600d9d8b42a2a4d8b4e77/html5/thumbnails/37.jpg)
VSUG DAY - Winter 2012.06.16
• 非同期呼び出しだらけ• タブレット等のデバイスで有効• 50ms 以上掛かる可能性がある API は非同期版のみ
• 非同期呼び出し ?• APIの機能リクエストと結果受け取りが別
※ これまでのプログラミング方法では複雑なコードに → async/await が有効
WinRT では多くの API が非同期に
var client = new SyndicationClient();var feed = await client.RetrieveFeedAsync(new Uri(feedUri));
![Page 38: 20120616 java script+html5とc#+xamlで作るwindows8アプリ 16 9](https://reader036.fdocuments.net/reader036/viewer/2022062418/556600d9d8b42a2a4d8b4e77/html5/thumbnails/38.jpg)
VSUG DAY - Winter 2012.06.16
• XAML + C#/VB• MVVM パターンが有効
• XAML + C++• HTML5/CSS3 + JavaScript
UI コードの分離
![Page 39: 20120616 java script+html5とc#+xamlで作るwindows8アプリ 16 9](https://reader036.fdocuments.net/reader036/viewer/2022062418/556600d9d8b42a2a4d8b4e77/html5/thumbnails/39.jpg)
VSUG DAY - Winter 2012.06.16
Visual Studio 2012 RC
![Page 40: 20120616 java script+html5とc#+xamlで作るwindows8アプリ 16 9](https://reader036.fdocuments.net/reader036/viewer/2022062418/556600d9d8b42a2a4d8b4e77/html5/thumbnails/40.jpg)
VSUG DAY - Winter 2012.06.16
Visual Studio 2012 RC
![Page 41: 20120616 java script+html5とc#+xamlで作るwindows8アプリ 16 9](https://reader036.fdocuments.net/reader036/viewer/2022062418/556600d9d8b42a2a4d8b4e77/html5/thumbnails/41.jpg)
VSUG DAY - Winter 2012.06.16
DEMO• ファイル構成• アプリ ライフサイクル
JavaScript + HTML5/CSS3
![Page 42: 20120616 java script+html5とc#+xamlで作るwindows8アプリ 16 9](https://reader036.fdocuments.net/reader036/viewer/2022062418/556600d9d8b42a2a4d8b4e77/html5/thumbnails/42.jpg)
VSUG DAY - Winter 2012.06.16
Metro アプリ ライフサイクル
アクティブ
非アクティブ
実行開始(Activate)
一時停止(Suspend)
終了(Terminate)
実行再開(Resume)
要状態の保存
![Page 43: 20120616 java script+html5とc#+xamlで作るwindows8アプリ 16 9](https://reader036.fdocuments.net/reader036/viewer/2022062418/556600d9d8b42a2a4d8b4e77/html5/thumbnails/43.jpg)
VSUG DAY - Winter 2012.06.16
• メニュー• WinJS.UI.Menu
• アプリバー• WinJS.UI.AppBar
• リストビュー• WinJS.UI.ListView
等
WinJS のコントロール
![Page 44: 20120616 java script+html5とc#+xamlで作るwindows8アプリ 16 9](https://reader036.fdocuments.net/reader036/viewer/2022062418/556600d9d8b42a2a4d8b4e77/html5/thumbnails/44.jpg)
VSUG DAY - Winter 2012.06.16
WinJS.xhr({ url:"http://www.example.org/somedata.json"}).then(function (response) { updateDisplay( JSON.parse(response.responseText));}, function (ex) { reportXhrError(ex);});
例 : エラー処理参考 : Promise による非同期処理
![Page 45: 20120616 java script+html5とc#+xamlで作るwindows8アプリ 16 9](https://reader036.fdocuments.net/reader036/viewer/2022062418/556600d9d8b42a2a4d8b4e77/html5/thumbnails/45.jpg)
VSUG DAY - Winter 2012.06.16
宣言によるバインド
<h1 id="title" data-win-bind="textContent: title; style.background: color"/>
参考 : データバインド
var data = WinJS.Binding.as({ title: "This is my title", color: "#80FF80"});
WinJS.Binding.processAll(document.getElementById("title"),
data);
data.title = "new title";
![Page 46: 20120616 java script+html5とc#+xamlで作るwindows8アプリ 16 9](https://reader036.fdocuments.net/reader036/viewer/2022062418/556600d9d8b42a2a4d8b4e77/html5/thumbnails/46.jpg)
VSUG DAY - Winter 2012.06.16
セマンティック ズーム
<div id="semanticZoom" data-win-control="WinJS.UI.SemanticZoom">
<div id="zemanticZoomin“data-win-
control="WinJS.UI.ListView" /><div id="semanticZoomout“
data-win-control="WinJS.UI.ListView“ /></div>
![Page 47: 20120616 java script+html5とc#+xamlで作るwindows8アプリ 16 9](https://reader036.fdocuments.net/reader036/viewer/2022062418/556600d9d8b42a2a4d8b4e77/html5/thumbnails/47.jpg)
VSUG DAY - Winter 2012.06.16
DEMO• ファイル構成• データバインド• ViewModel
C# + XAML
![Page 48: 20120616 java script+html5とc#+xamlで作るwindows8アプリ 16 9](https://reader036.fdocuments.net/reader036/viewer/2022062418/556600d9d8b42a2a4d8b4e77/html5/thumbnails/48.jpg)
VSUG DAY - Winter 2012.06.16
Metro アプリ ライフサイクル
アクティブ
非アクティブ
実行開始(Activate)
一時停止(Suspend)
終了(Terminate)
実行再開(Resume)
要状態の保存
![Page 49: 20120616 java script+html5とc#+xamlで作るwindows8アプリ 16 9](https://reader036.fdocuments.net/reader036/viewer/2022062418/556600d9d8b42a2a4d8b4e77/html5/thumbnails/49.jpg)
VSUG DAY - Winter 2012.06.16
• Metro style app developmenthttp://msdn.microsoft.com/en-us/windows/apps
• Windows 8 Metro Style App sampleshttp://code.msdn.microsoft.com/windowsapps/
• Windows Developer Days 2012 | Channel 9http://channel9.msdn.com/Events/Windows-Developer-Days/Windows-Developer-Days-2012
• TechEd North America 2012 | Channel 9http://channel9.msdn.com/Events/TechEd/NorthAmerica/2012
参考資料 :
![Page 50: 20120616 java script+html5とc#+xamlで作るwindows8アプリ 16 9](https://reader036.fdocuments.net/reader036/viewer/2022062418/556600d9d8b42a2a4d8b4e77/html5/thumbnails/50.jpg)
VSUG DAY - Winter 2012.06.16
• Metro スタイルの設計原則http://msdn.microsoft.com/library/ja-jp/windows/apps/hh781237
• Metro スタイル アプリのナビゲーション デザイン http://msdn.microsoft.com/ja-jp/library/windows/apps/hh761500.aspx
• Metro スタイル アプリの UX ガイドラインhttp://msdn.microsoft.com/ja-jp/library/windows/apps/hh465424.aspx
参考 : Metro スタイルアプリのガイドライン
![Page 51: 20120616 java script+html5とc#+xamlで作るwindows8アプリ 16 9](https://reader036.fdocuments.net/reader036/viewer/2022062418/556600d9d8b42a2a4d8b4e77/html5/thumbnails/51.jpg)
JavaScript + HTML5 と C# + XAML で作る Windows 8 アプリ
小島 富治雄
VSUG DAY – Summer ( 2012.06.16 )