第6回勉強会 フレームワークの世界まる見え！JS特捜部　 ～ React,Angular,WinJSだらけの2時間SP！～ の際の登壇で使用したスライドです。 動画と一緒にご覧ください。 https://youtu.be/HIkXfc4rowU

1. All about
物江 修 @osamum_MS
日本マイクロソフト
デベロッパー エバンジェリズム統括本部

2. Windows Library for JavaScript (WinJS)
～HTML5 アプリケーションを開発するためのフレームワーク ～
WinJS
https://github.com/
winjs/winjs

3. WinJS の提供する機能
リッチコントロール 内部処理
Promise モデル (非同期)
スケジューラー
XHR (HTTP リクエスト)
データバインド
バインドテンプレート
フラグメント
ナビゲーション

4. 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 ディレクティブ

5. WinJS 4.0
レスポンシブな
コントロール
さまざまな
入力デバイスに対応
AngularJS 用の
ラッパー

6. ファイル 説明
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.js
Visual Studio の入力補完機能用ファイル
js/WinJS.intellisense.js
js/WinJS.js ライブラリ本体
WinJS.min.js.map Minify したライブラリ用のマップ

7. WinJS の使い方
～JS と CSS を参照し、コードを書くだけ～
(function () {
WinJS.UI.processAll().then(function () {
// Your app code here...
});
})();
ライブラリの参照
コードの記述

8. WinJS コントロール(HTML)
～マークアップで記述可能～
HTML:
<div data-win-control="WinJS.UI.ToggleSwitch"
data-win-options="{title:'Wi-fi networking'}"
id="myToggle“>
</div>

9. WinJS コントロール(JavaScript)
～ winControl オブジェクトを介してアクセス～
‘myToggle’
’change’ function
this.winControl.checked){
//On のときの処理
}else{
//Off のときの処理
}

10. 相互運用のためのテンプレート
～コーディングまでの準備を短縮～

11. Try WinJS
WinJS の機能を
体験するサイト
http://try.buildwinjs.com/

12. まとめ