Submit Search
Upload
FirefoxOS勉強会#7 カメラアプリの作り方
•
Download as PPTX, PDF
•
4 likes
•
3,607 views
Kazuyuki Suzuki
Follow
FirefoxOS勉強会#7での発表資料です。
Read less
Read more
Report
Share
Report
Share
1 of 34
Download now
Recommended
Aneについて
Aneについて
Hidekazu Morikawa
SpeechPlatform with Kinect
SpeechPlatform with Kinect
Yoshinori Hayashi
SpeechPlatformで音声合成、音声認識するための資料です。
Kmcn demo
Kmcn demo
Yoshinori Hayashi
KMCNキックオフミーティングでのスライド
Androidエンジニアが語るwwdc2014
Androidエンジニアが語るwwdc2014
Shinobu Okano
Androidエンジニアが語るwwdc2014
Salesforceモバイル案件で経験した3つの難しい要件とその対応方法
Salesforceモバイル案件で経験した3つの難しい要件とその対応方法
Masato Setoyama
Salesforce1のイベントで発表につかう(つかった)資料
Semantic markup with icon font
Semantic markup with icon font
Erika Kitada
Semantic markup with icon font
Web is the OS (KDDI mugen Labo)
Web is the OS (KDDI mugen Labo)
dynamis
KDDI ∞ Labo open MEETing Vol.17 で使用したスライド (に少しページを追加したもの) https://tixee.tv/event/detail/eventId/1158
Yahoo vs ClassMethod_battle5_iBeacon
Yahoo vs ClassMethod_battle5_iBeacon
Yasuhisa Arakawa
2014/02/25に行われたヤフーVSクラスメソッドの発表資料です。 「iBeaconアプリケーションの運用」を重点に発表しました。
Recommended
Aneについて
Aneについて
Hidekazu Morikawa
SpeechPlatform with Kinect
SpeechPlatform with Kinect
Yoshinori Hayashi
SpeechPlatformで音声合成、音声認識するための資料です。
Kmcn demo
Kmcn demo
Yoshinori Hayashi
KMCNキックオフミーティングでのスライド
Androidエンジニアが語るwwdc2014
Androidエンジニアが語るwwdc2014
Shinobu Okano
Androidエンジニアが語るwwdc2014
Salesforceモバイル案件で経験した3つの難しい要件とその対応方法
Salesforceモバイル案件で経験した3つの難しい要件とその対応方法
Masato Setoyama
Salesforce1のイベントで発表につかう(つかった)資料
Semantic markup with icon font
Semantic markup with icon font
Erika Kitada
Semantic markup with icon font
Web is the OS (KDDI mugen Labo)
Web is the OS (KDDI mugen Labo)
dynamis
KDDI ∞ Labo open MEETing Vol.17 で使用したスライド (に少しページを追加したもの) https://tixee.tv/event/detail/eventId/1158
Yahoo vs ClassMethod_battle5_iBeacon
Yahoo vs ClassMethod_battle5_iBeacon
Yasuhisa Arakawa
2014/02/25に行われたヤフーVSクラスメソッドの発表資料です。 「iBeaconアプリケーションの運用」を重点に発表しました。
Hardware meetup
Hardware meetup
Keisuke Tanaka
Sapporo #hardware Meetup の発表資料
Firefox OS 2012 年まとめ
Firefox OS 2012 年まとめ
Honma Masashi
学食総合予約システム「CafExpress」
学食総合予約システム「CafExpress」
ssuser720d491
2021 後期制作発表 2021 DigitalWorks
Voice over20180722
Voice over20180722
Tsuyoshi Hyuga
iOS VoiceOver
Bitcoin ウォレットアプリの制作
Bitcoin ウォレットアプリの制作
ssuser720d491
2021 前期制作発表
US進出でのAndroid開発inメルカリ Mercari US App Development
US進出でのAndroid開発inメルカリ Mercari US App Development
Tomoaki Imai
メルカリUS進出において、Android開発ではまったこと等をまとめました。
Android学ぶを君へ。生き抜くためのナレッジ共有
Android学ぶを君へ。生き抜くためのナレッジ共有
Shinobu Okano
DroidKaigi Android学ぶを君へ。生き抜くためのナレッジ共有 Note : https://github.com/operando/DroidKaigi
Hw meetup 20150304
Hw meetup 20150304
Hiraku Komuro
HW Meetup 20150304
Device for Android
Device for Android
dynamis
マルレク特別編+日本Androidの会6月定例会+BLEガジェット勉強会 で試用したスライド http://kokucheese.com/event/index/178128/
Androidアプリケーション開発入門
Androidアプリケーション開発入門
OESF Education
OESF公認 Androidアプリケーション開発入門 公式トレーニングテキスト (日本語) Contributed by: 【作成】ウルシステムズ株式会社 【修正】株式会社リーディング・エッジ社 【ご注意】 本テキストは、Creative Commons License BY-NC-SA 4.0のもとで提供されます。OESF会員またはコンソーシアムメンバーでない場合、本編の改変の有無にかかわらず、いかなる形態でも商用目的での利用は禁止されています。
What I learned about communication in Sanfrancisco
What I learned about communication in Sanfrancisco
Tomoaki Imai
This slide explains what I learned about communication in Sanfrancisco.
2015年度研究室プレ卒研用Android講座1
2015年度研究室プレ卒研用Android講座1
Hokuto Tateyama
Android App
Androidとセキュリティ ~ユーザーを脅威から守る~
Androidとセキュリティ ~ユーザーを脅威から守る~
Naoya Niwa
2010/09/25に大阪、堂島ビルヂングで行われた「日本Androidの会 関西支部&スマートフォン勉強会@関西 共同開催勉強会」で行われたセッションの資料です
C#でiPhoneアプリ開発 with MonoTouch
C#でiPhoneアプリ開発 with MonoTouch
Shin Ise
Web RTCええやん
Web RTCええやん
Daisuke Imiya
Web RTCにふれ合ってみた時の資料です
iPhoneアプリ開発を楽に楽しくするサイトまとめ
iPhoneアプリ開発を楽に楽しくするサイトまとめ
Hiramatsu Ryosuke
デザイナー目線で Firefox OS を変えよう
デザイナー目線で Firefox OS を変えよう
Honma Masashi
ハイブリッドアプリについて-PhoneGapアプリ制作の入り口-
ハイブリッドアプリについて-PhoneGapアプリ制作の入り口-
Yossy Taka
PhoneGapを利用したハイブリットアプリについて、解説しています
はじめる前に知っておきたいAndroidアプリ開発のポイント
はじめる前に知っておきたいAndroidアプリ開発のポイント
Shinobu Okano
schoo 2015/10/29 はじめる前に知っておきたいAndroidアプリ開発のポイント https://schoo.jp/class/2898 リンクまとめ https://github.com/operando/Notes/blob/master/schoo_2015_10_29/README.md
20150117 gunmaweb Firefox OSの紹介
20150117 gunmaweb Firefox OSの紹介
Akihiko Kigure
Firefox OS の紹介です
Firefox OS 勉強会 名古屋2nd 「便利な便利な開発ツール」
Firefox OS 勉強会 名古屋2nd 「便利な便利な開発ツール」
Noritada Shimizu
Firefox OSの何が嬉しいか
Firefox OSの何が嬉しいか
Takao Sumitomo
神戸ITフェスティバルの発表資料です。
More Related Content
What's hot
Hardware meetup
Hardware meetup
Keisuke Tanaka
Sapporo #hardware Meetup の発表資料
Firefox OS 2012 年まとめ
Firefox OS 2012 年まとめ
Honma Masashi
学食総合予約システム「CafExpress」
学食総合予約システム「CafExpress」
ssuser720d491
2021 後期制作発表 2021 DigitalWorks
Voice over20180722
Voice over20180722
Tsuyoshi Hyuga
iOS VoiceOver
Bitcoin ウォレットアプリの制作
Bitcoin ウォレットアプリの制作
ssuser720d491
2021 前期制作発表
US進出でのAndroid開発inメルカリ Mercari US App Development
US進出でのAndroid開発inメルカリ Mercari US App Development
Tomoaki Imai
メルカリUS進出において、Android開発ではまったこと等をまとめました。
Android学ぶを君へ。生き抜くためのナレッジ共有
Android学ぶを君へ。生き抜くためのナレッジ共有
Shinobu Okano
DroidKaigi Android学ぶを君へ。生き抜くためのナレッジ共有 Note : https://github.com/operando/DroidKaigi
Hw meetup 20150304
Hw meetup 20150304
Hiraku Komuro
HW Meetup 20150304
Device for Android
Device for Android
dynamis
マルレク特別編+日本Androidの会6月定例会+BLEガジェット勉強会 で試用したスライド http://kokucheese.com/event/index/178128/
Androidアプリケーション開発入門
Androidアプリケーション開発入門
OESF Education
OESF公認 Androidアプリケーション開発入門 公式トレーニングテキスト (日本語) Contributed by: 【作成】ウルシステムズ株式会社 【修正】株式会社リーディング・エッジ社 【ご注意】 本テキストは、Creative Commons License BY-NC-SA 4.0のもとで提供されます。OESF会員またはコンソーシアムメンバーでない場合、本編の改変の有無にかかわらず、いかなる形態でも商用目的での利用は禁止されています。
What I learned about communication in Sanfrancisco
What I learned about communication in Sanfrancisco
Tomoaki Imai
This slide explains what I learned about communication in Sanfrancisco.
2015年度研究室プレ卒研用Android講座1
2015年度研究室プレ卒研用Android講座1
Hokuto Tateyama
Android App
Androidとセキュリティ ~ユーザーを脅威から守る~
Androidとセキュリティ ~ユーザーを脅威から守る~
Naoya Niwa
2010/09/25に大阪、堂島ビルヂングで行われた「日本Androidの会 関西支部&スマートフォン勉強会@関西 共同開催勉強会」で行われたセッションの資料です
C#でiPhoneアプリ開発 with MonoTouch
C#でiPhoneアプリ開発 with MonoTouch
Shin Ise
Web RTCええやん
Web RTCええやん
Daisuke Imiya
Web RTCにふれ合ってみた時の資料です
iPhoneアプリ開発を楽に楽しくするサイトまとめ
iPhoneアプリ開発を楽に楽しくするサイトまとめ
Hiramatsu Ryosuke
デザイナー目線で Firefox OS を変えよう
デザイナー目線で Firefox OS を変えよう
Honma Masashi
ハイブリッドアプリについて-PhoneGapアプリ制作の入り口-
ハイブリッドアプリについて-PhoneGapアプリ制作の入り口-
Yossy Taka
PhoneGapを利用したハイブリットアプリについて、解説しています
はじめる前に知っておきたいAndroidアプリ開発のポイント
はじめる前に知っておきたいAndroidアプリ開発のポイント
Shinobu Okano
schoo 2015/10/29 はじめる前に知っておきたいAndroidアプリ開発のポイント https://schoo.jp/class/2898 リンクまとめ https://github.com/operando/Notes/blob/master/schoo_2015_10_29/README.md
What's hot
(19)
Hardware meetup
Hardware meetup
Firefox OS 2012 年まとめ
Firefox OS 2012 年まとめ
学食総合予約システム「CafExpress」
学食総合予約システム「CafExpress」
Voice over20180722
Voice over20180722
Bitcoin ウォレットアプリの制作
Bitcoin ウォレットアプリの制作
US進出でのAndroid開発inメルカリ Mercari US App Development
US進出でのAndroid開発inメルカリ Mercari US App Development
Android学ぶを君へ。生き抜くためのナレッジ共有
Android学ぶを君へ。生き抜くためのナレッジ共有
Hw meetup 20150304
Hw meetup 20150304
Device for Android
Device for Android
Androidアプリケーション開発入門
Androidアプリケーション開発入門
What I learned about communication in Sanfrancisco
What I learned about communication in Sanfrancisco
2015年度研究室プレ卒研用Android講座1
2015年度研究室プレ卒研用Android講座1
Androidとセキュリティ ~ユーザーを脅威から守る~
Androidとセキュリティ ~ユーザーを脅威から守る~
C#でiPhoneアプリ開発 with MonoTouch
C#でiPhoneアプリ開発 with MonoTouch
Web RTCええやん
Web RTCええやん
iPhoneアプリ開発を楽に楽しくするサイトまとめ
iPhoneアプリ開発を楽に楽しくするサイトまとめ
デザイナー目線で Firefox OS を変えよう
デザイナー目線で Firefox OS を変えよう
ハイブリッドアプリについて-PhoneGapアプリ制作の入り口-
ハイブリッドアプリについて-PhoneGapアプリ制作の入り口-
はじめる前に知っておきたいAndroidアプリ開発のポイント
はじめる前に知っておきたいAndroidアプリ開発のポイント
Similar to FirefoxOS勉強会#7 カメラアプリの作り方
20150117 gunmaweb Firefox OSの紹介
20150117 gunmaweb Firefox OSの紹介
Akihiko Kigure
Firefox OS の紹介です
Firefox OS 勉強会 名古屋2nd 「便利な便利な開発ツール」
Firefox OS 勉強会 名古屋2nd 「便利な便利な開発ツール」
Noritada Shimizu
Firefox OSの何が嬉しいか
Firefox OSの何が嬉しいか
Takao Sumitomo
神戸ITフェスティバルの発表資料です。
関東Firefox OS勉強会6th「Firefox OS」
関東Firefox OS勉強会6th「Firefox OS」
Noritada Shimizu
関東Firefox OS 6thでお話しした、Firefox OSの概要です。アプリ開発部分を中心に、Firefox OSの状況について概観できます。
20150118 firefoxos-handson-helloworld
20150118 firefoxos-handson-helloworld
Noritada Shimizu
Firefox OS アプリ作成のためのハンズオン資料です。環境構築からHelloWorldまでをカバーします。
20141018 osc tokyo_fall_firefox osってなぁに?
20141018 osc tokyo_fall_firefox osってなぁに?
Masami Yabushita
神戸ITフェスティバル2013「Firefox開発ツールコレクション」
神戸ITフェスティバル2013「Firefox開発ツールコレクション」
Noritada Shimizu
20120316 designerworkshoppublished
20120316 designerworkshoppublished
Yoichiro Sakurai
Firefox OS App Manager
Firefox OS App Manager
dynamis
関東Firefox OS勉強会 4th で使用したスライド http://atnd.org/events/43344
20140629 firefoxos-devenv
20140629 firefoxos-devenv
Noritada Shimizu
Firefox os hackathon
Firefox os hackathon
dynamis
Firefox OS & Windows 8 Hackathon で使用したスライド
Firefox OS 1.0 Application Development
Firefox OS 1.0 Application Development
dynamis
Web Platform 勉強会 1307 で使用したスライド http://atnd.org/events/40801
Try Firefox OS
Try Firefox OS
dynamis
KOF 2013 で使用したスライド https://k-of.jp/2013/
20120413 nestakabaneworkshop
20120413 nestakabaneworkshop
Yoichiro Sakurai
Softlayer勉強会#2
Softlayer勉強会#2
Shuichi Yukimoto
API関連の資料です
Firefox os app dev
Firefox os app dev
dynamis
関東 Firefox OS 勉強会 1st で使用したスライド
できる!スマホアプリ:Webからはじまるアプリ
できる!スマホアプリ:Webからはじまるアプリ
Masami Yabushita
Firefox OSアプリの概要@gunma.web
Firefox OSアプリの概要@gunma.web
Hayato Hiratori
Firefox OSアプリの概要@gunma.web 2015/3/28 https://gunmaweb.doorkeeper.jp/events/21025
Firefox OSアーキテクチャクイックツアー - FxOSコードリーディングミートアップ#21向け追記版
Firefox OSアーキテクチャクイックツアー - FxOSコードリーディングミートアップ#21向け追記版
Masami Yabushita
FxOSコードリーディングミートアップ#21用資料
Firefox OSアプリ開発・公開経験談
Firefox OSアプリ開発・公開経験談
Kenichi Kambara
関東Firefox OS勉強会 2ndの資料です。
Similar to FirefoxOS勉強会#7 カメラアプリの作り方
(20)
20150117 gunmaweb Firefox OSの紹介
20150117 gunmaweb Firefox OSの紹介
Firefox OS 勉強会 名古屋2nd 「便利な便利な開発ツール」
Firefox OS 勉強会 名古屋2nd 「便利な便利な開発ツール」
Firefox OSの何が嬉しいか
Firefox OSの何が嬉しいか
関東Firefox OS勉強会6th「Firefox OS」
関東Firefox OS勉強会6th「Firefox OS」
20150118 firefoxos-handson-helloworld
20150118 firefoxos-handson-helloworld
20141018 osc tokyo_fall_firefox osってなぁに?
20141018 osc tokyo_fall_firefox osってなぁに?
神戸ITフェスティバル2013「Firefox開発ツールコレクション」
神戸ITフェスティバル2013「Firefox開発ツールコレクション」
20120316 designerworkshoppublished
20120316 designerworkshoppublished
Firefox OS App Manager
Firefox OS App Manager
20140629 firefoxos-devenv
20140629 firefoxos-devenv
Firefox os hackathon
Firefox os hackathon
Firefox OS 1.0 Application Development
Firefox OS 1.0 Application Development
Try Firefox OS
Try Firefox OS
20120413 nestakabaneworkshop
20120413 nestakabaneworkshop
Softlayer勉強会#2
Softlayer勉強会#2
Firefox os app dev
Firefox os app dev
できる!スマホアプリ:Webからはじまるアプリ
できる!スマホアプリ:Webからはじまるアプリ
Firefox OSアプリの概要@gunma.web
Firefox OSアプリの概要@gunma.web
Firefox OSアーキテクチャクイックツアー - FxOSコードリーディングミートアップ#21向け追記版
Firefox OSアーキテクチャクイックツアー - FxOSコードリーディングミートアップ#21向け追記版
Firefox OSアプリ開発・公開経験談
Firefox OSアプリ開発・公開経験談
FirefoxOS勉強会#7 カメラアプリの作り方
1.
Firefox OSでカメラアプリ開発 Firefox OS
勉強会 #7 @Kechol
2.
自己紹介 鈴木和幸 @Kechol リクルート メディアテクノロジーラボ Webエンジニア(フロントエンド中心) Firefox L10Nコントリビュータ
3.
cameran 蜷川実花監修のカメラアプリ アプリはiOS,Android合わせ合 計500万ダウンロードを記録
4.
cameran on FirefoxOS 2014/02
リリース 約3万DL(200~300DL/day) 開発期間は2週間弱
5.
cameran on FirefoxOS カメラを起動して撮るだけの簡単なアプリ
6.
アジェンダ • 前提知識おさらい • カメラアプリの作り方 •
アプリ開発上のtips
7.
前提知識おさらい
8.
FirefoxOSアプリ • HTML, CSS,
JSで書ける • アプリにはHosted, Privileged, Certifiedの 3種類がある –カメラや外部通信はPrivileged App • アプリのブラウザエンジンはgecko
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.
カメラアプリの作り方
11.
カメラアプリの基本 撮る ↓ 加工する
12.
カメラアプリの基本 getUserMedia() ↓ <canvas>
13.
FirefoxOSでのカメラアプリの基本 getUserMedia() MozActivity ↓ <canvas>
14.
15.
16.
カメラ • name: “pick”
で MozActivity を初期化 • 画像データは this.result.blob で取得
17.
次のリリース • FirefoxOS >=
1.4 – getUserMedia() でビデオキャプチャが可能 • FirefoxOS >= 2.0 – MozCamera が利用可能
18.
MozCameraでの画像取得
19.
フィルタ • 元画像への加工 – contrast,
brightness • フィルタ画像の合成(1~4枚) – ブレンドモードを指定して合成
20.
画像の加工 • 今回は画像の加工に canvas
2D を利用 • 利用ライブラリ – https://github.com/jseidelin/pixastic
21.
その他の画像処理ライブラリ • pixi.js(WebGL) – http://www.pixijs.com/ •
glfx.js(WebGL) – https://github.com/evanw/glfx.js
22.
フィルタ:Shower → フィルタ画像 – 以下の四枚を順番に合成
23.
画像の保存 • デバイスストレージを利用 – Navigator.getDeviceStorage() –
device-storage のパーミッションが必要
24.
画像のシェア • name: “share”
で MozActivity を利用
25.
フィルタ処理の問題 • 普通に処理していると遅い – FirefoxOSの端末は非力 •
ZTE Open: CPU 1GHz, メモリ 256MB
26.
フィルタの高速化 • 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/
27.
その他細かいこと
28.
利用したライブラリ • require.js • pixastic •
No jQuery – なくてもDOMの操作には支障ない • No MV* Framework – なくても十分なアプリの規模だった – 大きくなってきたら必須な感 – ただパフォーマンスには注意
29.
画面遷移とUI • 画面遷移は window.onhashchange
を利用 • Firefox OS標準のUIと同じ遷移アニメー ションにしたかったがやりにくかったの で諦めた – BackboneやAngularと相性の良い実装があれ ば教えてください
30.
アプリ申請〜運用まで
31.
Content Security Policy •
Privileged App は CSP を守らなければな らない – https://developer.mozilla.org/en-US/Apps/CSP • インラインスクリプトの禁止 • eval() の禁止 等 • アプリのバリデータでチェックできる – https://marketplace.firefox.com/developers/val idator
32.
アプリのリジェクト • レビューをメールでくれる – 何が駄目なのか教えてくれる •
直接レビュワーとやりとり可能
33.
アプリの運用 • Firefox OSは南米でのシェア率が高い –
例:ウルグアイでは30%のシェア • お問い合わせがスペイン語でくる • 他言語化するならまずスペイン語がおすすめ – 今なら l10n.js を使いましょう
34.
ご清聴ありがとうございました。
Editor's Notes
と、思うじゃないですか
Download now