html5 apiを使ったデモとソースの解説
DESCRIPTION
2012/8/25、豆蔵トレーニングルームで開催されたTIZEN勉強会で発表した資料。TRANSCRIPT
![Page 1: HTML5 APIを使ったデモとソースの解説](https://reader034.vdocuments.net/reader034/viewer/2022052215/5561ee2ed8b42aa5068b559b/html5/thumbnails/1.jpg)
HTML5 APIを使ったデモとソースの解説秋葉秀樹
第3回Tizen勉強会 #TizenJP #HTML5J #Firefoxosjp #MeeGoJP
![Page 2: HTML5 APIを使ったデモとソースの解説](https://reader034.vdocuments.net/reader034/viewer/2022052215/5561ee2ed8b42aa5068b559b/html5/thumbnails/2.jpg)
自己紹介
秋葉秀樹フリーランスのデザイナーIllustrator, Photoshop, Flash, ActionScriptHTML, CSS, JavaScript, Web Direction3DCG(Lightwave, Shade), Movie
自論「すべてのモノ作りは人に還る」
執筆書籍
![Page 4: HTML5 APIを使ったデモとソースの解説](https://reader034.vdocuments.net/reader034/viewer/2022052215/5561ee2ed8b42aa5068b559b/html5/thumbnails/4.jpg)
カメラにアクセス
電池残量を取得
振動を鳴らす
位置情報を取得
![Page 5: HTML5 APIを使ったデモとソースの解説](https://reader034.vdocuments.net/reader034/viewer/2022052215/5561ee2ed8b42aa5068b559b/html5/thumbnails/5.jpg)
ベンダープリフィックス
現状HTML5 API関連は策定中なので、
各ブラウザでは接頭辞付きの記述をしている
![Page 6: HTML5 APIを使ったデモとソースの解説](https://reader034.vdocuments.net/reader034/viewer/2022052215/5561ee2ed8b42aa5068b559b/html5/thumbnails/6.jpg)
カメラにアクセス
getUserMedia API MediaCapture API
ストリームをvideo要素で再生 input要素を拡張
Android 2.xだとFirefox
Android 4.xだと標準ブラウザ、Chrome
Android 2.xだとOpera12で標準実装
デスクトップ版Chrome、Firefox Nightlyなど
![Page 7: HTML5 APIを使ったデモとソースの解説](https://reader034.vdocuments.net/reader034/viewer/2022052215/5561ee2ed8b42aa5068b559b/html5/thumbnails/7.jpg)
カメラにアクセス
getUserMedia API
navigator.getUserMedia( {video:true}, function (stream) { // 成功時の処理 },
function (stream) { // 失敗時の処理 }
)
DEMO
Chromeなどは現在ベンダープリフィックスが必要。
![Page 8: HTML5 APIを使ったデモとソースの解説](https://reader034.vdocuments.net/reader034/viewer/2022052215/5561ee2ed8b42aa5068b559b/html5/thumbnails/8.jpg)
カメラにアクセス
getUserMedia API
DEMO
撮影した画像を編集するにはcanvas要素!
画像に対しコントラストやぼかしなどフィルターをかける
画像はBase64文字列で保存することができる
ctx.drawImage(video, 0, 0);
![Page 9: HTML5 APIを使ったデモとソースの解説](https://reader034.vdocuments.net/reader034/viewer/2022052215/5561ee2ed8b42aa5068b559b/html5/thumbnails/9.jpg)
var video = document.querySelector("video");var canvas = document.querySelector("canvas");var ctx = canvas.getContext("2d"); navigator.getUserMedia( {video: true}, function (stream){ video.src = window.webkitURL.createObjectURL(stream); setInterval(function (){ ctx.drawImage(video, 0, 0); }, 100); }, function (){ /* エラーーーーー */}
);
// 成功時
カメラにアクセス
![Page 10: HTML5 APIを使ったデモとソースの解説](https://reader034.vdocuments.net/reader034/viewer/2022052215/5561ee2ed8b42aa5068b559b/html5/thumbnails/10.jpg)
カメラにアクセス
getUserMedia API
策定中のCSSは、画像をぼかすことも
contrast(1000%)brightness(50%)
filter:invert();
現在ベンダープリフィックスが必要。
hue-rotate(180deg)sepia()saturate(300%)
![Page 11: HTML5 APIを使ったデモとソースの解説](https://reader034.vdocuments.net/reader034/viewer/2022052215/5561ee2ed8b42aa5068b559b/html5/thumbnails/11.jpg)
カメラにアクセス
DEMO
フォームなどで使うinput要素でカメラにアクセス
ユーザが要素をタップするだけでデフォルトのカメラ画面に切り替わる。
撮影が終了したら、HTMLのform要素のファイルとしてサーバに送ること
ができる。
<input type="file" accept="image/*; capture=camera">
MediaCapture API
![Page 12: HTML5 APIを使ったデモとソースの解説](https://reader034.vdocuments.net/reader034/viewer/2022052215/5561ee2ed8b42aa5068b559b/html5/thumbnails/12.jpg)
位置情報を取得
位置情報を取得する
getCurrentPositionだと一回、watchPositionだと定期的に位置取得。仕様では高度、方角、速度、誤差、高度誤差などがある。
navigator.geolocation.getCurrentPosition(successCallback,errorCallback,option
);
Geolocation API
![Page 13: HTML5 APIを使ったデモとソースの解説](https://reader034.vdocuments.net/reader034/viewer/2022052215/5561ee2ed8b42aa5068b559b/html5/thumbnails/13.jpg)
位置情報を取得
DEMO
位置情報を取得する
Geolocation API
「ここ」「どこ」があると「地図を起動します」と発声してGoogle Mapを表示するデモ
![Page 14: HTML5 APIを使ったデモとソースの解説](https://reader034.vdocuments.net/reader034/viewer/2022052215/5561ee2ed8b42aa5068b559b/html5/thumbnails/14.jpg)
電池残量を取得
DEMO
電池残量だけでなく、充電ステータスも取得
・充電コネクタがさされたとき、外されたときのイベントがとれる・現在充電中なのかそうでないのか、残量が変化した瞬間のイベントもとれる現在ベンダープリフィックスが必要。
var battery = navigator.battery; alert( "残量は" + battery.level * 100 + "%" )
Battery Status API
![Page 15: HTML5 APIを使ったデモとソースの解説](https://reader034.vdocuments.net/reader034/viewer/2022052215/5561ee2ed8b42aa5068b559b/html5/thumbnails/15.jpg)
振動を鳴らす
DEMO
フォーム未入力エラーを振動で知らせる
配列は、振動時間と休みの時間を交互にいれていく。現在ベンダープリフィックスが必要。
navigator.vibrate([200, 100, 500, 100]);
Vibration API
![Page 16: HTML5 APIを使ったデモとソースの解説](https://reader034.vdocuments.net/reader034/viewer/2022052215/5561ee2ed8b42aa5068b559b/html5/thumbnails/16.jpg)
https://wiki.mozilla.org/WebAPI
セッション中に情報いただきました
![Page 17: HTML5 APIを使ったデモとソースの解説](https://reader034.vdocuments.net/reader034/viewer/2022052215/5561ee2ed8b42aa5068b559b/html5/thumbnails/17.jpg)
Hidetaro7@Twitter
blog: http://akibahideki.com/blog/
Thanks :)