SHOEISHA iD

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

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

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

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

 ただし、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 *">

会員登録無料すると、続きをお読みいただけます

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

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

メールバックナンバー

次のページ
テキストファイルの保存と削除

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

  • X ポスト
  • このエントリーをはてなブックマークに追加
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本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

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

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

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/9527 2016/07/13 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング