この記事は、 PLEX Advent Calendar 2024の21日目の記事です。
はじめに
こんにちは。コーポレートチームの山崎です。
ビジネスを加速させる kintone!!
kintone を加速させるプラグイン・カスタマイズ!!
本記事では、このプラグイン・カスタマイズ開発を加速させる最高の開発環境を作った話をしようと思います。
前提
この記事における 「kintone 開発」とは kintone のプラグインおよびカスタマイズの開発を指します。 JavaScript によるフロントエンド開発と捉えてもらって問題ありません。
背景
以前まではビジネスサイドのメンバーが中心となってkintone開発していました。
開発環境やコードの整備が不十分で「動けばヨシ!!」という思想の元、乱雑なコードが量産されていきました。
その結果、エンジニアには次々とバグ修正の依頼が飛んでくる状況に。
原因の特定や修正に時間がかかり、負担も大きくなっていました。
コーポレートチームのメンバー増員に伴い、この状況を改善するため、エンジニアが主体となって kintone 開発を進めていく方針となりました。
alu.jp旧開発環境のツラかったところ
一応エンジニアが管理している kintone 用のリポジトリも存在していましたが、かなり不便でした。
バンドラが無い
- モジュール管理やライブラリの追加ができない
- 単一の JS ファイルのみで書かれていた
TypeScirpt が書けない
- Vanila JS しか書けない...
- 型が欲しい😢
複雑な UI を作るのが辛い
- React や Vue も導入していなかった
createElementして再レンダリングまで自前で実装みたいな...
動作確認が大変
- kintone が提供しているツールを使っていたが、アップロードに若干の時間がかかり、細かい動作確認時に不便
プラグインの作成が難しい
とても快適に開発できる環境ではなかった...
alu.jp開発環境を刷新したい!!
上記のツラさから kintone 開発は面倒くさいものという認識が広がりつつありました。
kintone は悪く無い... 石器時代のような環境が悪いんや...
しかし、裏を返せば
難しいことをせずとも、モダンな技術スタックを持ち込むだけで、劇的な効率化が可能ということです!
ローコスト・ハイインパクト!! やるしかない!!
モジュールバンドラを導入しよう
察しの良い方はお気づきかもしれませんが、上述したツラい点のほとんどは、モジュールバンドラを導入することで解決できます。
開発環境刷新に取り掛かったのは 2024年3月頃、モジュールバンドラ界隈は Vite が台頭していました。
kintone は多数の開発 Tips を公開していますが、
当時 Vite を用いた開発に関する記事は存在しておらず、自分で頑張って作りました...
という話を書こうと思っていたのですが、最近 kintone が下記記事を公開していたので割愛します。公式を見てください。
とにかく...!!
Vite を導入したことで現代フロントエンジニアが満足に開発できる環境が整いました!!
- ライブラリを追加できるようになった
- React で簡単に複雑な UI を作成できるようになった
- TypeScript で書けるようになった
誰でも簡単に kintone 開発ができるようにしたい!!
最低限のフロントエンド開発環境は整ったものの、kintone開発経験が無いエンジニアにとっては、いくつかの障壁が残っていました。
- React は書けるけど、kintone 上でどう動かすの?
- どうやって kintone にアップロードするの?
- カスタマイズとプラグインって作り方違うの!?
- etc...
カスタマイズ・プラグインの雛形を CLI から作成
kintone 開発リポジトリは Turborepo を使ったモノレポ構成になっています。(これも導入した)
そして、Turborepo にはジェネレータを定義してコード生成する機能が存在します。
プラグイン・カスタマイズの雛形を用意しておき、ジェネレータを定義して、CLI から一発で作成できるようにしました。
雛形にはkintone上でReactコンポーネントを表示する部分まで用意しているので、kintoneとの繋ぎ込みを気にせず、実装そのものに集中できるようになりました！
➜ yarn create:customize ? カスタマイズ名を入力してください。例: project-name customize-name ? 対象のkintoneアプリのIDを入力してください 100 ? 開発用アプリがあればIDを入力してください 999 ? 機能の概要を入力してください。例: ブログ記事用のテストだよ >>> Changes made: • /apps/100/customize-name/package.json (add) • 6 files added -> /apps/100/customize-name/README.md -> /apps/100/customize-name/tsconfig.json -> /apps/100/customize-name/vite.config.ts -> /apps/100/customize-name/src/App.tsx -> /apps/100/customize-name/src/main.tsx -> /apps/100/customize-name/src/vite-env.d.ts (addMany) >>> Success! ✨ Done in 38.38s.
CLI から GCS 経由でニアリアルタイムにアップロード
kintone から提供されている customize-uploader はアップロードに若干の時間がかかるため、細かい変更を反映させて動作確認するのは少し手間でした。
ホットリロードのような開発体験を目指して下記スクリプトを追加しました。
nodemonで変更検知&ビルドgsutilで GCS にアップロードconcurrentlyで上記2つのコマンドを同時実行
kintone はURL指定でカスタマイズを利用することができるので、GCSにアップロードしたファイルを指定することで、高速かつ簡単にアップロードできるようになりました!
ただし、プラグインのアップロードにはブラウザの操作が必要なため、公式提供の plugin-uploader を使用しています。
最高の開発環境ができた
難しい実装はせずに、モダン技術を取り込むだけでストレスの無い最高の開発環境が完成しました!!
やはり、流行りの技術をキャッチアップするのはとても大切だと感じました。
開発環境刷新後の効果
本当に誰でも kintone 開発できるようになった
業務委託の方や入社したばかりメンバーがスムーズに開発を始めることができるようになりました。
「誰でも簡単に kintone 開発ができるようにしたい!!」という目標を達成することができたし、「フロントエンド開発ができる = kintone 開発ができる」という状況を作ることができたのはとても大きいです。
大幅に開発効率が上がった
kintone 開発特有の障壁を取り除く事で、大幅に開発効率が上がりました。(冗談抜きで百倍効率化できたと感じる)
また、kintone 開発をできるエンジニアが増えたので、チーム全体としてのアウトプット量も増やすことができました。
kintone を利用した業務オペレーションの選択肢が広がった
旧環境では難しかったリッチな UI を簡単に作成できるようになったことで、業務オペレーションの選択肢が大幅に増えました。
ビジネスサイドのメンバーが考えるアイデアをより多く実現できるようになり、会社の成長に大きく貢献できるようになりました。
まとめ
最終的な開発環境の構成を簡単にまとめておきます。
- Turborepo によるモノレポ構成
- Vite によるバンドル
- TypeScript で開発可能
- CLI から雛形を生成可能
- GCS 経由でニアリアルタイム更新反映
面倒臭いコト・効率が悪いコトを技術で解決する。エンジニア冥利に尽きますね。
みなさんの kintone 開発 tips もコメントで教えていただけると嬉しいです!
さいごに
現在プレックスではソフトウェアエンジニア、フロントエンドエンジニア、UIデザイナーを募集しています。
一緒に働いてみたいと思った方がいましたら、是非ご連絡をお待ちしています！
