Concentrated HTML5 & Attractive HTML5

3,800 views
3,674 views

Published on

「ぎゅ〜っと濃縮、HTML5」と「Attractive HTML5」セッションの二本立て

Published in: Technology, Design
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,800
On SlideShare
0
From Embeds
0
Number of Embeds
94
Actions
Shares
0
Downloads
31
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

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 ContextCross-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 APIHTML5 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.264Google 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/DTDXHTML 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 PlatformWebアプリケーションの制約からの解放
  74. 74. No Plug-inFlash player, Silverlight plug-in, JavaFX runtime
  75. 75. Cross-PlatformWindows, Mac OS X, Linux, Chrome OS
  76. 76. Multi-devicePC, Mac, Mobile, .....
  77. 77. 余談
  78. 78. 叶わなかった願い - FlashiPhone OSへのFlash Playerの搭載
  79. 79. iAdiPhone/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

×