ブラウザから飛び出すWeb技術とHTML5
•Download as PPTX, PDF•
5 likes•3,659 views
Android Bazaar and Conference 2014 Spring 開発(秋葉原ダイビル5F 5C T4 ブラウザから飛び出すWeb技術とHTML5【html5jコラボセッション】
Recommended
More Related Content
Viewers also liked
Viewers also liked (13)
Similar to ブラウザから飛び出すWeb技術とHTML5
Similar to ブラウザから飛び出すWeb技術とHTML5 (20)
Recently uploaded
Recently uploaded (16)
ブラウザから飛び出すWeb技術とHTML5
- 2. 自己紹介 若狭 正生（わかさ まさお） @wks • 日本オープン・ウェブ・アソシエーショ ン 理事 • html5jスタッフ / html5j TV部 部長 / OSGeo 財団日本支部 運営委員 / CodeForJapan コ アグループ所属 / アカデミーキャンプ ス タッフ
- 3. • 毎月100人規模の勉強会を開催 • 11/30 に 2000人規模のカンファレンスを開 催 • W3Cや総務省と連動して活動をしている html5jとは？
- 5. HTML5 Japan Cupやります 最優秀賞（1作品）: 100万円 優秀賞:（3作品） 20万円 http://5jcup.org/
- 6. アジェンダ – Web技術の表現力 – 通信技術の進化 – ブラウザから飛び出すWeb技 術
- 11. HTML5の機能 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 … オン/オフライン状態の把 握
- 15. Multimedia • video/audio … 動画/⽤音楽再⽤生 • WebVTT … 字幕・トラック情報を追加 • Web Audio API … ⽤音声処理理・合成 • HTML Media Capture … メディアの取込み
- 18. Graphics, 3D & Effects • Canvas … 2Dグラフィックス • WebGL … 3Dグラフィックス • SVG … ベクターグラフィックス
- 19. Graphics, 3D & Effects http://helloracer.com/webgl/
- 20. Graphics, 3D & Effects http://cyberjapandata.gsi.go.jp/3d/ http://headlines.yahoo.co.jp/videonews/fnn?a=20140320-00000120-fnn-soci
- 21. Graphics, 3D & Effects http://www.youtube.com/watch?v=cWIRUaR9G4w
- 22. Realtime / Connectivity • WebSocket … リアルタイム双⽤方向通信 • Server-Sent Events … サーバープッシュ可能な通信（ロン グポーリング/Cometを仕様化） • Web Messaging … Webページ間のメッセージ交換 • XMLHttpRequest Level2 … クロスドメイン通信やバイナリ データが送れるように • Notifications … デスクトップに通知 • WebRTC … 音声/動画でリアルタイムコミュニケーション を行う
- 26. Device Access • Geolocation API … GPS情報を取得 • Web Speech API… 音声入力 • Device Orientation …デバイスの向きや傾きを取得 • Contacts API … アドレス帳へのアクセス • Calendar API … カレンダー情報の取得 • Battery Status API … バッテリーの状態を取得 • Network Information API … 通信環境の情報を取得 • USB, Bluetooth など
- 29. Styling (CSS3) • CSS3 Selectors … :first-child/:nth-child(odd)など、 便利な擬似クラスなどが増えた • border-radius … 角が丸く！ • text-shadow/box-shadow … 影がつく！ • gradient … グラデーション • Webfonts … 外部フォントを扱えるように • Transforms … 変形 • Transitions/Animations … CSSだけでアニメー ションが可能
- 37. WebRTC • ブラウザ間でP2Pの通信ができる Browser Browser Server Browser Browser Server
- 38. Browser Server MPTCP • 複数の回線を使って通信を行う • iOS7ではサポート済み Wi-fi 3G
- 39. 放送波を利用した通信 • V-Low / ハイブリッドキャスト(データ放 送) • マルチキャスト配信による輻輳が無い • 大量アクセスのクッションとして利用 データ 映像
- 41. • Windows8アプリ • ChromeApps • FirefoxOS • Tizen • スマートフォンアプリ(PhoneGap等) and more.. アプリケーションとWeb技術
- 44. • Nintendo Web Framework • Unity ( WiiU & Playstation & Xbox ) and more.. ゲーム機とWeb技術
- 45. ゲーム機とWeb技術 • Nintendo Web Framework 参考 http://www.4gamer.net/games/032/G003263/20130328113/
- 46. カーナビとWeb技術 • Apple • 富士通テン • Tizen IVI • Genivi • Webinos • QNX and more..
- 49. テレビとWeb技術 • Hybridcast • SmartTV • OperaTV and more..
- 50. テレビとWeb技術 Sony BRAVIA (Opera TV Store) 参考 http://www.sony-mea.com/TVP-LCD-TV/feature/Sony-Entertainment-Network/498176
- 52. 電子書籍とWeb技術 • EPUB • Kindle Cloud Reader • Kobo Cloud Reader
- 53. 電子書籍とWeb技術 • EPUB • Kindle Cloud Reader • Kobo Cloud Reader ブラウザがそのまま電子書籍として使える。 Web技術が使えるデバイスとならば連動と利便 性を考え利用されている。 -> PCで10ページまで見たら スマートフォンで自動的に10ページから読める
- 54. 遠隔操作とWeb技術 • LiveShell • ガラポンTV • ChromeCast
- 55. • LiveShell • ガラポンTV • ChromeCast 遠隔操作とWeb技術 本体にはほぼ操作する部分が存在しない リアルタイム通信をWebの標準技術のWebsocket やWebRTCを用いて実装 -> UI部分は容易に作れるWeb画面を使う -> スマートフォンなどの機器からも操作可能
- 57. 自作組込み機器でのWeb技術 • IRKit • Raspberry Pi + Node.js
- 58. 自作組込み機器でのWeb技術 • サーバ化させXHRやWebSocketで接続しい ろんな物をコントロール • Raspberry PiとBLEをつなげたりすると、リ アルな物から簡単にブラウザにイベント を送れる。 http://qiita.com/Morikuma_Works/items/c2899e548da1c5e2c28e
- 59. まとめ