html/javascript/css と c++ で作る windows, windows phone,...
TRANSCRIPT
Room F
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
