スムーズなCordovaプラグイン開発：テンプレートとスニペットの活用法

みなさんがプラグインを作成する際、どのようなアプローチをとっていますか？

一般的には、以下の手法がよく使われていると思います。

しかし、これらの手法だと以下のような疑問や問題が発生することがあります。

・どこを修正すればプラグインが正しく機能するのか？
・コードを書き換えた結果、プラグインが動作しなくなってしまった。

初めてプラグインを作成しようとすると、ハードルが高く感じられることがあります。また、プラグインを一から作る機会自体がそう頻繁にあるわけではないため、作成を始める際に問題が生じることが多いと思われます。

そこで今回は、プラグイン作成に役立ちそうな2つの方法をご紹介いたします。

最小限の機能だけを持ったプラグインのソースコードを用意しました。

多機能な既存のプラグインをベースに編集するよりも、トラブルが減ると思います。どのパラメータを修正すべきか、それがどのファイルに存在するかなどについて、本ブログとソースコードのコメントで補足しています。

プラグイン用のソースコードや定義ファイル（plugin.xmlなど）を自動的に出力できるユーザースニペットを用意しました。これにより、プラグインの動作に必要な内容を簡単に出力することができます。

プラグインテンプレート

プラグインテンプレートの利用方法を簡単に説明します。

まず、以下のリンクからZIPファイルをダウンロードしてください。

ダウンロードが完了したら、ZIPファイルを展開します。フォルダの中身は次のようになっています。

作成したいプラグインに応じて、ソースコードのクラス名、ファイル名、プラグイン名、IDなどの設定項目を変更します。

どの設定項目を変更するかは、以下の対応表を参考にしてください。対応表に従って必要な項目を変更していくことで、プラグインのカスタマイズが可能です。

・注意事項
リポジトリをZIPダウンロードではなく、gitコマンドにてクローンした場合は、.git/* ディレクトリを削除してください。

ユーザースニペットとは、IDEやテキストエディタに登録しておくことで、編集中のファイルに簡単な手順で挿入できるテンプレート文字列のことです。これを登録しておけば、わずか数回のキー操作でplugin.xmlやpackage.jsonのひな形を挿入できるようになります。

今回は、Visual Studio Code（VSCode）用のユーザースニペットを用意しました。下のリンク先にスニペットの定義ファイルを配置しています。

VSCodeのスニペット定義ファイルに、プラグイン用の設定を追加する方法を説明します。

まず、snippets/vscode/フォルダにあるスニペット定義をコピーします。次に、新たに作成するスニペット定義ファイルに、コピーした内容を貼り付けます。

スニペット定義ファイルでは、それぞれのファイル拡張子に対してスニペットを登録していきます。例えば、プラグイン作成に必要な「package.json」ファイルは、拡張子が「.json」なので、JSONスニペットを登録します。

VSCodeでスニペット定義ファイルを作成する手順は次のとおりです。

注意) Objective-Cファイルの場合

先ほど登録したpackage.jsonを使ったスニペットを例にして使用法を紹介します。

これにより、プラグインの基本構造を簡単に挿入でき、プラグイン開発をスムーズに始められると思います。

新規Cordovaプラグイン作成に役立つ2つの方法を解説してきました。テンプレートを利用する方法とスニペットを活用する方法は、それぞれのニーズに応じて選ぶことができます。

テンプレートは簡単にプラグインの基本構成を作成できる反面、どのパラメータを変更すべきかが分かりにくい点が課題です。一方、スニペットはファイル構成やディレクトリ構成に精通している方に向いており、より柔軟なカスタマイズが可能です。

これらの方法を試してみて、自分に適したプラグイン作成方法を見つけてもらえたら嬉しいです。