Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

FirefoxOS勉強会#7 カメラアプリの作り方

3,084 views

Published on

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

  • Be the first to comment

FirefoxOS勉強会#7 カメラアプリの作り方

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

×