HTML/JavaScript/CSS と C++ で作る Windows, Windows Phone, …download.microsoft.com/download/8/A/0/8A06E4CB-0CAC-4E39-90C4-8BFC642... · HTML5 + JavaScript Windows ストアアプリの構造

Room F

[email protected]

Windows, Windows Phone, Xbox

アプリ プラットフォームは共通化へ向かっている途中段階

HTML5 + JavaScript Windows ストアアプリの構造

ホストプロセス

WWAHost.exe

Windows 8.1

アプリ

API

JavaScript

Windows ランタイム

直接呼び出し(Compiled)

ロード

動作の基本

ブラウザー実行との違い

コンセプト

決定

HTML /

WinJS

画面要素を

列挙

CSS で

デザイン

サンプル

データで

デザイン

JavaScriptで

ロジック実装

デバッグ

＆テスト公開

Contoso Foods

Windows 版の開発

<Azure Web サイト>商品サービス

ASP.NET Web API

<Azure Web サイト>注文モニタ

ASP.NET SignalR

<Azure モバイルサービス>注文サービス

TodoItem テーブル

画面作成

Blend

ロジック実装

Visual Studio

デバッグ実行

Visual Studio

考えるべきは要素、レイアウトは後回し

標準 HTML に無いコントロール

HTML 要素はそのまま、CSS でカスタマイズ

#<要素のID> {

<CSS プロパティ> : <値>;

}

.<クラス名> {

<CSS プロパティ> : <値>;

}

#Title {font-size:42px;

}

.Item {font-size:24px;text-align:center;

}

-ms-grid を活用する

.ms-grid {display:-ms-grid;-ms-grid-rows: 120px 1fr;-ms-grid-columns: 120px 1fr;width: auto;height: inherit;

}

#myTitle {-ms-grid-column:2;

}

#myListView {-ms-grid-column:2;-ms-grid-row:2;

}

Blend for Visual Studio を活用

例:

sampleListViewItemTemplateに

<img

data-win-bind="src:uri" />

を追加。

後は、ひたすら頑張る！

WinJS.xhr({ url: "http://aka.ms/cfCatalog" }).done(function onCompleted(res) {

// 取得したJSON 文字列を処理、ListViewにバインド

var dataJson = JSON.parse(res.responseText);sampleData = new WinJS.Binding.List(dataJson);myListView.winControl.itemDataSource

= sampleData.dataSource;},function onAbort() {//通信が失敗した時の処理…}

); http://msdn.microsoft.com/ja-jp/library/windows/apps/hh761502.aspx

Windows : キーボード、マウス、タッチ

Windows Phone : タッチ、音声認識

Xbox : コントローラー、ジェスチャー、音声認識

WinJSControls

Promises

Navigation

Localization

Application

Xhr

Binding

Templating

Namespaces

Classes

Utilities

Animations

ListView

Repeater

Hub

Pivot

ItemContainer

MediaTile

Flyout

FlipView

http://visualstudiogallery.msdn.microsoft.com/315c13a7-2787-4f57-bdf7-adae6ed54450

Contoso Foods

Windows Phone への移植

Xbox One次世代の高いパフォーマンス

3 つの OS を搭載

すべての本体にKinect を付属

シームレスで素早い動作

クラウドのパワーを活用

de:code 参加者向けスペシャル

Contoso Foods

Xbox One への移植

動画にエフェクトをかける

http://msdn.microsoft.com/ja-jp/library/windows/apps/br229565

http://msdn.microsoft.com/ja-jp/library/windows/apps/jj129451(v=vs.110).aspx

http://msdn.microsoft.com/en-us/library/hh755833.aspx