最近、kintoneを使って業務効率化をしている中で、kintone pluginの作成にチャレンジしてみました。今回は、そのプラグイン作成について、サンプルコードを交えながら解説していきます。
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のターミナルを起動して下記のコマンドを実行します
$ npx @kintone/create-plugin hello-kintone-pluginhello-kintone-pluginは任意の名前で構いません。
サンプルのプラグインファイルが作成されます
$ cd hello-kintone-plugin
$ 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を編集
設定画面のテキストボックスを必須になるように変更します
<p class="kintoneplugin-row">
<label for="message">
Message:
<input
type="text"
class="js-text-message kintoneplugin-input-text"
required
/>
</label>
</p>まとめ
今回はカスタマイズでkintoneのプラグインを作成してみました。簡単に作れましたでしょうか？
APIなどを駆使して作ることも可能なので作ってみてください。
今回のソースは下記のリンクから飛ぶことができます。
コメント