Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

About WinJS

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

  • Login to see the comments

About WinJS

  1. 1. All about 物江 修 @osamum_MS 日本マイクロソフト デベロッパー エバンジェリズム統括本部
  2. 2. Windows Library for JavaScript (WinJS) ~HTML5 アプリケーションを開発するためのフレームワーク ~ WinJS https://github.com/ winjs/winjs
  3. 3. WinJS の提供する機能 リッチコントロール 内部処理 Promise モデル (非同期) スケジューラー XHR (HTTP リクエスト) データバインド バインドテンプレート フラグメント ナビゲーション
  4. 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. 5. WinJS 4.0 レスポンシブな コントロール さまざまな 入力デバイスに対応 AngularJS 用の ラッパー
  6. 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. 7. WinJS の使い方 ~JS と CSS を参照し、コードを書くだけ~ (function () { WinJS.UI.processAll().then(function () { // Your app code here... }); })(); ライブラリの参照 コードの記述
  8. 8. WinJS コントロール(HTML) ~マークアップで記述可能~ HTML: <div data-win-control="WinJS.UI.ToggleSwitch" data-win-options="{title:'Wi-fi networking'}" id="myToggle“> </div>
  9. 9. WinJS コントロール(JavaScript) ~ winControl オブジェクトを介してアクセス~ ‘myToggle’ ’change’ function this.winControl.checked){ //On のときの処理 }else{ //Off のときの処理 }
  10. 10. 相互運用のためのテンプレート ~コーディングまでの準備を短縮~
  11. 11. Try WinJS WinJS の機能を 体験するサイト http://try.buildwinjs.com/
  12. 12. まとめ

×