Zenn
🔌

かんたんなCapacitorプラグインを自作して動かしてみる（iOS）

2023/08/13に公開
Angular
iOS
Swift
Capacitor
Ionic
tech

はじめに

自分がかなり苦戦したので、プラグインを開発して実際に動かすところまでをメモっておきます。
*iOSだけやります

プラグイン概要

TypeScriptで入力された文字を、Native側で加工するプラグインを作ります。

プラグイン作成

  1. Capacitor公式プラグインジェネレーターを使ってプロジェクトを作ります
    お好みのディレクトリ内で以下を叩きます。
npm init @capacitor/plugin@latest
  1. ジェネレーターに対してレスポンスします。
Ok to proceed? (y) y
✔ What should be the npm package of your plugin?
 … capacitor-echo-plugin
✔ What directory should be used for your plugin?
 … capacitor-echo-plugin
✔ What should be the Package ID for your plugin?  （ハイフン付きはダメみたい）

    Package IDs are unique identifiers used in apps and plugins. For plugins,
    they're used as a Java namespace. They must be in reverse domain name
    notation, generally representing a domain name that you or your company owns.

 … com.hogehoge.hogehoge
✔ What should be the class name for your plugin?
 … Echo
✔ What is the repository URL for your plugin?  （GitHubリポジトリを適当に指定）
 … https://github.com/hogeuserid/hogerepo
✔ (optional) Who is the author of this plugin?  （省略可）
 … （）
✔ What license should be used for your plugin?
 › MIT
✔ Enter a short description of plugin features.
 … Echo test
  1. ディレクトリ内の ios/Plugin.xcworkspace を開きます。

4.Echo.swiftを下記のように編集します。

Echo.swift
import Foundation

@objc public class Echo: NSObject {
    @objc public func echo(_ value: String) -> String {
        print(value)
        return value + "とSwiftが返事をしました！"  //ここを編集しました
    }
}

テスト用アプリの作成

今回はIonic/Angularのアプリでテストしてみます。

  1. お好みのディレクトリ内で以下を叩きます。（Ionic CLIが必要です）
ionic start plugin-test-app blank --type=angular

NgModulesで作ります。

? Would you like to build your app with NgModules or Standalone Components? 
 Standalone components are a new way to build with Angular that simplifies the way 
you build your app. 
 To learn more, visit the Angular docs:
 https://angular.io/guide/standalone-components

 NgModules
  1. npmで自作プラグインをインストールします。
npm i <プラグインディレクトリのパス>
  1. src/app/home/home.page.tsを編集します。
home.page.ts
import { Component } from '@angular/core';
import { Echo } from 'capacitor-echo-plugin';

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

  async testPlugin() {
    const { value } = await Echo.echo({ value: 'これはテストです' });
    alert(value);
  }
}
  1. 続いて、src/app/home/home.page.htmlを編集します。
home.page.html
<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title> Blank </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Blank</ion-title>
    </ion-toolbar>
  </ion-header>

  <div id="container">
    <strong>Ready to create an app?</strong>
    <p>
      Start with Ionic
      <a
        target="_blank"
        rel="noopener noreferrer"
        href="https://ionicframework.com/docs/components"
        >UI Components</a
      >
    </p>
  </div>
  <!-- ここを追加 -->
  <ion-button (click)="testPlugin()">テスト</ion-button>
</ion-content>

いざテスト

  1. ビルドします。
npm run build
  1. ライブリロード機能付きでシミュレーターを立ち上げます。
ionic cap run ios --livereload --external
  1. テストボタンを押してみます。

    このように表示されれば成功です。

最後に

https://www.youtube.com/watch?v=bNBYPc7oIqI

時間割ベースで日程調整できるツール「Comma」を運営しています！
下記URLからアクセスできますのでチェックしてみてください！
Comma - 時間割ベースの日程調整ツール

Discussion