ionic(cordova)でのプラグイン開発のながれメモ

cordova ionic ハイブリッドアプリ

開発のながれ

1. 新規プロジェクト作成(既存のプロジェクトに追加する場合は不要)
2. プラグインの開発
必要なディレクトリとファイルを作成

$ tree plugins-dev/
plugins-dev/
└── plugin-sample
    ├── plugin.xml
    ├── src
    │   ├── android
    │   │   └── Sample.java
    │   └── ios
    │       └── Sample.swift
    └── www
	└── sample.js

3. 上記のファイルを編集してプラグイン開発
4. 作成したプラグインをプロジェクトに追加
5. プログラム(js)からプラグインを呼び出すようにしたり
プラグインの修正は以下を繰り返す
・プラグインを修正
・プラグインを削除して追加
・動作確認(自分の場合は、xcodeまたはandroid studioでビルドしてる)

実装 - iOS

新規プロジェクト作成
$ ionic start SamplePlugin blank
必要なフォルダを作成
# プラグイン開発用フォルダ
$ mkdir plugins-dev

# 開発するプラグイン用のフォルダ
$ mkdir plugins-dev/plugin-sample

# ネイティブのコード用のフォルダ
$ mkdir plugins-dev/plugin-sample/src
$ mkdir plugins-dev/plugin-sample/src/ios

# Javascript用のフォルダ
$ mkdir plugins-dev/plugin-sample/www
必要なファイルを作成

plugin-dev/plugin-sample/plugin.xml

<?xml version="1.0" encoding="UTF-8"?>
<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"
        id="plugin-sample"
        version="0.1">

  <name>Sample</name>
  <description>Sample Plugin</description>

  <js-module src="www/sample.js">
    <!-- 呼び出す時の名前 -->
    <clobbers target="sample" />
  </js-module>

  <!-- iOS -->
  <platform name="ios">
    <config-file target="config.xml" parent="/*">
      <feature name="Sample">
        <param name="ios-package" value="Sample" />
      </feature>
    </config-file>
    <source-file src="src/ios/Sample.swift" />
  </platform>

</plugin>

plugins-dev/plugin-sample/www/sample.js

'use strict';

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

var Sample = {

  initialize: function(param, onSuccess, onFail) {
    return exec(onSuccess, onFail, 'Sample', 'initialize', [param]);
  }

};

module.exports = Sample;

plugins-dev/plugin-sample/src/ios/Sample.swift

import Foundation

@objc(Sample) class Sample : CDVPlugin {

    func initialize(_ command: CDVInvokedUrlCommand) {
        // パラメータの取得
        //command.arguments

        // 正常
        let result = CDVPluginResult(status: CDVCommandStatus_OK)
	commandDelegate.send(result, callbackId:command.callbackId)
    }
}
プラグインをプロジェクトに追加
# 追加
$ ionic plugin add plugins-dev/plugin-sample

# 確認
$ ionic plugin ls
・・・
cordova-plugin-console 1.0.6 "Console"
cordova-plugin-device 1.1.5 "Device"
cordova-plugin-splashscreen 4.0.2 "Splashscreen"
cordova-plugin-statusbar 2.2.2 "StatusBar"
cordova-plugin-whitelist 1.3.2 "Whitelist"
ionic-plugin-keyboard 2.2.1 "Keyboard"
plugin-sample 0.1 "Sample" # ★今回追加したプラグイン
プラグインを呼び出す部分の実装

www/js/app.js

angular.module('starter', ['ionic'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {

    ・・・

    // プラグイン呼び出し
    sample.initialize({
      api_key: "1234567890"
    });

  });
})
動作確認
$ ionic prepare

# platforms/ios以下に反映されるのでSamplePlugin.xcodeprojファイルを開いてビルド

実装 - android

プロジェクトにandroidを追加
$ ionic platform add android

# 確認
$ ionic platform ls
・・・
Installed platforms:
  android 6.1.2
  ios 4.1.1
Available platforms:
・・・
android用のプラグインを開発

plugin-dev/plugin-sample/plugin.xml

<?xml version="1.0" encoding="UTF-8"?>
<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"
        id="plugin-sample"
        version="0.1">

  ・・・

  <!-- Android -->
  <platform name="android">
    <config-file target="res/xml/config.xml" parent="/*">
      <feature name="Sample">
        <param name="android-package" value="plugin.sample.Sample"/>
      </feature>
    </config-file>
    <source-file src="src/android/Sample.java" target-dir="src/plugin/sample" />
  </platform>

</plugin>

plugins-dev/plugin-sample/src/android/Sample.java

package plugin.sample;

import org.apache.cordova.*;
import org.json.JSONArray;
import org.json.JSONException;

public class Sample extends CordovaPlugin {

    @Override
    public boolean execute(String action, JSONArray data, CallbackContext callbackContext) throws JSONException {

        if (action.equals("initialize")) {
            // パラメータ
            //data.getString

            // 正常
            callbackContext.success();
            return true;
        } else {
            return false;
        }
    }
}
プラグインの修正をプロジェクトへ反映
# 1度削除
$ ionic plugin rm plugin-sample

# 再度入れ直す
$ ionic plugin add plugins-dev/plugin-sample
動作確認
$ ionic prepare

# platforms/androidに反映されるのでこれをAndroid Stduioから開いてビルド

おわりに

とりあえず基本的な流れだけまとめた。実際にはネイティブ向けに公開されているSDKのプラグインを開発することになると思うので、SDKの組み込みとかが入ってくると思うので次回まとめてみる。

参考URL
http://kinsentansa.blogspot.jp/2015/09/swiftcordovaionicplugin.html
http://qiita.com/betchi/items/f9efc82c1bc051a2f518