kintoneのカスタマイズ効率をあげよう3 – 入力補完

Featured Image(Photo) by Fatos Bytyqi on Unsplash

更新履歴

はじめに

kintoneのカスタマイズ効率をあげよう2 – 自動適用の続きです。

本記事ではTypeScriptと@kintone/dts-genを利用して強力な補完機能の力を手に入れます。具体的にはこのようなことが可能になります。

TypeScriptとはマイクロソフトが開発しているオープンソースのプログラミング言語で、変数に型情報を定義できます。Visual Studio Codeなどのエディタを併用することでコーディング中にエラーを検知できます。また、型情報を元に補完機能を利用できるようになります。

@kintone/dts-genとはアプリのフォーム設定から型を生成するツールです。すごく便利です。

kintone/js-sdk

A monorepo for Kintone development tools :wrench:. Contribute to kintone/js-sdk development by creating an account on GitHub.

github.com

TypeScriptと@kintone/dts-genを使いこなしてカスタマイズ効率をさらにアップしましょう。

TypeScriptのインストール

> npm install --save-dev typescript

@kintone/dts-genのインストール

> npm install --save-dev @kintone/dts-gen

アプリの型定義ファイルを作成

アプリは何を選択しても構いません。本手順ではアプリストアの顧客リストを利用します。

package.jsonのscriptsにdtsの設定を追加します。認証情報はcustomize-uploaderと同じものを利用してくれます。

  "scripts": {
    "dts": "kintone-dts-gen --app-id xxx -o ./types/fields.d.ts",
  },

以下のコマンドを実行して型定義ファイルfields.d.tsを作成します。

> npm run dts 

環境変数を設定していない場合は以下のように「–」以降に引数として指定してください。

> npm run dts -- --base-url https://{subdomain}.cybozu.com -u {username} -p {password}

フォルダ構成の変更

ファイルが増えてきたのでsrcフォルダを作成して、そこにindex.jsを移動します。index.jsはindex.tsにリネームします。

typesフォルダを作成して、そこにfields.d.tsを移動します。

現時点のフォルダ構成は以下のようになっているはずです。

TypeScriptの設定ファイルを作成

以下のコマンドを実行して設定ファイルtsconfig.jsonを作成します。

> npx tsc --init

tsconfig.jsonファイルにfilesとincludes項目を追加します。

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "files": [
    "./node_modules/@kintone/dts-gen/kintone.d.ts",
    "./types/fields.d.ts"
  ],
  "include": ["./src/**/*"]
}

ESLint設定のTypeScript対応

これからはTypeScriptでコードを書くのでESLintの設定を以下の通り更新します。

module.exports = {
  extends: ["@cybozu/eslint-config/presets/typescript-prettier"],
};

index.tsの編集

以下の内容を貼り付けます。

(function () {
  "use strict";

  interface IndexEvent {
    appId: number;
    viewType: string;
    viewId: number;
    viewName: string;
    records: kintone.types.SavedFields[];
    offset: number;
    size: number;
    date: null;
    type: string;
  }

  interface DetailEvent {
    appId: number;
    record: kintone.types.SavedFields;
    recordId: number;
    type: string;
  }

  kintone.events.on("app.record.index.show", function (event: IndexEvent) {
    console.log(event);
  });

  kintone.events.on("app.record.detail.show", function (event: DetailEvent) {
    console.log(event);
  });
})();

補完機能を試す

Wow!!!

TypeScriptのフォーマット設定

Visual Studio Codeの設定ファイルを開き、以下を追記します。開き方がわからない人はkintoneのカスタマイズ効率をあげよう1 – エディタ設定を見てください。

{
  // 省略
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.codeActionsOnSave": {
      "source.fixAll": true
    }
  },

TypeScriptをJavaScriptにトランスパイルする

TypeScriptのままではkintoneに適用できません。これをJavaScriptにトランスパイル（変換）します。

Visual Studio CodeではCtrl + Shift + Bでトランスパイルできます。
tsc: build – tsconfig.jsonでトランスパイルを1回実行します。
tsc: watch – tsconfig.jsonはソースコードが変更される度に自動でトランスパイルします。

トランスパイルするとsrcフォルダにindex.jsファイルが作成されます。このファイルをcustomize-uploaderで適用したら完了です。

index.jsの場所がトップフォルダからsrcフォルダに変更になりました。これに合わせてmanifestファイルを更新してください。ここでは説明は省略します。

Visual Studio Codeには他にも便利な機能があります。

TypeScript Compiling with Visual Studio Code

Learn about TypeScript compiling with Visual Studio Code.

code.visualstudio.com

ここまでの設定

ここまでの設定は以下にあります。
https://github.com/potaracom/kintone-customize-template2

その4に続く

kintoneのカスタマイズ効率をあげよう4 – IE11対応