FirefoxOS勉強会#7での発表資料です。

1. Firefox OSでカメラアプリ開発
Firefox OS 勉強会 #7
@Kechol

2. 自己紹介
鈴木和幸
@Kechol
リクルート
メディアテクノロジーラボ
Webエンジニア(フロントエンド中心)
Firefox L10Nコントリビュータ

3. cameran
蜷川実花監修のカメラアプリ
アプリはiOS,Android合わせ合
計500万ダウンロードを記録

4. cameran on FirefoxOS
2014/02 リリース
約３万DL(200~300DL/day)
開発期間は２週間弱

5. cameran on FirefoxOS
カメラを起動して撮るだけの簡単なアプリ

6. アジェンダ
• 前提知識おさらい
• カメラアプリの作り方
• アプリ開発上のtips

7. 前提知識おさらい

8. FirefoxOSアプリ
• HTML, CSS, JSで書ける
• アプリにはHosted, Privileged, Certifiedの
３種類がある
–カメラや外部通信はPrivileged App
• アプリのブラウザエンジンはgecko

9. アプリ開発ことはじめ
• Firefox Nightlyがあれば始められる
– App Manager / WebIDE
• いろんな Boilerplate が落ちています
– https://github.com/mdn/mdn-app-template
– https://github.com/buildingfirefoxos/Building-
Blocks
– https://github.com/robnyman/Firefox-OS-
Boilerplate-App

10. カメラアプリの作り方

11. カメラアプリの基本
撮る
↓
加工する

12. カメラアプリの基本
getUserMedia()
↓
<canvas>

13. FirefoxOSでのカメラアプリの基本
getUserMedia()
MozActivity
↓
<canvas>

16. カメラ
• name: “pick” で MozActivity を初期化
• 画像データは this.result.blob で取得

17. 次のリリース
• FirefoxOS >= 1.4
– getUserMedia() でビデオキャプチャが可能
• FirefoxOS >= 2.0
– MozCamera が利用可能

18. MozCameraでの画像取得

19. フィルタ
• 元画像への加工
– contrast, brightness
• フィルタ画像の合成(1~4枚)
– ブレンドモードを指定して合成

20. 画像の加工
• 今回は画像の加工に canvas 2D を利用
• 利用ライブラリ
– https://github.com/jseidelin/pixastic

21. その他の画像処理ライブラリ
• pixi.js(WebGL)
– http://www.pixijs.com/
• glfx.js(WebGL)
– https://github.com/evanw/glfx.js

22. フィルタ：Shower
→
フィルタ画像 – 以下の四枚を順番に合成

23. 画像の保存
• デバイスストレージを利用
– Navigator.getDeviceStorage()
– device-storage のパーミッションが必要

24. 画像のシェア
• name: “share” で MozActivity を利用

25. フィルタ処理の問題
• 普通に処理していると遅い
– FirefoxOSの端末は非力
• ZTE Open: CPU 1GHz, メモリ 256MB

26. フィルタの高速化
• 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/webraw
-asmjs/

27. その他細かいこと

28. 利用したライブラリ
• require.js
• pixastic
• No jQuery
– なくてもDOMの操作には支障ない
• No MV* Framework
– なくても十分なアプリの規模だった
– 大きくなってきたら必須な感
– ただパフォーマンスには注意

29. 画面遷移とUI
• 画面遷移は window.onhashchange を利用
• Firefox OS標準のUIと同じ遷移アニメー
ションにしたかったがやりにくかったの
で諦めた
– BackboneやAngularと相性の良い実装があれ
ば教えてください

30. アプリ申請〜運用まで

31. Content Security Policy
• Privileged App は CSP を守らなければな
らない
– https://developer.mozilla.org/en-US/Apps/CSP
• インラインスクリプトの禁止
• eval() の禁止 等
• アプリのバリデータでチェックできる
– https://marketplace.firefox.com/developers/val
idator

32. アプリのリジェクト
• レビューをメールでくれる
– 何が駄目なのか教えてくれる
• 直接レビュワーとやりとり可能

33. アプリの運用
• Firefox OSは南米でのシェア率が高い
– 例:ウルグアイでは30%のシェア
• お問い合わせがスペイン語でくる
• 他言語化するならまずスペイン語がおすすめ
– 今なら l10n.js を使いましょう

34. ご清聴ありがとうございました。