HTML5でできるカメラアプリを実際に体験しよう
Upcoming SlideShare
Loading in...5
×
 

HTML5でできるカメラアプリを実際に体験しよう

on

  • 13,581 views

CSS Nite in OSAKA, Vol.30でプレゼンしたスライド。...

CSS Nite in OSAKA, Vol.30でプレゼンしたスライド。
getUserMedia()やBatteryStatus API, Chrome実装のSpeech Input APIやバイブレーションなど、先行実装をまとめてライブデモ。

Statistics

Views

Total Views
13,581
Views on SlideShare
13,260
Embed Views
321

Actions

Likes
16
Downloads
39
Comments
0

10 Embeds 321

http://osaka.cssnite.jp 251
http://a-hum.unoke.pfu.co.jp 21
https://twitter.com 21
http://tiraura2social.blog.fc2.com 10
https://si0.twimg.com 8
http://admin.blog.fc2.com 3
http://s.deeeki.com 2
http://us-w1.rockmelt.com 2
https://twimg0-a.akamaihd.net 2
https://cybozulive.com 1
More...

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でできるカメラアプリを実際に体験しよう 秋葉秀樹 本日のデモhttp://goo.gl/foPmv
  • 自己紹介 秋葉秀樹 フリーランスのデザイナー Illustrator, Photoshop, Flash, ActionScript HTML, CSS, JavaScript, Web Direction 3DCG(Lightwave, Shade), Movie 自論「すべてのモノ作りは人に還る」
  • すべての人に知っておいてほしい? スタイルシートデザインの基本原則 秋葉秀樹 (著), 安住 光 (著), 坂本亮介 (著), 千貫りこ (著), 鍋坂理恵 (著), 林 豊 (著), 比留間和也 (著) 5/25に発売します!
  • 今、見え隠れしているブラウザの新機能 カメラを使う バイブレーションを動かす 位置情報を取得する 電池残量を取得する おしらせ機能を使う
  • 本日、デモで使うブラウザ LAB Android 4.0 Opera MobileIce Cream Sandwich Chrome Technical Preview Firefox Aurora Browser
  • http://my.opera.com/core/blog/2011/03/23/webcam-orientation-preview LAB Opera MobileTechnical PreviewOpera Mobile 12 for Android 今回はテクニカルプレビュー版でデモをします
  • Webアプリケーションにおける HTMLの過去と未来
  • 1987
  • 1990
  • XHTML1.0 XMLの厳密な記述 Webアプリケーションに拡張が困難Web Applications 1.0 WHATWGが仕様策定を進める、ユーザが「使える」WebアプリケーションXHTML2.0 W3Cが策定を進めようとするが普及せず廃止????
  • 組み込み言語組み込み言語 組み込み言語 組み込み言語 組み込み言語 組み込み言語 組み込み言語 互換性がない
  • HTML5HTML5 HTML5 HTML5 HTML5 HTML5 HTML5 HTML5 HTML5 Web標準 最終形態!?
  • スマートフォンのネイティブアプリと Webアプリの違い
  • ネイティブアプリ開発 倍の工数と予算bjective - C Java
  • JavaScriptで開発
  • iPhoneでFacebookを使う選択肢といえば…
  • 現状、Safariはデバイスの機能をフルに使えない
  • アクセス不能 × カメラ/マイク写真アルバム 電池残量 電話帳 バイブレーション カレンダー お知らせ機能 しかしWebの目的であるこれらを実現しようと仕様が策定されつづけている
  • (ジオロケーション) 位置情報http://html5demos.com/geo
  • もう既に始まっている試験実装HTML5の仕様にもとづいてカメラや音声認識機能を 試験的に実装しはじめている
  • もう使えます カメラ/音声認識 カメラ(静止画) カメラ 電池残量/バイブ お知らせ機能 Android 4.0Ice Cream Sandwich Chrome Opera Mobile Firefox Aurora Browser (注意)条件付きですが…
  • カメラ撮影
  • HTMLでカメラにアクセスする主な2つの仕様<input type="file"accept="image/*;capture=camera"> 静止画を扱うだけのシンプルなものJavaScriptと<video>を連動させる ブラウザでビデオチャットなどに使うことが目的
  • カメラの映像をvideo要素に映すコード<video autoplay><script> var video = document.getElementsByTagName("video")[0]; navigator.getUserMedia("video", function (s){ video.src = s; });</script> 特に引数sの仕様が変わる可能性は高い
  • Demoブラウザから写真を録り、その写真をサーバに投稿 (みなさんもごいっしょに)
  • Android 4.0で標準搭載!私たちのつくるスマホ向けサイトから 写真撮影&投稿が可能になる?
  • 音声認識
  • 音声を文字に変換するSpeech Input API<input type="text" x-webkit-speech />
  • 私も使ってみました!
  • Demo「ここ」「どこ」があると「地図を起動します」と発声してGoogle Mapを表示するデモ「Chrome」「愛してるよ」があると「他のブラウザにも同じことを言ってるんでしょ?」と発声するデモ
  • 電池残量
  • バッテリー残量や充電中状態などを検知可能 var battery = navigator.mozBattery 現在はベンダープリフィックスが必要機種依存が激しい!バッテリー残量の信頼性はまだ薄い!
  • Demoバッテリー残量をブラウザで表示
  • バイブレーション
  • ブラウザから振動させるnavigator.mozVibrate([1000, 500, 200, 500]); 現在はベンダープリフィックスが必要 どんなリズムのバイブレーションかを指定可能
  • navigator.mozVibrate([ 300, 300, 300, 300, 900, 300, 300, 300, 300, 300, 900, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 900, 300]);
  • 「どうせまだ先だから」と考えるのではなく 来るべき将来に目を向けよう ソーシャル向けサービスとして 活用するシーンはここ数年で来るかも?
  • Thanks!