Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

ファイルを操作するためのプラグインで、テキストや画像をアプリ内に保存する

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2016/07/13 14:00

 今回は、前回に引き続きファイルを操作するためのプラグインを紹介します。今回は、サンプルアプリを用いてテキストや画像の書込処理や、画像の読み込み処理を紹介します。前回と同様、サンプルコードではAngularJSを使っていますが、理解をする上でAngularJSの処理がわからないと理解できない部分はないようにしています。

目次

 ただし、AngularJSについても、よく知りたいという方は筆者の連載もありますので、そちらをご参照していただけると幸いです。

対象読者

  • スマホアプリに挑戦したいと思っているWeb開発者
  • アプリ開発をもっと楽にしたいと思っている方
  • 業務スマホアプリを作る開発者

サンプルアプリの概要

 今回作成するサンプルアプリは、図1に示すテキストデータの保存と読込、そして、画像(JPEG)ファイルの保存と表示をするためのサンプルアプリです。

 テキストデータでは、テキストエリアに入力したデータをそのまま保存する方法と、既に保存してあるテキストデータに入力したデータを追記する方法を紹介します。

 画像ファイルの保存と表示では、HTMLのinput[file]要素にて指定した画像ファイルの保存と表示を行います。また、画像ファイルの保存するパスを表示する際には、これまで紹介していないcdvfileプロトコルという形式を利用して指定します。cdvfileプロトコルについては最初に説明します。

図1 サンプルアプリの画面キャプチャ
図1 サンプルアプリの画面キャプチャ

cdvfileプロトコルについて

 cdvfileプロトコルは、HTML内にリソースを指定する時に記述できるプロトコルです。例えば、外部サイトのリソースであれば、http://やhttps://などのように記述する事ができます。同じようにcdvfileプロトコルを使えば、リスト1に示すように同じような形式で記述する事ができます。

リスト1 HTMLでの画像の指定方法
<img src="http://hostname/path/to/image.jpg">
<!-- cdvfileプロトコルを使った記述例 -->
<img src="cdvfile://localhost/persistent/image.jpg" />

 また、JavaScript内でもこれまで利用してきたcordova.fileのプロパティ値を使用していた部分をリスト2で示すように記述することができます。

リスト2 JavaScriptでの利用方法
window.resolveLocalFileSystemURL("cdvfile://localhost/persistent/",
    // (省略)
}

 ただし、cordova.fileプロパティにあるパスがすべて利用できるわけでなく、iOSやAndroidにかかわらず利用できるパスは表1のようになります。

表1 OSに依存せずcdvfileプロトコルで指定できるパス
指定できるパス 説明
cdv://localhost/persistent/* LocalFileSystem.PERSISTENT 以下のパス
cdv://localhost/temporary/* LocalFileSystem.TEMPORARY 以下のパス

 他にも指定が可能ですが、iOSとAndroidで利用できる指定が異なり、また、cordova.fileで指定しているするパスと一致していませんので、多少わかりにくい部分があります。

 指定可能なパスはFileプラグインに詳細が記されています。iOSの場合にはiosextrafilesystems、Androidでは、androidextrafilesystemsで指定されているものが記述されていますが、主なパスとして利用可能なものを抜粋したものが表2のようになります。

表2 OSに依存したcdvfileプロトコルで指定できるパス(一部)
指定できるパス 説明
cdv://localhost/bundle/* cordova.file.applicationDirectory以下のパス (Androidでは利用不可)
cdv://localhost/cache/* cordova.file.cacheDirectory 以下のパス(iOS、Android共に利用可能)
cdv://localhost/documents/* iOSの場合 (cordova.file.documentsDirectory 以下のパス)、Androidの場合 (cordova.file.dataDirectory以下のDocuments以下のパス)
cdv://localhost/files/* cordova.file.dataDirectory以下のパス(iOSでは利用不可)
cdv://localhost/sdcard/* cordova.file.externalRootDirectory以下のパス (iOSでは利用不可)

 cdvfileプロトコルを使うには、セキュリティ上の指定も行う必要があり、リスト3に示すようにconfig.xmlファイルに追記が必要です。

リスト3 config.xmlの指定追加(app/config.xmlの抜粋)
<access origin="*" />
<!-- 追加 -->
<access origin="cdvfile://*" />

 また、HTML内でパスとして記述する場合には、HTML側のセキュリティ指定も行う必要があり、リスト4のように指定が必要です。

リスト4
<!-- data: と gap: の間に cdvfile:の記述を追加しています -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: cdvfile: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

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

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2017年5月時点での登録メンバは52名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂き...

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

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

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

もっと読む

All contents copyright © 2005-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5