もっと使おうPhoneGap/Cordova 2.0.0

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

この記事を読むのに必要な時間:およそ 4 分

前回は,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ファイルシステム上に,画像ファイルが作成された

著者プロフィール

富田宏昭(とみだひろあき)

株式会社キクミミでFileMaker/SQLiteを使ったWebアプリ開発に従事しながら,オープンソースソフトウェアのハウツー記事執筆を行う。趣味は横乗り系スポーツ,美術館めぐり,高速ジャンクション鑑賞。

コメント

コメントの記入