kintone devCamp Boost! (2023 年) のセッション用リポジトリです。
kintone カスタマイズを快適に開発できるように、以下のツール群を設定済みです。
| ツール | 説明 |
|---|---|
| TypeScript | JavaScript の代替言語(AltJS)です。 型による静的解析や、型推論による強力な補完機能を利用できます。 |
| Vite | 複数の JS ファイルを 1 つのファイルにまとめるバンドラーです。 |
| Vitest | JavaScript 向けのテスティングフレームワークです。 |
| ESLint / Prettier | リンターとフォーマッターです。 構文の修正やインデント・改行などのスタイルの修正を自動的に行うことができます。 設定は @cybozu/eslint-config を使用しています。 |
| @kintone/rest-api-client | kintone REST API を JavaScript から簡単に操作するためのライブラリです。 |
| @kintone/customize-uploader | kintone カスタマイズをアップロード/ダウンロードする CLI ツールです |
| @kintone/dts-gen | kintone アプリから TypeScript 向けの型定義ファイル(.d.ts)を生成する CLI ツールです。 |
| Renovate | 依存ライブラリの更新 PR を自動作成できるサービスです。 設定は cybozu/renovate-config を使用しています。 |
| GitHub Actions | CI/CD サービスです。 自動的にコードをビルド・テスト・デプロイすることができます。 |
以下のツールをインストールします。
| ツール | ダウンロードリンク |
|---|---|
| Node.js | https://nodejs.org/ja/download |
| Git | https://git-scm.com/book/ja/v2/使い始める-Git のインストール |
| Visual Studio Code | https://code.visualstudio.com/ |
※Git のインストールは任意です。
開発用テンプレートリポジトリをダウンロードしてセットアップします。
Git のインストール状況と GitHub アカウントの有無で手順が異なります。
作業内容をセッション後も保存するために Git と GitHub アカウントを用意することを推奨しています。
以下のページの「Use this template」ボタンから自分のリポジトリを作成してください。
https://github.com/tasshi-me/kintone-devCamp-Boost-2023
作成したリポジトリをクローンしてください。
## HTTPSの場合
git clone https://github.com/作成したリポジトリのオーナー/リポジトリ名.git
## SSHの場合
git clone git@github.com:作成したリポジトリのオーナー/リポジトリ名.gitリポジトリのディレクトリに移動し、以下のコマンドを実行してください。
npm install
npm run setupリポジトリをクローンしてください。
## HTTPSの場合
git clone https://github.com/tasshi-me/kintone-devCamp-Boost-2023.git
## SSHの場合
git clone git@github.com:tasshi-me/kintone-devCamp-Boost-2023.gitリポジトリのディレクトリに移動し、以下のコマンドを実行してください。
npm install
npm run setup以下の手順でリポジトリをダウンロードしてください
- リポジトリのトップページにアクセス
- このページの「Code」→「Download ZIP」から ZIP ファイルをダウンロード
- ダウンロードした ZIP ファイルを展開してください
リポジトリのディレクトリに移動し、以下のコマンドを実行してください。
npm install
npm run setupVisual Studio Code でリポジトリをオープンします。
拡張機能(Extensions)メニューを開いて検索バーに @recommended と記入し、WORKSPACE RECOMMENDATIONS に表示された拡張機能をインストールします。
カスタマイズを追加するアプリを作成します。
セッションでは「営業支援パック」の「案件管理」アプリにカスタマイズを追加します。 https://jp.cybozu.help/k/ja/user/create_app/sales_pack.html
以下のファイルを編集します。
.envKINTONE_BASE_URL: kintone 環境の URL（例：https://example.cybozu.com）KINTONE_USERNAME: ユーザ名KINTONE_PASSWORD: パスワード
customize-manifest.jsonapp: カスタマイズを追加するアプリのアプリ ID
以下のコマンドを実行します。
npm run build
npm run uploadアプリのレコード一覧画面にアクセスしてダイアログが表示されたら成功です！
以下のコマンドを実行します。
srcディレクトリ内のソースコードを変更すると自動的にカスタマイズのビルド・アップロードが行われます。
npm run start※VSCode の Vitest 拡張機能をインストールしている場合は、拡張機能からテストを実行することを推奨します。
以下のコマンドを実行します。
ファイルの変更に応じてテストは自動的に再実行されます。
npm run testテストの書き方は Vitest の公式ドキュメントを参照してください。
Getting Started | Guide | Vitest
※VSCode の ESLint・Prettier 拡張機能をインストールしている場合はファイル保存時に自動実行されます。
以下のコマンドを実行します。
# チェックのみ
npm run lint
# 自動修正
npm run fix現在、@kintone/dts-gen の提供する型ではkintone.events.onのイベントオブジェクトの型は any になっています。
declare namespace kintone {
namespace events {
function on(event: string | string[], handler: (event: any) => any): void;
js-sdk/packages/dts-gen/kintone.d.ts at master · kintone/js-sdk
このテンプレートリポジトリではいくつかのイベントオブジェクトについて型定義を提供しています。
これを指定することでイベントハンドラ内で受け取ったイベントを安全に扱うことができます。
// eventTypes[イベントタイプ]で型を指定
kintone.events.on(
"app.record.edit.submit",
(event: eventTypes["app.record.edit.submit"]) => {
console.log(event.appId);
}
);@kintone/dts-gen を使うことで レコードの型定義ファイルを生成することができます。
生成した型は、JS API でレコードを扱う際に指定することができます。
以下のコマンドを実行してください。
npm run generate:dts アプリIDsrc/@types/app-アプリID.d.tsというファイルが作成されます。
イベントハンドラから取得したレコードに対して型を指定してください。
kintone.events.on("app.record.edit.submit", (event) => {
const record: App123.Record = event.record;
console.log(record);
});| 型 | 説明 |
|---|---|
AppアプリID.Record |
保存前のレコードの型定義です。app.record.edit.submitイベントなどで使用します。 |
AppアプリID.SavedRecord |
保存後のレコードの型定義です。app.record.detail.showイベントなどで使用します。 |
@kintone/rest-api-client を使うことで kintone REST API を簡単に操作することができます。
レコードの型には dts-gen で生成したAppアプリID.SavedRecordと、KintoneRestAPI.RecordまたはKintoneRestAPI.PartialRecordを組み合わせて指定してください。
import { KintoneRestAPIClient } from "@kintone/rest-api-client";
// クライアントの作成
const client = new KintoneRestAPIClient();
// レコードの取得
const records = await client.record.getAllRecords<
KintoneRestAPI.Record<App123.SavedRecord>
>({
app: 123,
});
// レコードの追加
const recordsToAdd: Array<KintoneRestAPI.PartialRecord<App123.SavedRecord>> =
[{...}, {...}, {...}];
client.record.addAllRecords({ app: 1, records: recordsToAdd });詳しくはドキュメントを参照してください。
https://cybozu.dev/ja/kintone/sdk/rest-api-client/kintone-javascript-client/