kintone のプラグイン開発｜必要なファイル、開発手順を紹介

サイボウズ社が提供する業務改善プラットフォーム kintone は、アプリ作成やコミュニケーションツールなどの基本的な機能だけでなく、プラグインによる機能追加、JavaScriptによるカスタマイズという、優れた拡張性を持っています。
これらを利用すれば、自社固有の機能を追加する、目的に合わせたアプリの設定などができます。

本記事では、プラグイン開発に焦点をあて、機能拡張の方法を詳しく解説します。

kintoneの開発について、関連記事をご用意しております。
▼kintoneを自社で開発するメリット・デメリットについて解説

kintone をカスタマイズするには、プラグインのインストールとJavaScriptによる開発の2つの方法があります。まず、この2つのカスタマイズ方法の違いや、プラグインによるカスタマイズの方法について紹介します。

プラグインとはklntoneの追加機能のことです。メーカーや他のベンダーが開発したもので、必要なファイルがすでにパッケージングされているため、誰でも簡単に組み込むことができます。プラグインは無料のものと有料のものがあります。

JavaScriptによるカスタマイズは、独自の機能や設定を直接追加できます。JavaScriptは広く利用されているプログラミング言語であるため、情報も多く、身につけるまでの学習コストが比較的低いというメリットがあります。

JavaScriptによるカスタマイズのほうがより自由な拡張ができますが、プログラミングの経験がない人にとっては敷居が高いといえます。

両者の特性から「簡単にカスタマイズできるプラグイン」と「自由にカスタマイズできるJavaScript」と理解するとよいでしょう。それでは早速、実際にプラグインを追加していく流れを解説します。

kintone に自社開発したプラグインや既に kintone で用意されているプラグインを追加する場合は、次の手順で行います。

1. kintone システム管理画面を開く
2. メニュー「その他」の「プラグイン」をクリック
3. 画面左上にある「読み込む」をクリック
4. 「参照」をクリックし、読み込むプラグインのファイル「xxx.zip」を選択
5. 「読み込む」をクリック

読み込むプラグインは、100MBまでのファイルを選択できます。読み込んだ後「読み込んだプラグイン」の中に選択したプラグインが表示されていれば、追加は完了です。新しいバージョンのプラグインを読み込む場合は、同じ手順を行います。

プラグインは、プラグインストアから目的のプラグインをダウンロードして追加することも可能です。次の手順で行います。

1. kintone システム管理画面を開く
2. メニュー「その他」の「プラグイン」をクリック
3. インストールしたいプラグインを選択し、「インストール」をクリック
4. 「OK」をクリック

画面に表示されているプラグインのステータスが「インストール済み」となっていれば、プラグインの追加が完了しています。また、プラグインストアから追加したプラグインは、常に最新のバージョンに自動的でアップデートされます。

ここまででプラグインを追加できるようになりました。続いては、プラグインを開発する流れをご紹介します。

プラグイン開発に必要な次のファイルを準備します。この中で必須のファイルはアイコンファイルのみで、その他は必要に応じて用意しましょう。

※1　スマホ専用のプラグインの場合、省略可能
※2　スマホで利用しないプラグインの場合、省略可能

マニフェストファイルは、プラグイン開発に必要な情報をまとめたファイルです。プラグインの名前やプラグイン内のファイルを記載します。以下がマニフェストファイルの例です。

{
    "manifest_version": 1,
    "version": 1,
    "type": "APP",
    "name": {
        "ja": "サンプル",
        "en": "sample"
    },
    "description": {
        "ja": "これはサンプルです。",
        "en": "This is a sample."
    },
    "icon": "image/icon.png",
    "homepage_url": {
        "ja": "https://sample.com/jp/",
        "en": "https://sample.com/en-us/"
    },
    "desktop": {
        "js": [
            "js/customize.js",
            "https://sample.com/js/customize.js"
        ],
        "css": [
            "https://sample.com/css/customize.css",
            "css/customize.css"
        ]
    },
    "config": {
        "html": "html/config.html",
        "js": [
            "https://sample.com/js/config.js",
            "js/config.js"
        ],
        "css": [
            "css/config.css",
            "https://sample.com/css/config.css"
        ],
        "required_params": ["Param1", "Param2"]
    }
}

plugin-packerは、プラグイン開発に必要なファイルをzipファイルにまとめるツールです。マニフェストファイルの内容を元に、必要なファイルとマニフェストファイルを配置後、コマンドを実行すると、自動でパッケージングされます。

パッケージングが完了すると、zip形式のプラグインファイルと、ppk形式の秘密鍵ファイルが生成されます。秘密鍵ファイルは2回目以降のパッケージングでも利用するため、大切に保管しておきましょう。

作成したプラグインファイルを kintone 環境にインストールするには、前述の「ファイルからプラグインの読み込み」の手順を行います。

なお、同じプラグインIDを持つプラグインをアップロードした場合、自動的に上書きされ、プラグインを利用しているアプリにも即時適用されます。

また、複数のプラグインを指定した場合、プラグインが競合する場合もあります。事前に運用に支障がないことを検証しておくことをおすすめします。

プラグイン開発ではパッケージングツール「plugin-packer」を使用しましたが、他にも開発に役立つツールがあります。ここでは3つ紹介します。

• plugin-uploader
  開発したプラグインzipファイルを kintone にアップロードするためのツールです。kintone 環境にプラグインファイルをインストール作業を自動化したい場合に便利です。

• create-plugin
  プラグインのひな型を作るツールです。初めてプラグイン開発を行う場合や、一から開発する場合に利用します。plugin-packer、plugin-uploaderも入っています。

• webpack-plugin-kintone-plugin
  webpackを利用したプラグインファイルをパッケージングする場合に利用します。

ここでは、プラグイン開発でよくつまずくポイントから、役立つTipsなどをご紹介します。

プラグイン設定画面で初期値を設定しても、再度プラグイン設定画面を再表示すると、設定した初期値がデフォルト値に戻ってしまいます。そうなると、最初に設定した初期値が何であったかを確認できません。

そうならないために、プラグイン設定画面のJavaScriptファイル内で、以下のように記述すると、プラグイン設定画面で初期値を設定できます。

jQuery.noConflict();

(function($, PLUGIN_ID) {
    "use strict";

    $(document).ready(function() {
        // プラグインIDの設定
        var conf = kintone.plugin.app.getConfig(PLUGIN_ID);

        //既に値が設定されている場合はフィールドに値を設定する
        if (typeof (conf['elm']) !== 'undefined') {
            $('#element').val(conf['elm']);
        }
    });

})(jQuery, kintone.$PLUGIN_ID);

プラグインには、新規アプリ作成が前提のものもあります。その際、以下のコードを記載すれば、プラグインで使用するフィールドを自動的に追加できます。

// 初回プラグイン設定時のみ必要なフィールドを自動追加する
kintone.api(kintone.api.url('/k/v1/preview/app/form/fields', true), 'POST', {
    "app": kintone.app.getId(),
    "properties": {
        "Name": {
            "code": "Name",
            "label": "名前",
            "type": "SINGLE_LINE_TEXT"
        },
        "ID": {
            "code": "ID",
            "label": "ID",
            "type": "NUMBER"
        }
    }
}, function(resp) {
    location.reload();
});

kintone は非常に拡張性が高く、プラグインを利用すれば簡単にカスタマイズできます。また、JavaScriptを使えるなら、さらに自由度の高いカスタマイズも可能です。

プラグイン開発の詳細については、cybozu developer networkにも詳しく情報が掲載されています。そちらもご確認ください。

既成のプラグインを利用するだけでなく、今回ご紹介した手順でプラグイン自体の開発にもぜひチャレンジしてみてください。

※本記事の内容は2022年5月時点のものです。kintone の仕様や利用環境は変更する場合があります。