Corredor

ウェブ、プログラミングの勉強メモ。

Cordova iOS アプリで AppGroups を使ってみる:cordova-appgroups-dates

Cordova ベースのアプリで、iOS の AppGroups という機能を使ってみる。

AppGroups とは

AppGroups とは、同一の開発者が提供する複数のアプリ間で情報を連携できる機能。利用するには Apple Developer Program への登録が必要となる。Apple ID に登録しただけの無料の開発者アカウントだと使えないので注意。

対応する Cordova プラグインは…?

この AppGroups を Cordova アプリで利用するためのプラグインを探したところ、cordova-appgroups-dates というプラグインが一番良さそうだった。

「Cordova AppGroups」で検索した時に最初にヒットする cordova-plugin-nsuserdefaults-for-app-groups は、リポジトリに package.json がなく、インストールができなかった。

そのまんまの Issue も挙がっており、ココで「Fork しましたよ」とアナウンスされていたのが cordova-appgroups-dates だった。

というワケでコレを使ってみるワケだが、その前にプロビジョニング・プロファイルの準備が必要なのでやっておく。

あ、あと、検索上位に出てくる cordova-plugin-nativestorage プラグインは AppGroups には対応していない様子。うまく使えないので止めた。

プロビジョニング・プロファイルを用意する

AppGroups は iOS の諸機能にアクセスするため、開発者に関する諸々の認証が必要になる。オート・サイニングではダメで、Apple Developer Program で作成したプロビジョニング・プロファイルを使用する必要がある。その手順を紹介する。

  1. Apple Developer Program にて AppGroups を作成する : ココで AppGroups の名前を決める。com.example.appGroups のように、ドメインの逆順で作ったりするとダブりにくい。
  2. アプリ名となる App IDs を登録する : 登録した App ID は Cordova プロジェクトの config.xml に反映しておく。
  3. 開発に使用する iPhone 端末の UUID を Devices として登録する。
  4. App ID・Devices・開発者アカウントを紐付けた Provisioning Profile を作成する : 作成した .mobileprovision ファイルは Xcode に登録しておく
  5. Cordova プロジェクトの ./platforms/ios/【アプリ名】.xcodeproj ファイルを Xcode で開き、プロビジョニング・プロファイルを手動設定し、Capabilities より「AppGroups」を有効にする。
  6. 上手く行けば、登録しておいた AppGroups 名が表示されるはず。

Cordova ビルドは正常終了しなくなる

このようにプロビジョニング・プロファイルを手作業で用意すると、cordova build コマンドが正常に終了しなくなる。具体的には、ビルド完了後、以下のようなエラーが出て Export に失敗する。

error: exportArchive: "【アプリ名】.app" requires a provisioning profile with the App Groups feature.

このメッセージが出るということは、Cordova プロジェクトとしてのビルドは完了しているので、後は ./platforms/ios/【アプリ名】.xcodeproj ファイルを Xcode で開いて実機にインストールしてやれば良い。

プラグインをインストールして使ってみる

Cordova アプリとしての準備が出来たので、いよいよ実装していく。対象の Cordova プロジェクトに、プラグインをインストールする。

$ cordova plugin add https://github.com/joaoduartemariucio/cordova-appgroups-dates

プラグインが提供する API は、

  • 文字列を保存する save()
  • 保存した文字列を取得する load()

の2つのメソッドのみ。それぞれ以下のように使う。

// 特定の文字列を保存する
window.AppGroupsUserDefaults.save({
  key: 'MyKey',       // 保存するデータのキー
  value: 'My Value',  // 保存したい文字列
  suite: 'com.example.appGroups'  // 登録した AppGroups 名
}, () => {
  // 保存成功
}, (error) => {
  // 保存失敗
});

// 保存した文字列を取得する
window.AppGroupsUserDefaults.load({
  key: 'MyKey',  // 取得したいデータのキー
  suite: 'com.example.appGroups'  // 登録した AppGroups 名
}, (value) => {
  // 取得成功 : 仮引数 value は 'My Value' が設定されている
}, (error) => {
  // 取得失敗
});

とっても簡単。

対応する Ionic Native ラッパーなどがないが、メソッドも2つなので、自分で Promise 化して使っても良いだろう。

プラグインよりもプロビジョニング・プロファイルの作成がめんどくさい案件だ…。

Ionicで作る モバイルアプリ制作入門〈Web/iPhone/Android対応〉

Ionicで作る モバイルアプリ制作入門〈Web/iPhone/Android対応〉