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

VSUG DAY – Summer （2012.06.16）

JavaScript + HTML5 と
C# + XAML で作る
Windows 8 アプリ
小島富治雄

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

VSUG DAY - Winter 2012.06.16 2

アジェンダ

1. Windows 8 3. WinRT とは何か

2. Metro スタイル 4. デモ

VSUG DAY - Winter 2012.06.16

Windows 8


Windows 8

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


Windows 8
４エディション
Windows 8
Windows 8 Pro x86
x64
Windows 8 Enterprise
Windows RT ARM


Windows 8 と Windows RT
従来デスクトップアプリ Metro スタイルアプリ

Windows 8 • 従来通り • 全画面
x86/x64 Win32 API • 新 API “WinRT”
• .NET • C#/VB+XAML
• Silverlight • JavaScript+HTML5
• ほとんどそのまま動作 • C++ + XAMLで
ネイティブアプリも可
• Market Place で配布
Windows RT × • 審査あり
ARM


Windows RT
「Metro スタイルアプリなら全て他の
Windows 8 と互換性がある」わけではない
○ HTML + JavaScript で作ったもの
○ C# + XAML で作ったもの
× C++ + XAML
ネイティブなので Windows RT では
バイナリ互換なし

Metro スタイル


Metro スタイル

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


Metro スタイル
タッチ & マウス/キーボード
基本フルスクリーン
カスケードウィンドウじゃない
タイトルバー、従来のメニューがない
横長
横スクロール

Metro スタイルアプリ
新たな GUI への対応
ライブタイル
バッチ
チャーム
アプリバー
トースト通知
セマンティックズーム

Metro スタイル
通常明示的に「終了」しない
裏に回ってもサスペンド状態で継続
(メモリ不足になったときなどに)
不意に終了される
他のタブレットやスマートフォン同様
状態保存のタイミングも変わってくる
「サスペンド時に状態保存」

Metro アプリライフサイクル
実行開始
(Activate)
アクティブ

一時停止実行再開
(Suspend) (Resume)

非アクティブ
要状態の保存終了
(Terminate)

Metro スタイルアプリ

– 移植性


Metro スタイル – 移植性
従来デスクトップアプリからの
移植は容易?
UI が全然違うので困難
API が異なるので困難
Windows Phone 7 アプリからの
移植は容易?
XAML 部分は似ている
将来は可能に?


どちらも Metro UI だが…
Windows Phone 7
Silverlight for Windows Phone
.NET 4相当
XNA (Xbox と共通)
Windows 8
WinRT + DirectX
.NET 4、4.5

Windows Phone 8 で
統合化の動き?
タブレットとスマートフォン
でコードの共通化?
iOS や Android と同様


WinRT とは何か?


WinRT

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


WinRT とは何か?

デスクトップアプリ用
従来の Win32 API
Merto スタイルアプリ用
“WinRT”

WinRT とは何か?
Win32 API とは別の
Windows RunTime
Win32 API を置き換える
Metro アプリ用
.NET とは別もの
.NET は API ではない

Win 32 API と WinRT の比較

Win 32 API WinRT
従来の API 新 API
C スタイル OOP スタイル
主にデスクトップア主に Metro スタイル
プリ用アプリ用


WinRT とは何か?

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


Metro アプリの開発環境
• HTML5/CSS3 + JavaScript New!

• C#, VB + XAML New!
• Silverlight 感覚
• C++ + XAML New!

状況に
WinRT 上で動作合わせて
選択

HTML5/CSS3 + JavaScript ?

• 描画エンジンは Internet
Explorer と同じ (Trident)
• JavaScript エンジンは Chakra
• WinJS で WinRT が使える

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

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

WinRT とは何か?
C#/VB から呼べる
CLI から呼ぶ仕組みがある
型は自動変換
JavaScript から呼べる
JavaScript から WinRT の API をコール
“WinJS”


言語プロジェクション
C++
(ネイティブ) WinRT
(COMベース
C#/VB CLR ネイティブ)
(マネージ)

JavaScript Chakra WinMD
Windows MetaData
VSUG DAY - Winter 2012.06.16 (型情報)

WinRT と .NET
WinRT 自体はネイティブコード
WinRT と .NET は似ているが型が少し違う
IIterable<T> ⇔ IEnumerable<T>
参考: .NET 4.5 で Metro アプリ向けに非同
期が強化
Windows 8 は .NET 3.5 が入っていない
.NET 4.5 は Windows Vista に対応しない

Metro アプリ

従来の Win32 API は呼べるの?
DirectX は呼べる

DirectX 11.1


参考: デスクトップアプリの開発環境
従来通り
C++ + Win32API
C#, VB + .NET 4, 4.5

Win32 API, .NET, Silverlight 上で動作


WinRT での開発の特徴

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


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

イベント
イベントハンドラ
で
イベント
時間の掛かる
処理


非同期
非同期処理
UIスレッド別スレッド

イベント 1 イベントハンドラ
1
時間の掛かる
イベント 2 イベントハンドラ
処理
2
1 の続き


WinRT では多くの API が非同期に
• 非同期呼び出しだらけ
• タブレット等のデバイスで有効
• 50ms 以上掛かる可能性がある API は非同期版のみ
• 非同期呼び出し?
• APIの機能リクエストと結果受け取りが別

※ これまでのプログラミング方法では複雑なコードに
→ async/await が有効
var client = new SyndicationClient();
var feed = await client.RetrieveFeedAsync(new Uri(feedUri));

UI コードの分離
• XAML + C#/VB
• MVVM パターンが有効
• XAML + C++
• HTML5/CSS3 + JavaScript

Visual Studio 2012 RC


JavaScript + HTML5/CSS3

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


WinJS のコントロール
• メニュー
• WinJS.UI.Menu
• アプリバー
• WinJS.UI.AppBar
• リストビュー
• WinJS.UI.ListView
等

参考: Promise による非同期処理


参考: データバインド


セマンティックズーム


C# + XAML

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

参考資料:
• Metro style app development
http://msdn.microsoft.com/en-us/windows/apps
• Windows 8 Metro Style App samples
http://code.msdn.microsoft.com/windowsapps/
• Windows Developer Days 2012 | Channel 9
http://channel9.msdn.com/Events/Windows-Developer-
Days/Windows-Developer-Days-2012
• TechEd North America 2012 | Channel 9
http://channel9.msdn.com/Events/TechEd/NorthAmerica/2
012

参考: 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

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

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (20)

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