PhoneGapを使用する 3 - SwiftでPlugin作成 -

今回はPhoneGapの特徴であるPluginをSwiftで作成してみたいと思います。
とりあえず今回はiOSをターゲットにしたPluginを作成します。

Pluginとは?

PhoneGapのプラグインでは、WebViewからネイティブの機能を使えるようにしたものです。

Goal

---

プラグインを経由して、ネイティブ側でカメラを起動する所までやってみたいと思います。
今回はPlugin経由でネイティブ内で実行する所を確認し、次回カメラ起動をやってみたいと思います。

ディレクトリとファイルを作成

---

まずはカスタムプラグイン用のディレクトリを作成します。

$ mkdir plugins/custom-plugin-camera

次にplugin.xml、src/ios/CustomCamera.swift, www/CustomCamera.jsを作成します。
ここまでのディレクトリ構成は

plugins
│
.
.
.
├── custom-plugin-camera
│   ├── plugin.xml
│   ├── src
│   │   └── ios
│   │       └── CustomCamera.swift
│   └── www
│       └── CustomCamera.js
│
├── android.json
├── fetch.json
└── ios.json

こんな感じです。

プラグイン実装

---

次にplugin.xmlを以下のように修正します。

<?xml version="1.0" encoding="UTF-8"?>
<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"
    id="custom-plugin-camera"
    version="0.1.0">
    <name>CustomCamera</name>
    <description>Custom Camera Plugin</description>
    <license>Apache 2.0</license>
    <keywords>camera</keywords>

    <!-- ① -->
    <js-module src="www/CustomCamera.js" name="CustomCamera">
        <clobbers target="CustomCamera" />
    </js-module>

    <!-- ② -->
    <platform name="ios">
        <config-file target="config.xml" parent="/*">
            <feature name="CustomCamera">
                <param name="ios-package" value="CustomCamera" />
            </feature>
        </config-file>

        <js-module src="www/CustomCamera.js" name="CustomCamera">
            <clobbers target="CustomCamera" />
        </js-module>

        <source-file src="src/ios/CustomCamera.swift" />
    </platform>
</plugin>

① 
ここではプラグインを使う時に呼ばれるjsのモジュールを定義します。
ちなみに<clobbers target="CustomCamera" />は、プラグインを使う際に
CustomCameraでアクセスができるようにする為のものです。

例えば、プラグインでecho()メソッドが定義されていた場合、

CustomCamera.echo();

でメソッドが実行できます。

② 
ここではiosプラットフォームに関するプラグインの設定になります。

CustomCamera.jsを以下のように実装します。

var exec = require('cordova/exec');

var CustomCamera = {

  start: function() {
    exec(null, null, 'CustomCamera', 'start', []);
  }
};
module.exports = CustomCamera;

次にCustomCamera.swiftを実装します。

import Foundation

@objc(CustomCamera) class CustomCamera : CDVPlugin {

    func start(command: CDVInvokedUrlCommand) {
        print("exec from plugin")
    }
}

今回はただネイティブ側でprintするだけの実装です。

最後にplugins/ios.jsonに作成したプラグインを追加します。

    .
    .
    .
    "cordova-plugin-whitelist": {
        "PACKAGE_NAME": "xxxxxxxxx"
    },
    "custom-plugin-camera": {
        "PACKAGE_NAME": "xxxxxxxxx"
    }

iOSプラットフォームを追加し、作成されたxcodeprojファイルを開きます。

$ phonegap cordova platform add ios
$ open platforms/ios/XXXX.xcodeproj

Xcode上で実行し、コンソールにexec from pluginが表示されていれば成功です。