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

15,007 views
14,927 views

Published on

『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

Published in: Technology
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
15,007
On SlideShare
0
From Embeds
0
Number of Embeds
4,119
Actions
Shares
0
Downloads
47
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

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

  1. 1. JavaScript + HTML5 と C# + XAML で作るWindows 8 アプリ 小島 富治雄 Community Open Day 2012
  2. 2. 自己紹介• 小島 富治雄• @Fujiwo• 福井コンピュータ株式会社• Microsoft MVP C# (2005-2012) 2
  3. 3. アジェンダ 1. Windows 8 3. WinRT とは何か 2. Metro スタイル 4. デモ
  4. 4. Windows 8
  5. 5. Windows 8二本立て!• Metro スタイル UI• 従来デスクトップ
  6. 6. Windows 84エディション Windows 8 x86 Windows 8 Pro x64 Windows 8 Enterprise Windows RT ARM
  7. 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. 8. Windows RT 何それ? 他の Windows 8 と互換性ある?
  9. 9. Windows RTよりタブレットに特化した Windows 8※ 後述の “WinRT” とは別もの
  10. 10. Windows RTARM用タブレットに特化 薄型軽量、省電力
  11. 11. Windows RTパッケージ販売されない iOS や Android と同様 タブレットなどに プリインストールされる
  12. 12. Windows RTMetro スタイル アプリのみ!• 従来のデスクトップアプリは動作しない• Metro アプリの多くは 「そのまま」動く• Office は Metro 版 が提供される タッチ用の Word、Excel、 PowerPoint、OneNote• “Office 15” (コードネーム)
  13. 13. Windows RT「Metro スタイルアプリなら全て他の Windows 8 と互換性がある」わけではない ○ HTML + JavaScript で作ったもの ○ C# + XAML で作ったもの × C++ + XAML
  14. 14. Metro スタイル
  15. 15. Metro スタイル大きく GUI の考え方を変える必要これまでの GUI と混ぜられない
  16. 16. Metro スタイルタッチ & マウス/キーボード基本フルスクリーン カスケード ウィンドウじゃない タイトルバー、従来のメニューがない横長 横スクロール
  17. 17. Metro スタイル アプリ新たな GUI への対応ライブタイル バッチチャームアプリ バートースト通知セマンティック ズーム
  18. 18. Metro スタイル通常明示的に「終了」しない 裏に回ってもサスペンド状態で継続 (メモリ不足になったときなどに) 不意に終了される 他のタブレットやスマートフォン同様 状態保存のタイミングも 変わってくる 「サスペンド時に状態保存」
  19. 19. Metro アプリ ライフサイクル 実行開始 (Activate) アクティブ 一時停止 実行再開 (Suspend) (Resume) 非アクティブ要状態の保存 終了 (Terminate)
  20. 20. Metro スタイル アプリコントラクト (他アプリとの連携) の対応タッチへの対応 指で隠れない大きさの UIアニメーション
  21. 21. Metro スタイル アプリ解像度 1024×768以上 1366×768以上でスナップ対応 画像は SVG か3種類のビットマップスナップへの対応ランドスケープと ポートレートのレイアウト
  22. 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. 23. Metro スタイル アプリ – 移植性
  24. 24. Metro スタイル – 移植性従来デスクトップアプリからの 移植は容易? UI が全然違うので困難 API が異なるので困難Windows Phone 7 アプリからの 移植は容易? XAML 部分は可能 将来は可能に?
  25. 25. Metro スタイル – 移植性Windows RT では CPU が異なる x86/x64 ではなく ARM x86/x64 ネイティブ コードは 動かない 開発言語を選ぶ必要性
  26. 26. どちらも Metro UI だが…Windows Phone 7 Silverlight for Windows Phone .NET 4相当 XNA (Xbox と共通)Windows 8 WinRT + DirectX .NET 4、4.5
  27. 27. Windows Phone 8 で統合化の動き?タブレットとスマートフォンでコードの共通化? iOS や Android と同様
  28. 28. 参考: デスクトップアプリ – 互換性Vista/XP 以降用のアプリは 基本的に動作するはず Windows 7 で XP モードでないと 動かないようなものは難しいメモリ使用可能量は増加32ビットと64ビットがあるのも同様
  29. 29. WinRT とは何か?
  30. 30. WinRT 何それ? .NET と何が違うの?
  31. 31. WinRT とは何か?デスクトップアプリ用 従来の Win32 APIMerto スタイル アプリ用 “WinRT”
  32. 32. WinRT とは何か?Win32 API とは別の Windows RunTime Win32 API を置き換える Metro アプリ用.NET とは別もの .NET は API ではない
  33. 33. Win 32 API と WinRT の比較Win 32 API WinRT従来の API 新 APIC スタイル OOP スタイル主に デスクトップ 主に Metro スタイアプリ用 ル アプリ用
  34. 34. WinRT とは何か?COM ベースの API .NET ではない Win32 API よりはオブジェクト指向 C++ で書かれている
  35. 35. Metro アプリの開発環境HTML5/CSS3 + JavaScript New!C#, VB + XAML New! Silverlight 感覚C++ + XAML New!WinRT 上で動作
  36. 36. HTML5/CSS3 + JavaScript ?• 描画エンジンは Internet Explorer と同じ (Trident)• WinJS で WinRT が使える
  37. 37. C++ + XAML?• ネイティブ コード + XAML• C++ とは言っても、従来の C++ を 拡張したものC++/CX C++/CLI ではない C++11 ではない
  38. 38. WinRT とは何か?C#/VB から呼べる CLI から呼ぶ仕組みがある 型は自動変換JavaScript から呼べる JavaScript から WinRT の API をコール可能 “WinJS”
  39. 39. 言語プロジェクション C++ WinRT (ネイティブ) (COMベース ネイティブ) C#/VB CLR(マネージ)JavaScript Chakra WinMD Windows MetaData (型情報)
  40. 40. WinRT と .NETWinRT 自体はネイティブ コードWinRT と .NET は似ているが型が少し違う IIterable<T> ⇔ IEnumerable<T> 参考: .NET 4.5 で Metro アプリ向けに非同 期が強化 Windows 8 は .NET 3.5 が入っていない .NET 4.5 は Windows Vista に対応しない
  41. 41. Metro アプリ従来の Win32 API は呼べるの? DirectX は呼べる DirectX 11.1
  42. 42. 参考: デスクトップ アプリの開発環境従来通り C++ + Win32API C#, VB + .NET 4, 4.5Win32 API, .NET, Silverlight 上で動作
  43. 43. WinRT での開発の特徴• 非同期プログラミング• UI コードの分離
  44. 44. 非同期?• UI スレッドで重い処理を行うと UI が固まる 同期処理 UIスレッド イベント イベントハンドラ で イベント 時間の掛かる 処理
  45. 45. 非同期 非同期処理 UIスレッド 別スレッド イベント 1 イベントハンドラ 1 時間の掛かる イベント 2 イベントハンドラ 処理 2 1 の続き
  46. 46. WinRT では多くの API が非同期に• 非同期呼び出しだらけ • タブレット等のデバイスで有効 • 50ms 以上掛かる可能性がある API は非同期版のみ• 非同期呼び出し? • APIの機能リクエストと結果受け取りが別※ これまでのプログラミング方法では複雑なコードに → async/await が有効 var client = new SyndicationClient(); var feed = await client.RetrieveFeedAsync(new Uri(feedUri));
  47. 47. UI コードの分離• XAML + C#/VB • MVVM パターンが有効• XAML + C++• HTML5/CSS3 + JavaScript
  48. 48. Visual Studio 2012 RC
  49. 49. Visual Studio 2012 RC
  50. 50. JavaScript + HTML5/CSS3DEMO • ファイル構成
  51. 51. WinJS のコントロール• ボタン• アプリバー• グリッドビュー等
  52. 52. 参考: Promise による非同期処理
  53. 53. 参考: データバインド
  54. 54. C# + XAMLDEMO • ファイル構成 • データバインド • スナップ
  55. 55. Metro アプリ ライフサイクル 実行開始 (Activate) アクティブ 一時停止 実行再開 (Suspend) (Resume) 非アクティブ要状態の保存 終了 (Terminate)
  56. 56. 参考資料:• 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

×