これまで、Cordovaの開発環境構築編、開発周り準備編など2つを紹介してきましたが、これだけでも十分アプリは作れます。しかし、更にモダンなアプリにしたいとなるとまだまだ足りないものがたくさんあります。ハードウェアの操作や他のアプリとの連携、ウェブサービスの利用などなど。このエントリーではこれらより高度な機能について実装してみたいと思います。

高度な機能はプラグインだけではなく、JavaScriptで実装するものもあります。

目次

コンテンツ

ハードウェアを操作する

Cordovaアプリケーションを作る上で一番利用したいポイントは「ハードウェアの操作」でしょう。JavaScriptからスマートフォンの各種センサーやハードウェアを操作するためには、都度プラグインを導入する必要があります。このセクションでは、主なハードウェアやセンサーの値を取得する為のコードと使用するプラグインについて紹介します。プラグイン類はすべてターミナルを利用し、必ずプロジェクトのフォルダに移動してから、インストールが必要です。また、ほとんどの機能がDevice Readyのあとでないと実行が出来ないので、それを考慮してプログラムを書きます。

バイブレーション機能

音ではなくスマフォのバイブ機能で通知を利用するシーンは結構あるでしょう。音だと鬱陶しいことも多々あります。バイブレーション機能の導入は以下のコマンドを入力します。今回はCordova-plugin-vibrationプラグインを使用します。

プログラムのコードですが、今回はボタンを押すとバイブが発動するようにしています。まずHTML側ですが

これだけ。ボタンのタグを貼るだけです。idはvibmanとしました。続いて、index.jsの側には

onDeviceReadyのセクション内にボタンに対して、イベントリスナーを追加。navigator.vibrate(100)で100msの間、バイブレーションするというコードを記述しました。これで、アプリが起動しDevice Readyの状態になったらボタンを押して、バイブレーションを動かせます。100msなのでちょびっとだけですが。バイブの回数やタイミングで○○みたいなルールを作ったアプリも便利かもしれません。

カメラ機能

スマフォの機能として非常によく使われるのがカメラ機能。写真を取って独自にデータベースなどを用意して管理するアプリ等色々なシーンで使うことになるでしょう。以下のコマンドを入力して、cameraプラグインを導入します。

プログラムのコードですが、今回はボタンを押すとカメラが起動し、撮影したら<div>のidがimageの場所に表示する仕組みにしてあります。まずHTML側ですが

続いてindex.js側には以下のような記述をします。

takepicはHTML側のscriptに記述した関数です。takepic関数の引数に、撮影成功時、撮影失敗時、オプションの順番に引数を記述をしています。この時使えるオプションは以下の通りです。主に撮影時に使うものだけをチョイスしています。他にも細かくオプションがありますよ。動画の撮影なども対応しています。

プロパティ 説明
quality 画質を指定。0〜100の間で指定する。
destinationType データの戻り値を指定。

  • Camera.DestinationType.DATA_URLでデータURLが返ってくる
  • Camera.DestinationType.FILE_URIでファイルのパスが返ってくる
encodingType ファイルフォーマットの指定。デフォルトはJPEGです。
targetWidth イメージの横幅を指定する(ピクセル単位)
targetHeight イメージの縦幅を指定する(ピクセル単位)
correctOrientation 撮影時の向きと同じにするかどうかを指定。trueかfalseで指定。デフォルトはtrue
saveToPhotoAlbum フォトアルバムに保存するかどうかを指定。trueかfalseで指定。デフォルトはtrue
cameraDirection  背面カメラかインカメラのどちらを使うか指定。デフォルトはBACK。

なお、最初の1回だけ「カメラにアクセス許可」を自動で求めて来ます。また、撮影すると自動でDCIMフォルダに画像が保存されます。imageのwidthをHTML側で500pxで指定していますが、オプション項目でも指定出来ます。

図:撮影してみた様子

コンパス機能

単体ではあまり使われないかもしれませんが、スマートフォンにはジャイロセンサーが搭載されてるので、スマフォの傾きや方角などを検知する事が可能です。Cordovaでもプラグインの導入で様々なコンパスとしてのデータを取得することが出来ます。以下のコマンドでdevice-orientationプラグインを導入します。

これでコンパスが利用できるようになりました。プログラムのコードですが、とりあえず簡単に方角の値を取得して表示する仕組みを実装します。HTML側には以下のコードを記述します。

続いてindex.jsには以下のコードを追記します。

値ですが0で真北になります。つまり180で真南になります。これを利用して取得した値を元に、例えば画像をCSSで回転させればコンパスが作れる仕組みです。以下のようなコードに変更するとコンパスアプリになります。事前に真上を向いてるarrow.pngをwww以下のimgフォルダに入れておく必要があります。

変数posに方角の値を取得し、cssのrotateにてその値にdegをつけて回転させてあげるだけ。用意する画像は回転する事も考えて余白を取った画像を用意すると良いでしょう。

図:簡単にコンパスアプリになりました。

録音機能

スマートフォンはICレコーダにもなります。音声をファイルですぐに録音できるアプリは様々なシーンで非常に重宝します。Cordovaでも音声を録音させる事ができるようになります。以下のコマンドでプラグインを導入しましょう。使用するのはcordova-plugin-media-captureというプラグインです。ちなみに、このプラグインは録音だけでなく、写真撮影や録画も可能です。

プラグインがインストールされたら、まずはHTML側にコードを記述します。

続いて、index.js側に以下のようなコードを記述します。

Androidの場合、デフォルトの録音アプリが用いられ(Zenfone3だと音声レコーダ)、これだけで録音が出来ます。録音したファイルは内部ストレージの以下のパスに拡張子AMR形式としてファイルが保存されています。保存先やファイル形式、録音時間制限は、音声レコーダアプリ側で設定をする事になります。

上記のフォルダにデフォルトの状態では、録音.amrというファイルが生成されていました。

図:録音アプリの様子。

デバイス情報機能

表立って使う機能ではないのですが、アプリケーションを作る上でそのデバイスがどういうデバイスなのか?という情報は、重要な要素だったりします。特にCordovaの場合は、1つのコードでiOS向けとAndroid向けを作れるのですが、それぞれのOS上でのコードは微妙に違ったりするので、条件判定が必要だったりします。その際に使う機能です。まずは、以下のコマンドでcordova-plugin-deviceプラグインを導入します。

ボタンを押したらAlertでデバイス情報を吐き出すといったコードを書いてみます。まずは、HTML側に以下のコードを記述します。

取得できる情報は、上記の通り。7種類の情報が取得出来ます。index.js側は以下のコードを記述します。

非常に単純なコードで取得が出来ます。特にOS判定ではdevice.platformが「Androidか?iOSか?」で条件分岐をさせる際には必ず使います。また、仮想環境では動かせないようにするという判定も可能なようです。また、バージョン判定で、バージョン毎にバグ回避用のコードを書く等の対策も打てるでしょう。

図:地味ですが重要な機能の1つ

ネットワーク情報機能

こちらも表立って使う機能ではないのですが、通信判定をする上では重要な機能です。特にオフラインの場合には動かさないようにするなどの条件判定を行う上では必須の機能ではないかと思います。以下のコマンドを入力してcordova-plugin-network-informationプラグインを導入しましょう。

このプラグインは大きく2つの機能があります。1つが通信形態の判定。もう一つが通信状態の判定です。まずは、通信形態の判定から。HTML側に以下のようなコードを記述します。

通信形態の判定

一方、index.js側には以下の記述を追加します。

これでボタンを押した時に、現在の通信回線の形態を判別できます。WiFi接続ではない場合には、接続させないといったような事が可能になります。

図:WiFi接続の判定結果が出ました。

通信状態の判定

2つ目の機能として、通信状態の判定をします。通信がオンラインまたはオフラインになったらコマンドを実行するようにするという仕組みです。index.js側に以下のコードを追加します。

onOfflineとonOnlineの2つのアクションを追加したので、HTML側にそれらのコードを追加します。

これで起動時にネットワーク判定を行われ、Alert表示がされます。起動中は任意のタイミングで通信形態を見て、ネット未接続ならばという処理を作ってあげれるのも良いかと思います。

図:オンライン時のアラート

加速度センサー機能

万歩計やカーナビ等にも搭載されてるのが加速度センサー。GPSによるものではなく3軸加速度センサーというもので、スマートフォンにも搭載されています。振動・衝撃、また傾き等を検出する事ができるチップで、スマフォではデジタル万歩計アプリや傾きを利用したゲーム等に利用されています。ただし、この機能をゲーム等に利用するには、タイムラグが無視出来ないので、シビアな処理を求めるゲーム類には使えないでしょう。また、XYZ軸のそれぞれの動きを捉えて、アプリに仕立てるには、ギミックが必要なので、なかなか使いこなせるセンサーではないでしょう。

この機能を利用するためには以下のコマンドでcordova-plugin-device-motionプラグインを導入します。大きく2つの値の取得方法がありますが、組み合わせて使うのが良いでしょう。

一瞬だけ値を取得

ボタンを押したときの加速度センサーの値を取得します。HTML側には以下のようなコードを記述します。

一方、index.js側には以下のような記述を追加します。

これで、ボタンを押した時の瞬間の加速度センサーの値を取得することが可能です。ちなみにそれぞれの軸の値の意味は以下のようになります。テーブルにスマフォを置いた時の説明となります。手の振動などもカウントされるので、色々値を弄らないといけません。

軸名 説明
X軸 スマフォの左から右方向への加速度を示します。
Y軸 スマフォの下から上方向への加速度を示します。
Z軸 スマフォの背面から正面方向への加速度を示します。

図:無事に取得ができました。

ウォッチし続ける

一瞬ではなく、常にウォッチし続ける場合のコードを記述します。HTML側には以下のコードを記述します。今回、オプション値として、frequencyを指定していますが、ms単位で指定します。ms単位で値を取得します。

図:値が常に書き換わります。

GPS機能

ハードウェアを操作する上での最も重要な機能が位置情報システム(GPS)です。緯度経度や高度などを教えてくれる素晴らしいシステムなのですが、これもCordovaから扱うことができます。しかし加速度センサー同様、緯度経度と高度などについての見識がないと使いこなせないので、軽くその辺を勉強しておくと良いでしょう。

この機能を利用するためには、以下のコマンドでcordova-plugin-geolocationプラグインを導入します。大きく2つの機能があり、その2つを組み合わせてアプリを作るようになります。また、CordovaアプリからGPSがオフの時、位置情報をONにするよう要求するcordova-plugin-request-location-accuracyというプラグインもあります。

現在の位置を取得する

単発で現在位置を取得します。取得できる項目は、緯度経度、高さ、標高、標高精度、方角、速度、日時となります。まずは、HTML側に以下のコードを記述します。

ボタンにアクションを追加するので、index.jsには以下の記述を追加します。

GPSをオンにして、ボタンを押しても値が帰ってくるまで結構タイムラグがありました。また、高度や方角等は検出できませんでした。altitudeAccuracyはAndroidでは取得できない仕様で、方角や速度は移動していないと検出できない。方角はコンパスを使ったほうが良いでしょう。

図:緯度経度と標高を取得できれば十分ですが。

移動時の位置を取得する

単発で緯度経度を知るだけではあまり意味がないので、移動しながら常にウォッチし続けるようにするためのメソッドが用意されています。HTML側のコードを以下のように書き直します。

ここでは、GPSオプションを指定しています。オプション指定は次項を参照してください。このコードによって、移動する毎にGPSの位置情報を取得して、データを書き換えるようになります。テキストデータに吐き出させるようにすれば、GPSロガーアプリがこれで作れます。また、Google Mapsに緯度経度の情報を渡せば、マップに自分の現在の場所を表示しつつ、予め持っている緯度経度の近くに来たら、情報をプッシュなんてアプリも作れますね。

図:移動すると緯度経度情報が書き換わります。

オプション指定

GPSプラグインには3種類のオプションがあります。オプションですので、指定しなくても問題ありませんが、通常は以下の3つを指定するのが普通です。

オプション 説明
enableHighAccuracy より精度の高い位置情報を使用する。デフォルトはfalse
timeout 位置情報取得までのタイムアウト。msで指定。
maximumAge キャッシュされた位置情報の寿命。msで指定。

さらに便利なプラグイン

プログラムを構築していく過程で、様々な機能をつけるわけなのですが、スマフォに限らず、地味ながら「実現」しなければならない壁にぶち当たります。必ずしも必要ではないものの、あればありがたいといったものから、無いと不便といったものまで様々です。そんな目的のプログラム実現上でどうしても必要となるようなプラグイン等をここで実装してみたいと思います。

ファイルの読み書き

スマフォ内のファイル類の読み書きをするために必要なプラグインで、非常に重要なプラグインです。cordova-plugin-fileには様々なリファレンスが記述されていますが、OSによって挙動やファイルシステムなどが異なるので、OSに合わせてコードを分岐させる必要性があります。

標準装備されています。一応導入するコマンドは以下の通りになります。ついでにcordova-plugin-file-transferプラグインも導入します。transferプラグインはHTTPなどでファイルをPOSTやPUTで送るためのプラグインです。

プラグイン使用上の注意点

  • config.xmlファイルに<preference name=”AndroidPersistentFileLocation” value=”Compatibility” />の記述をしていない場合、アクセスできるのは内蔵ディスクのみで、SDカードへアクセスできません。
  • Androidの場合、SDカードは端末によってルートディレクトリ名がランダムな値になってるので注意が必要。
  • Device Ready後でなければ使えませんので、onDeviceReadyの場所にでも処理を記述すると良いでしょう。
  • アクセスできる場所によっては、ファイルがOSによって自動で削除される可能性があります。設定ファイル等は永続性のあるディレクトリに保存しましょう。
  • cdvfileプロトコルでファイルにアクセスする場合は、config.xmlに<access origin=”cdvfile://*” />の記述が必要な場合があります(whiltelistで制限時)。
  • ファイル情報を取得する際のresolveLocalFileSystemURL関数の引数のURIは、file:///のままだとNG。filesystem:file:///persistent/somefile.txtといったように、filesystem:をつけなければなりません。
  • toURL関数でfile:///、toInternalURL()関数でcdv://のURLを返してくれます。
  • cdv://のパスは例えば、imgタグのsrcにそのまま指定ができたりします。ただし、コンテンツセキュリティポリシーに則り、下記のように、cdvfile:をmetaタグの中に記述する必要性があります。
  • HTMLファイル内でパスを記述する場合は、metaタグで以下のようなコンテンツセキュリティポリシーに関する記述をする必要があります。

パスの指定方法

ファイルプラグインでは、必ず対象のファイルへのパスが必要になります(当たり前ですが・・)。Windowsで言えばC:¥test¥file.txtみたいな形で指定をするものですが、Cordovaではいくつかの指定方法があります。細かなディレクトリの特性等はリファレンスを読んで覚えるしかありませんが、ここでは主に使う事例をもとに、パスの指定方法を列挙してみたいと思います。

cordova.file.*の指定

パスを指定するときに、cordova.file.*のアスタリスクの部分に文字列を指定することで、特定のフォルダへのパスの指定になります。OS依存となるため注意が必要です。以下はアスタリスクの所に指定する値の表です。

指定値 場所
dataDirectory アプリ内のfilesディレクトリ。永続的に読み書きが可能なので設定ファイルを置くのに使ったりする。
externalRootDirectory ストレージのルートディレクトリ。
CacheDirectory  アプリ内のcacheディレクトリ。一時的に使用するファイルを置く場所。消える可能性あり。
PERSISTENTとTEMPORARY

パスの指定として、LocalFileSystem.PERSISTENTであったりLocalFileSystem.TEMPORARYで指定します。これは状況によって代わりますが、config.xmlでInternalにした場合には内蔵メモリ、compatibilityにした場合にはSDカードのそれぞれとなります。

指定値 場所
PRESISTENT ストレージ直下のディレクトリ
TEMPORARY /Android/data/
(アプリケーション名)/cache/のキャッシュディレクトリ
cdv://localhost/の指定

特別なプロトコルで、cdv://という指定方法により、ディレクトリにアクセスが可能です。localhost/以下に文字列を指定することで、特定のフォルダへのパスの指定になります。こちらもOS依存となるので、注意が必要です。以下はlocalhost/以下の所に指定する値の表です。

指定値 場所
files アプリ内のfilesディレクトリ。永続的に読み書きが可能なので設定ファイルを置くのに使ったりする。
sdcard ストレージのルートディレクトリ。
cache  アプリ内のcacheディレクトリ。一時的に使用するファイルを置く場所。消える可能性あり。
documents cordova.file.dataDirectory以下のDocuments以下のパス
persistent/* LocalFileSystem.PERSISTENTの以下のディレクトリを指定する
temporary/*  LocalFileSystem.TEMPORARYの以下のディレクトリを指定する
file:///storage/の指定

file:///プロトコルでの直接の指定も可能です。storage以下はファイラーなどでURIのパスを繋げて、例えば変数に入れれば直接そのファイルにアクセスが可能です。あまりこのパターンで使うのは一般的ではないかもしれません。例えばSDカードアクセスを可能にしている場合には、

にて、SDカード以下のDCIMフォルダの中の中にあるtomato.jpgにアクセスが可能になります。

cordovafs.jsを使う

Cordovaのファイルプラグインでのパスの指定がちょっととっつきにくいという人の為に作られたJavaScriptのファイルです。使った事がないので、どのような感じになるかはわかりませんが、ドキュメントによるとより簡単なメソッドにてファイルプラグインのAPIにアクセスできるようにラッピングしたものだそうで。使うためにはcordovafs.jsとrsvp.jsをwww以下のjsフォルダに配置した状態で

  1. cordovafs.jsをロードするようにHTMLに記述する
  2. rsvp.jsをロードするようにHTMLに記述する
  3. インスタンスを生成してメソッドを使えるようにする

インスタンス生成は例えば以下のようなコードを記述する

その後、させたい作業に応じて、read、write、remove、mkdir、rmdir等が使えるようになってる。フォルダやファイルの存在確認やリストアップといったメソッドもあるようです。copyがないようですが・・・で、実際使う場合には

といったような記述でファイルを読み込む事ができるようです。製作者さんのページはこちらになります。他にも便利なCordova向けの便利なプラグインも作られてるので、後に紹介しようと思います。

ファイルAPIの使い方

ファイルプラグインで用意されてる各種APIの使い方を1つずつ見ていこうと思います。以下ソースではindex.js側のコードは省略します(ボタンにアクションつけてるだけなので)。ただし、とっつきにくい構文なので、慣れましょう。

ファイルへのアクセス

もっとも基本である対象のファイルへのアクセスをしてみます。ついでに今回はcdv://形式で指定してるので、ネイティブのパスであるfile:///をalertで表示してみようと思います。

window.resolveLocalFileSystemURL関数がすべての基本です。uriの引数を取り、fileEntryオブジェクトが返ってくる。さらにその中のfileオブジェクトからfile.nameでファイル名を取得しています。toURLなどはfileEntryオブジェクトに対しての関数なので注意。

図:無事にアクセスできて情報を取得できた。

ファイル・フォルダの作成、削除

ここでは、window.requestFileSystem関数を使います。

まずはファイルの作成から。今回、tamago.txtをLocalFileSystem.PRESISTENTに作成していますが、オプションとしてcreateをtrueにしなければ作れません。ルート直下にtamago.txtが作られます。まだ何も書き込んでいないので、中身はブランクですが。

続いてディレクトリの作成をしてみます。ルートディレクトリの下にnewFolderというフォルダを作り、更にその中にniwatoriというフォルダを作ります。事前にwindow.requestFileSystemにてURLをディレクトリとして指定した後にDirEntryを取得し、以下のコマンドを追加で実行します。なのでfileEntryではなくdirEntryとでも名前をつけておくといいでしょう。なので、dirEntryの値は、fs.root.getDirectoryで取得しておきます。

最後にファイルやディレクトリの削除ですが、以下のような形になります。

ファイルの読み書き・追記

ファイルの作成時にwriteFile関数を指定しています。引数にfileEntryとnullが指定されていますが、このwriteFile関数を作ります。まずは、ファイルに書き込みをします。

dataObjがnullなのでサメの卵という文字列を書き込んでいます。ファイルが作られ、サメの卵と書き込まれてるはずです。事前に例えばnew Blob()でカエルの卵と指定していたら、カエルの卵と書き込まれてるはずです。

次にファイルの読み込みですが、上記のコード内にあるreadFile関数を作ります。

これで、tamago.txtの文字列が取得されます。実際にはここにJSON文字列でも入れて、その中から更に対象のプロパティの値を取るといったようなコードを書くことによって、設定値を読み取るといったような事に使えるでしょう。

図:書き込まれてる文字が取得できた

さて、ここまででファイルの読み書きができたわけですが、これだけだと既存のファイルの中身は書き込む毎にその内容にすべて置き換わってしまいます。これでは不便なので、ファイルへ追記をできるようにします。作成したwriteFile関数を少々変更する必要があります。

異なる点は追記するとしたfileWriter.seekという部分。引数にfileWriterのlengthを指定しています。これが追記をする位置に該当しますが、そこに書くよという指令です。これで上書きではなく追記になります。実行するたびにtamago.txtにうずらの卵というデータがどんどん書き込まれていきます。

ファイル・フォルダのコピー・移動

削除同様にかんたんなメソッド一発で実行が可能です。まずはファイルのコピーと移動から。

dirEntryは移動先のディレクトリのエントリを予め取得しておいて指定します。newNameは新しいファイルの名前を指定。その後のCallBackは成功時と失敗時に実行する関数を指定しておきます。

次にフォルダのコピーと移動を実施してみます。

ルールはファイルの時と同じです。

画像ファイルの表示

対象のURLをもとに、表示したいimgのエレメントに画像を表示させる方法です。

toURL()でfile:///にしたアドレスをfileEntryから取得しています。予め、別の関数内でfileEntryを取得しておいて、この関数に渡して上げています。そして、takenokoというidを与えておいたimgタグのsrcに、取得したURLを指定しています。cdv://でも表示ができます。

crosswalkを導入する

Androidでは、端末によってOSのバージョンが異なり、なおかつ搭載されてるブラウザの部品であるWebViewのバージョンも異なってたりします。特にAndroid 4.3以前と以後とでは大きく異なります。CordovaはそれぞれのOSのWebViewを利用する仕組みになってる為、場合によってはプログラムが動かない、UIが崩れるなど機種によって差が出たり、古いAndroid上では、そもそも動作しないといった事もあり得ます。

そこで導入するのがCrosswalkプラグイン。このプラグインはChroniumベースのエンジンまるごとCordovaに組み込み、OS毎のWebViewエンジンは使わないアプリにする事ができるスグレモノです。主な特徴として

  1. 動作可能なAndroid上のすべてのバージョンで、挙動を統一できる。
  2. 古いAndroidであっても、新しいWebViewでサポートしてるコードを実行できるようになる。
  3. オリジナルのWebViewよりも高速化が期待できる。
  4. ファイルサイズが20MBほど大きくなる
  5. メモリ消費が少々大きくなる
  6. Crosswalk自体に問題があった場合、その対処をしなければならない。
  7. Android5.0以降の場合、逆にCrosswalkのほうがエンジンが古い版になることがある。

基本導入するだけなので、ターミナルよりプラグインを導入するだけ。

但し、古いバージョンのAndroidで動かす場合には注意事項があります。以下の設定をconfig.xmlへ追加しビルドバージョンを指定してあげないと動作しません。特にAndroid 4.2以前のスマフォで動作させる場合、JDKのバージョンを古いものにしないと、動かせません。

上記の設定ではminSdkVersionを14で指定していますが、これが4.2系の最低限必要な指定です。4.4系では19、5.0系ならば21、6.0系ならば23を指定します。また、導入するCrosswalkのバージョンを指定してプラグインを導入する事も可能です。14+の部分がバージョンになります。

ファイル選択ダイアログ

プログラムで何らかのファイルを選択する機能です。この機能の実現は以下のHTMLタグで実現が可能です。予めストレージに対する権限をアプリに対して与えてある必要性があります。

InputタグにTypeとしてfileを指定するだけ。ただ、見た目がまんまInput要素の入力欄となってしまうので、CSS等で装飾をしてあげる事でスマートフォンのUIに馴染んだボタンなどにすることが可能です。input type=”file”の装飾に関しては、こちらのサイトや、こちらのサイトの解説がとても参考になります。ファイルを選択した後のファイルのパスの取得などについては、こちらのサイトこちらのサイトで紹介されています。基本的には

とすれば、1個目のファイルのファイル名を取得できます。

  

図:アプリ権限とファイル選択画面

ところが、input type=”file”の仕組みでは、ファイル名は取得できても、ファイルのフルパスはセキュリティ上の制限で取得できないようになっています。そこで調べたところ、ファイル選択画面に関しては、プラグインなども出ているようで、以下のようなプラグインや手段があります。

  1. filechooserプラグイン
  2. cordova-filechooserプラグイン
  3. ImagePickerプラグイン
  4. Cameraプラグイン
  5. cordova-filepath-resolverプラグイン
  6. FilePicker Phonegap iOS Plugin
  7. MFileChooserプラグイン
  8. Cordova OCW Filebrowser
  9. cordova-plugin-filepickerio
  10. 自力でFileプラグインの機能を使ってリストを実装

ファイルのパスが取得できないとプログラムで扱うには困るので、今回は8.のプラグインを入れてみました。Cordova OCW Filebrowserプラグインは非常に優れたプラグインで、ファイル選択だけでなく、フォルダの選択も可能で、複数ファイルや複数フォルダ、ファイルとフォルダの選択などもできるように作られています。ターミナルよりコマンドでプラグインをインストールします。

プラグインの導入が完了したら、まずはHTML側のコードを記述します。

今回は単体ファイルの選択としました。選択値は配列で帰ってきますので、alertでdata[0]で値を取っています。file://プロトコルの形でフルパスが取得可能ですので、あとはこれをなんとかしてFileプラグインに渡して上げたりすればOK。index.js側には以下のように記述します。

また、オプションとして、startupPath:”/storage/emulated/0/Download”, といった記述をsuccessの前に記述すれば、開始フォルダの位置を指定可能です。フォルダの選択についても、window.OurCodeWorld.Filebrowser.folderPicker.singleにメソッドを置き換えるだけですので、扱いやすいプラグインです。

図:ファイル選択画面とフルパスの表示の様子

より高度なダイアログを装備

Cordovaのネイティブダイアログを呼び出すプラグインであるcordova-plugin-dialogですが、呼び出せるダイアログはalertやpromptなどのメッセージ表示系のダイアログのみです。実際には他にも様々な種類のダイアログがあるわけなのですが、そういったダイアログを呼び出せるプラグインを作ってる方々がいます。これらのダイアログを使うと、更にアプリの表現力がアップし、利便性も向上するので、是非導入したいところです。

cordova-plugin-exdialogs

リスト式やチェックボックス選択式、プログレス表示、全部で6種類の素敵なダイアログを呼び出せる超スグレモノで、cordova-plugin-exdialogsという名称で公開されています。ぜひ標準でCordovaに搭載してほしいと思うくらいのコンポーネントです。導入するためにはターミナルより以下のコマンドを実行します。

シンプルな選択画面

さっそくコードを記述してみます。いつものようにボタンをクリックすると表示される仕組みです。非常に多機能なダイアログプラグインなので、公式ドキュメントをよく読んで実装しましょう。まずは単純なリスト表示をHTML側から記述します。類似のプラグインとして、cordova-plugin-dialog-listというものもあります。

itemsの配列はグローバル変数として用意しておきます。index.js側には以下のような記述を追加します。

これできのこリストが表示されます。リストをタッチすると選択されて、値が取得できる仕組みです。ちなみに、iと表示されてるものはアイコンで、こちらにあるダイアログアイコンリソースIDを指定するようになっています。

図:スマートな選択が可能になります。

※この他にもラジオボタンタイプ、チェックボックスタイプが用意されています。

プログレスバー表記

その他のダイアログとしては、プログレス表記などは処理中の表示としてはとても有効なダイアログですね。実際にサンプルコードをもとに実装してみました。HTML側のコードは以下のようにしました。類似のものに、接続中・・・などの表記ができるcordova-plugin-pdialogSpinnerDialogなどあります。こちらも使いたい機能です。

index.js側には以下のように記述します。

さっそく実行してみました。100msでタイマーを回しています。またカウンタ用の変数等はすべてグローバル変数で宣言し値を格納しておきます。完了したらprogressStop()を実行して完了する。戻るボタンを押すとキャンセルが実行されます。

図:格好いいプログレス表記を装備できました。

※その他にも、ダイアログ表記ではなく、レイヤーを使って作業中は格好いい表記を全面に出してくれるHoldOn.jsなんてものもあります。

トースト表示

トーストとは、alertのようなダイアログではなく、画面下のほうに長方形の枠でスーッと表示されて消えるメッセージ表示機能です。アラートと違って画面全面に出て閉じないと消えないといったような煩いスタイルではなく、スマートに表示されて消えてくれるので、短い文章であればこの機能はとても便利でスマートなアプリになります。さっそくコードを記述してみました。HTML側には以下のような記述をします。

index.js側には以下のようなコードを記述します。

すごくシンプルですね。Alertの代わりに使うには最高です。早速実行してみました。2,3秒くらいでふわ~っと消えてしまいます。

図:ボタンを押しましたね表記

※この他、複数行入力プロンプト機能もあります。今回これは説明を割愛します。

cordova-plugin-password-dialog

パスワード入力などのダイアログですが、ダイアログではなくHTMLの中にテキストボックスとHTML5の機能を持って、入力インターフェースを作ることがほとんどだと思いますが、ダイアログ化されてるとよりアプリらしくなってスマートだと思います。そんなときに使うのがcordova-plugin-password-dialogです。ターミナルより以下のコマンドを入力して、導入します。

さっそく実装してみましょう。HTML側には以下のような記述をします。

続いて、index.js側には以下の記述を追加する。

これでOK。入力はパスワードと確認入力の2つのテキストボックスで構成されており、最小文字数の設定などをオプションで指定するようにないっています。また、入力文字数不足や入力パスワードの不一致時にはHTML5の機能でエラーのツールチップが表示されます(ただし英語表記)

図:入力画面とエラー表記

英語表記なのはちょっとあれなので、探してみましたらPasswordDialogPlugin.javaというファイルの中に該当のメッセージが入っていたので、これを修正してみました。プロジェクトのフォルダ内には2つ該当のものがあったので、どちらも同じ修正。再度実機テストをしてみたらきちんと日本語表記になりました。

図:エラー表記も日本語じゃないとね。

Zip圧縮と解凍

スマートフォンではあまり使う機会はないかもしれませんが、限られた容量のディスクの中でデータ類を圧縮・解凍という仕組みは、プログラムを作る上では何かと便利な事があります。普段使わないデータ類を切り出して、ZIPで固めて置くことで容量節約にもなりますし、外部に送信する際にもZIPで固めておけば、通信量や速度を稼ぐことが可能になります。そんなZIPの圧縮と解凍をやってみたいと思います。

今回使用するプラグインはjjdltc-cordova-plugin-zipというプラグインで、まずはターミナルからプラグインをインストールする必要性があります。

ZIP圧縮

まずは圧縮ですが、パスにフォルダやファイル単体を指定することができます。Fileプラグインでのcordova.file.*の指定やfile:///でパスを指定します。まずはHTML側から実装してみましょう。今回は内蔵メモリ直下にhappyzipフォルダを作り、中にhappy.pdfを入れてあります。

ZIPファイル名はcompressfileを指定しましたので、compressfile.zipというファイルが生成されるはずです。つづいてindex.js側には以下のコードを記述します。

これでOK。ボタンを押すと、ZIPファイルが生成されます。なお、同名ファイルがある場合上書きされるようです。

ZIP解凍

次にZIP解凍です。こちらも殆ど同じような構文です。ですが、フォルダを圧縮した場合癖があるので注意が必要です。同じようなプラグインで解凍専用のプラグインとしてcordova-plugin-zipというものもあるので、こちらを利用したら素直に行けるかもしれません。

問題の癖なのですが、解凍先に同名のファイルがある場合上書きされるという点は圧縮時と同じなのですが、フォルダを圧縮した場合、解凍先として指定したパスに同名のフォルダが無いとエラーになります。今回の構文ではルート直下のcompressfile.zipを解凍する時に、その中に入ってるhappyzipというフォルダがあるので、エラーになりません。ファイル単体で圧縮した場合には、素直に解凍できますが、ここは要注意です。

さて、index.js側には以下の記述をします。

別のアプリで開く

特定のファイルを開いてる、もしくはファイルのパスを取得して、それを自分のアプリ以外のアプリで開く機能です。あまり国内での説明事例がなく、海外ではStackOverFlowあたりで、Open withといった形で紹介されていたりします。今回は特定のファイル(PDFファイル)を、別のアプリで開く機能をボタンに実装してみたいと思います。予め、happyzipというフォルダにhappy.pdfというファイルがあることが前提です。まずは、以下のコマンドでcordova-plugin-file-opener2プラグインを導入します。

また似たようなものに、cordova-openプラグインcordova-universal-linksプラグインApp-Launcher-Cordovaプラグイン

このプラグインはファイルのURI(file:///)だけではなく、ファイルのMime Typeもオープンに必要とするので、予めFileプラグインで対象のファイルのパスとそのタイプを取得しておきましょう。今回はURIのみでコードの中で、ファイルのMime Typeを取得して使うようにしています。まずは、HTML側のコードを記述します。

次にindex.js側のコードを追記します。

以上のような感じです。fileopener関数でまずファイルURIとそれから、MimeTypeを取得。それをsuccessMime関数に渡し、fileopenerプラグインの処理へと渡しています。MimeTypeに応じて開く候補のアプリは選別されて出てきます。例えば今回はPDFなので、3種類のインストール済みPDFビューアが出てきました。以前紹介したCustom URL Schemeを使ったインテント機能とはちょっと意味合いが違うので注意。

※Google PDFビューアではきちんと開けました。

図:別アプリでファイルが開けます。

共有する機能

スマートフォンやSNSがここまで大ヒットして、他のありとあらゆる商品やサービスを駆逐した理由の一つは「連携」にあると思います。サービス同士やアプリ同士の連携、それがホイホイお手軽に出来るからPCをも駆逐していったのだと思います。そんな共有機能を搭載してみたいと思います。この機能は、テキスト類をFacebookやTwitterに投稿したり、Dropboxへ保存したり、メールで送信させたり等、iOSならばAirDropで他のスマフォに送ったり様々な事ができるようになります。OS依存になるので、Androidの場合は対象のアプリがインストールされてる必要性があります。

まずは、以下のコマンドでSocialSharing-PhoneGap-Pluginを導入します。似たようなプラグインにcordova-plugin-shareというものもあります。prepareしろみたいな感じなので、一応コマンドとして実行しておきます。

公式ページのリファレンスが非常に細かすぎてわかりにくいので余計な部分を省いて説明します。このプラグインは、引数の取り方によって挙動が変わるように作られていますので、JavaScriptで関数を用意して処理といった事が必要ありません。直接ボタン等にonClickイベントに書いて処理が可能になっています。ですので、index.html側に記述をするだけでOKなお手軽仕様です。

普通の共有

これでボタンを押すと、シェア機能が働き、例えばGMailを選択するとメーラーが立ち上がり、本文とタイトルが入った状態で起動します。

  

図:メール共有機能を使ってみた。

画像の共有

三番目の引数を使って、画像の共有が可能です。その場合の画像のURIはhttp://のURLやBase64エンコードした画像のデータを利用可能です。

例えばこれでボタンを押し、Google Driveを選択すると画像がアップロードされます。これはとても便利。

リンクの共有

4番目の引数を使ってリンクを共有するものです。

例えばこれでボタンを押し、Pocketを選択するとPocketにURLが登録されます。これもなにげに便利ですね。

アプリを指定して共有

アプリを指定しての共有を行うことができます。選ぶのではなく、例えば直接Twitterに投稿するといったことがボタン一発でできるようになる仕組みです。対応してるアプリは限られていますが。引数の取り方は同じです。

  • Twitter — shareViaTwitter
  • Facebook — shareViaFacebook
  • WhatsApp — shareViaWhatsApp
  • SMS — shareViaSMS
  • メール — shareViaEmail
  • Instagram — shareViaInstagram
  • 写真(アルバム)– saveToPhotoAlbum(iOSのみ対応で引数の取り方がちょっと違う。)

例えばTwitterへの投稿であれば

といったような感じです。

図:ツイッターアプリが立ち上がってツイートするだけ。

また、一部のアプリの場合、3番目以降で返り値を受け取ってエラーかどうかを判定させる事もできるようです。でもこの場合、関数を作ったほうがメンテナンス性の観点から良いと思います。

アプリを指定して共有2

もう一つのアプリを直接指定してのアプリの共有コマンドとして、shareViaでの指定があります。引数の取り方がちょっとだけ異なります。全てのケースで使えるかどうかは不明ですが、公式ドキュメントによると、1番目の引数にパッケージ名を指定(例えばGoogle+ならばcom.google.android.apps.plusといった具合)し、2番目以降の引数からこれまでの引数の取り方を追加するとできます。

実際使ってみると、使用するアカウント名選択画面が出て、選択すると下記のような投稿画面が出てきました。あとは投稿するだけ。

図:直接Google+へ投稿できる

複数の画像をシェア

複数の画像をシェアする場合、そのURLは配列に格納して、引数に入れてあげればできるようです。例えば、

こんな具合。[]の中にカンマ区切りで画像へのURLを書き足すわけですね。

関連リンク

Pocket
このエントリーをはてなブックマークに追加
Bookmark this on Yahoo Bookmark
Pocket