kintone プラグイン開発メモ　その１（一覧画面にHello,worldと表示するプラグインを作ってみた）

kintoneプラグイン作家になる為に、プラグインの開発方法を調べながら、少しづつ公開していこうと思います。

# kintoneプラグインとは何か？
「kintoneプラグインとは何か？」をkintoneカスタマイズと比較することで、自分なりに考えてみたいと思います。

kintoneプラグインの動作イメージはこんな感じと思っています。

| 動作イメージ             |
|:-----------------------:|
| JavaScriptカスタマイズ   |
| プラグイン               |
| kintone                 |
| cybozu運用基盤           |

おそらく、JavaScriptカスタマイズよりも先に読み込まれているような気がします。

# プラグインとカスタマイズの違い
おそらく、プラグインとJavaScriptカスタマイズはそれほど違いは無いような気がします。

|         |   カスタマイズ               |    プラグイン             |
|:-------:|:---------------------------:|:------------------------:|
|開発言語  | JavaScript                  | JavaScript               |
|パッケージ| 特になし                     | plugin-packerを利用      |
|デプロイ  | アプリ設定からアップロード    | kintoneシステム管理からアップロード|
|設定値の保存| 特になし                   | kintone.plugin.app.setConfig()を利用して設定値を保存 |
|その他    |カスタマイズ用画面利用可       |設定画面用のHTMLファイル利用可|

# Hello,Worldプラグインを作ってみる
お約束のHello,Worldを表示させるプラグインを作ってみます。

 1. アイコンファイル　icon.png作成
 2. customize.js PC用JavaScriptファイル作成
 3. マニフェストファイル(manifest.json)作成
 4. plugin-packerにてパッケージ作成
 5. デプロイ

次回以降実際に作成していきます。

# 開発環境の準備
nodeをインストールした上で、plugin-packerをインストールします。
ディレクトリを作成して、必要なファイルを作成します。

```sh
$npm -v
6.5.0
$ 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/plugin-packer@1.0.5
$ mkdir src
$ cd src
$ mkdir image
$ mkdir js
$ touch manifest.json
$ cd js
$ touch customize.js
$ cd ..
$ tree .
.
├── image
├── js
│   └── customize.js
└── manifest.json
```

# アイコンファイルの作成
アイコンファイルを作成します。ファイルのサイズに注意が必要です。
参考：[kintone プラグイン開発手順](https://developer.cybozu.io/hc/ja/articles/203455680#step1)

# ファイルの編集
customize.jsを編集します。今回は一覧画面が表示されたら、「Hello,world」と表示してみます。
参考：[第1回 kintone JavaScript APIのイジりかた](https://developer.cybozu.io/hc/ja/articles/201755040)

```customize.js
(function () {
    "use strict";
    kintone.events.on('app.record.index.show', function(event) {
        window.alert('Hello,world');
    });
})();
```
manifest.jsonを編集します。

```manifest.json
{
    "manifest_version": 1,
    "version": 1,
    "type": "APP",
    "name": { 
        "ja": "サンプルプラグイン",
        "en": "sample plugin"
    },
    "description": { 
        "ja": "これはサンプルプラグインです。",
        "en": "This is sample plugin."
    },
    "icon": "image/icon_helloworld.png",
    "homepage_url": { 
        "ja": "https://example.com/jp/",
        "en": "https://example.com/en-us/"
    },
    "desktop": {
        "js": [
            "js/customize.js",
            "https://example.com/js/customize.js"
        ]
    }
}
```
# パッケージング
kintone-plugin-packerを利用してパッケージします。

```sh
$ tree .
.
└── src
    ├── image
    │   └── icon_helloworld.png
    ├── js
    │   └── customize.js
    └── manifest.json
$ ~/.npm-global/bin/kintone-plugin-packer src
Succeeded: /Users/kazoo/local/kintone/plugin/hello_world/plugin.zip
$ tree .
.
├── 秘密鍵ファイル.ppk
├── plugin.zip
└── src
    ├── image
    │   └── icon_helloworld.png
    ├── js
    │   └── customize.js
    └── manifest.json
```
plugin.zipと秘密鍵ファイルが生成されます。

# デプロイ
kintoneシステム管理のプラグインメニューからプラグイン追加を選択。
plugin.zipを選択してOKを押下します。
<img width="729" alt="スクリーンショット 2019-01-21 7.48.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/214523/eac728aa-990f-5a69-483d-668386e3ed41.png">

# プラグインのインストール
kintoneアプリのアプリの設定メニューから設定タブのプラグインメニューを選択。
プラグインの追加を押下して、メニューからプラグインを選択します。
<img width="606" alt="スクリーンショット 2019-01-21 7.47.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/214523/eddddece-a6e8-bfb3-f9a1-25c65f2a8b1f.png">

# アプリの実行
アプリを実行して確認します。
<img width="837" alt="スクリーンショット 2019-01-21 7.42.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/214523/d71d1570-e19c-6386-bd9c-7b56203e3589.png">