javascript+html5とc#+xamlで作るwindows8アプリ

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

Community Open Day 2012

小島 富治雄

自己紹介•小島 富治雄•@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

何それ ?

他の Windows 8 と互換性ある ?

Windows RT

よりタブレットに特化した Windows 8

※ 後述の “ WinRT” とは別もの

Windows RT

ARM 用タブレットに特化

薄型軽量、省電力

Windows RT

パッケージ販売されないiOS や Android と同様タブレットなどに

プリインストールされる

Windows RT

Metro スタイル アプリのみ !• 従来のデスクトップアプリは動作しない• Metro アプリの多くは 「そのまま」動く• Office は Metro 版 が提供される

タッチ用の Word 、 Excel 、 PowerPoint 、 OneNote

• “Office 15” ( コードネーム )

Windows RT

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

○ HTML + JavaScript で作ったもの

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

Windows RT

Metro スタイル

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

Metro スタイル

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

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

横長横スクロール

Metro スタイル

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

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

Metro スタイル アプリ

通常明示的に「終了」しない裏に回ってもサスペンド状態で継続

( メモリ不足になったときなどに ) 不意に終了される

他のタブレットやスマートフォン同様

状態保存のタイミングも変わってくる

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

Metro スタイル

Metro アプリ ライフサイクル

アクティブ

非アクティブ

実行開始(Activate)

一時停止(Suspend)

終了(Terminate)

実行再開(Resume)

要状態の保存

コントラクト ( 他アプリとの連携 ) の対応

タッチへの対応指で隠れない大きさの UI

アニメーション

Metro スタイル アプリ

解像度1024×768 以上1366×768 以上でスナップ対応画像は SVG か 3 種類のビットマップ

スナップへの対応ランドスケープと

ポートレートのレイアウト

Metro スタイル アプリ

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

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

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

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

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

XAML 部分は可能将来は可能に ?

Metro スタイル – 移植性

Windows RT ではCPU が異なる

x86/x64 ではなく ARM

x86/x64 ネイティブ コードは動かない

開発言語を選ぶ必要性

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 で統合化の動き ?

Vista/XP 以降用のアプリは基本的に動作するはず

Windows 7 で XP モードでないと

動かないようなものは難しい

メモリ使用可能量は増加32 ビットと 64 ビットがあるのも同様

参考 : デスクトップアプリ – 互換性

WinRT とは何か ?

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

WinRT

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

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

WinRT とは何か ?

Win32 API とは別の Windows RunTime

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

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

WinRT とは何か ?

Win 32 API WinRT従来の API 新 API

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

主に Metro スタイル アプリ用

Win 32 API と WinRT の比較

COM ベースの API.NET ではない

Win32 API よりはオブジェクト指向

C++ で書かれている

WinRT とは何か ?

Metro アプリの開発環境

HTML5/CSS3 + JavaScriptC#, VB + XAML

Silverlight 感覚C++ + XAML

WinRT 上で動作

New!

New!

New!

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

• WinJS で WinRT が使える

HTML5/CSS3 + JavaScript ?

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

C++/CXC++/CLI ではないC++11 ではない

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

JavaScript から呼べるJavaScript から WinRT の API

をコール可能“WinJS”

WinRT とは何か ?

言語プロジェクション

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

Visual Studio 2012 RC

DEMO• ファイル構成

JavaScript + HTML5/CSS3

• ボタン• アプリバー• グリッドビュー等

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.process(document.getElementById("title"), data);

data.title = "new title";

DEMO• ファイル構成• データバインド• スナップ

C# + XAML

Metro アプリ ライフサイクル

アクティブ

非アクティブ

実行開始(Activate)

一時停止(Suspend)

終了(Terminate)

実行再開(Resume)

要状態の保存

• Windows8 | 眠るシーラカンスと水底のプログラマーhttp://coelacanth.heteml.jp/blog/category/windows8/

• Windows 8 Metro Style App sampleshttp://code.msdn.microsoft.com/windowsapps/

• Programming Windows®, 6th Edition By Charles Petzold

http://shop.oreilly.com/product/0790145369079.do

参考資料 :