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-t...
カメラアプリの作り方
カメラアプリの基本
撮る
↓
加工する
カメラアプリの基本
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-impro...
その他細かいこと
利用したライブラリ
• 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
• インラインスクリプトの禁止...
アプリのリジェクト
• レビューをメールでくれる
– 何が駄目なのか教えてくれる
• 直接レビュワーとやりとり可能
アプリの運用
• Firefox OSは南米でのシェア率が高い
– 例:ウルグアイでは30%のシェア
• お問い合わせがスペイン語でくる
• 他言語化するならまずスペイン語がおすすめ
– 今なら l10n.js を使いましょう
ご清聴ありがとうございました。
FirefoxOS勉強会#7 カメラアプリの作り方
FirefoxOS勉強会#7 カメラアプリの作り方
Upcoming SlideShare
Loading in …5
×

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

2,962 views

Published on

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

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,962
On SlideShare
0
From Embeds
0
Number of Embeds
1,116
Actions
Shares
0
Downloads
10
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • と、思うじゃないですか
  • 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. ご清聴ありがとうございました。

    ×