この記事では、私が作成したテンプレートリポジトリを利用して、モダンなJavaScriptでのkintoneプラグインの開発方法について書いていきます。
必要なもの
bash、Node.js、Gitが使える環境を用意してください。
Windowsの場合はCygwinやmsys、あるいはWindows Subsystem for Linuxなどを用いて実行してください。
手順
1. リポジトリをクローンする
$ git clone https://github.com/MysticDoll/kintonePluginTemplate.git pluginName && cd pluginName
pluginNameの部分は作成するプラグインの名前に置き換えてください
2. リポジトリの初期化
cdでリポジトリのディレクトリへ移動したら、次のコマンドを実行してください。
$ npm install
$ npm run init
npm run initを実行すると、key.js、keys/ディレクトリには鍵ファイルが作成されます。
このとき作成した鍵ファイル及びkey.jsは変更や削除しないようにしてください。
3. プラグインの設定
plugin/manifest.jsonを編集してプラグインの設定を行ってください。
images/icon.pngは同梱していないので、plugin/images/icon.pngという名前でアイコンを配置しましょう。
js/config.js及び、js/desktop.jsはそれぞれビルド後のJSファイルなので、変更する際は併せてwebpack.config.jsも変更するようにしてください。
css/style.cssは空のものが置かれているので、置き換えるようにしてください。
プラグインの情報についても必要に応じ書き換えましょう。
4. 開発する
config/index.jsとdesktop/index.jsを編集し、プラグインを開発していきます。
前者が設定画面のJSファイル、後者がアプリ側で使用するJSファイルになっています。
WebPack(1年ほど前に書いたためバージョンは1ですが)及びBabelを用いているため、ES6準拠のJavaScript記法を使いES5に変換します。
このリポジトリはES6に対応していますが、更に新しいバージョンのJavaScript記法を使うことも出来ます。
その場合はpackage.jsonとwebpack.config.jsを編集し依存関係及びWebPackの設定を変更してください。
WebPackの設定についてはここでは割愛します。
config/index.js及びdesktop/index.jsのimport key from "../key"; という部分では、変数keyにプラグインIDを代入しています。
そのため、プラグインの設定の読み込みや保存はこのkeyを引数にして行ってください。
5. パッケージングする
パッケージングする際は下記コマンドを実行してください。
$ npm run build
実行後、plugins/{pluginId}/plugin.zipが生成されます。こちらをkintoneに読み込むと開発したプラグインが使用できます。
高度な開発
JSの圧縮の無効化
このテンプレートをそのまま使う場合、ビルドされたJSファイルは圧縮されて出力されます。
この機能を使わない場合はwebpack.config.jsを編集しpluginsの項目の
new webpack.optimize.Uglifyjsplugin()
を削除してください。
ソースマップの利用
inline-source-map機能を使うと、ソースマップが出力されます。
これにより、ビルドされたスクリプトをデバッグする際に分割されたファイル単位でブラウザの開発者ツールからソースを確認しブレークポイントの挿入が可能です。
この機能を利用する場合は、webpack.config.jsを編集し、以下のようにしてオブジェクトにdevtool: "inline-source-map"の項目を追加してください。
const webpack = require("webpack");
module.exports = {
/**
* 中略
**/
plugins: [
new webpack.optimize.UglifyJsPlugin()
],
devtool: "inline-source-map"
};
外部ライブラリの利用
WebPackを利用したテンプレートなので、npmや公開されているGitリポジトリなどからライブラリを利用することも出来ます。
使いたいライブラリがnpm上に公開されている場合は下記コマンドを実行し、
$ npm install --save library-name
JSファイル上で、
import library-name from "library-name";
とすることで利用可能です。ライブラリによってはインポートの仕方が異なる場合もあるので適宜合わせてください。
全てのJSのグローバル変数としてライブラリを使いたい場合はwebpack.config.jsのpluginsの配列に
new webpack.ProvidePlugin({
"library-name": "library-name"
})
を追加してください。
例えばjqueryとlodashをそれぞれ$と_としてグローバルにする場合、まずは以下のように依存関係をインストールします。
$ npm install --save jquery lodash
そして、pluginsの項目は以下のようにします。
plugins: [
new webpack.Provideplugin({
"$": "jquery",
"_": "lodash"
})
]
Gitリポジトリから外部ライブラリをインストールする場合は、以下の形のコマンドで行います。
$ npm install GitリポジトリのリモートURL
jQueryをnpmからではなくGitリポジトリからインストールする場合は
$ npm install git+https://github.com/jquery/jquery.git
のようにして行います。
その他細かいインストールの方法はnpm help installを実行しヘルプを参照してください。