SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Firefox OS搭載スマホ「Fx0」でつくろう! はじめてのFirefox OSアプリ開発(AD)

Firefox OSでCamera APIを利用したカメラアプリを作ろう ~カメラ関連APIの解説から実装、アプリの申請フローまで

Firefox OS搭載スマホ「Fx0」でつくろう! はじめてのFirefox OSアプリ開発 第2回

  • X ポスト
  • このエントリーをはてなブックマークに追加

 WebベースのOSであるFirefox OSでは、カメラなどのハードウェア関連APIが気軽に使えることも大きな魅力の一つです。本稿では、Firefox OS 2.0から利用できるCamera APIを利用した簡単なカメラアプリの作り方を、実際にソースコードを交えながら解説していきたいと思います。また、作ったアプリの申請フローやレビュープロセス、Camera APIの利用に必須であるFirefox OS 2.0搭載のスマートフォン「Fx0」の紹介もあわせて行います。

  • X ポスト
  • このエントリーをはてなブックマークに追加

 本稿で作成するカメラアプリのサンプルは、GitHubにて公開しています。

作成するサンプルアプリ

 本稿では、HTML5と、Firefox OSのCamera APIを利用して、簡単なエフェクトつきのカメラアプリを作成します。

 今回作成するカメラアプリは一画面のシンプルなアプリです。撮影ボタンのほか、左右の切替ボタンによって、様々なエフェクトを施した画像を撮影できます。下の画像は、アプリ上でエフェクトなし、エンボス加工、セピア風のエフェクトをそれぞれ表示したものです。

3つのエフェクトキャプチャ
3つのエフェクトキャプチャ

 カメラアプリの各機能はそれぞれ以下のAPIを利用します。

カメラアプリ実装に必要なAPI
機能 API名称 簡単な実装方針
カメラにアクセスする CameraManager CameraManager.getCamera() を利用し、カメラにアクセスします
カメラを操作する CameraControl CameraControlの各メソッドで、フォーカスや撮影画像の取得を制御します
カメラのデバイス情報を得る CameraCapabilities デバイスによって異なるカメラの情報はここから取得します
カメラの映像にエフェクトをつける CameraControl.effect CameraCapabilities.effectsで取得できるエフェクトを指定することで、セピアやエンボスなどの画像効果をつけます
撮影した写真をストレージに保存する DeviceStorage 撮影した写真は、デバイスの写真フォルダに格納します

Firefox OSのアプリの種類

 Firefox OSのアプリには、大きく分けて、Webから配信されるホスト型アプリと、デバイスにインストールされるパッケージ型アプリがあります。今回作成するカメラアプリはパッケージ型アプリです。

 パッケージ型アプリは、権限によってさらに以下の3種類に分かれ、利用できるAPIが異なります。詳しくは、ドキュメントのパッケージ型アプリのページをご覧ください。

特権アプリ(Privileged App)

 特権アプリは、特別なレビュープロセスを経てFirefox Marketplaceにより承認されたアプリです。アプリはFirefox Marketplaceに審査され、デジタル署名をされることで、デバイスの重要なAPIを利用することができるようになります。

認定アプリ(Certified App)

 認定アプリは、電話やシステム設定など、Firefox OS端末上の重要な機能に使用されるものです。APIをユーザの明示的な承認なく利用できますが、OEMあるいはキャリアによって端末ごとに承認される必要があり、ほとんどのアプリ開発者は認定アプリを配布することができません。

単純なパッケージ型アプリ(Plain Packaged App)

 単にひとつのZIPファイルにパッケージした通常のアプリです。特別な認証プロセスがない代わりに重要なAPIは利用できません。アプリをインストールした直後の状態で、アプリのリソースを全て端末上で利用可能にしておきたい場合に便利です。

 また、WebIDEでは以下のように、それぞれの権限に許可されたAPIのテーブルを確認することができます。デバイスを接続した状態で、右上のデバイス選択メニューから[Permissions Table]を選択します。

パーミッションテーブル
パーミッションテーブル

Firefox OSで利用できるカメラ関連API

 Firefox OSでカメラにアクセスするためのAPIには、以下の3種類があります。

Firefox OSでカメラにアクセスするためのAPI
API名 対応バージョン 必要権限
Web Activities v1.0.1以上 特権(Privileged)
Media Capture API v1.4以上 Web(Hosted)
Camera API v2.0以上 特権(Privileged)

 Web Activitiesは、Androidでいうインテントのような機能です。アプリから他のアプリを呼び出すことができる機能ですが、OS標準のカメラなど、Web Activitiesに対応したカメラアプリを呼び出し、結果の画像を取得することができます。他のカメラアプリを呼び出すだけなので、カメラUIの変更はできません。

 Media Capture APIは、W3Cで標準化が進められているAPIです(2015年2月の現時点では、草案の段階です)。getUserMediaを使うことで、アプリ内でカメラの映像ソースにアクセスすることができます。標準APIとあって、ブラウザでも利用することができるので、触れたことのある方も多いかもしれません。また、このAPIは特権の権限が必要ないため、ホスト型のアプリでも利用できます。

 Camera APIは、カメラを管理するためのFirefox OS独自のAPIです。Firefox OS 2.0以前は、認定アプリでのみ利用できるAPIでしたが、2.0から特権アプリでも利用できるようになりました。カメラの映像を取得するだけでなく、ズームやフォーカスを指定したり、フラッシュを利用したりといった豊富な機能を利用することができます。

次のページ
プロジェクトの作成

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Firefox OS搭載スマホ「Fx0」でつくろう! はじめてのFirefox OSアプリ開発連載記事一覧

もっと読む

この記事の著者

鈴木 和幸(スズキ カズユキ)

 1991年岐阜生まれ。株式会社リクルートホールディングス メディアテクノロジーラボ(MTL)所属。社内スタートアップでリーンな顧客開発・製品開発を実践中。現在はエンジニア向けメディアPOSTDを運営。個人でもAndroid版Firefoxのローカライズなどの活動に従事。 Twitter:@kechol Web:kechol.net

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/8532 2015/03/13 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング