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

Like this? Share it with your network

Share

Html5概要 & デモ

  • 1,683 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,683
On Slideshare
1,681
From Embeds
2
Number of Embeds
2

Actions

Shares
Downloads
10
Comments
0
Likes
11

Embeds 2

https://twitter.com 1
http://s.deeeki.com 1

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 )