kintoneプラグイン "Hello World"　15分クッキング🍳

13371 ワード
kintone HelloWorld HelloWorld テキストリンク

Hello,Worldプラグインを作って見ます！

全くこのまま進めてもらえれば、プラグインを作成することができると思うます(￣∇￣)!
(2020年10月34日の私のパソコンですと）

１、開発環境の準備

私の環境では、すでにnodeがインストールされていましたので、nodeのインストール方法の説明は省きますが、今回プラグイン開発では、nodeのインストールは必須です。

nodeのインストール済み、nodeのインストールが完了している方は、ターミナル上で以下のコマンドを入力して行ってください！

$npm -v
6.13.6
$ npm install -g @kintone/plugin-packer
Success: "/Users/user/.npm-global/lib/node_modules/@kintone/plugin-packer/node_modules/fsevents/lib/binding/Release/node-v48-darwin-x64/fse.node" is installed via remote
+ @kintone/[email protected]
$ mkdir src
$ cd src
$ mkdir image
$ mkdir html
$ mkdir css
$ mkdir js
$ touch manifest.json
$ cd html
$ touch config.html
$ cd ../
$ cd js
$ touch config.js
$ touch customize.js
$ cd ../
$ cd ..
$ tree .
.
└── src
    ├── css
    ├── html
    │   └── config.html
    ├── image
    ├── js
    │   ├── config.js
    │   └── customize.js
    └── manifest.json

CSSファイル作成

今回は、kintone側ですでに用意されているデザインを使う為、以下のGitHubがらファイルをダウンローして、CSSフォルダに入れてください

アイコンファイルの作成

アイコンファイルを作成し、imageフォルダにファイルを入れます。
その時の注意点として、ファイルのサイズに注意が必要です。

以下を参考に作成ください
👇
https://developer.cybozu.io/hc/ja/articles/203455680#step1

各ファイルの編集

config.html
<div class="kintoneplugin-label">アラートに表示する値を入力してください</div>
<div class="kintoneplugin-input-outer">
  <input class="kintoneplugin-input-text" type="text" id="helloWorld">
</div>
<button class="kintoneplugin-button-normal" id="save">送信</button>
config.js
jQuery.noConflict();

(function(PLUGIN_ID, $) {
    'use strict';

    const config = kintone.plugin.app.getConfig(PLUGIN_ID)
    document.getElementById("helloWorld").value = config.helloworld

    $('#save').click(function() {

        let config = {};

        config.helloworld = document.getElementById("helloWorld").value

        kintone.plugin.app.setConfig(config);
    });

})(kintone.$PLUGIN_ID, jQuery);
customize.js
(function(PLUGIN_ID) {
    'use strict';

    const config = kintone.plugin.app.getConfig(PLUGIN_ID);

    kintone.events.on('app.record.index.show', function(event) {
        alert(config.helloworld)
    });

})(kintone.$PLUGIN_ID);
manifest.json
{
    "manifest_version": 1,
    "version": 1,
    "type": "APP",
    "name": { 
        "ja": "Hello World プラグイン",
        "en": "Hello World plugin"
    },
    "description": { 
        "ja": "このプラグインは、一覧表示画面にプラグイン設定画面で入力した文字をアラートに表示させるプラグインです。",
        "en": "This plug-in is a plug-in that displays the characters entered on the plug-in setting screen in the alert on the list display screen."
    },
    "icon": "image/icon.png",
    "desktop": {
        "js": [
            "js/customize.js"
        ],
        "css": [
        ]
    },
    "config": {
        "html": "html/config.html",
        "js": [
            "https://js.cybozu.com/jquery/3.5.1/jquery.min.js",
            "js/config.js"
        ],
        "css": [
            "css/51-modern-default.css"
        ],
        "required_params": ["helloworld"]
    }
}

パッケージ化

パッケージングしたいファイルをまとめたディレクトリ（src）の、ひとつ上のディレクトリに移動します。

$ tree .
.
└── src
    ├── css
    │   └── 51-modern-default.css
    ├── html
    │   └── config.html
    ├── image
    │   └── icon.png
    ├── js
    │   ├── config.js
    │   └── customize.js
    └── manifest.json

以下のコマンドでパケージ化してくれます。

$ kintone-plugin-packer src
Succeeded: /Users/username/qiita/plugin.zip
$ tree .
.
├── 秘密鍵ファイル.ppk
├── plugin.zip
└── src
    ├── css
    │   └── 51-modern-default.css
    ├── html
    │   └── config.html
    ├── image
    │   └── icon.png
    ├── js
    │   ├── config.js
    │   └── customize.js
    └── manifest.json

kintone環境へのインストール

kintoneシステム管理からプラグイン画面を開き、読み込むボタンから、先ほど作成した「plugin.zip」を読み込みます。

読み込みが完了すると、以下のようみ表示されます。

プラグイン設定

今回作成したプラグインを導入したいアプリに移動し、設定画面にいきます、、、、、

こちらを参考に、プラグインの追加を行ってください。
👇
https://jp.cybozu.help/k/ja/admin/system_customization/add_plugin/plugin.html

今回のプラグインでは、設定画面で入力した文字を一覧画面にアラートで表示するプラグインです。

設定画面で、表示した文字列を入力し、送信( ＾∀＾)そして、アプリを更新します！

すると、、一覧画面に、、、入力した文字が表示されます！

以上！kintoneプラグイン開発「Hello World」でした。。