BLOG ブログ

kintone プラグイン作ってみた話 ~kintone記事エディターシリーズ スピンオフ~

こんにちはー。

健康診断の絶食から解放されて食べ過ぎの反動。
不健康になりそうなkitoです。

ずっと視力だけ変わらないのが謎すぎる。

今回は「kintoneをZendeskの記事エディターにした話」シリーズのスピンオフ

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

を紹介します。

Why Create Plugin ?

続:kintoneをZendeskの記事エディターにした話 のMarkdown編集機能を
とあるアプリにも適用してほしいとの依頼があり、
いっその事プラグイン化してしまおうというのがきっかけです。

(いくつかのアプリで、似たようなカスタマイズしてると管理が大変でつらみ)

出来上がったやーつ

アプリのフォームにフィールドを配置してプラグインの設定をすると、

レコードの登録画面で Markdownでの記述 ができるようになります。
また、レコードの表示画面では、見出しの目次表示 もつけてみました。

開発環境

開発環境は、@kintone/create-plugin で作成しました。

参考:
create-pluginを使ってプラグインの雛形を作成しよう! – cybozu developer network

めちゃくちゃ開発が楽になりますね、これ。

+αで機能追加して、最終的には(おおまかに)以下の流れで
開発(自動パッケージング&アップロード)できるようになりました!

  1. eslintによるチェック
  2. TypeScriptをJavaScriptにトランスパイル(本番時のみ圧縮&暗号化)
  3. scssをcssにトランスパイル(本番時のみ圧縮)
  4. プラグインZip生成
  5. 検証環境へ自動アップロード(開発時のみ)

+αしたものたち

追加した結果は、以下の通りです。
色々な参考サイトで紹介されているものばかり(笑
※package.jsonから抜粋

"devDependencies": {
  "@babel/core": "^7.5.5",
  "@babel/preset-env": "^7.5.5",
  "@cybozu/eslint-config": "^7.0.0",
  "@kintone/dts-gen": "^2.0.1",
  "@kintone/kintone-ui-component": "^0.3.6",
  "@kintone/plugin-packer": "^2.0.3",
  "@kintone/plugin-uploader": "^3.0.3",
  "@kintone/webpack-plugin-kintone-plugin": "^3.0.1",
  "@types/marked": "^0.6.5",
  "@types/prismjs": "^1.16.0",
  "@types/simplemde": "^1.11.7",
  "@types/turndown": "^5.0.0",
  "@types/webpack": "^4.39.1",
  "@typescript-eslint/eslint-plugin": "^2.0.0",
  "@typescript-eslint/parser": "^2.0.0",
  "autoprefixer": "^9.6.1",
  "babel-loader": "^8.0.6",
  "css-loader": "^3.2.0",
  "cssnano": "^4.1.10",
  "eslint": "^6.2.2",
  "eslint-config-kintone": "^2.0.0",
  "eslint-config-prettier": "^6.1.0",
  "eslint-loader": "^3.0.0",
  "eslint-plugin-prettier": "^3.1.0",
  "glob": "^7.1.4",
  "mini-css-extract-plugin": "^0.8.0",
  "node-rsa": "^1.0.5",
  "node-sass": "^4.12.0",
  "npm-run-all": "^4.1.5",
  "postcss-loader": "^3.0.0",
  "prettier": "^1.18.2",
  "sass-loader": "^7.3.1",
  "sweetalert2": "^8.16.3",
  "ts-loader": "^6.0.4",
  "typescript": "^3.6.2",
  "webpack": "^4.39.3",
  "webpack-cli": "^3.3.7",
  "webpack-merge": "^4.2.2",
  "webpack-obfuscator": "^0.18.3"
},
"dependencies": {
  "core-js": "^3.2.1"
}

kintoneの開発支援ツール

追加内容は、大体のものは察しがつくかと思いますので、
ここではkintoneの開発支援ツールをざっくり紹介します。

ですよ、このツールたちは。。。

kintone-config-helper

kintone-config-helper を利用すると、フォームの情報を簡単に取得できます。
設定画面で、フォームの情報取得する時に大活躍しました!

参考:

kintone UI Component

kintone UI Component を利用すると、kintoneライクなUIが簡単に実装できます。
modern default cssを利用した従来の方法とは、コードの記述量がかなり違います。

参考:

webpack-plugin-kintone-plugin

webpack-plugin-kintone-plugin を利用すると、
webpackを使ってプラグインのパッケージングができます。

開発時だけプラグインのファイル名を変えて利用してました!

参考:

番外:Bitbucket PipelinesでDownloadsにArtifactをアップする

コード管理にはBitbucketを使っていて、CI/CD用にPipelinesが無料で利用できます。
※無料で利用できるけど、制限あり。

そこで、、、

Tag生成時にプラグインのZipファイルを生成してアップロードするようにしてみました。

公式ドキュメントを参考に作った設定ファイルの内容

image: node:10.15.0

pipelines:
  tags:
    '*':
    - step:
        name: build
        caches:
          - node
        script:
          - npm install
          - npm run build
        artifacts: 
          - dist/*.zip
    - step:
        name: upload
        script:
        - curl -X POST --user "$BB_AUTH_STRING" "https://api.bitbucket.org/2.0/repositories/${BITBUCKET_REPO_OWNER}/${BITBUCKET_REPO_SLUG}/downloads" --form files=@"dist/$(cd ./dist/ && ls -1 *.zip)" -v

まとめ

実はプラグイン作ったの初めてです(汗

もっと苦労するかと思っていたのですが、
kintoneの開発支援ツールによって簡単に作成できる事がわかり、
色々カスタマイズしてきたアレコレをプラグインにできそうな予感がしてます!

ただ、、、

テスト書いてないんですよね。
自動アップロード後の手動確認に甘えてしまったので・・・・・・

(kintone Caféで、自動でアプリ生成してテストさせてますと聞いた事があるんですが、そういう感じなんですかネ?)

いつかkintoneプラグインのテストについても知見を貯めて、
紹介できればと思います。

それでは、また。