2023.02.26 2024.02.12

kintoneのプラグインを作ってみた！

Ryota Sugaya

記事内に商品プロモーションを含む場合があります

最近、kintoneを使って業務効率化をしている中で、kintone pluginの作成にチャレンジしてみました。今回は、そのプラグイン作成について、サンプルコードを交えながら解説していきます。

この記事を読むことでkintoneのプラグインの作成方法がわかります。

Contents

kintoneとは
kintoneのプラグインとは
プラグインの作り方
まとめ

kintoneとは

kintoneは、cybozu社が提供するクラウド型ビジネスアプリケーションプラットフォームです。kintoneを使用することで、ノンプログラマーでも簡単にカスタムアプリケーションを作成することができます。

kintoneは、さまざまなビジネスニーズに合わせて、タスク管理、プロジェクト管理、顧客管理、在庫管理、営業支援など、多様なアプリケーションを提供しています。また、kintoneはAPIを提供しており、他のアプリケーションとの連携も容易に行うことができます。

kintoneのプラグインとは

kintoneのプラグインとは、kintoneの機能を拡張するためのアドオン機能です。プラグインをインストールすることで、kintoneの標準機能にない機能や、より高度な機能を利用することができます。

kintoneのプラグインには、以下のようなものがあります。

カレンダープラグイン：kintoneのレコードをカレンダー表示することができます。
チャットプラグイン：kintone内でチャットを利用することができます。
ワークフロープラグイン：簡単なワークフローを実装することができます。
プッシュ通知プラグイン：kintone内のデータ更新やイベント発生時にプッシュ通知を送信することができます。
マッププラグイン：住所データをもとにGoogleマップを表示することができます。

上記のプラグイン以外にもカスタマイズで開発することも可能です。

プラグインの作り方

1.開発環境

PC：MacbookPro 2020 Intel版

エディタ：VSCode

2.create-plugin でサンプルプラグインをインストール

VSCodeのターミナルを起動して下記のコマンドを実行します

1$　npx @kintone/create-plugin hello-kintone-plugin

hello-kintone-pluginは任意の名前で構いません。

サンプルのプラグインファイルが作成されます

1$ cd hello-kintone-plugin
2$ npm start

先程作成したプラグインのプロジェクトに移動します

「npm start」でプラグインファイルを作成し、セーブ時自動的にkintoneにアップロードされるようになります。

3.フォルダ階層とファイルの説明

distフォルダ・・・パッケージングされたプラグインファイル

srcフォルダ・・・パッケージング前のファイル。基本srcフォルダに格納されているファイルを書き換えていく

src/cssフォルダ・・・プラグイン設定画面や画面表示に適用されるCSSファイルを格納するフォルダ

src/htmlフォルダ・・・プラグイン設定画面に適用されるHTMLファイルを格納するフォルダ

src/imageフォルダ・・・プラグインのアイコンを格納するフォルダ

src/jsフォルダ・・・プラグイン設定画面や画面表示に適用されるJSファイルを格納するフォルダ

src/manifest.js・・・プラグインの設定情報が記載されているファイル

3.設定画面の作成

src/html/config.htmlを編集

設定画面のテキストボックスを必須になるように変更します

1        <p class="kintoneplugin-row">
2            <label for="message">
3                Message:
4                <input
5                    type="text"
6                    class="js-text-message kintoneplugin-input-text"
7                    required
8                />
9            </label>
10        </p>