kintoneのカスタマイズjsのサンプルと開発の流れについて

2021年11月1日 13:53

目的

以前のエントリー(はじめに、使っている技術について )で、弊社がkintone上でTypeScriptによる開発を行っている旨を紹介しました。
本エントリーでは、kintoneのアプリにおけるカスタマイズをどのような流れで行うのか、サンプルコードも交えて紹介します。
今回はソフトウェア的な基盤の準備から開発したソフトウェアのリリースまでの紹介を中心に述べるため、複雑な業務内容ではなく単純に
「ある項目の数値を、別の項目に5倍の値にして格納する」
だけの簡単なアプリケーションを例に挙げて説明します。
実際のアプリケーションではもっと複雑な事、例えば複数のアプリにある情報をプログラムで集めて集計してグラフにしたり、他のクラウドサービスと連携したり、それこそJavaScirptとネットワークを通じて出来る事は大抵出来るのですが、複数の複雑な事を一度に理解しようとすると混乱するので、今回は開発環境の準備からリリースまでの流れを中心に説明します。

開発環境の準備

以下、開発環境の準備を順に説明します。

Node.jsのインストール

Node.jsのページよりNode.jsをダウンロード・インストールします。バージョンは現在の推奨版である16系の最新版で問題ありません。

弊社のGitHubのアカウントのリポジトリのダウンロードと展開

弊社のGitHubのアカウントのリポジトリから「Code」-「Download ZIP」を選択してリポジトリの内容をダウンロードします。
(または既にgitがインストールされていれば、以下のようにコマンドプロンプトで実行してください。)

git clone https://github.com/toma-itc/sample_code.git

Zipでダウンロードした場合は、Zipを展開してコマンドプロンプトで
sample_code\template
に移動してください。
(例えば、Zipを展開したフォルダを「ExtractPath」だとすると、以下のコマンドで移動します。)

cd ExtractPath\sample_code\template

必要モジュールのインストール

コマンドプロンプトで以下のコマンドを実行します。

npm i --legacy-peer-deps

補足

Node.jsのモジュールをインストールする際のオプションである「--legacy-peer-deps」は、バージョン14以前では不要だったのですが、16以降ではこれ(--legacy-peer-deps)が無いとエラーが発生してインストール出来ない事が多いのでご注意ください。

アプリの準備

数値の項目「元の数値」「カスタマイズで5倍にした数値」だけがあるkintoneアプリを作成します。

アプリサンプル画像2

ソースコードについて

今回の業務ロジック(と言ってもある項目の値を5倍して、別の項目に保存するだけ)は、以下のファイルに記述しました。

src\sample\sample-kintone.ts

参考までにソースを抜粋すると以下のようになっています。

import * as kintoneLib from '../lib/kintoneLib';
(function () {
	"use strict";
	kintone.events.on(['app.record.create.submit', 'app.record.edit.submit', 'app.record.index.edit.submit'], async function(event: kintoneLib.KintoneEvent<kintone.types.SavedSampleApp>) {
		let record = event.record;
		// 対象のkintoneの項目が「undefined」「null」「空文字」で無い事を確認する。
		if (record.元の数値.value != undefined && record.元の数値.value != null && record.元の数値.value && record.元の数値.value != '') {
			// 項目「元の数値」を5倍にして、項目「カスタマイズで5倍にした数値」に格納する。
			record.カスタマイズで5倍にした数値.value = String(Number(record.元の数値.value) * 5);
		}
		return event;
	})
})();

コーディングの際に使用するVS Codeの使い方などは別エントリーで説明しようと思います。今回は情報量が増えてしまうので、事前にコマンドを使ってトランスパイル出来るように準備しておきました。
またプログラムの詳細も別エントリーで説明します。

アプリの型情報の取得

TypeScriptでは強力な型システムを使えます。
kintone開発においては、「@kintone/dts-gen」を用いて、kintoneアプリの型情報を取得出来ます。
取得した型情報のファイル自体は、

src\app_fields\sampleApp_fields.d.ts

にありますが、詳細は別エントリーで説明出来ればと思います。

トランスパイル

以下のコマンドでTypeScriptのコードをJavaScriptにトランスパイルします。

npm run build-webpack-web-develop

正常に終了すると「dist-web\sample」に「sample-kintone.js」というファイルが作成されています。これがTypeScriptのコードがJavaScriptにトランスパイルされた結果になります。これをkintoneにアップロードすればカスタマイズしたプログラムが動作する事になります。

@kintone/customize-uploader のインストール

カスタマイズしたJavaScriptのプログラムをkintoneにアップロードするためのソフトウェアをPCにインストールします。

npm i --legacy-peer-deps -g @kintone/customize-uploader

JavaScriptのプログラムをkintoneにアップロードする

tool\develop\sample_develop.jsonを用いて、JavaScriptのプログラムをkintoneにアップロードします。
このときtool\develop\sample_develop.json(以下のコード参照)のappの値「0」をアップロードするkintoneのアプリIDに直す必要があります。

{
   "app": "0",
   "scope": "ALL",
   "desktop": {
       "js": [
           "./dist-web/sample/sample-kintone.js"
       ],
       "css": [
       ]
   },
   "mobile": {
       "js": [
       ]
   }
}

コマンドの流れは以下のようになります。

set KINTONE_DOMAIN=***.cybozu.com
set KINTONE_USERNAME=UserID
set KINTONE_PASSWORD=password

kintone-customize-uploader .\tool\develop\sample_develop.json

このとき「***.cybozu.com」「UserID」「password」の部分は、それぞれkintoneのドメイン・ユーザID・パスワードに直す必要があります。

アップロードが正常に終了すると、kintoneアプリの「アプリの設定」-「設定」-「JavaScript / CSSでカスタマイズ」に「sample_develop.json」が表示されているはずです。

JavaScriptのプログラムのアップロードは、ブラウザを用いても行えるのですが、開発を行っていると頻繁にアップロードする事も多く、コマンドで実行出来ると作業効率が上がるので、説明に加えました。

動作確認

アプリにおいて新規レコードを作成し、項目「元の数値」に1を入力して保存ボタンを押すと、「カスタマイズで5倍にした数値」の値が5になるはずです。

アプリサンプル画像

TypeScriptで開発したい人への一言

本サンプルコードのファイル構成を見ると、かなりいろいろファイルがある事に気付きます。
今回のような「ある値を5倍にして、別の項目に保存する」だけであれば、単純にJavaScriptを直に書いて、ブラウザでアップロードしても動作しますし、むしろその方が早いのですが、大規模なプログラムを開発したり、ソースコードをnode.jsでも動作させようとすると、型を明確に定義し、文法等も含め明確にチェックできるTypeScriptを使う必要が出てきます。
その際、ブラウザ上で動作するようにトランスパイルしたり、node.js上で動作するようにトランスパイルするようにすると、それなりに準備や基盤が必要になります。そのために必要なものを事前にテンプレートとして準備したため、ファイル構成が複雑になっています。

まとめ

今回はTypeScriptによりkintoneのカスタマイズjsを作成・リリースするために必要な準備・手順を一通りかいつまんで説明しました。今後もう少し掘り下げた説明をしていこうと思います。

また本エントリーでTypeScriptによる開発のさわりの部分が分かりましたら、このサンプルを元にして更に複雑な事を実践する事も可能になります。

宣伝(求人)

弊社ではTypeScriptを使ってkintoneに限らずWebアプリ・node.jsのプログラム(サーバプログラムやバッチプログラム等)を開発しており、またAWSのインフラ構築ですらTypeScriptを用いて行っております。
kintoneでの開発やTypeScriptによる開発、AWSを用いたWebアプリケーションの開発に興味があり、弊社で開発をしたい方がいらっしゃいましたら、是非ご連絡ください。

免責事項

ちなみにカスタマイズjsの本番環境へのアップロードは、kintoneの管理者の許可をもらって実施しないと、プログラムが不具合等により意図しない動作をした場合に、関係者に迷惑がかかったり管理者に怒られたりする(怒られるだけですめば良いのですが・・・)ので、事前に管理者への確認は行うようにしてください。
また本エントリーを参考にして問題等が発生しても弊社や執筆者は責任を負いませんのでご注意ください。

この記事が気に入ったらサポートをしてみませんか？