Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
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 カメラアプリの作り方
Prochain SlideShare
Chargement dans…5
×

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

3 172 vues

Publié le

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

  • DOWNLOAD THI5 BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

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. ご清聴ありがとうございました。

×