kintone プラグイン作ってみた話 ～kintone記事エディターシリーズ スピンオフ～
こんにちはー。
健康診断の絶食から解放されて食べ過ぎの反動。
不健康になりそうなkitoです。
ずっと視力だけ変わらないのが謎すぎる。
今回は「kintoneをZendeskの記事エディターにした話」シリーズのスピンオフ
kintoneプラグインを作ってみた話
を紹介します。
Why Create Plugin ?
続：kintoneをZendeskの記事エディターにした話 のMarkdown編集機能を
とあるアプリにも適用してほしいとの依頼があり、
いっその事プラグイン化してしまおうというのがきっかけです。
（いくつかのアプリで、似たようなカスタマイズしてると管理が大変でつらみ）
出来上がったやーつ
アプリのフォームにフィールドを配置してプラグインの設定をすると、
レコードの登録画面で Markdownでの記述 ができるようになります。
また、レコードの表示画面では、見出しの目次表示 もつけてみました。
開発環境
開発環境は、@kintone/create-plugin で作成しました。
参考：
create-pluginを使ってプラグインの雛形を作成しよう！ – cybozu developer network
めちゃくちゃ開発が楽になりますね、これ。
+αで機能追加して、最終的には（おおまかに）以下の流れで
開発（自動パッケージング＆アップロード）できるようになりました！
- eslintによるチェック
- TypeScriptをJavaScriptにトランスパイル（本番時のみ圧縮＆暗号化）
- scssをcssにトランスパイル（本番時のみ圧縮）
- プラグインZip生成
- 検証環境へ自動アップロード(開発時のみ）
+αしたものたち
追加した結果は、以下の通りです。
色々な参考サイトで紹介されているものばかり（笑
※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を利用した従来の方法とは、コードの記述量がかなり違います。
参考：
- 「kintone UI Component」を使って簡単にkintoneライクなUIを設置する – cybozu developer network
- kintone UI Componentを使って動的ドロップダウンを作成しよう！ – cybozu developer network
webpack-plugin-kintone-plugin
webpack-plugin-kintone-plugin を利用すると、
webpackを使ってプラグインのパッケージングができます。
開発時だけプラグインのファイル名を変えて利用してました！
参考：
- webpack-plugin-kintone-pluginを使ってプラグインファイルをパッケージングしよう！ – cybozu developer network
- webpackを利用するkintoneプラグイン開発の流れ – Qiita
番外: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プラグインのテストについても知見を貯めて、
紹介できればと思います。
それでは、また。
