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.

html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた

5,950 views

Published on

Published in: Technology
  • Be the first to comment

html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた

  1. 1. SP-001
  2. 2. HTML5開発者コミュニティ html5j.org 管理人株式会社シーエー・モバイル Web先端技術フェロー
  3. 3. Web Sockets File API IndexedDB
  4. 4. <html> <html>… <html> ……</html> </html> </html>
  5. 5. 機能 ローカルコンテキスト WebコンテキストWindows Runtime Yes NoWindows Library for JS Yes Yes*JavaScript URIs No Yes外部スクリプトの参照 No Yeswindow.close Yes NoクロスドメインXHR Yes NoinnerHTMLの自由な利用 No Yes
  6. 6. <iframe src="http://ds-websocket.qw.to" width=100% height=100%></iframe>
  7. 7. クラス名 機能 クラス名 機能ListView リストビュー ToggleSwitch トグルスイッチ スタート画面のタイルAppBar コマンドメニュー ライブタイル をカスタマイズFlyout ポップアップ …
  8. 8. <div data-win-control="WinJS.UI.ListView" data-win-options="{layout: {type: WinJS.UI.GridLayout}}"></div>
  9. 9. Promisevar promise = WinJS.xhr({ url: /data });promise.then( function(result) { // 正常時の処理 }, function(error) { // エラー時の処理 });
  10. 10. <div id="tweetTemplate" data-win-control="WinJS.Binding.Template"> <div data-win-bind="textContent: text"></div> <div data-win-bind="textContent: created_at"></div></div><div id="tweetList" data-win-control="WinJS.UI.ListView" data-win-options=" { itemDataSource: global.tweets.dataSource, itemTemplate: select(#tweetTemplate), layout: {type: WinJS.UI.ListLayout}}"></div>
  11. 11. 単一ページ・ナビゲーション default.html
  12. 12. メソッド/イベントハンドラ 説明WinJS.Navigation.navigate 履歴スタックに追加WinJS.Navigation.onnavigated navigateが行われると呼び出され るイベントハンドラWinJS.UI.Pages.render ページを読み込んでDOMに追加 するWinJS.UI.Pages.define ページを初期化し、イベントハン ドラを関連付ける
  13. 13. #listPage { /* この要素内をグリッド配置する */ display: -ms-grid; /* 2行2列のグリッドを定義 */ -ms-grid-rows: 126px 1fr; -ms-grid-columns: 40% 1fr;} 1, 1
  14. 14. #listPage > h1 { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-row-span: 2;}#tweetList { -ms-grid-row: 2; <h1> -ms-grid-column: 1;}

×