2012/8/25、豆蔵トレーニングルームで開催されたTIZEN勉強会で発表した資料。

1. HTML5 APIを使ったデモとソースの解説
秋葉秀樹
第3回Tizen勉強会 #TizenJP #HTML5J #Firefoxosjp #MeeGoJP

2. 自己紹介
秋葉秀樹
フリーランスのデザイナー
Illustrator, Photoshop, Flash, ActionScript
HTML, CSS, JavaScript, Web Direction
3DCG（Lightwave, Shade）, Movie
執筆書籍
自論「すべてのモノ作りは人に還る」

3. 自主制作
http://grad3.ecoloniq.jp/

4. カメラにアクセス
位置情報を取得
電池残量を取得
振動を鳴らす

5. ベンダープリフィックス
現状HTML5 API関連は策定中なので、
各ブラウザでは接頭辞付きの記述をしている

6. カメラにアクセス
getUserMedia API MediaCapture API
ストリームをvideo要素で再生 input要素を拡張
Android 2.xだとOpera12で標準実装 Android 2.xだとFirefox
デスクトップ版Chrome、Firefox Nightlyなど Android 4.xだと標準ブラウザ、Chrome

7. カメラにアクセス
getUserMedia API
navigator.getUserMedia(
{video:true},
function (stream) { // 成功時の処理 },
function (stream) { // 失敗時の処理 }
)
Chromeなどは現在ベンダープリフィックスが必要。
O
D EM

8. カメラにアクセス
getUserMedia API
撮影した画像を編集するにはcanvas要素!
ctx.drawImage(video, 0, 0);
画像に対しコントラストやぼかしなどフィルターをかける
画像はBase64文字列で保存することができる
O
D EM

9. カメラにアクセス
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 (){ /* エラーーーーー */}
);

10. カメラにアクセス
getUserMedia API
策定中のCSSは、画像をぼかすことも
filter:invert();
contrast(1000%) hue-rotate(180deg)
brightness(50%) sepia()
saturate(300%)
現在ベンダープリフィックスが必要。

11. カメラにアクセス
MediaCapture API
フォームなどで使うinput要素でカメラにアクセス
<input type="file" accept="image/*; capture=camera">
ユーザが要素をタップするだけでデフォルトのカメラ画面に切り替わる。
撮影が終了したら、HTMLのform要素のファイルとしてサーバに送ること
ができる。
O
D EM

12. 位置情報を取得
Geolocation API
位置情報を取得する
navigator.geolocation.getCurrentPosition(
successCallback,
errorCallback,
option
);
getCurrentPositionだと一回、watchPositionだと定期的に位置取得。
仕様では高度、方角、速度、誤差、高度誤差などがある。

13. 位置情報を取得
Geolocation API
位置情報を取得する
「ここ」「どこ」があると
「地図を起動します」と発声してGoogle Mapを表示するデモ
O
D EM

14. 電池残量を取得
Battery Status API
電池残量だけでなく、充電ステータスも取得
var battery = navigator.battery;
alert( "残量は" + battery.level * 100 + "%" )
・充電コネクタがさされたとき、外されたときのイベントがとれる
・現在充電中なのかそうでないのか、残量が変化した瞬間のイベントもとれる
現在ベンダープリフィックスが必要。
O
D EM

15. 振動を鳴らす
Vibration API
フォーム未入力エラーを振動で知らせる
navigator.vibrate([200, 100, 500, 100]);
配列は、振動時間と休みの時間を交互にいれていく。
現在ベンダープリフィックスが必要。
O
D EM

16. セッション中に情報いただきました
https://wiki.mozilla.org/WebAPI

17. Thanks :)
Hidetaro7@Twitter
blog: http://akibahideki.com/blog/