Embed Size (px)
Citation preview
All about
物江 修 @osamum_MS
日本マイクロソフトデベロッパー エバンジェリズム統括本部
Windows Library for JavaScript (WinJS)～HTML5 アプリケーションを開発するためのフレームワーク ～
WinJS
https://github.com/winjs/winjs
WinJS の提供する機能リッチコントロール 内部処理
Promise モデル (非同期)
スケジューラー
XHR (HTTP リクエスト)
データバインド
バインドテンプレート
フラグメント
ナビゲーション
WinJS
1 ～ 2.0 3.0 4.0Preview
• WinJS 2.0 with Windows 8.1• WinJS Xbox 1.0 with Xbox One• WinJS Phone 2.1 with Windows Phone 8.1
2.1
• WinRT との依存関係解消• Web ブラウザーで動作可能に
• デスクトップとモバイルブラウザー
• モジュール化• 最適化されたMinify
• ユニバーサルコントロール• 既存コントロールの更新• AngularJS ディレクティブ
WinJS 4.0
レスポンシブなコントロール
さまざまな入力デバイスに対応
AngularJS用のラッパー
ファイル 説明
README.md WinJS の説明ドキュメント
License.txt ライセンスの説明
package.json ライブラリの依存関係情報(Grunt 用)
css/ui-dark.css UI コントロールの CSS (暗色系)
css/ui-light.css UI コントロールの CSS (明色系)
fonts/Symbols.ttf UI コントロールで使用する記号用 Web フォント
js/en-US/ui.strings.js UI コントロールで使用する文字列
js/WinJS.intellisense-setup.jsVisual Studio の入力補完機能用ファイル
js/WinJS.intellisense.js
js/WinJS.js ライブラリ本体
WinJS.min.js.map Minify したライブラリ用のマップ
WinJS の使い方～JS と CSS を参照し、コードを書くだけ～
(function () {WinJS.UI.processAll().then(function () {
// Your app code here...});
})();
ライブラリの参照
コードの記述
WinJS コントロール(HTML)～マークアップで記述可能～
HTML:
<div data-win-control="WinJS.UI.ToggleSwitch"
data-win-options="{title:'Wi-fi networking'}"
id="myToggle“>
</div>
WinJS コントロール(JavaScript)～ winControl オブジェクトを介してアクセス～
‘myToggle’’change’ function
this.winControl.checked){
//On のときの処理
}else{
//Off のときの処理
}
相互運用のためのテンプレート～コーディングまでの準備を短縮～
まとめ
