SHOEISHA iD

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

DeveloperZine(デベロッパージン)- エンジニアの意思決定を支える技術情報メディア ProductZine

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

Apache Cordovaで本格スマホアプリに挑戦しよう

カメラとアルバムから写真データを取得するプラグインを使う

Apache Cordovaで本格スマホアプリに挑戦しよう 第10回

カメラ・アルバムにアクセスするためのプラグイン

 続いて、カメラとアルバムにアクセスするためのプラグインを紹介します。

インストール方法

 インストールするプラグインは、「cordova-plugin-camera」です。インストールはリスト4のように行います。

リスト4 プラグインのインストール
$cordova plugin add cordova-plugin-camera

プラグインの動作概要

 このプラグインは図1のようにカメラもしくはアルバムからデータ取得要求をするとそれぞれ、別のアプリもしくは画面が起動します。

 従って、起動された新しい画面での操作についてはCordova側からは制御ができません。それぞれの画面上で操作が完了し、カメラであれば撮られた写真もしくはビデオ、アルバムであれば選択された写真もしくはビデオファイルがCordova側のJavaScriptに戻されるという動作の流れになります。既存のファイルをJavaScript側からユーザーの操作なしに取得することはできません。このような処理の流れはHTMLでいうINPUT(type=file)要素での制限に似ているので、そのような利用シーンを想定するとわかりやすいと思います。

図1 Cameraプラグインでの動作の流れ
図1 Cameraプラグインでの動作の流れ

プラグインの使い方

 このプラグインは先ほど紹介したようにカメラを要求する場合と写真アルバムへのアクセスを要求する必要がありますが、どちらの場合でもリスト5のgetPictureメソッドを使います。

 そして、それらの動作や各種設定をまとめてパラメータとして指定します。

リスト5 getPictureメソッド
navigator.camera.getPicture(successCallback, errorCallback, options)

 表3で示すパラメータが指定できます。

表3 getPictureメソッドの引数
パラメータ名 説明
codesuccessCallback 取得に成功した時に呼ばれるコールバック関数。引数にはファイル名もしくはデータ(base64)が設定
errorCallback エラー時に呼ばれるコードバック関数。エラー時にはエラーメッセージが設定
options 動作の指定、制限などをパラメータで指定

 optionsで指定できるプロパティは表4のとおりです。多少設定できるパラメータが多くなっています。

表4 getPictureのoptionsに指定できるプロパティ
パラメータ名 説明
sourceType Camera.PictureSourceType 画像・映像の取得元を設定
destinationType Camera.DestinationType successCallbackで取得するデータ形式を指定
quality number 保存する画像のクオリティを0-100で指定
allowEdit Boolean 画像を取得する際にオリジナルファイルから指定した他のプロパティに応じた編集後のファイル・データを取得。Androidの場合、内部でtrueの時はIntent.ACTION_PICK、falseの場合にはIntent.ACTION_GET_CONTENTのIntentでアプリが起動される。また、iOSでは、UIImagePickerControllerが呼ばれる場合にallowsEditingの指定がされる。表5は、カメラを起動するのか、もしくはアルバムなどのギャラリーからファイルを選択するのかを指定する定数
encodingType Camera.EncodingType 取得する画像のエンコーディングをJPEGもしくはPNGから選択
targetWidth number 画像を取得する際の横サイズの指定(縦サイズも指定する必要あり)
targetHeight number 画像を取得する際の縦サイズの指定(横サイズも指定する必要あり)
mediaType Camera.MediaType 選択する際、写真か映像、もしくはその両方を指定。sourceTypeでカメラ以外を選択したときのみ有効
correctOrientation Boolean 写真の向きを調整して画像を取得
saveToPhotoAlbum Boolean 取得した画像をアルバムにも保存
cameraDirection Camera.Direction カメラが起動したときにデフォルトで前後どちらのカメラを使用するかを設定(AndoridはBACKのみ)
popoverOptions Camera.CameraPopoverOptions 選択する写真のプレビューなど、ポップオーバーの位置や矢印の向きを指定するためのパラメータ(iPadのみ)。詳しくはこちらを参照

 sourceTypeプロパティで指定できる定数は、表5のとおりです。

表5 取得メディア(Camera.PictureSourceType)の選択定数
変数名 説明
PHOTOLIBRARY アルバムから写真・画像を選択
CAMERA カメラを起動して写真、もしくはビデオデータを取得
SAVEDPHOTOALBUM カメラロールから画像・ビデオを選択。Androidの場合には、PHOTOLIBRARYと同じ

 destinationTypeプロパティで指定できる定数は、表6のとおりです。

表6 取得形式(Camera.DestinationType)の選択定数
変数名 説明
DATA_URL Base64でエンコードされた文字列形式でデータを取得
FILE_URI 「file://」形式もしくは、「content://(Androidのみ)」形式でデータのパスを取得
NATIVE_URI iOSの場合には、「asset-library://」形式でパスを取得。Andoirdの場合はFILE_URIと同じ

 encodingTypeプロパティで指定できる定数は、表7のとおりです。

表7 取得する画像フォーマットの指定(Camera.EncodingType)の選択定数
変数名 説明
JPEG JPEG形式でデータを取得
PNG PNG形式でデータを取得

 mediaTypeプロパティで指定できる定数は、表8のとおりです。

表8 取得するメディアの指定(Camera.MediaType)の選択定数
変数名 説明
PICTURE 画像形式のデータのみの指定
VIDEO ビデオ形式のデータのみの指定
ALLMEDIA すべてのメディアタイプを指定

 cameraDirectionプロパティで指定できる定数は、表9のとおりです。

表9 使用するカメラ(Camera.Direction)の選択定数
変数名 説明
BACK 背面カメラをデフォルトに指定
FRONT 前面カメラをデフォルトに指定

 また、iOSでgetPictureメソッドを使ってカメラで写真を撮り、FILE_URI形式でデータを取得する場合、テンポラリ領域にデータが残ってしまいます。そのため、リスト6のcleanupメソッドを使って後でデータをクリアする必要があります。

リスト6 cleanupメソッド
navigator.camera.cleanup(successCallback, errorCallback)

 cleanupメソッドでは表10のように成功した場合のコールバック関数と失敗した場合のコールバック関数が指定できます。

表10 cleanupメソッドの引数
変数名 説明
successCallback 処理に成功した時に呼ばれるコールバック関数
errorCallback エラー時に呼ばれるコードバック関数。エラー時にはエラーメッセージが設定される

 このcleanupメソッドはiOSでのみサポートされるため、Andorid端末から呼び出したときはエラーになりエラー用のコールバックが起動されます。内部では何も処理をしていないため特に悪影響はないと思われますが、iOS端末の場合でのみ起動するようにした方がよいでしょう。

次のページ
プラグインを利用したサンプルアプリ

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

Apache Cordovaで本格スマホアプリに挑戦しよう連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 小林 昌弘(コバヤシ マサヒロ)

WINGSプロジェクト について> 有限会社 WINGSプロジェクト が運営する、テクニカル執筆コミュニティ(代表 ...

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

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるLaravel実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

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

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

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/9780 2016/11/25 14:00

イベント

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

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

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

メールバックナンバー