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 201...
Windows 8            VSUG DAY - Winter 2012.06.16
Windows 8二本立て!• Metro スタイル UI• 従来デスクトップ            VSUG DAY - Winter 2012.06.16
Windows 84エディション  Windows 8  Windows 8 Pro                            x86                                           x64  W...
Windows 8 と Windows RT             従来デスクトップ アプリ                 Metro スタイル アプリWindows 8    •   従来通り                     • ...
Windows RT「Metro スタイルアプリなら全て他のWindows 8 と互換性がある」わけではない   ○ HTML + JavaScript で作ったもの   ○ C# + XAML で作ったもの   × C++ + XAML   ...
Metro スタイル        VSUG DAY - Winter 2012.06.16
Metro スタイル大きく GUI の考え方を変える必要これまでの GUI と混ぜられない        VSUG DAY - Winter 2012.06.16
Metro スタイルタッチ & マウス/キーボード基本フルスクリーン  カスケード ウィンドウじゃない  タイトルバー、従来のメニューがない横長  横スクロール        VSUG DAY - Winter 2012.06.16
Metro スタイル アプリ新たな GUI への対応ライブタイル  バッチチャームアプリ バートースト通知セマンティック ズーム        VSUG DAY - Winter 2012.06.16
Metro スタイル通常明示的に「終了」しない  裏に回ってもサスペンド状態で継続  (メモリ不足になったときなどに)            不意に終了される  他のタブレットやスマートフォン同様  状態保存のタイミングも 変わってくる    ...
Metro アプリ ライフサイクル  実行開始 (Activate)                 アクティブ      一時停止                    実行再開     (Suspend)                (R...
Metro スタイル アプリ    – 移植性      VSUG DAY - Winter 2012.06.16
Metro スタイル – 移植性従来デスクトップアプリからの    移植は容易?   UI が全然違うので困難   API が異なるので困難Windows Phone 7 アプリからの        移植は容易?   XAML 部分は似ている ...
どちらも Metro UI だが…Windows Phone 7   Silverlight for Windows Phone        .NET 4相当   XNA (Xbox と共通)Windows 8   WinRT + Direc...
Windows Phone 8 で統合化の動き?タブレットとスマートフォンでコードの共通化?  iOS や Android と同様          VSUG DAY - Winter 2012.06.16
WinRT とは何か?     VSUG DAY - Winter 2012.06.16
WinRT  何それ?  .NET と何が違うの?        VSUG DAY - Winter 2012.06.16
WinRT とは何か?デスクトップアプリ用  従来の Win32 APIMerto スタイル アプリ用  “WinRT”        VSUG DAY - Winter 2012.06.16
WinRT とは何か?Win32 API とは別の          Windows RunTime   Win32 API を置き換える   Metro アプリ用.NET とは別もの   .NET は API ではない         VSU...
Win 32 API と WinRT の比較Win 32 API                WinRT従来の API                   新 APIC スタイル                    OOP スタイル主に デ...
VSUG DAY - Winter 2012.06.16
WinRT とは何か?COM ベースの API   .NET ではない   Win32 API よりはオブジェクト指向   C++ で書かれている         VSUG DAY - Winter 2012.06.16
Metro アプリの開発環境•       HTML5/CSS3 + JavaScript                    New!•       C#, VB + XAML      New!    •    Silverlight 感...
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”           VSUG...
言語プロジェクション      C++   (ネイティブ)                                  WinRT                                        (COMベース C#/VB ...
WinRT と .NETWinRT 自体はネイティブ コードWinRT と .NET は似ているが型が少し違う   IIterable<T> ⇔ IEnumerable<T> 参考: .NET 4.5 で Metro アプリ向けに非同 期が強化...
Metro アプリ従来の Win32 API は呼べるの?  DirectX は呼べる                                       DirectX 11.1        VSUG DAY - Winter 20...
参考: デスクトップ アプリの開発環境従来通り  C++ + Win32API  C#, VB + .NET 4, 4.5Win32 API, .NET, Silverlight 上で動作             VSUG DAY - Wint...
WinRT での開発の特徴•非同期プログラミング•UI コードの分離     VSUG DAY - Winter 2012.06.16
非同期?•UI スレッドで重い処理を行うと UI が固まる     同期処理               UIスレッド     イベント                     イベントハンドラ                         ...
非同期 非同期処理              UIスレッド                    別スレッドイベント 1   イベントハンドラ             1                                     ...
WinRT では多くの API が非同期に•       非同期呼び出しだらけ    •    タブレット等のデバイスで有効    •    50ms 以上掛かる可能性がある API は非同期版のみ•       非同期呼び出し?    •  ...
UI コードの分離• XAML + C#/VB• MVVM パターンが有効• XAML + C++• HTML5/CSS3 + JavaScript         VSUG DAY - Winter 2012.06.16
Visual Studio 2012 RC            VSUG DAY - Winter 2012.06.16
Visual Studio 2012 RC            VSUG DAY - Winter 2012.06.16
JavaScript + HTML5/CSS3DEMO • ファイル構成 • アプリ ライフサイクル           VSUG DAY - Winter 2012.06.16
Metro アプリ ライフサイクル  実行開始 (Activate)                 アクティブ      一時停止                    実行再開     (Suspend)                (R...
WinJS のコントロール•       メニュー    •   WinJS.UI.Menu•       アプリバー    •   WinJS.UI.AppBar•       リストビュー    •   WinJS.UI.ListView等...
参考: Promise による非同期処理        VSUG DAY - Winter 2012.06.16
参考: データバインド      VSUG DAY - Winter 2012.06.16
セマンティック ズーム        VSUG DAY - Winter 2012.06.16
C# + XAMLDEMO • ファイル構成 • データバインド • ViewModel            VSUG DAY - Winter 2012.06.16
Metro アプリ ライフサイクル  実行開始 (Activate)                 アクティブ      一時停止                    実行再開     (Suspend)                (R...
参考資料:• Metro style app development  http://msdn.microsoft.com/en-us/windows/apps• Windows 8 Metro Style App samples  http:...
参考: Metro スタイルアプリのガイドライン• Metro スタイルの設計原則 http://msdn.microsoft.com/library/ja- jp/windows/apps/hh781237• Metro スタイル アプリのナ...
VSUG DAY – Summer (2012.06.16)JavaScript + HTML5 とC# + XAML で作るWindows 8 アプリ            小島 富治雄
Upcoming SlideShare
Loading in …5
×

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

3,048 views

Published on

0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,048
On SlideShare
0
From Embeds
0
Number of Embeds
442
Actions
Shares
0
Downloads
20
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

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

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

×