進撃の⽕狐裏話
-Cameraデバイスは使えません-
@Kaikias_lys
自己紹介
濵田 怜実
Twitter: @Kaikias_lys
Android関係のお仕事やってます。
最近は提督になったらしい。
C84ではこんなもの展示してました
XperiaZ (C6603) + JCROM すーぱーそに子仕様
それはともかく…
C84でこんな本出しました
Mozilla Japanさんにも10冊納品されたとか…?
完売御礼!
完売御礼!
ありがとうございます!
ありがとうございます!
事の始まり
この辺がFirefox OS本を書かないかと言って
きた
ホイホイ乗った
結果:ごらんの有様だよ!
担当箇所
デバイス周りのところ
(10、11、12章+3章の後半(実機部分))
10章:Camera
11章:GPS
12章:Vibrator
3章後半:実機での開発環境構築方法
合計11ページ
(本文書いた7人のうちで一番多い(想定外))
前途多難?
面白そうだと乗ったは良いものの…
実はJavascriptを知らない
HTML5?何それおいしいの?
そもそもFirefox OSにはあんまり期待していない
出るのが遅すぎ
?
意外と…
やってみたら意外と簡単
GPSとVibratorは楽勝
ところが…
Cameraが曲者
どういうことか?
Camera API
アプリの許可設定 / App permissions
https://developer.mozilla.org/en-US/docs/WebAPI/Camera
https://developer.mo...
つまり、
CameraデバイスをAndroidのように直接叩く
アプリはFirefox OSではcertified applications
でしか作れない!
一般の開発者は(現状)Cameraデバイスを直
接叩いたアプリケーションを作れない!...
妥協案
Camera API
要約
Cameraを使いたかったらWeb Activities APIを使え。
葛藤
certified applicationでなければ使えないもの
を解説して意味があるか?
残念アプリになるが、Web Activities (pick)を
使って解説するか?
今回はWeb Activitiesで勘弁してやろう!
という...
でもそれでは面白くないので
今日はcertified applicationの
作り方を解説します
必要なもの
UbuntuのインストールされたPC or Mac
=Firefox OSのビルド環境
Firefox OS用のアプリ開発環境
KEONとかPEAK、Nexus Sなどの実機(あれ
ば)
やる気(必須)
手順
Firefox OSのbuild環境を整える[1]
githubからB2GのSourceをcloneする[2]
ターゲットデバイスにあわせて./config.shす
る
certified applicationを作る
buildする
端...
簡単ですね!
これだけじゃ何なので…
Cameraアプリをpreinstallする
Web Activities版と同様のPreviewを表示して
撮影できるだけのアプリを作ってpreinstallし
ます
manifest.webappを変更する
manifest.webappにpermissionとtypeを設定す
る
"permissions": {
"device-storage:pictures": {
"access": "readwr...
htmlを変更する
今回は単純にCamera APIを叩くだけのアプリ
なので簡単に
<body>
<h1>Camera demo</h1>
<div id="content">
<video></video>
<button id="capt...
app.jsをゴリゴリ書く
var storage = navigator.getDeviceStorage('pictures');
var display = document.getElementsByTagName('video')[0...
certified application
Simulatorにinstallするとこうなります
どこに入れてbuildすればいいか?
$B2Groot/gaia/apps/ の下
放り込んでおくだけでbuild対象になるので楽!
アプリケーションの構成
通常のFirefox OS用アプリケーションと同じ
でいけるっぽい?
buildしたROMを焼いて起動する
preinstallされてる!
こいつ、動くぞ!?
左:プレビュー、右:撮影した画像
Camera applicationに潜む罠
KEONとNexus Sで挙動が違う
navigator.mozCameras() の応答
KEON
JavaScript Error: "TypeError: navigator.mozCamer...
Error
Nexus Sでは一⾒正しく動くように⾒えるが、
PreviewScreenが90度回転した状態で表示さ
れる。
→このPPTのScreenShotはcssでrotateして
無理やり解決している
バグっぽい気がするけど…Nexus...
Error
autofocusが利かない
Callする位置が違う?
function onSuccess(camera) {
var size = camera.capabilities.previewSizes[0];
cameracontr...
注意?
端末にbuildしたimageを焼く場合、
userdata.imgも焼く必要がある?
preinstallのアプリケーションが増えた場合は焼か
ないと⽴ち上がらなかった
まとめ
普通の開発者でも環境さえ揃っていれば
certified applicationを作って動かす事は可能
課題
debug方法
いちいちbuildするのは面倒
ご清聴ありがとうございました。
Upcoming SlideShare
Loading in...5
×

進撃の火狐裏話 -cameraデバイスは使えません-

497

Published on

関西Firefox OS勉強会 3rd GIGの発表で使用した資料です。
2013/08/31時点での資料になります。

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
497
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

進撃の火狐裏話 -cameraデバイスは使えません-

  1. 1. 進撃の⽕狐裏話 -Cameraデバイスは使えません- @Kaikias_lys
  2. 2. 自己紹介 濵田 怜実 Twitter: @Kaikias_lys Android関係のお仕事やってます。 最近は提督になったらしい。
  3. 3. C84ではこんなもの展示してました XperiaZ (C6603) + JCROM すーぱーそに子仕様
  4. 4. それはともかく…
  5. 5. C84でこんな本出しました Mozilla Japanさんにも10冊納品されたとか…? 完売御礼! 完売御礼! ありがとうございます! ありがとうございます!
  6. 6. 事の始まり この辺がFirefox OS本を書かないかと言って きた ホイホイ乗った 結果:ごらんの有様だよ!
  7. 7. 担当箇所 デバイス周りのところ (10、11、12章+3章の後半(実機部分)) 10章:Camera 11章:GPS 12章:Vibrator 3章後半:実機での開発環境構築方法 合計11ページ (本文書いた7人のうちで一番多い(想定外))
  8. 8. 前途多難? 面白そうだと乗ったは良いものの… 実はJavascriptを知らない HTML5?何それおいしいの? そもそもFirefox OSにはあんまり期待していない 出るのが遅すぎ ?
  9. 9. 意外と… やってみたら意外と簡単 GPSとVibratorは楽勝
  10. 10. ところが… Cameraが曲者
  11. 11. どういうことか? Camera API アプリの許可設定 / App permissions https://developer.mozilla.org/en-US/docs/WebAPI/Camera https://developer.mozilla.org/en-US/docs/Web/Apps/App_permissions
  12. 12. つまり、 CameraデバイスをAndroidのように直接叩く アプリはFirefox OSではcertified applications でしか作れない! 一般の開発者は(現状)Cameraデバイスを直 接叩いたアプリケーションを作れない! = カメラ系アプリのDeveloper全滅
  13. 13. 妥協案 Camera API 要約 Cameraを使いたかったらWeb Activities APIを使え。
  14. 14. 葛藤 certified applicationでなければ使えないもの を解説して意味があるか? 残念アプリになるが、Web Activities (pick)を 使って解説するか? 今回はWeb Activitiesで勘弁してやろう! という事で、進撃の⽕狐ではCamera=Web Activities (pick) を使って解説しました。(実際はページ数が足りなかっただけ)
  15. 15. でもそれでは面白くないので 今日はcertified applicationの 作り方を解説します
  16. 16. 必要なもの UbuntuのインストールされたPC or Mac =Firefox OSのビルド環境 Firefox OS用のアプリ開発環境 KEONとかPEAK、Nexus Sなどの実機(あれ ば) やる気(必須)
  17. 17. 手順 Firefox OSのbuild環境を整える[1] githubからB2GのSourceをcloneする[2] ターゲットデバイスにあわせて./config.shす る certified applicationを作る buildする 端末に焼く [1] https://developer.mozilla.org/ja/docs/Mozilla/Boot_to_Gecko/Building_and_installing_Firefox_OS [2] git://github.com/mozilla-b2g/B2G.git
  18. 18. 簡単ですね!
  19. 19. これだけじゃ何なので…
  20. 20. Cameraアプリをpreinstallする Web Activities版と同様のPreviewを表示して 撮影できるだけのアプリを作ってpreinstallし ます
  21. 21. manifest.webappを変更する manifest.webappにpermissionとtypeを設定す る "permissions": { "device-storage:pictures": { "access": "readwrite“ }, "camera": {}, "storage": {} }, "type": "certified",
  22. 22. htmlを変更する 今回は単純にCamera APIを叩くだけのアプリ なので簡単に <body> <h1>Camera demo</h1> <div id="content"> <video></video> <button id="capture-btn">capture</button> </div> <script type="text/javascript" src="js/app.js"></script> </body>
  23. 23. app.jsをゴリゴリ書く var storage = navigator.getDeviceStorage('pictures'); var display = document.getElementsByTagName('video')[0]; var cameras = window.navigator.mozCameras; var options = { camera: cameras.getListOfCameras()[0] }; var pictureOptions = { rotation: 0, pictureSize: null, fileFormat: null }; var captureBtn = document.getElementById('capture-btn'); var cameracontrol = null; function onStreamReady(stream) { display.mozSrcObject = stream; display.play(); }; function onFocusPossible(success) { if(success){ console.log("The image has been focused"); }else{ console.log("The image has not been focused"); } }; function onFocusNotPossible(error) { console.log("The camera is not able to focus anything"); console.log(error); }; function onSuccess(camera) { var size = camera.capabilities.previewSizes[0]; cameracontrol = camera; camera.getPreviewStream(size, onStreamReady); camera.autoFocus(onFocuesPossible, onFocusNotPossible); }; function onError(error) { console.warn(error); }; function onPictureTaken(blob) { storage.addNamed(blob, 'test.jpg'); cameracontrol.resumePreview(); }; cameras.getCamera(options, onSuccess, onError); captureBtn.addEventListener('click', function() { pictureOptions.pictureSize = cameracontrol.capabilities.pictureSizes[0]; pictureOptions.fileformat = cameracontrol.capabilities.fileFormats[0]; cameracontrol.takePicture(pictureOptions, onPictureTaken); } );
  24. 24. certified application Simulatorにinstallするとこうなります
  25. 25. どこに入れてbuildすればいいか? $B2Groot/gaia/apps/ の下 放り込んでおくだけでbuild対象になるので楽!
  26. 26. アプリケーションの構成 通常のFirefox OS用アプリケーションと同じ でいけるっぽい?
  27. 27. buildしたROMを焼いて起動する preinstallされてる!
  28. 28. こいつ、動くぞ!? 左:プレビュー、右:撮影した画像
  29. 29. Camera applicationに潜む罠 KEONとNexus Sで挙動が違う navigator.mozCameras() の応答 KEON JavaScript Error: "TypeError: navigator.mozCameras is null" {file: "app://orecamera.gaiamobile.org/js/app.js" line: 6} Nexus S No problem. navigator.mozCameras()はCameraを使用する場合に最初に呼ぶので 動かないと困る。 ただ、標準のCameraアプリでもCallしているように⾒えるので、 何か手順を踏む必要があるのかも?(未調査)
  30. 30. Error Nexus Sでは一⾒正しく動くように⾒えるが、 PreviewScreenが90度回転した状態で表示さ れる。 →このPPTのScreenShotはcssでrotateして 無理やり解決している バグっぽい気がするけど…Nexus Sでしか確認で きてないので良くわからない。
  31. 31. Error autofocusが利かない Callする位置が違う? function onSuccess(camera) { var size = camera.capabilities.previewSizes[0]; cameracontrol = camera; camera.getPreviewStream(size, onStreamReady); camera.autoFocus(onFocuesPossible, onFocusNotPossible); };
  32. 32. 注意? 端末にbuildしたimageを焼く場合、 userdata.imgも焼く必要がある? preinstallのアプリケーションが増えた場合は焼か ないと⽴ち上がらなかった
  33. 33. まとめ 普通の開発者でも環境さえ揃っていれば certified applicationを作って動かす事は可能 課題 debug方法 いちいちbuildするのは面倒
  34. 34. ご清聴ありがとうございました。
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×