もっと使おうPhoneGap/Cordova 2.0.0

第5回File APIを使ったiOS/Androidアプリケーション作成その2]

前回は、iOS/Androidのアプリケーション構造や、File APIのオブジェクトについて紹介しました。今回から、実際にFile APIを使ってファイルの操作を行っていきます。各オブジェクトや関連性をひととおり把握してからの方が、頭にしっくり入ってきやすいのではないかと思います。これまでの記事を参照しながら、実際にコーディングを行い、weinreでデバッグしてみてください。

File APIを使ったファイル操作

ここからは順を追ってFile APIでファイルを操作する方法を紹介していきます。解説の流れは次のとおりです。

  1. Camera APIを使って、TEMPORARYファイルシステムにファイルを作成
  2. 実際にファイルが作成されているかの確認手順
  3. TEMPORARYファイルシステムのファイル一覧を取得し、画面に表示
    ─requestFileSystemメソッド, FileSystemオブジェクト, DirectoryEntryオブジェクト, DirectoryReaderオブジェクト, FileEntryオブジェクト
  4. Camera APIで作成したファイルをPERSISTENTファイルシステムに移動
    ─resolveLocalFileSystemURIメソッド, moveToメソッド
  5. PERSISTENTファイルシステムに、画像ファイルの詳細データを格納したテキストファイルを作成
    ─Fileオブジェクト, getFileメソッド, createWriterメソッド, FileWriterオブジェクト

今回は上記のうち2.のファイルが作成できているかの確認までを紹介します。

iOSとAndroid、両OSでの手順を紹介していきます。ここでは実機を使用せず、Mac OS上のiOSシミュレータ、Windows上のAndroidエミュレータとPCに接続されているカメラデバイスを用いた手順を紹介します。

Camera APIを使って、TEMPORARYファイルシステムにファイルを作成(iOS)

iOSでCamera APIを用いて、TEMPORARYファイルシステムに画像ファイルを作成してみましょう。実機で確認する場合はカメラデバイスがそのまま利用できますが、iOSシミュレータの場合はカメラが使用できません。Camera APIを使用する際にオプションを指定し、アルバムから画像を取得するようにします。

テスト用のソースコードは次のとおりです。ソースコードはすべて、iOS/Android共通です。

リスト1 ソースコード:File API Test (1)
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width;" />
    <title>File API Test (1)</title>
  </head>
  <body>
    <div class="app">
      <h1>File API Test</h1>
      <input type="button" value="Camera API" id="camera">
    </div>
    <script type="text/javascript" src="cordova-2.0.0.js"></script>
    <script type="text/javascript">
    document.addEventListener('deviceready', init, false);
    function init() {
      document.getElementById('camera').addEventListener('click', camera, false);
    }

    function camera() {
      sourceType = Camera.PictureSourceType.PHOTOLIBRARY;
      if ( 'Android' === device.platform ) {
        sourceType = Camera.PictureSourceType.CAMERA;
      }
      navigator.camera.getPicture(success, fail, 
      {
        quality: 50, 
        destinationType: Camera.DestinationType.File_URI,
        sourceType: sourceType
      });
    }

    function success(uri) {
      alert(uri);
    } 

    function fail(message) {
      alert('カメラ操作に失敗しました。\n' + message);
    }
    </script>
  </body>
</html>

画面上のボタンをクリックすると、アルバムから画像を選択するUIが表示されます。画像を選択すると、TEMPORARYファイルシステムに選択した画像ファイルが作成され、ファイルパスがアラートで表示されます。Camera APIのnavigator.camera.getPictureメソッドで指定しているオプションは次の3種類です。

オプション内容
quality 画質を0から100の範囲の数値で指定します。iOSの場合、いくつかのデバイス上でメモリエラーを回避するために50以下の数値を設定しておきます
sourceType 画像のソースを指定します。nagivator.camera.PictureSourceTypeにて用意されている定数を指定することで、カメラデバイスを経由して写真を撮ったり、アルバムから画像を選択するUIを呼び出します。Androidの場合、PHOTOLIBRARYとSAVEDPHOTOALBUMで呼び出されるアルバムは同じものになります
destinationType コールバック関数に渡すデータの種類を指定します。navigator.camera.DestinationTypeにて用意されている定数を指定することで、BASE64エンコードされた文字列か、URI形式のファイルパスを渡すように設定します

なお、Camera APIを使ったアプリケーションの実装方法については、前連載の記事PhoneGapで手軽にiPhone/Androidアプリを作ろう:第4回 Camera API/HTML5 Canvas/プラグインを利用したカメラアプリを作ろうも一緒に参考にしていただければ幸いです。

前述のとおり、このサンプルアプリケーションでアルバムから画像を取得します。iOSシミュレータ内のアルバムはデフォルトで何も入っていない状態なので、あらかじめ画像を入れておきましょう。

iOSシミュレータのアルバムに画像を入れる手順は次のとおりです。

  1. iOSシミュレータを起動
  2. Mac OS側のFinderで、画像ファイルを選択
  3. iOSシミュレータに画像ファイルをドラッグ&ドロップ
  4. Safariで画像ファイルが開くので、長押しして画像をアルバムに保存

iOSシミュレータを起動し、ホーム画面を表示させます。この状態で、Mac OSのFinderで画像ファイルを選択し、iOSシミュレータにドラッグ&ドロップします。

iOSシミュレータでホーム画面を表示しておき、Mac OSのFinderから画像ファイルを選択し、iOSシミュレータにドラッグ&ドロップ
iOSシミュレータでホーム画面を表示しておき、Mac OSのFinderから画像ファイルを選択し、iOSシミュレータにドラッグ&ドロップ

iOSシミュレータ上のSafariで画像が表示されますので、長押ししてサブメニューを表示し、画像ファイルをアルバムに保存します。

Safariで画像が表示される
Safariで画像が表示される
画像を長押しして、アルバムに保存
画像を長押しして、アルバムに保存
アルバムに画像が保存されていることを確認
アルバムに画像が保存されていることを確認

それでは先ほどのアプリケーションを起動してみましょう。XcodeでRunボタンをクリックするか、ターミナル上でプロジェクトディレクトリ以下に配置されているdebugコマンドを実行してビルドし、アプリケーションを起動します。

アプリケーションを起動
アプリケーションを起動

ボタンを押して、アルバムから画像を選択すると、ファイルパスが表示されます。

TEMPORARYファイルシステム上に、画像ファイルが作成された
TEMPORARYファイルシステム上に、画像ファイルが作成された

Camera APIを使って、TEMPORARYファイルシステムにファイルを作成(Android)

Androidでは、あらかじめAVD Managerの設定でHardwareにオプションを指定しておくことで、Webカメラを経由してエミュレータ上でカメラを操作することができます。

おおまかな手順は次のとおりです。

  1. AVD Managerを起動
  2. カメラを使用できるようにしたいバーチャルデバイスを選択し、[Edit...]ボタンをクリック
  3. Hardwareの[New...]ボタンをクリック
  4. Propertyのプルダウンで[Configures camera facing back]を選択し、[OK]ボタンをクリック
  5. 追加されたプロパティのValueを選択し、[webcam0]を選択
  6. 同様の手順で[Configures camera facing front]を追加し、5で指定したwebcamを選択

AVD Managerを起動し、カメラを使用できるようにしたいバーチャルデバイスを選択し、[Edit...]ボタンをクリックします。

Virtural Deviceを選択し、[Edit...]ボタンをクリック
Virtural Deviceを選択し、[Edit...]ボタンをクリック

Hardwareの[New...]ボタンをクリックして、Propertyに[configures camera facing back]を指定して、[OK]ボタンをクリックして追加します。

Hardwareの[New...]ボタンをクリック
Hardwareの[New...]ボタンをクリック
[configures camera facing back]を選択し、[OK]ボタンをクリック
[configures camera facing back]を選択し、[OK]ボタンをクリック

追加したプロパティのValueにて、[webcam0]を選択します。使用できるウェブカメラの数に応じてプルダウンで選択できる値が増減するので注意してください。

configures camera facing backのValueを、webcam0に設定
configures camera facing backのValueを、webcam0に設定

同様の手順で、configures camera facing frontプロパティを追加し、Valueに同じ値を設定します。

configures camera facing frontプロパティを追加。Valueをwebcam0に設定
configures camera facing frontプロパティを追加。Valueをwebcam0に設定

2つのプロパティを追加後、[Edit AVD]ボタンをクリックして設定内容を保存します。

設定内容を保存し、確認のダイアログが表示される。カメラに関するオプションが新規で追加されていることを確認すること
設定内容を保存し、確認のダイアログが表示される。カメラに関するオプションが新規で追加されていることを確認すること

これでAndroidエミュレータでカメラが使用できるようになりました。もちろん、PhoneGapのCamera APIでも操作可能になっています。

Eclipseで先ほどのソースコードを転記し、ビルドを行ってAndroidエミュレータ上で動作を確認します。

サンプルアプリケーションが起動
サンプルアプリケーションが起動

Androidの場合はボタンをクリックすると、カメラが起動するようになっています(ソースコード中、21-24行目)。PCに接続されているWebカメラ経由で、Androidエミュレータのカメラを操作します。撮影してTEMPORARYファイルシステム上に画像ファイルを作成しましょう。

写真を撮影
写真を撮影
画像ファイルのパスがアラートで表示される
画像ファイルのパスがアラートで表示される

実際にファイルが作成されているかの確認手順(iOS)

iOSシミュレータの場合、ユーザディレクトリ以下のLibrary/Application Support/iPhone Simulator/<バージョン>/Applications/<アプリケーション固有のID>以下にサンドボックスが配置されています。デフォルトの設定ではFinderでユーザディレクトリ以下のLibraryディレクトリが見えませんので注意してください。

ターミナルを起動し、アラートで表示されていたパスまで移動し、ファイルが作成されているかを確認してみましょう。

% cd ~/Library/Application Support/iPhone Simulator/<バージョン>/Applications/<アプリケーション固有のID>/tmp/
% ls -l
% open <ファイル名>
TEMPORARYファイルシステム上に画像ファイルが作成されていることを確認
TEMPORARYファイルシステム上に画像ファイルが作成されていることを確認

実際にファイルが作成されているかの確認手順(Android)

コマンドプロンプトを経由して、Androidエミュレータにsshで接続します。あらかじめ環境変数PATHに設定しておかないと、Android用のコマンドが使用できないので注意してください。

環境変数を設定するには、マイコンピュータを右クリックしてプロパティを開きます。システムの詳細設定を開き、[環境変数]ボタンをクリックします。ユーザ環境変数またはシステム環境変数のPATHを編集し、変数値にAndroid-sdkをインストールしたディレクトリを含ませます。デフォルトでは次のパスになっています。

C:\Users\<ユーザ名>\AppData\Local\Android\android-sdk\tools
環境変数PATHの設定例。複数ある場合は;(セミコロン)で区切る
環境変数PATHの設定例。複数ある場合は;(セミコロン)で区切る

Androidエミュレータを起動している状態でコマンドプロンプトを起動し、次のコマンドを入力してAndroidエミュレータにSSH接続を行います。

> adb shell

アラートで表示されていたパスへ移動し、ファイルが作成されているかを確認します。

# cd /mnt/sdcard/Android/data/<アプリケーション名>/cache/
# ls -l
筆者の環境でls -lでファイルを確認した場合。TEMPORARYファイルシステム上にアラートで表示されていたファイル名「1346245654237.jpg」が存在していることがわかる
筆者の環境でls -lでファイルを確認した場合。TEMPORARYファイルシステム上にアラートで表示されていたファイル名「1346245654237.jpg」が存在していることがわかる

今回はここまでです。次回はこの続きで、実際にFile APIを使ってファイル一覧の取得やPERSISTENTファイルシステムでの操作について紹介します。

おすすめ記事

記事・ニュース一覧