SP-001
HTML5開発者コミュニティ html5j.org 管理人株式会社シーエー・モバイル Web先端技術フェロー
Web Sockets   File API   IndexedDB
<html> <html>… <html> ……</html> </html>  </html>
機能                       ローカルコンテキスト   WebコンテキストWindows Runtime          Yes          NoWindows Library for JS   Yes       ...
<iframe src="http://ds-websocket.qw.to"    width=100% height=100%></iframe>
クラス名       機能       クラス名     機能ListView   リストビュー   ToggleSwitch トグルスイッチ                             スタート画面のタイルAppBar     コ...
<div data-win-control="WinJS.UI.ListView"  data-win-options="{layout: {type: WinJS.UI.GridLayout}}"></div>
Promisevar promise = WinJS.xhr({ url: /data });promise.then(  function(result) {    // 正常時の処理  },  function(error) {      ...
<div id="tweetTemplate" data-win-control="WinJS.Binding.Template">  <div data-win-bind="textContent: text"></div>  <div da...
単一ページ・ナビゲーション         default.html
メソッド/イベントハンドラ                  説明WinJS.Navigation.navigate      履歴スタックに追加WinJS.Navigation.onnavigated   navigateが行われると呼び出さ...
#listPage {  /* この要素内をグリッド配置する */  display: -ms-grid;  /* 2行2列のグリッドを定義 */  -ms-grid-rows: 126px 1fr;  -ms-grid-columns: 40...
#listPage > h1 {  -ms-grid-row: 1;  -ms-grid-column: 1;  -ms-grid-row-span: 2;}#tweetList {  -ms-grid-row: 2;        <h1> ...
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
Upcoming SlideShare
Loading in …5
×

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

5,676 views
5,562 views

Published on

Published in: Technology
0 Comments
20 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,676
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
55
Comments
0
Likes
20
Embeds 0
No embeds

No notes for slide

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;}

×