ステップ5: iOS ネイティブの機能を使ってみよう！(ダイアログ表示)

ここでは iOS アプリで使用している Apache Cordova のプラグインの追加方法と、ネイティブの機能を呼び出す方法について学びます。

Apache Cordova

Meteor の iOS アプリは Apache Cordova (以下Cordova) というモバイルアプリ開発フレームワーク上で動作しています。そのため、iOS ネイティブの機能を呼び出す時は Cordova の機能を用います。

Cordova はプラグイン機構が備わっており、プラグインを追加することで簡単に機能を追加できます。Meteor の iOS アプリは Cordova プラグインをそのまま利用することができます。試してみましょう。

iOS ネイティブのダイアログを表示してみよう！

Step4でコードを修正すると、Todo アプリが表示されます。

「Type to add new tasks」をタップし、タスクを入力してEnterすると、タスクが追加できます。

適当なタスクを追加した後、タスクの削除ボタンを押すと確認ダイアログが表示されます。

ここで、表示された確認ダイアログに注目してください。確認ダイアログののタイトル部分に http://meteor.local と URL が表示されています。これはユーザーフレンドリーではありませんね。

これは iOS の Web ブラウザ(WebView) が標準で用意している確認ダイアログで、

iOS ネイティブの機能を呼び出す簡単な例として、ネイティブの確認ダイアログを呼び出す、 cordova-plugin-dialogsを使用します。

https://github.com/apache/cordova-plugin-dialogs

早速プラグインを追加してみましょう。

meteor add cordova:cordova-plugin-dialogs@1.2.0

Cordova プラグインを追加すると、起動中の Meteor アプリが停止しますので再度起動し直します。

meteor run ios
# or
meteor run ios-device

そして app.js の "click .delete" を以下のように書き換えます。

// meteor-ios-app-example/app/app.js
// ...
if (Meteor.isClient) {
  // ...
  Template.task.events({
    // ...
    "click .delete": function () {
      const message = "Are you sure?";
      const title   = `Delete Task: ${this.text}`;
      const buttonLabels = ["Cancel", "OK"];
      const taskId = this._id;
      const onConfirm = function(buttonIndex) {
        if (buttonIndex === 2) { // OK
          Tasks.remove(taskId);
        }
      };

      if (Meteor.isCordova) {
        // Use background thread for iOS
        Meteor.setTimeout(function() {
          navigator.notification.confirm(message, onConfirm, title, buttonLabels);
        }, 1);
      } else if (confirm(message)) {
        Tasks.remove(taskId);
      }
    }
  });
}

Meteor.isCordova は Cordova 上でアプリが動いている時に true を返します。これでアプリが iOS 上で動いているかどうか判別します。

コードを書き換えたら、iOS シミュレーターか実機でタスクの削除ボタンをタップします。

ダイアログのタイトルが書き換わりましたね！

このように、Cordova 経由でネイティブの機能にアクセスすることも可能です。

また、Cordova プラグインを自作することで、自由に iOS ネイティブの機能にアクセスすることができます(ただし、ネイティブアプリ開発の知識が必要です)。

ネイティブのダイアログが表示できたら、次のステップに進みましょう。