Successfully reported this slideshow.

Concentrated HTML5 & Attractive HTML5

5

Share

Loading in …3
×
1 of 111
1 of 111

More Related Content

Concentrated HTML5 & Attractive HTML5

  1. 1. ぎゅ∼っと濃縮、HTML5 & Attractive HTML5 マークアップからAPI、その魅力まで @shoito HTML5-FIT
  2. 2. 自己紹介/shoito
  3. 3. 宮城 → 福井 [3.5y]
  4. 4. ソフトウェア設計ツールの開発
  5. 5. Flex(Flash)アプリ開発 [3y]
  6. 6. 技術系コミュニティ
  7. 7. HTML5に興味を持った訳
  8. 8. ITシステムの変遷 高 C/S RIA ユーザビリティ   1990年代初頭∼ 2003年後半∼  メインフレーム Web 1990年代中頃∼   /ダム端末 ∼1980年代頃 低 コストパフォーマンス 高 参考文献:RIAシステム構築ガイド Essential 2007 p005
  9. 9. HTML5とワタシ
  10. 10. Hokuriku.lang - HTML5 2009/10
  11. 11. HTML5 Tech Talk in 金沢 2009/10
  12. 12. HTML5勉強会@めがね会館 2010/03/12
  13. 13. WCAF Seminar Vol.3 - HTML5 2010/03/20
  14. 14. Chrome Extensions with HTML5作ろう会 2010/04/12
  15. 15. Google Hackathon for Chrome Extension 2010/04/17, 24
  16. 16. まずはご覧ください
  17. 17. 9elements.com
  18. 18. Sketchpad
  19. 19. HTML5 presentation
  20. 20. Mozilla Bespin
  21. 21. HTML5 QUEST
  22. 22. chrome://newtab
  23. 23. これまでの Webの制約が変わります
  24. 24. ここからの目的 • HTML5の可能性を知ってもらうこと • HTML5に興味を持ってもらうこと • HTML5を 分かった気 になってもらうこと
  25. 25. お話すること • HTML5の概要 • HTML5の構文, 追加される要素/属性 • 関連APIの拡張で実現される機能 • HTML5の魅力
  26. 26. 今、HTMLはVer. 4 大前提
  27. 27. WHATWG W3C Web Applications 1.0 HTML5 HTML5 Microdata HTML5 Microdata canvas 2D Context HTML5 2D Context Cross-document messaging HTML5 Communications Channel messaging device HTML Device Web workers Web workers Web storage Web storage Server-sent events Server-sent events Web sockets Web sockets
  28. 28. HTML5と関連仕様 Indexed Web workers Database API Web Storage Geolocation API HTML5 WebSocket File API Web SQL ...etc Database
  29. 29. マークアップとAPIの仕様 HTML5
  30. 30. 前方互換性と後方互換性 HTML5の設計原則
  31. 31. 革新より発展を優先する HTML5の仕様策定スタンス
  32. 32. マークアップはよりセマンティックに Webアプリはよりリッチに HTML5がもたらす変化
  33. 33. Webの技術 - これから JavaScript CSS HTML 各種APIの拡張により 見栄えを表現 データ構造を表現 機能を実現
  34. 34. Webの技術 - これから JavaScript CSS HTML 各種APIの拡張により 見栄えを表現 データ構造を表現 機能を実現
  35. 35. Webの技術 - これから JavaScript CSS HTML 各種APIの拡張により 見栄えを表現 データ構造を表現 機能を実現
  36. 36. 新しく追加されるタグ • セクショニングする新たなタグ • section, article • header, footer • aside, nav, ... • canvas, video, audioタグ • ...etc
  37. 37. 削除されるタグ • applet • big • font • frame • strike/s • tt • ...etc
  38. 38. セクショニングする新たなタグ <article> <footer> ブログやニュース記事における セクションのフッタを表現 記事本体を表現 <header> <section> セクションのヘッダを指定 文書などにおける一般的な <nav> セクションを表現 ページ内のリンクなど <aside> ナビゲーション情報を保持 ページ内容の主題と関連が ...etc あまりない内容を指定
  39. 39. ...etc <mark> <datalist> マーキングされたテキストを表現 inputタグのlist要素と組み合わせて <progress> 入力候補を指定 ダウンロードや実行中のタスクの <embed> 進捗を表現 プラグインを利用するコンテンツに <command> 利用 ユーザーが実行するコマンドを表現 <meter> <time> ディスク容量などの測定値を表現 日付や時刻などを表現 ...etc
  40. 40. HTML4の構造   HTML5の構造 html5を使ったブログのデザイン -html5doctor- -HTML5.JP
  41. 41. 入力サポート • Non-JavaScriptでバリデーションチェック • データの種類 • email • url <input name="pass" • date • tel password type="password"> • number • range • demo
  42. 42. canvasタグ <canvas id= sky ></canvas>
  43. 43. canvasタグ 名前を指定してcanvas領域を置く <canvas id= sky width= 320 height= 240 /> canvasに描画するにはJavaScriptを使う <script> var canvas = document.getElementById( sky ); var context = canvas.getContext( 2d ); context.fillStyle = rgb(255, 0, 0) ; context.fillRect(0, 0, 100, 100); </script>
  44. 44. video <video src= movie.mov ></video>
  45. 45. videoタグ • W3Cはタグの規定のみ • コーデック/コンテナは規定していない ブラウザの対応 Firefox ogg/theora Opera ogg/theora Safari H.264 Google Chrome ogg/theora, H.264
  46. 46. videoタグ src属性に動画ファイルのパスを指定する <video src= me.mov controls= true /> ブラウザ毎にサポートフォーマットが違う 複数フォーマットを指定しておくのが有効 <video controls= true > <source src= me.mov type= video/quicktime /> <source src= me.ogg type= video/ogg; codecs= theora, vorbis /> </video> demo
  47. 47. 独自データ属性 data- で始まるサイト独自の属性 適当な属性や要素がない時に独自定義 <ul> <li data-country= JP >ハナミズキ</li> <li data-country= US >恋のマイアヒ</li> .... </ul>
  48. 48. XHTML1からHTML5へ その変換方法
  49. 49. <!DOCTYPE html PUBLIC -//W3C/DTD XHTML 1.0 Strict//EN http://www.w3.org/TR /xhtml1/DTD/xhtml1-strict.dtd > DOCTYPEを変更するだけ <!DOCTYPE html>
  50. 50. XHTML / HTML5の誤解
  51. 51. JavaScript API拡張 アプリケーション・プラットフォームとしての 機能性を実現
  52. 52. Webの技術 - これから JavaScript CSS HTML 各種APIの拡張により 見栄えを表現 データ構造を表現 機能を実現
  53. 53. 関連API • Application Cache API • Communication API • Geolocation API • Web Storage • Web SQL Database • Web Workers • Web Socket • File API • ...etc
  54. 54. Application Cache オフライン実行
  55. 55. ネットワークに接続していなくてもアプリケーション を利用できるようにするAPI マニフェストファイルにファイルを列挙する CACHE MANIFEST hello.html hello.js NETWORK: server.cgi <!DOCTYPE html> <html manifest= hello.manifest >
  56. 56. Communication API ウィンドウ間連携
  57. 57. Cross Document Messaging ウィンドウ間でメッセージの送受信を行うAPI メッセージの受信 window.addEventListener( message , function() { ... }, false); メッセージの送信 postMessage( hogehoge , http://example.com/ );
  58. 58. Geolocation API 位置情報
  59. 59. ブラウザ経由で位置情報を取得するAPI function showMap(position) { .... } navigator.geolocation.getCurrentPosition(showMap); 位置情報の取得方法はブラウザの実装次第 Firefox 3.5はGoogle Location Serviceを利用 demo
  60. 60. Web Storage セッション・ストレージ ローカル・ストレージ KEY : VALUE KEY : VALUE KEY : VALUE
  61. 61. セッション・ストレージ • ウィンドウ毎のデータを保持するストレージ • ウィンドウが閉じられるとデータは消える sessionStorage.myKey = myValue; sessionStorage.setItem( yourKey , yourValue ); sessionStorage.clear();
  62. 62. ローカル・ストレージ • 複数ウィンドウをまたがるストレージ • オリジン(プロトコル+ドメイン+ポート)毎に異なるスト レージ • ウィンドウが閉じられてもデータは保持される localStorage.myKey = myValue; localStorage.removeItem( myKey ); localStorage.clear();
  63. 63. Web Workers 並列処理
  64. 64. JavaScriptでバッググラウンド処理を実現するAPI • バッググランド処理スレッド(ワーカー)を生成する • ワーカーはJavaScriptファイルに定義する • ワーカー間ではメッセージの送受信でデータ通信する 制約 • バッググランドワーカーはDOMをいじれない • DOM操作はこれまで通りUIスレッド側で行う
  65. 65. File API ブラウザ上でファイル操作
  66. 66. ブラウザ上でファイル操作をするAPI ファイル読み込みの制約 •ユーザーアクションが必要(DnD, ファイル選択) •勝手にローカルファイルを読み込まれないように demo
  67. 67. Attractive HTML5 HTML5の魅力をこっそりと
  68. 68. ここからの目的 HTML5の魅力を ✤ 皆さんに共有すること ✤ 皆さんから共有してもらうこと
  69. 69. 私が感じる魅力
  70. 70. 標準技術 HTML, CSS, JavaScript
  71. 71. 標準技術 HTML, CSS, JavaScript
  72. 72. デザイナ 1 ー 3 JavaScript CSS HTML 各種APIの拡張により 見栄えを表現 データ構造を表現 機能を実現 1 ー 開発者 3 標準技術 HTML, CSS, JavaScript
  73. 73. Browser is a Platform Webアプリケーションの制約からの解放
  74. 74. No Plug-in Flash player, Silverlight plug-in, JavaFX runtime
  75. 75. Cross-Platform Windows, Mac OS X, Linux, Chrome OS
  76. 76. Multi-device PC, Mac, Mobile, .....
  77. 77. 余談
  78. 78. 叶わなかった願い - Flash iPhone OSへのFlash Playerの搭載
  79. 79. iAd iPhone/iPad向け、モバイル広告 ­ 広告はHTML5で作る
  80. 80. 非Andoide Mobile AP-PFの共同開発 ブラウザのHTML5対応はどうなる?
  81. 81. Server-Side less オフライン、ローカルストレージ、Drag&Drop、File API、WebWorker
  82. 82. Web/Desktopの低い垣根 Drag&Drop/File API、ネイティブアプリケーションとしてラッピング
  83. 83. <header> <section> <header> <nav> <aside> <article> <footer> <footer> Webがよりセマンティックに header, nav, section, article, footer, aside
  84. 84. HTML5 is Simple! doctype, meta, script, link 省略... <!doctype html> <meta charset= utf-8 > <script src= xxx.js ></script> <link rel= stylesheet href= xxx.css ></link>
  85. 85. 段階的変化の許容 HTML4/XHTMLからHTML5へ - 前方/後方互換性の維持(革新より発展)
  86. 86. N ew ! 常に最新のソフトウェアを使える Webアプリケーションの特性
  87. 87. 低コストな開発/実行環境 デバッグ、プロファイラなどがブラウザに組み込める/まれている
  88. 88. 私のイチバン
  89. 89. デザイナ 1 ー 3 JavaScript CSS HTML 各種APIの拡張により 見栄えを表現 データ構造を表現 機能を実現 1 ー 開発者 3 標準技術 HTML, CSS, JavaScript
  90. 90. 皆さんが感じたHTML5の魅力って? 時間がなかったら懇親会で話しましょう
  91. 91. HTML5対応チェック
  92. 92. When can I use...
  93. 93. HTML5 Demos and Examples
  94. 94. Modernizr
  95. 95. 巷のFlash悲観論 FlashってFlash Playerのこと? Flash CSのこと?
  96. 96. HTML5とFlashの共存 ExternalInterfaceを利用した JavaScript ActionScript連携
  97. 97. HTML5 / Flash 比較 HTML5 Flash 公平性 ○ (標準技術) (Adobe独占) 互換性 (ブラウザ依存) ○ (Flash Playerのみ) PC普及率 (IE未サポート) ○ (ほぼ100%) モバイル普及率 △ △ 開発者数 ○(HTML, JavaScript) △ (ActionScript) 開発ツール ○ ○
  98. 98. HTML5に関してコメント
  99. 99. HTML5, いつから使えるの?
  100. 100. もう, 使える機能から部分的に
  101. 101. iPhone/Android & IE以外のブラウザでは 既に結構イケる
  102. 102. HTML5は デザイナ/開発者にとって魅力的
  103. 103. 次期Web標準技術なので 無視できない
  104. 104. これまでの Webの制約が変わります
  105. 105. 提案
  106. 106. 別に作りたいサイトや Webアプリはないという方
  107. 107. Chrome Extensionsで 便利なツールを作っては?
  108. 108. Thanks! shoito sho.ito@air-life.net http://twitter.com/shoito HTML5-FIT

×