『Community Open Day 2012 北陸』 (2012/06/09, 石川工業高等専門学校) http://cod.ms http://cod.ms/Pages/place_hokuriku.aspx http://atnd.org/events/28159 UStream: http://www.ustream.tv/channel/hokuriku-net/videos

1. JavaScript + HTML5 と C# + XAML で作る
Windows 8 アプリ
小島 富治雄
Community Open Day 2012

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

3. アジェンダ
1. Windows 8 3. WinRT とは何か
2. Metro スタイル 4. デモ

4. Windows 8

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

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

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

8. Windows RT
何それ?
他の Windows 8 と互換性ある?

9. Windows RT
よりタブレットに特化
した Windows 8
※ 後述の “WinRT” とは別もの

10. Windows RT
ARM用
タブレットに特化
薄型軽量、省電力

11. Windows RT
パッケージ販売されない
iOS や Android と同様
タブレットなどに
プリインストールされる

12. Windows RT
Metro スタイル アプリのみ!
• 従来のデスクトップアプリは動作しない
• Metro アプリの多くは 「そのまま」動く
• Office は Metro 版 が提供される
タッチ用の Word、Excel、
PowerPoint、OneNote
• “Office 15” (コードネーム)

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

14. Metro スタイル

15. Metro スタイル
大きく GUI の考え方を変える必要
これまでの GUI と混ぜられない

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

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

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

19. Metro アプリ ライフサイクル
実行開始
(Activate)
アクティブ
一時停止 実行再開
(Suspend) (Resume)
非アクティブ
要状態の保存 終了
(Terminate)

20. Metro スタイル アプリ
コントラクト (他アプリとの連携)
の対応
タッチへの対応
指で隠れない大きさの UI
アニメーション

21. Metro スタイル アプリ
解像度
1024×768以上
1366×768以上でスナップ対応
画像は SVG か3種類のビットマップ
スナップへの対応
ランドスケープと
ポートレートのレイアウト

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

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

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

25. Metro スタイル – 移植性
Windows RT では
CPU が異なる
x86/x64 ではなく ARM
x86/x64 ネイティブ コードは
動かない
開発言語を選ぶ必要性

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

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

28. 参考: デスクトップアプリ – 互換性
Vista/XP 以降用のアプリは
基本的に動作するはず
Windows 7 で XP モードでないと
動かないようなものは難しい
メモリ使用可能量は増加
32ビットと64ビットがあるのも同様

29. WinRT とは何か?

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

31. WinRT とは何か?
デスクトップアプリ用
従来の Win32 API
Merto スタイル アプリ用
“WinRT”

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

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

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

36. Metro アプリの開発環境
HTML5/CSS3 + JavaScript
New!
C#, VB + XAML New!
Silverlight 感覚
C++ + XAML New!
WinRT 上で動作

37. HTML5/CSS3 + JavaScript ?
• 描画エンジンは Internet
Explorer と同じ (Trident)
• WinJS で WinRT が使える

38. C++ + XAML?
• ネイティブ コード + XAML
• C++ とは言っても、従来の C++ を
拡張したもの
C++/CX
C++/CLI ではない
C++11 ではない

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

40. 言語プロジェクション
C++ WinRT
(ネイティブ)
(COMベース
ネイティブ)
C#/VB CLR
(マネージ)
JavaScript Chakra WinMD
Windows MetaData
(型情報)

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

42. Metro アプリ
従来の Win32 API は呼べるの?
DirectX は呼べる
DirectX 11.1

43. 参考: デスクトップ アプリの開発環境
従来通り
C++ + Win32API
C#, VB + .NET 4, 4.5
Win32 API, .NET, Silverlight 上で動作

44. WinRT での開発の特徴
• 非同期プログラミング
• UI コードの分離

45. 非同期?
• UI スレッドで重い処理を行うと
UI が固まる
同期処理 UIスレッド
イベント
イベントハンドラ
で
イベント
時間の掛かる
処理

46. 非同期
非同期処理
UIスレッド 別スレッド
イベント 1 イベントハンドラ
1
時間の掛かる
イベント 2 イベントハンドラ
処理
2
1 の続き

47. WinRT では多くの API が非同期に
• 非同期呼び出しだらけ
• タブレット等のデバイスで有効
• 50ms 以上掛かる可能性がある API は非同期版のみ
• 非同期呼び出し?
• APIの機能リクエストと結果受け取りが別
※ これまでのプログラミング方法では複雑なコードに
→ async/await が有効
var client = new SyndicationClient();
var feed = await client.RetrieveFeedAsync(new Uri(feedUri));

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

49. Visual Studio 2012 RC

50. Visual Studio 2012 RC

51. JavaScript + HTML5/CSS3
DEMO
• ファイル構成

52. WinJS のコントロール
• ボタン
• アプリバー
• グリッドビュー
等

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

54. 参考: データバインド

55. C# + XAML
DEMO
• ファイル構成
• データバインド
• スナップ

56. Metro アプリ ライフサイクル
実行開始
(Activate)
アクティブ
一時停止 実行再開
(Suspend) (Resume)
非アクティブ
要状態の保存 終了
(Terminate)

57. 参考資料:
• Windows8 | 眠るシーラカンスと水底のプログラマー
http://coelacanth.heteml.jp/blog/category/windows8/
• Windows 8 Metro Style App samples
http://code.msdn.microsoft.com/windowsapps/
• Programming Windows®, 6th Edition By Charles Petzold
http://shop.oreilly.com/product/0790145369079.do