Concentrated HTML5 & Attractive HTML5

  • 3,172 views
Uploaded on

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

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

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,172
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
26
Comments
0
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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