firefoxos勉強会#7 カメラアプリの作り方
DESCRIPTION
FirefoxOS勉強会#7での発表資料です。TRANSCRIPT
![Page 1: FirefoxOS勉強会#7 カメラアプリの作り方](https://reader036.vdocuments.site/reader036/viewer/2022062303/5560b2f9d8b42af43b8b478d/html5/thumbnails/1.jpg)
Firefox OS でカメラアプリ開発
Firefox OS 勉強会 #7@Kechol
![Page 2: FirefoxOS勉強会#7 カメラアプリの作り方](https://reader036.vdocuments.site/reader036/viewer/2022062303/5560b2f9d8b42af43b8b478d/html5/thumbnails/2.jpg)
自己紹介
鈴木和幸@Kechol
リクルートメディアテクノロジーラボ
Web エンジニア ( フロントエンド中心 )Firefox L10N コントリビュータ
![Page 3: FirefoxOS勉強会#7 カメラアプリの作り方](https://reader036.vdocuments.site/reader036/viewer/2022062303/5560b2f9d8b42af43b8b478d/html5/thumbnails/3.jpg)
cameran
蜷川実花監修のカメラアプリ
アプリは iOS,Android 合わせ合計 500 万ダウンロードを記録
![Page 4: FirefoxOS勉強会#7 カメラアプリの作り方](https://reader036.vdocuments.site/reader036/viewer/2022062303/5560b2f9d8b42af43b8b478d/html5/thumbnails/4.jpg)
cameran on FirefoxOS
2014/02 リリース約3万 DL(200~300DL/day)
開発期間は2週間弱
![Page 5: FirefoxOS勉強会#7 カメラアプリの作り方](https://reader036.vdocuments.site/reader036/viewer/2022062303/5560b2f9d8b42af43b8b478d/html5/thumbnails/5.jpg)
cameran on FirefoxOS
カメラを起動して撮るだけの簡単なアプリ
![Page 6: FirefoxOS勉強会#7 カメラアプリの作り方](https://reader036.vdocuments.site/reader036/viewer/2022062303/5560b2f9d8b42af43b8b478d/html5/thumbnails/6.jpg)
アジェンダ• 前提知識おさらい• カメラアプリの作り方• アプリ開発上の tips
![Page 7: FirefoxOS勉強会#7 カメラアプリの作り方](https://reader036.vdocuments.site/reader036/viewer/2022062303/5560b2f9d8b42af43b8b478d/html5/thumbnails/7.jpg)
前提知識おさらい
![Page 8: FirefoxOS勉強会#7 カメラアプリの作り方](https://reader036.vdocuments.site/reader036/viewer/2022062303/5560b2f9d8b42af43b8b478d/html5/thumbnails/8.jpg)
FirefoxOS アプリ• HTML, CSS, JS で書ける
• アプリには Hosted, Privileged, Certified の3種類がある–カメラや外部通信は Privileged App
• アプリのブラウザエンジンは gecko
![Page 9: FirefoxOS勉強会#7 カメラアプリの作り方](https://reader036.vdocuments.site/reader036/viewer/2022062303/5560b2f9d8b42af43b8b478d/html5/thumbnails/9.jpg)
アプリ開発ことはじめ• Firefox Nightly があれば始められる– App Manager / WebIDE
• いろんな Boilerplate が落ちています– https://github.com/mdn/mdn-app-
template– https://github.com/buildingfirefoxos/Buil
ding-Blocks
– https://github.com/robnyman/Firefox-OS-Boilerplate-App
![Page 10: FirefoxOS勉強会#7 カメラアプリの作り方](https://reader036.vdocuments.site/reader036/viewer/2022062303/5560b2f9d8b42af43b8b478d/html5/thumbnails/10.jpg)
カメラアプリの作り方
![Page 11: FirefoxOS勉強会#7 カメラアプリの作り方](https://reader036.vdocuments.site/reader036/viewer/2022062303/5560b2f9d8b42af43b8b478d/html5/thumbnails/11.jpg)
カメラアプリの基本
撮る
↓
加工する
![Page 12: FirefoxOS勉強会#7 カメラアプリの作り方](https://reader036.vdocuments.site/reader036/viewer/2022062303/5560b2f9d8b42af43b8b478d/html5/thumbnails/12.jpg)
カメラアプリの基本
getUserMedia()
↓
<canvas>
![Page 13: FirefoxOS勉強会#7 カメラアプリの作り方](https://reader036.vdocuments.site/reader036/viewer/2022062303/5560b2f9d8b42af43b8b478d/html5/thumbnails/13.jpg)
FirefoxOS でのカメラアプリの基本
getUserMedia()MozActivity
↓
<canvas>
![Page 14: FirefoxOS勉強会#7 カメラアプリの作り方](https://reader036.vdocuments.site/reader036/viewer/2022062303/5560b2f9d8b42af43b8b478d/html5/thumbnails/14.jpg)
![Page 15: FirefoxOS勉強会#7 カメラアプリの作り方](https://reader036.vdocuments.site/reader036/viewer/2022062303/5560b2f9d8b42af43b8b478d/html5/thumbnails/15.jpg)
![Page 16: FirefoxOS勉強会#7 カメラアプリの作り方](https://reader036.vdocuments.site/reader036/viewer/2022062303/5560b2f9d8b42af43b8b478d/html5/thumbnails/16.jpg)
カメラ• name: “pick” で MozActivity を初期化• 画像データは this.result.blob で取得
![Page 17: FirefoxOS勉強会#7 カメラアプリの作り方](https://reader036.vdocuments.site/reader036/viewer/2022062303/5560b2f9d8b42af43b8b478d/html5/thumbnails/17.jpg)
次のリリース• FirefoxOS >= 1.4– getUserMedia() でビデオキャプチャが可能
• FirefoxOS >= 2.0–MozCamera が利用可能
![Page 18: FirefoxOS勉強会#7 カメラアプリの作り方](https://reader036.vdocuments.site/reader036/viewer/2022062303/5560b2f9d8b42af43b8b478d/html5/thumbnails/18.jpg)
MozCamera での画像取得
![Page 19: FirefoxOS勉強会#7 カメラアプリの作り方](https://reader036.vdocuments.site/reader036/viewer/2022062303/5560b2f9d8b42af43b8b478d/html5/thumbnails/19.jpg)
フィルタ• 元画像への加工– contrast, brightness
• フィルタ画像の合成 (1~4 枚 )– ブレンドモードを指定して合成
![Page 20: FirefoxOS勉強会#7 カメラアプリの作り方](https://reader036.vdocuments.site/reader036/viewer/2022062303/5560b2f9d8b42af43b8b478d/html5/thumbnails/20.jpg)
画像の加工• 今回は画像の加工に canvas 2D を利用
• 利用ライブラリ– https://github.com/jseidelin/pixastic
![Page 21: FirefoxOS勉強会#7 カメラアプリの作り方](https://reader036.vdocuments.site/reader036/viewer/2022062303/5560b2f9d8b42af43b8b478d/html5/thumbnails/21.jpg)
その他の画像処理ライブラリ• pixi.js(WebGL)– http://www.pixijs.com/
• glfx.js(WebGL)– https://github.com/evanw/glfx.js
![Page 22: FirefoxOS勉強会#7 カメラアプリの作り方](https://reader036.vdocuments.site/reader036/viewer/2022062303/5560b2f9d8b42af43b8b478d/html5/thumbnails/22.jpg)
フィルタ: Shower
→
フィルタ画像 – 以下の四枚を順番に合成
![Page 23: FirefoxOS勉強会#7 カメラアプリの作り方](https://reader036.vdocuments.site/reader036/viewer/2022062303/5560b2f9d8b42af43b8b478d/html5/thumbnails/23.jpg)
画像の保存• デバイスストレージを利用– Navigator.getDeviceStorage()– device-storage のパーミッションが必要
![Page 24: FirefoxOS勉強会#7 カメラアプリの作り方](https://reader036.vdocuments.site/reader036/viewer/2022062303/5560b2f9d8b42af43b8b478d/html5/thumbnails/24.jpg)
画像のシェア• name: “share” で MozActivity を利用
![Page 25: FirefoxOS勉強会#7 カメラアプリの作り方](https://reader036.vdocuments.site/reader036/viewer/2022062303/5560b2f9d8b42af43b8b478d/html5/thumbnails/25.jpg)
フィルタ処理の問題• 普通に処理していると遅い– FirefoxOS の端末は非力• ZTE Open: CPU 1GHz, メモリ 256MB
![Page 26: FirefoxOS勉強会#7 カメラアプリの作り方](https://reader036.vdocuments.site/reader036/viewer/2022062303/5560b2f9d8b42af43b8b478d/html5/thumbnails/26.jpg)
フィルタの高速化• canvas の演算処理に WebWorker を使う– http://blogs.msdn.com/b/eternalcoding/archive/
2012/09/20/using-web-workers-to-improve-performance-of-image-manipulation.aspx
• asm.js で OpenGL を利用する– http://blog.bitops.com/blog/2013/06/04/w
ebraw-asmjs/
![Page 27: FirefoxOS勉強会#7 カメラアプリの作り方](https://reader036.vdocuments.site/reader036/viewer/2022062303/5560b2f9d8b42af43b8b478d/html5/thumbnails/27.jpg)
その他細かいこと
![Page 28: FirefoxOS勉強会#7 カメラアプリの作り方](https://reader036.vdocuments.site/reader036/viewer/2022062303/5560b2f9d8b42af43b8b478d/html5/thumbnails/28.jpg)
利用したライブラリ• require.js• pixastic
• No jQuery– なくても DOM の操作には支障ない
• No MV* Framework– なくても十分なアプリの規模だった– 大きくなってきたら必須な感– ただパフォーマンスには注意
![Page 29: FirefoxOS勉強会#7 カメラアプリの作り方](https://reader036.vdocuments.site/reader036/viewer/2022062303/5560b2f9d8b42af43b8b478d/html5/thumbnails/29.jpg)
画面遷移と UI
• 画面遷移は window.onhashchange を利用
• Firefox OS 標準の UI と同じ遷移アニメーションにしたかったがやりにくかったので諦めた– Backbone や Angular と相性の良い実装があ
れば教えてください
![Page 30: FirefoxOS勉強会#7 カメラアプリの作り方](https://reader036.vdocuments.site/reader036/viewer/2022062303/5560b2f9d8b42af43b8b478d/html5/thumbnails/30.jpg)
アプリ申請〜運用まで
![Page 31: FirefoxOS勉強会#7 カメラアプリの作り方](https://reader036.vdocuments.site/reader036/viewer/2022062303/5560b2f9d8b42af43b8b478d/html5/thumbnails/31.jpg)
Content Security Policy
• Privileged App は CSP を守らなければならない– https://developer.mozilla.org/en-US/Apps
/CSP• インラインスクリプトの禁止• eval() の禁止 等
• アプリのバリデータでチェックできる– https://marketplace.firefox.com/develop
ers/validator
![Page 32: FirefoxOS勉強会#7 カメラアプリの作り方](https://reader036.vdocuments.site/reader036/viewer/2022062303/5560b2f9d8b42af43b8b478d/html5/thumbnails/32.jpg)
アプリのリジェクト• レビューをメールでくれる– 何が駄目なのか教えてくれる
• 直接レビュワーとやりとり可能
![Page 33: FirefoxOS勉強会#7 カメラアプリの作り方](https://reader036.vdocuments.site/reader036/viewer/2022062303/5560b2f9d8b42af43b8b478d/html5/thumbnails/33.jpg)
アプリの運用• Firefox OS は南米でのシェア率が高い– 例 : ウルグアイでは 30% のシェア
• お問い合わせがスペイン語でくる• 他言語化するならまずスペイン語がおすすめ– 今なら l10n.js を使いましょう
![Page 34: FirefoxOS勉強会#7 カメラアプリの作り方](https://reader036.vdocuments.site/reader036/viewer/2022062303/5560b2f9d8b42af43b8b478d/html5/thumbnails/34.jpg)
ご清聴ありがとうございました。