ローカルHTTPSサーバーとTypeScriptで手っ取り早くkintoneのカスタマイズ開発環境をつくる
ある日突然上司から、きみプログラミングできるらしいからうちで使ってるkintoneのカスタマイズをやってみてよと言われたとします。
たぶんこのあたりの情報を読みながら始めることになるのだと思いますが、
ちょっと待てと、まず何をインストールして始めたらええねん、ってなると思います。
そこでこの記事を読めば、ある程度JavaScriptの知識のある人であれば、ローカルのHTTPSサーバーを立てて手っ取り早くkintoneのカスタマイズ開発ができるようになります。Macから1分もかからないでしょう。なぜローカルのHTTPSサーバーを立てるかというと、変更を即時に反映させながらデバッグしたいからです。そして今どき素のJSを書きたくないので、TypeScriptで開発できるようにします。ついでにCSS Modulesも使えるようにします。
これをダウンロード
とりあえず何も考えず、こいつをgit cloneしてください。
git clone https://github.com/ryokdy/kintone-local-https.git
cd kintone-local-https
npm installSSL証明書を作成する
mkcertをインストールします。
Macの場合
brew install mkcertWindowsの場合
choco install mkcertWindowsの場合はこのへんも参考にしてみてください。kintoneカスタマイズの開発はコマンドラインを使うことが多いので、WSL2上で開発するのがやりやすいと思います。
証明書を生成する
certフォルダに、localhot.pemとlocalhost-key.pemのふたつのファイルを生成します。
mkcert -install
cd cert
mkcert --key-file localhost-key.pem --cert-file localhost.pem localhost 127.0.0.1はい、これだけで準備は完了です。
デバッグする
npm run dev実行すると、dist/devフォルダにファイルが生成されます。kintoneの「アプリの設定」>「JavaScript / CSSでカスタマイズ」を開いて、生成されたJavaScriptファイルとCSSファイルのURLを指定します。
JavaScriptファイル | https://localhost:8080/dist/dev/desktop.js |
CSSファイル | https://localhost:8080/dist/dev/desktop.css |
設定を保存するとこんなふうにヘッダーに要素が現れます。
src/dektop配下のindex.tsやindex.module.cssを編集すると、変更はただちに反映されます（ホットリロードではないのでブラウザはリロードしてください）
ビルドする
npm run build本番環境のファイルをprodフォルダに出力します。
はい、簡単でしたね。あとはRESTクライアントでも何でも好きなライブラリを入れて、開発したらいいと思います。
何をやっているか
esbuild & TypeScript
ソースコードはesbuildでバンドルしています。Webpack？ もう開発終了してますから。最近はViteが流行りらしいですが、Viteは厳密にいえばバンドラーではなくフロントエンド開発のフレームワークですし、開発モードではNative ESMになってしまうのでesbuildを使っています。kintoneでそんな大量のビルドをするはことないですが、Webpackの100倍速いらしいです。TypeScriptのトランスパイルもesbuildがやってくれます。
CSS Modules
kintoneのカスタマイズ開発では、他のプラグインなどとクラス名が被らないように注意しないといけません。なのでCSS Modulesが安全かなと思います。どうしてもTailwind CSSを使いたい！っていう人はプリフィクスをつけてクラス名が被らないようにしましょう。
CSS Modulesはこんなふうに使えます。
index.module.css
.headerElement {
background-color: #282c34;
color: white;
padding: 0 8px;
text-align: center;
}index.ts
import styles from './index.module.css';
const divElement = document.createElement('div');
divElement.textContent = 'Hello World';
divElement.classList.add(styles.headerElement);まとめ
一昔前はIEの対応のためにBabelが必要だったり、簡単にHTTPSサーバーが立てられないのでDropboxやS3にちまちまアップロードして開発するのが主流（本当の話）だったりしたのですが、今はずいぶんシンプルな構成でkintoneのカスタマイズ開発ができるようになりました。ライブラリなども充実しているので、kintoneのカスタマイズ開発を手軽に行う環境が整ってきたのではないかと思います。突然上司からkintoneのカスタマイズやってみてよと頼まれたあなたに、この記事が役に立てば幸いです。
