20120616 java script+html5とc#+xamlで作るwindows8アプリ 16 9

JavaScript + HTML5 と C# + XAML で作る Windows 8 アプリ

小島富治雄

VSUG DAY – Summer （ 2012.06.16 ）

VSUG DAY - Winter 2012.06.16

自己紹介• 小島富治雄• @Fujiwo• 福井コンピュータ株式会社• Microsoft MVP C# (2005-2012)

2


アジェンダ

1. Windows 8

2. Metro スタイル

3. WinRT とは何か

4. デモ


Windows 8


二本立て !• Metro スタイル UI• 従来デスクトップ

Windows 8


４エディションWindows 8Windows 8 ProWindows 8 EnterpriseWindows RT

Windows 8

x86x64

ARM


従来デスクトップアプリ 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


「 Metro スタイルアプリなら全て他の Windows 8 と互換性がある」わけではない

○ HTML + JavaScript で作ったもの

○ C# + XAML で作ったもの× C++ + XAML

ネイティブなので Windows RT ではバイナリ互換なし

Windows RT


Metro スタイル


大きく GUI の考え方を変える必要これまでの GUI と混ぜられない

Metro スタイル


タッチ & マウス / キーボード基本フルスクリーン

カスケードウィンドウじゃないタイトルバー、従来のメニューがない

横長横スクロール

Metro スタイル


新たな GUI への対応ライブタイル

バッチチャームアプリバートースト通知セマンティックズーム

Metro スタイルアプリ


通常明示的に「終了」しない裏に回ってもサスペンド状態で継続( メモリ不足になったときなどに )

不意に終了される他のタブレットやスマートフォン同様状態保存のタイミングも変わってくる

「サスペンド時に状態保存」

Metro スタイル


Metro アプリライフサイクル

アクティブ

非アクティブ

実行開始(Activate)

一時停止(Suspend)

終了(Terminate)

実行再開(Resume)

要状態の保存


Metro スタイルアプリ – 移植性


従来デスクトップアプリからの移植は容易?

UI が全然違うので困難API が異なるので困難

Windows Phone 7 アプリからの移植は容易?

XAML 部分は似ている将来は可能に?

Metro スタイル – 移植性


Windows Phone 7Silverlight for Windows Phone

.NET 4 相当

XNA (Xbox と共通 )

Windows 8WinRT + DirectX.NET 4 、 4.5

どちらも Metro UI だが…


タブレットとスマートフォンでコードの共通化 ?

iOS や Android と同様

Windows Phone 8 で統合化の動き ?


WinRT とは何か ?


何それ ?.NET と何が違うの ?

WinRT


デスクトップアプリ用従来の Win32 API

Merto スタイルアプリ用“WinRT”



Win32 API とは別のWindows RunTime

Win32 API を置き換えるMetro アプリ用

.NET とは別もの.NET は API ではない



Win 32 API WinRT

従来の API 新 API

C スタイル OOP スタイル主にデスクトップアプリ用

主に Metro スタイルアプリ用

Win 32 API と WinRT の比較


COM ベースの API.NET ではないWin32 API よりはオブジェクト指向C++ で書かれている



Metro アプリの開発環境

• HTML5/CSS3 + JavaScript• C#, VB + XAML

• Silverlight 感覚• C++ + XAML

WinRT 上で動作

New!

New!

New!

状況に合わせて

選択


• 描画エンジンは Internet Explorer と同じ (Trident)

• JavaScript エンジンは Chakra

• WinJS で WinRT が使える

HTML5/CSS3 + JavaScript ?


参考 : C++ + XAML?

• ネイティブコード + XAML• C++ とは言っても、従来の C++ を拡張し

たもの

C++/CX• C++/CLI ではない• C++11 ではない


C#/VB から呼べるCLI から呼ぶ仕組みがある型は自動変換

JavaScript から呼べるJavaScript から WinRT の API をコール“WinJS”



言語プロジェクション

C++( ネイティブ )

C#/VB( マネージ )

CLR

JavaScriptChakr

a

WinMDWindows MetaData( 型情報 )

WinRT(COM ベースネイティブ )


WinRT 自体はネイティブコードWinRT と .NET は似ているが型が少し違う

IIterable<T> ⇔ IEnumerable<T>

参考 : .NET 4.5 で Metro アプリ向けに非同期が強化

Windows 8 は .NET 3.5 が入っていない.NET 4.5 は Windows Vista に対応しない

WinRT と .NET


従来の Win32 API は呼べるの ?

DirectX は呼べる

Metro アプリ

DirectX 11.1


参考 : デスクトップアプリの開発環境

従来通りC++ + Win32APIC#, VB + .NET 4, 4.5

Win32 API, .NET, Silverlight 上で動作


WinRT での開発の特徴

•非同期プログラミング•UI コードの分離


非同期?

•UI スレッドで重い処理を行うと UI が固まる

UI スレッド

イベントハンドラで

時間の掛かる処理

イベント

イベント

同期処理


非同期

UI スレッド

イベント 1

イベント 2

非同期処理別スレッド

イベントハンドラ 1

時間の掛かる処理

イベントハンドラ 2

1 の続き


• 非同期呼び出しだらけ• タブレット等のデバイスで有効• 50ms 以上掛かる可能性がある API は非同期版のみ

• 非同期呼び出し ?• APIの機能リクエストと結果受け取りが別

※ これまでのプログラミング方法では複雑なコードに → async/await が有効

WinRT では多くの API が非同期に

var client = new SyndicationClient();var feed = await client.RetrieveFeedAsync(new Uri(feedUri));


• XAML + C#/VB• MVVM パターンが有効

• XAML + C++• HTML5/CSS3 + JavaScript

UI コードの分離


Visual Studio 2012 RC


DEMO• ファイル構成• アプリライフサイクル

JavaScript + HTML5/CSS3



アクティブ

非アクティブ



終了(Terminate)


要状態の保存


• メニュー• WinJS.UI.Menu

• アプリバー• WinJS.UI.AppBar

• リストビュー• WinJS.UI.ListView

等

WinJS のコントロール


WinJS.xhr({ url:"http://www.example.org/somedata.json"}).then(function (response) { updateDisplay( JSON.parse(response.responseText));}, function (ex) { reportXhrError(ex);});

例 : エラー処理参考 : Promise による非同期処理


宣言によるバインド

<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";


セマンティックズーム

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


DEMO• ファイル構成• データバインド• ViewModel

C# + XAML



アクティブ

非アクティブ



終了(Terminate)


要状態の保存


• 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

参考資料 :

http://msdn.microsoft.com/en-us/windows/apps

http://code.msdn.microsoft.com/windowsapps/

http://channel9.msdn.com/Events/Windows-Developer-Days/Windows-Developer-Days-2012




http://channel9.msdn.com/Events/TechEd/NorthAmerica/2012





• 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 スタイルアプリのガイドライン

http://msdn.microsoft.com/library/ja-jp/windows/apps/hh781237



http://msdn.microsoft.com/ja-jp/library/windows/apps/hh761500.aspx







JavaScript + HTML5 と C# + XAML で作る Windows 8 アプリ

小島富治雄

VSUG DAY – Summer （ 2012.06.16 ）

20120616 java script+html5とc#+xamlで作るwindows8アプリ 16 9

Documents