Your SlideShare is downloading. ×
進撃の火狐裏話 -cameraデバイスは使えません-
進撃の火狐裏話 -cameraデバイスは使えません-
進撃の火狐裏話 -cameraデバイスは使えません-
進撃の火狐裏話 -cameraデバイスは使えません-
進撃の火狐裏話 -cameraデバイスは使えません-
進撃の火狐裏話 -cameraデバイスは使えません-
進撃の火狐裏話 -cameraデバイスは使えません-
進撃の火狐裏話 -cameraデバイスは使えません-
進撃の火狐裏話 -cameraデバイスは使えません-
進撃の火狐裏話 -cameraデバイスは使えません-
進撃の火狐裏話 -cameraデバイスは使えません-
進撃の火狐裏話 -cameraデバイスは使えません-
進撃の火狐裏話 -cameraデバイスは使えません-
進撃の火狐裏話 -cameraデバイスは使えません-
進撃の火狐裏話 -cameraデバイスは使えません-
進撃の火狐裏話 -cameraデバイスは使えません-
進撃の火狐裏話 -cameraデバイスは使えません-
進撃の火狐裏話 -cameraデバイスは使えません-
進撃の火狐裏話 -cameraデバイスは使えません-
進撃の火狐裏話 -cameraデバイスは使えません-
進撃の火狐裏話 -cameraデバイスは使えません-
進撃の火狐裏話 -cameraデバイスは使えません-
進撃の火狐裏話 -cameraデバイスは使えません-
進撃の火狐裏話 -cameraデバイスは使えません-
進撃の火狐裏話 -cameraデバイスは使えません-
進撃の火狐裏話 -cameraデバイスは使えません-
進撃の火狐裏話 -cameraデバイスは使えません-
進撃の火狐裏話 -cameraデバイスは使えません-
進撃の火狐裏話 -cameraデバイスは使えません-
進撃の火狐裏話 -cameraデバイスは使えません-
進撃の火狐裏話 -cameraデバイスは使えません-
進撃の火狐裏話 -cameraデバイスは使えません-
進撃の火狐裏話 -cameraデバイスは使えません-
進撃の火狐裏話 -cameraデバイスは使えません-
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

475

Published on

関西Firefox OS勉強会 3rd GIGの発表で使用した資料です。 …

関西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
475
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 進撃の⽕狐裏話 -Cameraデバイスは使えません- @Kaikias_lys
  • 2. 自己紹介 濵田 怜実 Twitter: @Kaikias_lys Android関係のお仕事やってます。 最近は提督になったらしい。
  • 3. C84ではこんなもの展示してました XperiaZ (C6603) + JCROM すーぱーそに子仕様
  • 4. それはともかく…
  • 5. C84でこんな本出しました Mozilla Japanさんにも10冊納品されたとか…? 完売御礼! 完売御礼! ありがとうございます! ありがとうございます!
  • 6. 事の始まり この辺がFirefox OS本を書かないかと言って きた ホイホイ乗った 結果:ごらんの有様だよ!
  • 7. 担当箇所 デバイス周りのところ (10、11、12章+3章の後半(実機部分)) 10章:Camera 11章:GPS 12章:Vibrator 3章後半:実機での開発環境構築方法 合計11ページ (本文書いた7人のうちで一番多い(想定外))
  • 8. 前途多難? 面白そうだと乗ったは良いものの… 実はJavascriptを知らない HTML5?何それおいしいの? そもそもFirefox OSにはあんまり期待していない 出るのが遅すぎ ?
  • 9. 意外と… やってみたら意外と簡単 GPSとVibratorは楽勝
  • 10. ところが… Cameraが曲者
  • 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. つまり、 CameraデバイスをAndroidのように直接叩く アプリはFirefox OSではcertified applications でしか作れない! 一般の開発者は(現状)Cameraデバイスを直 接叩いたアプリケーションを作れない! = カメラ系アプリのDeveloper全滅
  • 13. 妥協案 Camera API 要約 Cameraを使いたかったらWeb Activities APIを使え。
  • 14. 葛藤 certified applicationでなければ使えないもの を解説して意味があるか? 残念アプリになるが、Web Activities (pick)を 使って解説するか? 今回はWeb Activitiesで勘弁してやろう! という事で、進撃の⽕狐ではCamera=Web Activities (pick) を使って解説しました。(実際はページ数が足りなかっただけ)
  • 15. でもそれでは面白くないので 今日はcertified applicationの 作り方を解説します
  • 16. 必要なもの UbuntuのインストールされたPC or Mac =Firefox OSのビルド環境 Firefox OS用のアプリ開発環境 KEONとかPEAK、Nexus Sなどの実機(あれ ば) やる気(必須)
  • 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. 簡単ですね!
  • 19. これだけじゃ何なので…
  • 20. Cameraアプリをpreinstallする Web Activities版と同様のPreviewを表示して 撮影できるだけのアプリを作ってpreinstallし ます
  • 21. manifest.webappを変更する manifest.webappにpermissionとtypeを設定す る "permissions": { "device-storage:pictures": { "access": "readwrite“ }, "camera": {}, "storage": {} }, "type": "certified",
  • 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. 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. certified application Simulatorにinstallするとこうなります
  • 25. どこに入れてbuildすればいいか? $B2Groot/gaia/apps/ の下 放り込んでおくだけでbuild対象になるので楽!
  • 26. アプリケーションの構成 通常のFirefox OS用アプリケーションと同じ でいけるっぽい?
  • 27. buildしたROMを焼いて起動する preinstallされてる!
  • 28. こいつ、動くぞ!? 左:プレビュー、右:撮影した画像
  • 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. Error Nexus Sでは一⾒正しく動くように⾒えるが、 PreviewScreenが90度回転した状態で表示さ れる。 →このPPTのScreenShotはcssでrotateして 無理やり解決している バグっぽい気がするけど…Nexus Sでしか確認で きてないので良くわからない。
  • 31. Error autofocusが利かない Callする位置が違う? function onSuccess(camera) { var size = camera.capabilities.previewSizes[0]; cameracontrol = camera; camera.getPreviewStream(size, onStreamReady); camera.autoFocus(onFocuesPossible, onFocusNotPossible); };
  • 32. 注意? 端末にbuildしたimageを焼く場合、 userdata.imgも焼く必要がある? preinstallのアプリケーションが増えた場合は焼か ないと⽴ち上がらなかった
  • 33. まとめ 普通の開発者でも環境さえ揃っていれば certified applicationを作って動かす事は可能 課題 debug方法 いちいちbuildするのは面倒
  • 34. ご清聴ありがとうございました。

×