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

Html5概要 & デモ

on

  • 1,377 views

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

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

Statistics

Views

Total Views
1,377
Views on SlideShare
1,375
Embed Views
2

Actions

Likes
10
Downloads
9
Comments
0

2 Embeds 2

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

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Html5概要 & デモ Html5概要 & デモ Presentation Transcript

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