ブラウザから飛び出すWeb技術とHTML5
Download as PPTX, PDF5 likes3,668 views
Android Bazaar and Conference 2014 Spring 開発(秋葉原ダイビル5F 5C T4 ブラウザから飛び出すWeb技術とHTML5【html5jコラボセッション】
ブラウザから飛び出す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. まとめ