コラムCOLUMN

kintoneのプラグインの作り方とは?開発手順を解説

kintoneのJavaScriptカスタマイズに慣れてきた方の中には、再利用性や保守性を高めるために「プラグイン化」を検討されている方も多いのではないでしょうか。しかしながら、プラグインの作成手順や構成ファイルの扱い方、署名の方法などは、公式ドキュメントを読むだけでは理解しづらい場合も少なくありません。

本記事では、kintoneプラグインの作り方をステップごとに丁寧に解説しています。開発の全体像から具体的なコード例、注意すべきポイントまで幅広くカバーしていますので、これを読まずに独自の方法で進めると、非効率な構成や動作不良に悩まされる可能性があります。

正しい手順と知識を身につけて、kintoneカスタマイズを次のフェーズへと進化させましょう。

kintoneプラグインの概要と導入メリット、基本的な仕組みとは

kintoneプラグインとは、JavaScriptやCSSなどのカスタマイズコード、および設定用のHTMLなどを一つのパッケージにまとめ、複数のアプリで「機能拡張」として手軽に再利用できるモジュールです。

通常、kintoneの機能を拡張するには「JavaScriptカスタマイズ」と「プラグイン」の2つのアプローチがありますが、開発工数や運用面で大きな違いがあります。

kintoneプラグインとJavaScriptカスタマイズとの違い

「JavaScriptカスタマイズ」は、特定のアプリに対して個別のコードを書き下ろす手法です。柔軟性は高いですが、設定値を変更するたびにソースコードを修正し、再アップロードする必要があります。そのため、プログラミング知識がない担当者には修正が難しく、管理が属人化しやすいというデメリットがあります。
一方「プラグイン」は、処理ロジックと設定値を分離している点が最大の特徴です。開発者はロジック部分をパッケージ化し、利用者はプラグイン設定画面を通じて、APIトークンやフィールドコードなどの「設定値」のみを操作します。
これにより、プログラミング知識がない現場の担当者でも、マウス操作だけで機能の調整や適用が可能になります。

kintoneプラグインのメリット

プラグイン開発には一定の工数がかかりますが、導入することで以下の6つの大きなメリットが得られます。

1. 再利用性が高い
共通の機能を持つカスタマイズを、複数のアプリ間で使い回すことができます。個別にコードを書き写したり設定し直したりする必要がなく、組織全体での開発・導入効率が大幅に向上します。

2. 設定画面で柔軟にカスタマイズ可能
プラグインに組み込まれた設定画面から、パラメータをグラフィカルユーザーインターフェース上で簡単に指定できます。ソースコードを触ることなく、専門知識がないユーザーでも直感的に設定を変更でき、導入後の使い勝手に優れています。

3. 保守・管理がしやすい
一つのパッケージとして管理できるため、不具合修正や機能追加のアップデートが一括で行えます。新しいバージョンのプラグインを読み込むだけで全利用アプリに修正が反映されるため、バージョン管理が明確になり、運用上の混乱を防ぎます。

4. コードのモジュール化が可能
処理ロジックを整理・分割して記述できるため、可読性が向上します。チームでの開発や他担当者への引き継ぎもスムーズに行えるほか、機能ごとに疎結合な設計にすることでバグの発生を抑えられます。

5. 導入・配布の容易さ(ノーコード対応)
通常のカスタマイズではファイルを順序通りにアップロードするなどの手順が必要ですが、プラグインなら「ZIPファイルを読み込むだけ」でインストールが完了します。エンジニア以外(市民開発者)でも高度な機能を安全にアプリへ実装できるため、現場主導の業務改善が加速します。

6. 設定ミスの防止と品質の均一化
JavaScriptファイル、CSSファイル、画像ファイルなどが1つにパッケージングされているため、「CSSファイルのアップロード忘れ」や「読み込み順の間違い」といった単純な設定ミスを物理的に防ぐことができます。これにより、どのアプリでも均一な品質で動作させることが可能です。

プラグインの基本構造

プラグインはZIP形式のファイルとして作成され、以下のようなファイルやフォルダで構成されます。

・manifest.json: プラグインのメタ情報(名前、バージョン、説明など)
・desktop.js: kintoneのPC版で動作するJavaScript
・config.html / config.js / config.css: プラグイン設定画面の構成
・image/icon.png: プラグインのアイコン

これらのファイルを正しく配置し、ZIP形式で圧縮したうえでkintoneにアップロードすることで、プラグインとして利用できるようになります。

kintoneプラグインの開発前に確認すべきポイント

プラグイン開発は通常のカスタマイズよりも工数がかかるため、着手前に以下のポイントを整理し、「本当にプラグイン化すべきか」を見極めることが重要です。

1. 「汎用性」がある機能かどうか

その機能は、他のアプリでも使い回す可能性がありますか?もし「特定の1つのアプリでしか使わない」かつ「今後も設定変更の予定がない」機能であれば、わざわざプラグイン化するメリットは薄く、通常のJavaScriptカスタマイズの方が開発コストを抑えられます。
プラグイン開発は、設定画面を作り込む工数が発生するため、通常の2〜3倍の手間がかかることも珍しくありません。「複数のアプリで横展開する」「ユーザー自身に設定を変えさせたい」という要件がある場合にのみ、プラグイン化を選択しましょう。

2. kintoneのアップデート耐性を考慮できているか

kintoneプラグイン開発において最もリスクが高いのが「DOM操作」です。
kintoneのHTML構造に依存したコードを書くと、kintone本体の月次アップデートでHTML構造が変わり、突然プラグインが動かなくなる可能性があります。開発前に、kintone APIだけで要件を満たせるかを確認してください。もしDOM操作が避けられない場合は、メンテナンス体制の確保が必須となります。

3. モダンな開発環境の準備

単純なテキストエディタでも開発は可能ですが、品質と効率を求めるなら環境構築が欠かせません。

・Node.js / npm
パッケージ管理のため必須。

・plugin-packer / create-plugin
kintone公式が提供するCLIツール。

・React / Vue.js
設定画面のUI構築によく利用されます。

これらモダンな技術スタックを扱える開発リソースがあるか、あるいは学習コストを許容できるかも重要な判断基準となります。

kintoneプラグインの作り方・ステップガイド

ここでは、kintoneプラグインを一から作成するための手順について、具体的に解説します。必要な事前準備からファイルのパッケージ化、署名の手続きに至るまで、各工程を順を追ってご紹介します。

1. 開発環境の準備

・任意のエディタ(Visual Studio Code推奨)
・Node.jsとnpm
・kintone CLIツール(署名やアップロード補助に使える)

2. プラグインファイルの作成

まず、以下のようなディレクトリ構成で作業フォルダを準備します。


kintone-plugin-sample/
├── manifest.json
├── desktop.js
├── config/
│   ├── config.html
│   ├── config.js
│   └── config.css
└── image/
    └── icon.png

manifest.jsonの例

{
  "manifest_version": 1,
  "version": "1.0",
  "type": "APP",
  "name": { "en": "Sample Plugin", "ja": "サンプルプラグイン" },
  "description": { "en": "Demo", "ja": "デモ用" },
  "icon": "image/icon.png",
  "desktop": {
    "js": ["desktop.js"]
  },
  "config": {
    "html": "config/config.html",
    "js": ["config/config.js"],
    "css": ["config/config.css"]
  }
}

3. 設定画面の作成

config.htmlでは、パラメータを指定するためのユーザーインターフェース(UI)をHTMLで構築します。

その入力値の保存や読み込みには、config.jsを使用し、kintoneのAPIを通じて処理を行います。

4. プラグインの署名

プラグインを利用するには、セキュリティ上の観点から「署名」が必須となります。

kintone公式が提供する署名ツールまたはCLI(コマンドラインインターフェース)を使用し、署名ファイル(private.ppk)を用いて、ZIPファイル内に署名情報を埋め込みます。これにより、改ざんの検出や信頼性の確保が可能になります。

5. アップロードと動作確認

作成が完了したZIPファイルは、kintoneの管理画面にある「プラグイン」メニューからアップロードします。その後、対象となるアプリにプラグインを適用し、想定どおりに動作するかを確認しましょう。

kintoneプラグイン導入後の注意点

プラグインは導入して終わりではありません。長期的に安定稼働させるためには、導入後の運用ルールやリスク管理が不可欠です。ここでは特に注意すべき3つのポイントを解説します。

1. kintoneの定期アップデートへの対応

kintoneは毎月定期メンテナンスが行われ、新機能の追加や仕様変更が実施されます。前述の通り、公式APIの範囲内で開発されたプラグインであれば影響を受けることは少ないですが、予期せぬ挙動の変化が起こる可能性はゼロではありません。特に業務に直結する重要なプラグインについては、kintoneのアップデート情報を定期的にチェックし、動作検証を行うフローを確立する必要があります。

2. 他のプラグインとの競合

1つのアプリに複数のプラグインを適用する場合、プラグイン同士が干渉し合ってエラーになる「競合」が発生することがあります。
よくある原因は「グローバル変数の汚染」です。開発者が独自の変数を不用意に定義してしまうと、他のプラグインが使用している変数名を上書きしてしまうことがあります。これを防ぐには、導入するプラグインが適切にスコープ管理されているかを確認するか、動作検証環境で複数のプラグインを組み合わせたテストを入念に行うことが重要です。

3. 属人化とブラックボックス化のリスク

プラグインは「中身を知らなくても使える」便利さがある反面、開発者が不在になると「誰も直せないブラックボックス」になるリスクを孕んでいます。
「エラーが出たが、ソースコードがないため修正できない」「仕様書がなく、どのようなロジックで動いているか不明」といった事態を防ぐため、開発時はソースコードの管理を徹底し、仕様書や利用マニュアルを残すようにしましょう。外部のプラグインを利用する場合は、サポート体制が整っているベンダー製品を選ぶのも一つのリスク回避策です。

kintoneプラグイン導入後の運用のコツ

プラグインは「作って終わり」ではなく、その後の運用・保守フェーズこそが本番です。属人化を防ぎ、チーム全体で効率的かつ安全に使い続けるための、実践的な運用のコツを3つ紹介します。

1. 徹底したドキュメント化と「Readme」の整備

コード内のコメントだけでなく、プラグインの仕様書や利用マニュアル(Readme)を整備しましょう。特に、設定画面の各パラメータが「何に影響するのか」を明確に記載することは重要です。開発者以外が見ても理解できるように、設定画面上の各項目に「ヘルプアイコン」や「補足説明文」をHTMLで実装しておくと、問い合わせ対応のコストが激減し、社内定着率が向上します。

2. Gitによるソースコード管理とチーム開発

ソースコードはローカルPCで管理せず、必ずGitで管理しましょう。
Gitを利用することで、「いつ、誰が、なぜ変更したか」の履歴が残るため、バグ発生時の原因究明が容易になります。また、複数人で開発する場合は「プルリクエスト」ベースで開発を進め、互いのコードをレビューし合う体制を作ることで、コード品質の均一化とエンジニアのスキルアップにも繋がります。

3. 互換性を維持したバージョンアップ戦略

プラグインを更新する際は、「既存の設定値が消えないか」「動作が変わってしまわないか」に細心の注意を払う必要があります。バージョン番号には「セマンティック・バージョニング」を採用し、バグ修正なら末尾を、機能追加なら真ん中の数字を上げるなどルールを明確化します。特に設定画面の項目を増やす際は、既存ユーザーが更新してもエラーにならないよう、デフォルト値をコード側で補完するなどの「後方互換性」を意識した設計がプロの運用には不可欠です。

まとめ

kintoneのプラグイン作成は、通常のJavaScriptカスタマイズを一歩進め、より再利用性や管理性に優れた形で機能を実装できる強力な手段です。開発にあたっては、構造や署名など独自のルールを理解しておくことが重要ですが、手順に沿って進めればそれほど難しくはありません。チーム内や顧客向けに汎用性の高い業務改善ツールを効率的に展開するためにも、プラグイン開発の技術はぜひ習得しておきたいスキルです。まずはシンプルな機能から始めて、プラグイン開発にチャレンジしてみましょう。

お問い合わせ

kintoneアプリの開発・カスタマイズに関するご相談・ご質問などお気軽にお問い合わせください