第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）
前回のコードから、太字の部分を変更／追加した。