• Like
Html5概要 & デモ
Upcoming SlideShare
Loading in...5
×

Html5概要 & デモ

  • 1,162 views
Uploaded on

Technology & Entrepreneurship TOKUSHIMA主催の「どんな分野の技術者でも知っておきたい Web最新事情とその実践」の用いたスライド資料です。

Technology & Entrepreneurship TOKUSHIMA主催の「どんな分野の技術者でも知っておきたい Web最新事情とその実践」の用いたスライド資料です。

More in: Technology
  • 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
1,162
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
11
Comments
0
Likes
11

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概要 & デモ 2013/10/27 Technology & Entrepreneurship TOKUSHIMA Toru Yoshikawa (@yoshikawa_t)
  • 2. Who? 吉川  徹  /  Toru  Yoshikawa @yoshikawa_̲t html5j/HTML5とか勉強会スタッフ Google  Developer  Experts  (Chrome) HTML5  Experts.jp  エキスパートNo.3 ビギナー部  (副部⻑⾧長)/Web先端技術味 ⾒見見部  (顧問)/⽇日本jQuery  Mobileユーザ ー会  (管理理⼈人)/Sublime  Text  2  Japan   Users  Group  (管理理⼈人) Blog:  http://d.hatena.ne.jp/pikotea/
  • 3. HTML5とは?
  • 4. HTML5とは? 1999年年に勧告された  HTML4.01  の10数年年ぶり のアップデート WHATWG  の  Web  Applications  1.0  と  Web   Forms  2.0という仕様が  W3C  に採⽤用されたもの 2014年年の勧告を⽬目指して、現在策定中
  • 5. HTML5が解決する これまでのWebの問題 ブラウザの互換性の問題 ⽂文書の意味が不不明確 Webアプリとしての機能が不不⾜足している問題
  • 6. HTML5が実現するもの よりセマンティックな コンテンツプラットフォーム よりリッチな アプリケーションプラットフォーム
  • 7. HTML5によってWebアプリの 実現可能な範囲が広がっている これまでのWeb HTML Flash ネイティブアプリ
  • 8. HTML5によってWebアプリの 実現可能な範囲が広がっている HTML5 CSS3 JavaScript Flash ネイティブアプリ これからのWeb
  • 9. 仕様の⼀一部を ピックアップして紹介します
  • 10. HTML5の大まかなカテゴリ Semantics Offline & Storage Multimedia 3D, Graphics & Effects Connectivity Device Access Performance & Integration Styling (CSS3)
  • 11. 仕様の一部を ピックアップして紹介します Semantics Offline & Storage Multimedia 3D, Graphics & Effects Connectivity Device Access Performance & Integration Styling (CSS3)
  • 12. Offline  &  Storage • Application  Cache  …  オフラインアプリケーション • Web  Storage  …  簡易易ローカルストレージ • Indexed  Database  …  KVS型のローカルデータベース • File  APIs  …  ファイルの読み書き • File  System  API  …  アプリから利利⽤用できるファイル領領域 • online/offline  events  …  オン/オフライン状態の把握
  • 13. Offline  &  Storage Demo • HTML5  Terminal • online/offline  events
  • 14. HTML5  Terminal http://www.htmlfivewow.com/demos/terminal/terminal.html
  • 15. online/offline  events http://html5-‐‑‒demos.appspot.com/static/navigator.onLine.html
  • 16. Multimedia • video/audio  …  動画/⾳音楽再⽣生 • WebVTT  …  字幕・トラック情報を追加 • Web  Audio  API  …  ⾳音声処理理・合成 • HTML  Media  Capture  …  メディアの取込み
  • 17. Multimedia Demo • Blowing  apart  fragments  of  video • Using  WebSRT  to  create  video  captions • HTML5  Wow  Visualizer
  • 18. Blowing  apart  fragments  of  video http://craftymind.com/factory/html5video/CanvasVideo.html
  • 19. HTML5  Wow  Visualizer http://www.htmlfivewow.com/demos/audio-‐‑‒visualizer/index.html
  • 20. Graphics,  3D  &  Effects • Canvas  …  2Dグラフィックス • WebGL  …  3Dグラフィックス • SVG  …  ベクターグラフィックス
  • 21. Graphics,  3D  &  Effects Demo • Hello  Racer • BananaBread • MapsGL
  • 22. Hello  Racer http://helloracer.com/webgl/
  • 23. EVE  online http://www.eveonline.com/universe/spaceships/curse/
  • 24. Google  MapsGL https://maps.google.com/
  • 25. Realtime  /  Connectivity • WebSocket  …  リアルタイム双⽅方向通信 • Server-‐‑‒Sent  Events  …  サーバープッシュ可能な通信 (ロングポーリング/Cometを仕様化) • Web  Messaging  …  Webページ間のメッセージ交換 • XMLHttpRequest  Level2  …  クロスドメイン通信やバイ ナリデータが送れるように • Notifications  …  デスクトップに通知 • WebRTC  …  ⾳音声/動画でリアルタイムコミュニケーショ ンを⾏行行う
  • 26. Realtime  /  Connectivity Demo • Browser  Quest • Webcam  Toy
  • 27. Browser  Quest http://browserquest.mozilla.org/
  • 28. Webcam  Toy http://webcamtoy.com/ja/
  • 29. Device  Access • Geolocation  API  …  GPS情報を取得 • Web  Speech  API…  ⾳音声⼊入⼒力力 • Device  Orientation  …デバイスの向きや傾きを取得 • Contacts  API  …  アドレス帳へのアクセス • Calendar  API  …  カレンダー情報の取得 • Battery  Status  API  …  バッテリーの状態を取得 • Network  Information  API  …  通信環境の情報を取得 • USB,  Bluetooth  など
  • 30. Device  Access Demo • Ball  Pool • Google  Gravity • Web  Speech  API  Demonstration
  • 31. Google  Gravity http://mrdoob.com/projects/chromeexperiments/google-‐‑‒gravity/
  • 32. Web  Speech  API https://www.google.com/intl/ja/chrome/demos/speech.html
  • 33. Styling  (CSS3) • CSS3  Selectors  …  :first-‐‑‒child/:nth-‐‑‒child(odd)など、便便利利 • border-‐‑‒radius  …  ⾓角が丸く! • text-‐‑‒shadow/box-‐‑‒shadow  …  影がつく! • gradient  …  グラデーション • Webfonts  …  外部フォントを扱えるように • Transforms  …  変形 • Transitions/Animations  …  CSSだけでアニメーションが可 な擬似クラスなどが増えた 能
  • 34. CSS3  /  Styling Demo • Button  Maker • Round  corners  -‐‑‒  HTML5Rokcs • CSS3  Patterns  Gallery • CSS  Clock
  • 35. Rounded  corners http://slides.html5rocks.com/#rounded-‐‑‒corners
  • 36. Button Maker http://css-‐‑‒tricks.com/examples/ButtonMaker/
  • 37. CSS  Pattern  Gallery http://lea.verou.me/css3patterns/
  • 38. ここで紹介した以外でも多くの仕様 があり、今も追加され続けています
  • 39. 実装状況は?
  • 40. Can I use… http://caniuse.com/
  • 41. 使えるものから どんどん使っていきましょう!
  • 42. Thank you!! ( @yoshikawa_t )