kintoneでは、「プラグイン」を利用して、JavaScriptカスタマイズと同等の機能拡張や他サービスとの連携を実現できます。
通常のカスタマイズではアプリに合わせてJavaScriptファイルを編集する必要がありますが、プラグインを使うと、プラグインの設定画面でそれぞれのアプリに合わせた設定ができます。

プラグインは、kintoneをカスタマイズするためのJavaScriptやCSSファイルをパッケージングしたものです。

この記事では、プラグインの作成手順とkintoneへのインストール方法について説明します。
kintoneプラグインを作成する方法の詳細は、チュートリアルを参照してください。
はじめようkintoneプラグイン

プラグイン作成の手順は、以下のとおりです。

1. プラグイン作成に必要なファイル（JavaScript, CSSファイルなど）を準備します。
2. マニフェストファイル（manifest.json）を作成します。
3. パッケージツール（plugin-packer）を利用して、プラグイン作成に必要なファイルをパッケージングします。
4. 作成したプラグインファイルをkintone環境にインストールします。

パッケージングするファイルを準備します。
パッケージングするファイルのディレクトリ構成およびファイル名は自由です。

以下は一例です。

プラグイン一覧、プラグイン設定画面で表示されるプラグインアイコン用のファイルです。

• 必須ファイルです。
• 利用可能なファイルタイプは、png／jpg／gif／bmpのいずれかです。
• ファイルサイズの上限値は、20MBです。

PC画面用のJavaScriptファイルです。

• モバイル専用のプラグインの場合、省略可能です。
• 設定画面で設定した情報を使い、実装したい処理を記述します。
• 設定画面用のJavaScriptファイルで プラグインの設定情報を保存するAPI を利用して設定した情報は、 プラグインの設定情報を取得するAPI を利用して取得します。
  このとき必要なプラグインIDは、kintone.$PLUGIN_IDという変数に出力されます。
  プラグインIDは、プラグイン作成時に各プラグインへ一意に割り当てられる32桁のIDです。
  例：faabchdodajloackbgnipilddblmkejp
• ファイルサイズの上限値は、20MBです。

プラグインIDの参照例

1アプリで複数のプラグインを利用する場合、kintone.$PLUGIN_IDは複数回代入されます。
そのため、以下のように即時実行関数でプラグインIDを補足して利用してください。

1
2
3

((PLUGIN_ID) => {
  kintone.plugin.app.getConfig(PLUGIN_ID);
})(kintone.$PLUGIN_ID);

PC画面用のCSSファイルです。

• モバイル専用のプラグインの場合、省略可能です。
• kintoneのデザインに合わせたい場合は、 51-modern-default を利用してください。
• ファイルサイズの上限値は、20MBです。

モバイル用のJavaScriptファイルです。

• モバイルでプラグインを利用しない場合、省略可能です。
• 設定画面から設定した情報を使い、実装したい処理を記述します。
• 設定画面用のJavaScriptファイルで プラグインの設定情報を保存するAPI を利用して設定した情報は、 プラグインの設定情報を取得するAPI を利用して取得します。
  このとき必要なプラグインIDの参照方法は、 プラグインIDの参照例 を参照してください。
• ファイルサイズの上限値は、20MBです。

モバイル画面用のCSSファイルです。

• モバイルでプラグインを利用しない場合、省略可能です。
• ファイルサイズの上限値は、20MBです。

設定画面用のJavaScriptファイルです。

• 省略可能です。
• プラグインIDの参照方法は、 プラグインIDの参照例 を参照してください。
• プラグインの設定情報を保存するAPI を利用して、プラグインの設定値を保存できます。
• ファイルサイズの上限値は、20MBです。
• プラグイン設定画面を開いた際に実行されるJavaScriptファイルです。

設定画面用のCSSファイルです。

• 省略可能です。
• kintoneのデザインに合わせたい場合は、 51-modern-default を利用してください。
• ファイルサイズの上限値は、20MBです。
• プラグイン設定画面に対し適用されるCSSファイルです。

設定画面用のHTMLファイルです。

• 省略可能です。
• ファイルサイズの上限値は、64KBです。
• 下図の赤枠部分を構成するHTMLファイルです。
  

  

マニフェストファイル（manifest.json）を作成します。
マニフェストファイルは、プラグイン作成に必要なファイル情報をまとめた設定ファイルです。
このファイルは、kintoneプラグイン作成に必須です。

マニフェストファイルは、JSON形式のファイルです。
各パラメーターの詳細は以下のとおりです。

"type": "APP"

"manifest_version": 1

"version": 1

"version": "1.0"

"version": "1.0.0"

"name": {
  "ja": "サンプルプラグイン",
  "en": "sample plugin",
  "zh": "插件的例子",
  "es": "Complemento de ejemplo"
}

"description": {
  "ja": "これはサンプルプラグインです。",
  "en": "This is sample plugin.",
  "zh": "这是插件的例子",
  "es": "Este es un complemento de ejemplo."
}

"icon": "image/icon.png"

"homepage_url": {
  "ja": "https://example.com/ja/",
  "en": "https://example.com/en/",
  "zh": "https://example.com/zh/",
  "es": "https://example.com/es/"
}

"desktop": {
  "js": [
    "js/customize.js",
    "https://example.com/js/customize.js"
  ],
  "css": [
    "https://example.com/css/customize.css",
    "css/customize.css"
  ]
}

"mobile": {
  "js": [
    "js/mobile-customize.js",
    "https://example.com/js/mobile-customize.js"
  ],
  "css": [
    "https://example.com/css/customize.css",
    "css/customize.css"
  ]
}

"config": {
  "html": "html/config.html",
  "js": [
    "js/config.js",
    "https://example.com/js/config.js"
  ],
  "css": [
    "https://example.com/css/config.css",
    "css/config.css"
  ]
  "required_params": ["Param1", "Param2"]
}

指定できるロケール

ロケールには、次の言語コードを指定できます。

• ja：日本語
• en：英語
• zh：中国語（簡体字）
• es：スペイン語

マニフェストファイルの例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

{
  "manifest_version": 1,
  "version": 1,
  "type": "APP",
  "name": {
    "ja": "サンプルプラグイン",
    "en": "sample plugin",
    "zh": "插件的例子",
    "es": "Complemento de ejemplo"
  },
  "description": {
    "ja": "これはサンプルプラグインです。",
    "en": "This is sample plugin.",
    "zh": "这是插件的例子",
    "es": "Este es un complemento de ejemplo."
  },
  "icon": "image/icon.png",
  "homepage_url": {
    "ja": "https://example.com/ja/",
    "en": "https://example.com/en/",
    "zh": "https://example.com/zh/",
    "es": "https://example.com/es/"
  },
  "desktop": {
    "js": ["js/customize.js", "https://example.com/js/customize.js"],
    "css": ["https://example.com/css/customize.css", "css/customize.css"]
  },
  "mobile": {
    "js": [
      "js/mobile-customize.js",
      "https://example.com/js/mobile-customize.js"
    ],
    "css": ["https://example.com/css/customize.css", "css/customize.css"]
  },
  "config": {
    "html": "html/config.html",
    "js": ["https://example.com/js/config.js", "js/config.js"],
    "css": ["css/config.css", "https://example.com/css/config.css"],
    "required_params": ["Param1", "Param2"]
  }
}

「plugin-packer」を利用してプラグインに必要なファイルをパッケージングし、プラグインファイルを生成します。

plugin-packerは、プラグイン作成で必要なファイルをzipファイルにパッケージングするCLIツールです。
plugin-packerの詳細は、 plugin-packer を参照してください。

このツールを利用するには、Node.jsが必要です。
Node.jsのインストーラーは、 Node.js公式サイト より入手してください。
必要なNode.jsのバージョンの確認方法は、 plugin-packer | 下準備 を参照してください。

以下のコマンドを実行し、plugin-packerをインストールします。

1

npm install -g @kintone/plugin-packer

以下の手順で、プラグインファイルをパッケージングします。

1. マニフェストファイルに沿って、作成した各ファイルとマニフェストファイルを配置します。
   

   

2. パッケージングしたいファイルをまとめたディレクトリ（src）の、ひとつ上のディレクトリに移動します。
   上記のファイル配置例の場合、「work」に移動します。

   1

   cd work

3. 次のコマンドを実行すると、自動でパッケージングが開始されます。
   実行に成功すると、成功メッセージが表示されます。

   1 2 3

   $ kintone-plugin-packer src Succeeded: DIRECTORY_PATH/work/plugin.zip

4. 実行したディレクトリに、プラグインファイル（plugin.zip）と秘密鍵ファイル（ppkファイル）が生成されます。
   秘密鍵ファイルのファイル名は、プラグインIDと同じです。
   次の例では、プラグインIDが「faabchdodajloackbgnipilddblmkejp」です。

   秘密鍵ファイルは、2回目以降のパッケージングで利用します。なくさないでください。

   

2回目以降のパッケージングは、--ppkオプションを使って、1回目のパッケージングで生成された秘密鍵ファイルを指定します。
同じ秘密鍵ファイルを使ってパッケージングすると、プラグインIDは同じになります。

1

kintone-plugin-packer --ppk PLUGIN_SECRET_KEY.ppk src

プラグインファイルの出力先ディレクトリを変更したい場合や、ファイル監視しながらパッケージングしたい場合など、その他の機能については、 plugin-packer REAMEのOptions を参照してください。

作成したプラグインファイルをkintoneへインストールします。

1. 「kintoneシステム管理」を開きます。

2. 「その他」の「プラグイン」をクリックします。
   

   

3. 「読み込む」ボタンをクリックします。
   

   

4. 「参照」ボタンをクリックし、パッケージ手順4. で生成したプラグインファイル（plugin.zip）を選択します。
   

   

5. 「読み込む」ボタンをクリックします。
   

   

6. 「インストールされたプラグイン」に、作成したプラグインが表示されれば成功です。
   

   

• インストールできるプラグインファイルのサイズ上限値は、100MBです。
• 同じプラグインIDをもつプラグインファイルをアップロードすると、自動的に上書きインストールされます。
  そのプラグインを利用しているアプリにも即時適用されます。
• アプリに複数のプラグインを適用する場合、プラグイン同士が競合し、意図しない挙動をすることがあります。
  運用に支障がないことを検証したうえで、プラグインを適用してください。

今回は、パッケージツール（plugin-packer）を利用したkintoneプラグインの作成手順と、kintoneへのインストール方法について説明しました。

プラグインを使うと、kintoneカスタマイズの内容を簡単に複数のアプリへ適用できます。
プラグインファイルのパッケージング手順も簡単なので、ぜひプラグイン作成に挑戦してみてください。

このTipsは、2019年1月版kintoneで動作を確認しています。