クロスプラットフォームフレームワーク「Capacitor」でネイティブAPIを呼び出す方法(iOS編)

CapacitorははWebアプリをクロスプラットフォーム向けにブリッジするためのフレームワークです。本記事では、ネイティブAPIを呼び出す方法を解説しています。
2020.02.26

Capacitorとは

CapacitorはWebアプリをクロスプラットフォーム向けにブリッジするためのフレームワークです。概要は以下の記事にまとめていますのでご参照ください。

Capacitorを使ったWebアプリからは プラグイン という機能を使ってネイティブのAPIを呼び出すことができるようになっています。本記事では、ネイティブAPIを呼び出す方法を解説します。

まずはプラグイン一覧を確認しよう

Capacitorでは標準で用意されているプラグイン、および有志により作られたコミュニティプラグインがすでにたくさんあります。

作りたい機能が決まったら、まずはすでに存在するプラグインの中で用途にマッチしているものがないか探すようにしましょう。

カスタムでネイティブAPIを呼び出す方法

カスタムネイティブAPIを呼び出すには、2つの方法があります。

こちらで解説されている方法は前者で、npmでの公開が必要になります *1。後者の場合はプロジェクト専用のコードになるため、どこかに公開する必要などはなく気軽に作り始めることができます。

本記事では、プロジェクト専用のネイティブコードを実装してみます。

プロジェクト専用のネイティブコードを実装する

まずはXcodeプロジェクトを開き、Swiftファイルを作成します。名前を CustomBridge.swift としました。

CustomBridge.swift

import Capacitor

@objc(CustomBridge)
public class CustomBridge: CAPPlugin {
  @objc func echo(_ call: CAPPluginCall) {
    let value = call.getString("value") ?? ""
    call.success([
        "value": value
    ])
  }
}

CustomBridge クラスを作っています。このクラスは CAPPlugin を継承しています。

echo メソッドを実装していますが、このメソッドはWebアプリ側で呼び出すメソッド名そのものになります。メソッドを増やしたい場合は、このように CustomBridge クラスにメソッドを追加していきます。

メソッドは CAPPluginCall のインスタンスが引数として渡されます。上記の実装コードのように call.success を呼び出すことでWebアプリ側にレスポンスを返すことができます。

次にマクロを登録するため CustomBridge.m ファイルを作成します。.h ではない点に注意してください。

CustomBridge.m

#import <Capacitor/Capacitor.h>

CAP_PLUGIN(CustomBridge, "CustomBridge",
  CAP_PLUGIN_METHOD(echo, CAPPluginReturnPromise);
)

Capacitorで作られるXcodeプロジェクトはSwiftベースになっているため、 .m ファイルのようにObjective-Cファイルを作成する際にはBridging Headerが必要になります。以下のダイアログが表示されますので「Create Bridging Header」をクリックします。

以上でXcode側の実装作業は終わりです。

次にWeb App側に呼び出すコードを実装します。1つ目のタブで呼び出し、結果をアラートで表示してみます。

src/app/tab1/tab1.page.ts

import { Component } from '@angular/core';
import { AlertController } from '@ionic/angular';
import { Plugins } from "@capacitor/core";
const { CustomBridge } = Plugins;

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {

  constructor(public alertController: AlertController) {}

  async ionViewDidEnter() {
    const result = await CustomBridge.echo({ value: "Hello World!" });
    const alert = await this.alertController.create({
      message: result.value,
      buttons: ['OK']
    });
    await alert.present();
  }

}

これだけです。Webアプリ側の実装はとてもシンプルです。

実行してみる

それでは実行してみましょう。まずWebアプリ側のコードを修正していますので、ビルドとコピーを行います。なお、このコマンドはWebアプリ側を変更するたびに行う必要があります。

$ ionic build
$ npx cap copy ios

ネイティブコードが実行され、結果が画面上に表示されます。

ネイティブ呼び出しが必須の実装も自由に行えます!

ネイティブ呼び出しが必要な機会は多いです。例えばモバイルアプリのネイティブ向けのSDKのみが提供されているサービスは少なくありません(AD系、アナリティクス系など)。そのようなサービス特有のネイティブ呼び出しも、本記事で紹介した機能を使うことで容易に対応が可能です。

脚注

  1. GitHub Packageなどを使って限定的に公開する方法もあります。