第3回Webkit/HTML5勉強会で発表した「File APIと加速度センサー」のプレゼン資料。 ※プレゼン資料だけで理解出来るように一部修正有り。

1. 第3回 Webkit/HTML5勉強会
File APIと加速度センサー
nakamura001
2010/02/17

2. File API

3. Firefox 3.6で
使えます

4. デモ
http://tsuyobi.heteml.jp/html/firefox/file_api/bitmap_info/

5. イベントリスナーの登録
dropbox = document.getElementById("dropbox");
dropbox.addEventListener("dragover", dragover, true);
dropbox.addEventListener("drop", drop, true);

6. Drag Over時の処理
dropbox.addEventListener("dragover", dragover, true);
function dragover(e) {
// イベントのさらなる伝播を止める
e.stopPropagation();
// ブラウザのアクションを動作させない
e.preventDefault();
}

7. Drop時の処理
function drop(e) {
var dt = e.dataTransfer;
var files = dt.files;
if (files.length > 0) {
var binaryReader = new FileReader();
binaryReader.onloadend = function() {
var file = files[0];
(ここでファイルに対する処理を実行)
}
binaryReader.readAsBinaryString(files[0]);
}
}

8. ファイルに対する処理
var binaryReader = new FileReader();
binaryReader.onloadend = function() {
info_msg = info_msg + "size : " + file.size + "n";
info_msg = info_msg + "type : " + file.type + "n"
pos = 0;
var c = binaryReader.result.charCodeAt(pos);
}

9. ファイルに対する処理
var binaryReader = new FileReader();
binaryReader.onloadend = function() {
info_msg = info_msg + "size : " + file.size + "n";
info_msg = info_msg + "type : " + file.type + "n"
ファイルのどの位置からデータを取得するかを指定
pos = 0;
var c = binaryReader.result.charCodeAt(pos);
}

10. 少々、面倒な事が…

11. １Byteずつしか
読めない

12. intやlongなどの
データはどうする？

13. サンプルは
どうしてる？

14. JPEGファイルから
Exif情報を読み込む
サンプル
http://demos.hacks.mozilla.org/openweb/FileAPI/

15. 良い感じのライブラリに
なってる事を発見

16. exif.js

17. パクっ活用させて貰おう

18. ライセンスはMPL

19. 素晴らしい!!

20. 取得できるデータ
関数名 データ
getByteAt Byte(符号無し)
getShortAt Signed Short(符号有りの16bit)
getSLongAt Signed Long(符号有りの32bit)
getLongAt Unsigned Long(符号無し32bit)
getStringAt 文字列データ

21. テキストファイルのとき
text = file.getAsText("utf-8");
【参考サイト】Firefox3.6βで利用できるFile APIの可能性について：マピオンラボ(Javascript)
http://labs.mapion.co.jp/blog/javascript/firefox36file_api.php

22. テキストファイルのとき
文字のエンコードを指定
text = file.getAsText("utf-8");
【参考サイト】Firefox3.6βで利用できるFile APIの可能性について：マピオンラボ(Javascript)
http://labs.mapion.co.jp/blog/javascript/firefox36file_api.php

23. 加速度センサー

24. すみません、
これも現在は
Firefox 3.6だけが対応

25. しかも対応するパソコンは
最近のMacのノートと
一部のThink Pad

26. デモ
http://tsuyobi.heteml.jp/html/firefox/orientation_event/index2.html

27. 使い方は至って簡単

28. 使い方
function handleOrientation(orientData) {
var x = orientData.x;
var y = orientData.y;
var z = orientData.z;
}
window.addEventListener("MozOrientation", handleOrientation,
true);
・addEventListenerで追加するだけ
・X,Y,Zの3つの軸の加速度が取得可能

29. 1つだけ注意!!

30. ノイズが出る事が
有るみたい

31. デモ
http://tsuyobi.heteml.jp/html/firefox/orientation_event/index2a.html

32. 対策

33. ローパスフィルタ

34. ローパスフィルタ
function handleOrientation(orientData) {
var accel_scale = 500.0;
var filter_val = 0.1;
pos_x = (orientData.x*accel_scale * filter_val) +
(pos_x * (1.0 - filter_val));
pos_y = (orientData.y*accel_scale * filter_val) +
(pos_y * (1.0 - filter_val));
この処理により、加速度の値は徐々に反映され
るようになり急激な変化の値が直接反映されな
くなる。

35. ローパスフィルタ
function handleOrientation(orientData) {
var accel_scale = 500.0;
var filter_val = 0.1;
pos_x = (orientData.x*accel_scale * filter_val) +
(pos_x * (1.0 - filter_val));
pos_y = (orientData.y*accel_scale * filter_val) +
(pos_y * (1.0 - filter_val));
とりあえず、 この処理により、加速度の値は徐々に反映され
るようになり急激な変化の値が直接反映されな
この式を挟んでおけばOK
くなる。

36. その他、関連資料はこちら
http://www32.atwiki.jp/nakamura001/pages/82.html