JavaScript+HTML5とC#+XAMLで作るWindows8アプリ
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 12,947 views

『Community Open Day 2012 北陸』 ...

『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

Statistics

Views

Total Views
12,947
Views on SlideShare
10,508
Embed Views
2,439

Actions

Likes
10
Downloads
42
Comments
0

10 Embeds 2,439

http://blog.shos.info 2197
http://cptl.corp.yahoo.co.jp 161
http://vails.rssing.com 42
http://win8app.lovesoku.jp 15
http://fujiwo.hatenablog.jp 9
http://webcache.googleusercontent.com 8
http://cache.yahoofs.jp 3
https://twitter.com 2
http://www.feedly.com 1
http://geinou.lovesoku.jp 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • JavaScript + HTML5 と C# + XAML で作るWindows 8 アプリ 小島 富治雄 Community Open Day 2012
    • 自己紹介• 小島 富治雄• @Fujiwo• 福井コンピュータ株式会社• Microsoft MVP C# (2005-2012) 2
    • アジェンダ 1. Windows 8 3. WinRT とは何か 2. Metro スタイル 4. デモ
    • Windows 8
    • Windows 8二本立て!• Metro スタイル UI• 従来デスクトップ
    • Windows 84エディション Windows 8 x86 Windows 8 Pro x64 Windows 8 Enterprise Windows RT ARM
    • 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 で配布 • 審査あり
    • Windows RT 何それ? 他の Windows 8 と互換性ある?
    • Windows RTよりタブレットに特化した Windows 8※ 後述の “WinRT” とは別もの
    • Windows RTARM用タブレットに特化 薄型軽量、省電力
    • Windows RTパッケージ販売されない iOS や Android と同様 タブレットなどに プリインストールされる
    • Windows RTMetro スタイル アプリのみ!• 従来のデスクトップアプリは動作しない• Metro アプリの多くは 「そのまま」動く• Office は Metro 版 が提供される タッチ用の Word、Excel、 PowerPoint、OneNote• “Office 15” (コードネーム)
    • Windows RT「Metro スタイルアプリなら全て他の Windows 8 と互換性がある」わけではない ○ HTML + JavaScript で作ったもの ○ C# + XAML で作ったもの × C++ + XAML
    • Metro スタイル
    • Metro スタイル大きく GUI の考え方を変える必要これまでの GUI と混ぜられない
    • Metro スタイルタッチ & マウス/キーボード基本フルスクリーン カスケード ウィンドウじゃない タイトルバー、従来のメニューがない横長 横スクロール
    • Metro スタイル アプリ新たな GUI への対応ライブタイル バッチチャームアプリ バートースト通知セマンティック ズーム
    • Metro スタイル通常明示的に「終了」しない 裏に回ってもサスペンド状態で継続 (メモリ不足になったときなどに) 不意に終了される 他のタブレットやスマートフォン同様 状態保存のタイミングも 変わってくる 「サスペンド時に状態保存」
    • Metro アプリ ライフサイクル 実行開始 (Activate) アクティブ 一時停止 実行再開 (Suspend) (Resume) 非アクティブ要状態の保存 終了 (Terminate)
    • Metro スタイル アプリコントラクト (他アプリとの連携) の対応タッチへの対応 指で隠れない大きさの 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 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 と同様
    • 参考: デスクトップアプリ – 互換性Vista/XP 以降用のアプリは 基本的に動作するはず Windows 7 で XP モードでないと 動かないようなものは難しいメモリ使用可能量は増加32ビットと64ビットがあるのも同様
    • WinRT とは何か?
    • WinRT 何それ? .NET と何が違うの?
    • WinRT とは何か?デスクトップアプリ用 従来の Win32 APIMerto スタイル アプリ用 “WinRT”
    • WinRT とは何か?Win32 API とは別の Windows RunTime Win32 API を置き換える Metro アプリ用.NET とは別もの .NET は API ではない
    • Win 32 API と WinRT の比較Win 32 API WinRT従来の API 新 APIC スタイル 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)• 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 (型情報)
    • WinRT と .NETWinRT 自体はネイティブ コード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.5Win32 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
    • Visual Studio 2012 RC
    • JavaScript + HTML5/CSS3DEMO • ファイル構成
    • WinJS のコントロール• ボタン• アプリバー• グリッドビュー等
    • 参考: Promise による非同期処理
    • 参考: データバインド
    • C# + XAMLDEMO • ファイル構成 • データバインド • スナップ
    • Metro アプリ ライフサイクル 実行開始 (Activate) アクティブ 一時停止 実行再開 (Suspend) (Resume) 非アクティブ要状態の保存 終了 (Terminate)
    • 参考資料:• 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