Firefox OS でカメラアプリ開発

Firefox OS 勉強会 #7@Kechol

自己紹介

鈴木和幸@Kechol

リクルートメディアテクノロジーラボ

Web エンジニア ( フロントエンド中心 )Firefox L10N コントリビュータ

　　 cameran

蜷川実花監修のカメラアプリ

アプリは iOS,Android 合わせ合計 500 万ダウンロードを記録

cameran on FirefoxOS

2014/02 リリース約３万 DL(200~300DL/day)

開発期間は２週間弱

cameran on FirefoxOS

カメラを起動して撮るだけの簡単なアプリ

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

前提知識おさらい

FirefoxOS アプリ• HTML, CSS, JS で書ける

• アプリには Hosted, Privileged, Certified の３種類がある–カメラや外部通信は Privileged App

• アプリのブラウザエンジンは gecko

アプリ開発ことはじめ• 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

カメラアプリの作り方

カメラアプリの基本

撮る

↓

加工する

カメラアプリの基本

getUserMedia()

↓

<canvas>

FirefoxOS でのカメラアプリの基本

getUserMedia()MozActivity

↓

<canvas>

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

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

• FirefoxOS >= 2.0–MozCamera が利用可能

MozCamera での画像取得

フィルタ• 元画像への加工– contrast, brightness

• フィルタ画像の合成 (1~4 枚 )– ブレンドモードを指定して合成

画像の加工• 今回は画像の加工に canvas 2D を利用

• 利用ライブラリ– https://github.com/jseidelin/pixastic

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

• glfx.js(WebGL)– https://github.com/evanw/glfx.js

フィルタ： Shower

→

フィルタ画像 – 以下の四枚を順番に合成

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

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

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

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

その他細かいこと

利用したライブラリ• require.js• pixastic

• No jQuery– なくても DOM の操作には支障ない

• No MV* Framework– なくても十分なアプリの規模だった– 大きくなってきたら必須な感– ただパフォーマンスには注意

画面遷移と UI

• 画面遷移は window.onhashchange を利用

• Firefox OS 標準の UI と同じ遷移アニメーションにしたかったがやりにくかったので諦めた– Backbone や Angular と相性の良い実装があ

れば教えてください

アプリ申請〜運用まで

Content Security Policy

• Privileged App は CSP を守らなければならない– https://developer.mozilla.org/en-US/Apps

/CSP• インラインスクリプトの禁止• eval() の禁止　等

• アプリのバリデータでチェックできる– https://marketplace.firefox.com/develop

ers/validator

アプリのリジェクト• レビューをメールでくれる– 何が駄目なのか教えてくれる

• 直接レビュワーとやりとり可能

アプリの運用• Firefox OS は南米でのシェア率が高い– 例 : ウルグアイでは 30% のシェア

• お問い合わせがスペイン語でくる• 他言語化するならまずスペイン語がおすすめ– 今なら l10n.js を使いましょう

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