Node.js、TypeScriptを使った開発
kintone では、作成した JavaScript ファイルをアップロードすることで、独自のカスタマイズを行うことができます。
しかし、直接 JavaScript を記述する方法では、外部のライブラリを参照するのに手間がかかったり、実装可能な機能が制限されたりと、開発効率が低下することがあります。
そこで、Node.js と TypeScript を使って開発を行うことで、開発効率を向上させることができます。
このページでは、Node.js と TypeScript を使った kintone カスタマイズの環境構築方法について説明します。
必要な環境
Node.js
Node.js は、JavaScript の実行環境です。Node.js を使うことで、サーバーサイドの開発や、開発環境の構築を行うことができます。
Node.js のインストール方法については、公式サイトを参照してください。
正しくインストールされている場合、以下のコマンドを実行した際にバージョンが表示されます。
node -v && npm -v
mkcert
今回紹介する方法では、JavaScript ファイルを直接アップロードするのではなく、ローカルサーバーのファイルを kintone から参照させる方法でカスタマイズを適用します。
kintone から参照するためには HTTPS 通信であることが必須となるため、mkcert を利用してローカルサーバーに SSL 証明書を発行します。
Windows の場合 Chocolatey、macOS の場合 Homebrew を使ってインストールすることができます。
# Windows
choco install mkcert
# macOS
brew install mkcert
詳細なインストール方法については、各パッケージマネージャーの公式サイトを参照してください。
プロジェクトの作成
必要な環境が整ったら、プロジェクトを作成します。
npm create k2
上記コマンドを実行すると、プロジェクトの作成に必要な情報を入力するように求められます。
プロジェクト名には任意の名前、GitHub リポジトリはデフォルトのままで問題ありません。
プロジェクトが正常に作成された場合、以下のようなメッセージが表示されます。
プロジェクトが作成されたら、作成したプロジェクトに移動して、依存パッケージをインストールします。
また、初期設定を行うために以下のコマンドを実行します。
cd "プロジェクト名"
npm install && npm run init
これで、Node.js と TypeScript を使った kintone カスタマイズの環境構築が完了しました。
次に、作成したプロジェクトを起動して、ローカルサーバーにアクセスしてみましょう。
npm run dev
上記コマンドを実行すると、ローカルサーバーが起動します。
コマンドラインに表示されている URL にアクセスすると、ローカルサーバー上に作成された、ビルド後の JavaScript ファイルを確認することができます。
反映したい JavaScript ファイルのリンクをコピーし、kintone のアプリ設定から、「設定タブ」 > 「JavaScript / CSS でカスタマイズ」を開きます。
「JavaScript ファイル」項目にある「URL 指定で追加」をクリックし、先ほどコピーしたリンクを貼り付けてください。
アプリ設定を更新すると、ローカルサーバー上の JavaScript ファイルが kintone に反映されます。
以上で、Node.js と TypeScript を使った kintone カスタマイズの環境構築が完了しました。
ファイルの変更を監視する
先ほど実行したnpm run devコマンドは、ファイルの変更を監視して自動でビルドを行う機能を持っています。
そのため、作成したプロジェクト内のファイルを更新すると、自動的に再ビルドが実行され、kintone に反映されます。
ファイルの変更を監視する機能を停止する場合は、Ctrl + Cを押してコマンドを中断してください。
本番環境用のビルド
前述した開発時のままでは、開発中の PC でしかアクセスできないため、他のユーザーがアクセスできるようにするためには、本番環境用のビルドを行う必要があります。
以下のコマンドを実行することで、本番環境用のビルドを行うことができます。
npm run build
ビルドが完了すると、.k2/buildディレクトリにビルド後の JavaScript ファイルが出力されます。
このファイルを kintone にアップロードすることで、本番環境に反映することができます。