特集
» 2016年05月23日 05時00分 公開

第3回:Apache Cordovaでプラグインを使ってみよう連載:Visual Studio+Apache Cordovaで始めるiOS/Androidアプリ開発(3/5 ページ)

[山本康彦,BluewaterSoft/Microsoft MVP for Windows Development]

3. Fileプラグインで設定データを保存しよう

 Fileプラグインを使うと、デバイスにあるファイルにアクセスできる。ここでは、Fileプラグインを使って、アプリの設定データをファイルに保存してみよう。

Fileプラグインを導入しよう

 プロジェクトへ導入する方法は、前述したDeviceプラグインと同様だ。コンフィギュレーションデザイナーで[コア]プラグインの一覧の中から[File]を選択してプロジェクトに追加すればよい。

標準でアクセスできるフォルダ

 Fileプラグインが標準でサポートしているフォルダは、cordova.fileプロパティに定義されている。主なフォルダを次の表に示す。ここでは、dataDirectoryフォルダに設定データを保存することにしよう。

cordova.file 説明 Android iOS Windows
applicationDirectory アプリがインストールされているフォルダ。読み取り専用
dataDirectory アプリごとに割り当てられた、データ保存用のフォルダ
syncedDataDirectory dataDirectoryと同様だが、クラウドを介して他のデバイスと同期される(ローミング) ×
tempDirectory アプリごとに割り当てられた、一時データ保存用のフォルダ。ここに保存したファイルは、使っていないときにOSによって自動的に削除される ×
Fileプラグインが標準でサポートしている主なフォルダ
詳しくは、FileプラグインのWebページの「Where to Store Files」を参照。

 なお、上の表の「×」印はOSがサポートしていないフォルダである。例えば、syncedDataDirectoryフォルダを使いたいと思っても、Androidでは利用できない。そこで、前に紹介したdeviceプラグインを使ってOSを判別し、利用するフォルダをOSによって使い分けることになる(本稿ではsyncedDataDirectoryフォルダは使用しない)。

前回のアプリを改造する

 前回ソースコードには、画面の背景色を変更するダイアログを出すコードがある。そこで変更した設定をファイルに保存するように改造していこう。

 まず、アプリの設定を保持するオブジェクトを定義しよう。そのオブジェクトにはアプリのどこからでもアクセスしたいので、windowオブジェクトに保持してもらうことにしよう。index.jsファイルの冒頭に、次のコードを追加する。

(function () {
  "use strict";

  // このアプリで使う設定を格納するオブジェクト
  window.settings = {
    'bgColor': null // 背景色を表す文字列
  };
  ……省略……

アプリの設定を保持するsettingsオブジェクト(JavaScript)
index.jsファイルの冒頭部分に、太字の部分を追加した。
ここではbgColorプロパティの1つだけだが、カンマで区切って必要なだけ設定項目を記述できる。

 次に、設定ダイアログを出す部分を、次のコードのように変更する。前回のコードでは画面の背景色をセットしていた部分を、setBackgroundColorFromUserInput関数に切り出す。その関数の中では、画面の背景色をセットした後で、背景色を上記のsettingsオブジェクトに保持し、saveSettings関数を呼び出してsettingsオブジェクトの内容をファイルに書き出している。ただし、saveSettings関数は、まだ空っぽである。この後、Fileプラグインを使ってその中身をコーディングしていく。

// 設定ダイアログの定義(jQuery UI)
$('#dialog').dialog({
  autoOpen: false, 
  modal: true, 
  buttons: { 
    "更新": function () {
      // 画面の背景色を、テキストボックスに入力された値にし、その設定を保存する
      setBackgroundColorFromUserInput();
    },
    "OK": function () {
      // 画面の背景色を、テキストボックスに入力された値にし、その設定を保存する
      setBackgroundColorFromUserInput();
      $(this).dialog('close');
    }
  }
});

……省略……

// 画面の背景色を、テキストボックスに入力された値にし、その設定を保存する
function setBackgroundColorFromUserInput() {
  // 画面の背景色をセット(jQuery)
  $('body').css('background-color', $('#backColorText').val());

  var newBgColor = $('body').css('background-color');
  if (window.settings.bgColor !== newBgColor) {
    // 背景色が実際に変わっていたら、
    // それを設定データに反映し、設定ファイルに保存する
    window.settings.bgColor = newBgColor;
    saveSettings();
  }
}

function saveSettings() {
  // これから作る
}

背景色を変更するダイアログを出すコード(JavaScript)
前回のコードから、太字の部分を変更/追加した。

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。