Upload
kazuyuki-suzuki
View
2.116
Download
0
Embed Size (px)
DESCRIPTION
FirefoxOS勉強会#7での発表資料です。
Citation preview
Firefox OS でカメラアプリ開発
Firefox OS 勉強会 #7@Kechol
自己紹介
鈴木和幸@Kechol
リクルートメディアテクノロジーラボ
Web エンジニア ( フロントエンド中心 )Firefox L10N コントリビュータ
cameran
蜷川実花監修のカメラアプリ
アプリは iOS,Android 合わせ合計 500 万ダウンロードを記録
cameran on FirefoxOS
2014/02 リリース約3万 DL(200~300DL/day)
開発期間は2週間弱
cameran on FirefoxOS
カメラを起動して撮るだけの簡単なアプリ
アジェンダ• 前提知識おさらい• カメラアプリの作り方• アプリ開発上の tips
前提知識おさらい
FirefoxOS アプリ• HTML, CSS, JS で書ける
• アプリには Hosted, Privileged, Certified の3種類がある–カメラや外部通信は 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 を使いましょう
ご清聴ありがとうございました。