「はじめようkintoneプラグイン」シリーズは、kintoneカスタマイズをしたことがある方向けに、kintoneプラグインの開発の基本を学ぶためのコンテンツです。
kintoneカスタマイズをしたことがない方は、 はじめようkintone API シリーズでkintone JavaScript APIを学習してからこのシリーズの学習を進めてください。

このシリーズを学習し終えると、次のことがわかるようになります。

• kintoneプラグインのメリット
• kintoneプラグインを作成するために必要なファイルやファイル構成
• プラグインの設定画面の作成方法
• プラグイン用のkintone JavaScript APIの使い方
• プラグインにおける秘匿情報の取り扱い方
• CLIツールを使ったプラグインファイルのパッケージングやkintoneへのアップロード方法

今回は、kintoneプラグインのメリットや、チュートリアルを実施する上で必要なプラグインの開発環境を構築する方法を説明します。

kintoneでは、JavaScriptファイルやCSSファイルをkintoneアプリにアップロードすることで、独自の機能の追加や見た目の変更といったカスタマイズができます。
kintoneプラグインは、JavaScriptファイルやCSSファイルをパッケージ化したファイルを使ってkintoneを拡張できる機能です。
プラグインを適用すると、JavaScript／CSSファイルをアップロードする方法と同様に、アプリにカスタマイズを適用できます。

kintoneプラグインを利用することは、アプリ管理者にとって大きなメリットがあります。
アプリ管理者の目線から、kintoneプラグインを利用することのメリットを4つ紹介します。

kintoneプラグインはカスタマイズをパッケージ化したファイルなので、プラグインが提供する機能を複数のアプリに適用できます。

たとえば「条件によってフィールドを色分けする」という条件付き書式のような機能は、複数のアプリでの適用が想定されるカスタマイズです。
JavaScript／CSSファイルをアップロードする方法の場合、適用したいアプリごとにこれらのファイルをアップロードする必要があります。
アップロード対象のファイルが複数ある場合には、さらに手間がかかります。

kintoneプラグインを利用する場合、kintoneにプラグインを読み込み、アプリで有効にするだけでカスタマイズを適用できます。

カスタマイズにバグが見つかった場合、JavaScriptファイルやCSSファイルを修正してアップロードし直します。
JavaScript／CSSファイルをアップロードする方法の場合、JavaScriptファイルやCSSファイルを修正してアップロードし直す作業は、アプリごとに行う必要があります。
そのため、適用しているすべてのアプリに対して、ファイルをアップロードし直す作業が発生してしまいます。
どのアプリにカスタマイズを適用しているかを一覧で確認できる機能はkintoneに存在しないため、アプリの設定画面を開くまでは、どのアプリにどんなカスタマイズを適用しているかを把握できません。

kintoneプラグインの場合、修正したプラグインをkintoneに再読み込みするだけで、プラグインを利用しているアプリすべてに修正内容が反映されます。
プラグインを適用しているアプリは、インストールしたプラグインの一覧画面で確認できます（kintoneシステム管理者のみ）。

kintoneアプリは柔軟にフィールドを作成できるため、配置するフィールドの種類やフィールド名がアプリごとに異なります。
フィールドに適用するカスタマイズを利用する場合、適用先のフィールドはアプリによって変わります。
たとえば条件付き書式のような機能なら、色をつけるフィールドはアプリによって異なるでしょう。

JavaScript／CSSファイルをアップロードする方法で条件付き書式を実現していた場合、色をつける対象のフィールドはJavaScriptファイルにハードコードされています。
別のアプリに同じカスタマイズを適用するには、ハードコードされた箇所をアプリに合わせて修正してアップロードしなければなりません。
アプリ管理者がエンジニアではない場合には、この修正は荷が重い作業でしょう。

kintoneプラグインの場合、対象となるフィールドを変更できる設定画面が実装されていれば、コードを修正することなくアプリ管理者自身が対象のフィールドを指定できます。

たとえば、当サイトでサンプルとして公開している 条件書式プラグイン では、プラグインの設定画面で色をつけるフィールドを指定できるように設計されています。

カスタマイズを適用するフィールドを指定できる設定画面の実装方法は フィールド情報を使った設定画面の作成 で解説します。

外部システムと連携するカスタマイズの場合、外部システムのWeb APIの実行にはAPIトークンなどの認証情報を必要とすることが多いです。
JavaScript／CSSファイルをアップロードする方法の場合、アップロードするJavaScriptファイルに対して認証情報を直接記述することになります。
しかし、kintoneアプリに適用しているJavaScriptファイルの内容は、Webブラウザーの開発者ツールで閲覧できます。
アプリの利用者に認証情報が丸見えとなってしまうため、セキュリティリスクにつながります。

認証情報のような秘匿情報を秘匿しながらWeb APIを実行するには、プロキシサーバーを自分で用意し、プロキシサーバーを経由してWeb APIを実行する方法があります。
しかし、プロキシサーバーの構築はアプリ管理者にとってハードルが高く、運用コストもかかってしまいます。

kintoneプラグインには、秘匿情報を隠蔽しながらWeb APIを実行するためのkintone JavaScript APIが用意されています。
このJavaScript APIを使ったプラグインでは、アプリ管理者がAPIトークンをプラグインの設定画面で保存するだけで、アプリの利用者に秘匿情報を閲覧させることなく外部システムとの連携を実現できます。

秘匿情報を扱うプラグインの実装方法は 秘匿情報を扱うkintoneプラグインを作成してみよう で解説します。

プラグインで外部のWeb APIを実行するしくみ

プラグインで外部のWeb APIを実行する際の舞台裏をのぞいてみましょう。

秘匿情報を扱うプラグインを開発する場合、アプリの管理者がWeb APIの実行に必要な認証情報をプラグインの設定情報として保存できるように設計します。
プラグインの設定情報を保存するkintone JavaScript APIは2種類ありますが、認証情報のような秘匿情報を保存する場合には、 外部APIの実行に必要な情報をプラグインへ保存するAPI を使用します。
このJavaScript APIを実行すると、kintoneが用意したプロキシサーバーに、JavaScript APIへ渡した認証情報が保存されます。

Web APIを実行する際には プラグインから外部APIを実行するAPI というkintone JavaScript APIを使用します。
実際にはこのJavaScript APIが直接Web APIを実行しているわけではなく、プロキシサーバーに「Web APIを実行してほしい」というリクエストを送信しています。
リクエストを受けたプロキシサーバーは、プロキシサーバーに保存された認証情報を使ってWeb APIを実行し、Web APIの実行結果をkintoneプラグインに返します。
プロキシサーバーから実行結果を受け取ったプラグインは、実行結果をその後の処理に活用します。

なお、プロキシサーバーに保存された認証情報は、プラグインの設定画面で実行できるJavaScript APIでのみアクセスできます。
アプリの利用者はプラグインの設定画面へのアクセス権限を持たないため、プロキシサーバーに保存された認証情報を閲覧できません。

このように、プラグインで外部のWeb APIを実行するしくみを利用すると、認証情報のような秘匿情報の漏洩を防ぎつつ安全にWeb APIを実行できます。

このチュートリアルでは、kintoneプラグインの開発に役立つツールを使用してプラグインを開発します。
チュートリアルを始める前に、開発で使用する端末にこれらのツールをインストールしましょう。

• Node.jsとnpm
• @kintone/plugin-packer
• @kintone/plugin-uploader

Node.jsは、kintoneプラグイン開発の便利ツールを実行する際に必要な実行環境です。
npmはNode.jsのパッケージ管理ツールで、便利ツールのインストールで使用します。
Node.jsをインストールするとnpmも使用できます。

Node.jsのインストーラーはNode.js公式サイトの ダウンロードページ からダウンロードできます。
LTS版（Long Term Support）の最新バージョンをダウンロードし、インストーラーの指示にしたがってインストールしてください。

インストールが終わったら、ターミナルソフトを開いて以下のコマンドを実行し、Node.jsがインストールされたことを確認します。

1

node --version

バージョン番号が表示されれば、インストールが完了しています。

1

v20.11.1

kintoneプラグイン開発の便利ツールは、Node.jsのサポートバージョンに合わせて、動作するNode.jsの最低バージョンをアップデートしています。
すでにNode.jsをインストールしている場合でも、最新のLTS版にアップデートしておくことをおすすめします。
必要なNode.jsの最低バージョンは、各ツールのGitHubリポジトリのREADMEで確認できます。

• @kintone/plugin-packerのREADME
• @kintone/plugin-uploaderのREADME

@kintone/plugin-packer（以降、plugin-packer）は、kintoneプラグイン用のソースコードをkintoneプラグインのファイルにパッケージングするためのツールです。
plugin-packerは次のコマンドでインストールします。

1

npm install -g @kintone/plugin-packer

次のコマンドを実行して、インストールが完了していることを確認します。

1

kintone-plugin-packer --version

バージョン番号が表示されれば、インストールが完了しています。

1

8.0.1

@kintone/plugin-uploader（以降、plugin-uploader）は、kintoneプラグインのファイルをkintoneにアップロードしてプラグインを最新化するためのツールです。
plugin-uploaderは次のコマンドでインストールします。

1

npm install -g @kintone/plugin-uploader

次のコマンドを実行して、インストールが完了していることを確認します。

1

kintone-plugin-uploader --version

バージョン番号が表示されれば、インストールが完了しています。

1

9.0.3

これで開発環境の準備が整いました。

今回は、イントロダクションとしてkintoneのプラグインのメリットや、kintoneプラグインを開発するための環境を構築する方法を学びました。
次回以降は、実際に手を動かしてkintoneプラグイン開発を始めていきましょう。
まずは、 プラグインを作成してみよう でプラグインの開発の基本や、今回インストールした便利ツールの使い方を学びます。

補足

kintoneの最新の技術情報は、X（旧Twitter）で紹介しています。
@kintonedevjp フォローし、チェックしましょう。