kintoneのカスタマイズ効率をあげよう。脱超初心者編1

Featured Image(Photo) by Pankaj Patel on Unsplash

更新履歴

はじめに

kintoneのカスタマイズ効率を上げたいと思っている人向けの記事です。
例:JavaScriptファイルの手動アップロードが面倒だと思っている人
  JSEdit for kintoneを使っている人
  Visual Studio Codeを使ってワンアップしたい人
  customize-uploaderのアップロード反映まで長いと思っている人

Visual Studio Codeのインストール

以下からダウンロードしてインストールします。
https://code.visualstudio.com/

Node.jsのインストール

以下からダウンロードしてインストールします。
https://nodejs.org/ja/

Visual Studio Codeの設定

ESLint

やってくれること

コードのおかしいところを指摘してくれます。ESLintなしの状態でもある程度指摘してくれますが、ESLintを入れるとさらに指摘してくれる範囲が拡がります。

インストールと設定

まずはエクスプローラー上からプロジェクトフォルダを作りましょう。例えば「C:\Users\user-name\Documents\git\customize-example」です。

VS Code ESLint extensionを開き、Installをクリックしてインストールします。

これだけだと動作しないので、npmのESLintもインストールします。またサイボウズさんオススメのESLintの設定があるのでこれも合わせてインストールします。

Visual Studio Codeで作成したフォルダ(例の場合はcustomize-example)を開きます。Ctrl + @を押してターミナルを表示し、以下のコマンドを実行します。

> npm init
> npm install --save-dev eslint @cybozu/eslint-config

npm init後に入力を求められますが、よくわからない人は全部Enterで大丈夫です。

ESLintの設定ファイルを作成します。ファイル名は.eslintrc.jsです。指定するルールはこちらを参考にしてください。よくわからない人はES5のルールにしておきましょう。prettier系のルールを指定することで最初にインストールしたPrettierも有効になります。

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

保存時にESLintが実行されるようにします。settings.jsonを開いて以下の内容を貼り付けます。すでに設定が存在する人は追記してください。
settings.jsonの開き方がわからない人はこちら

{
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
}

Prettier

やってくれること

こんなコードを

このように整形してくれます。

また、ESLintはCSSファイルやJSONファイルの整形に対応していないので、Prettierで整形します。

インストールと設定

VS Code Prettier extensionを開き、Installをクリックしてインストールします。

先ほどと同じフォルダ上で以下のコマンドを実行します。

> npm install --save-dev prettier

Settings.jsonにコードを追記します。

{
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "[css]": {
        "editor.formatOnSave": true,
    },
    "[json]": {
        "editor.formatOnSave": true,
    },
    "[html]": {
        "editor.formatOnSave": true,
    },
}

ここまでの作業を確認

JavaScriptファイルやCSSファイルを作成してください。保存時に整形されるはずです。また、VS Code ESLint extensionをインストールしたことで入力途中にもエラーを表示してくれるはずです。

これで最低限のコーディング環境が整いました。次はアプリ適用を楽にしましょう。

customize-uploaderのインストール

カスタマイズファイルの反映を自動でやってくれるcustomize-uploaderをインストールします。

> npm install --save-dev @kintone/customize-uploader

local-web-serverのインストール

customize-uploaderも反映までは数秒かかって手間なので、ローカルにWebサーバーを立てます。

> npm install --save-dev local-web-server

カスタマイズ反映の準備

customize-uploader用のファイルを作成します。まずはテスト用のファイル「manifest.dev.json」を作成します。アプリIDは書き換えてください。

{
  "app": "アプリID",
  "scope": "ADMIN",
  "desktop": {
    "js": ["https://127.0.0.1:8000/index.js"],
    "css": []
  },
  "mobile": {
    "js": [],
    "css": []
  }
}

次は本番用のファイル「manifest.prod.json」を作成します。

{
  "app": "アプリID",
  "scope": "ALL",
  "desktop": {
    "js": ["index.js"],
    "css": []
  },
  "mobile": {
    "js": [],
    "css": []
  }
}

ここまでの作業でファイル構成は以下のようになっています。

次にpackage.jsonにws, dev, prodの3行を追加します。

  "scripts": {
    "ws": "ws --https",
    "dev": "kintone-customize-uploader manifest.dev.json",
    "prod": "kintone-customize-uploader manifest.prod.json",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

テスト時のカスタマイズ反映

以下のコマンドを実行するとローカルのindex.jsを参照します。

> npm run dev

ブラウザがアクセスできるようにlocal-web-serverを起動します。

> npm run ws

カスタマイズが反映されない場合は https://127.0.0.1:8000/ にアクセスしてください。以下のような画面が表示されるので、「詳細設定」をクリック、「127.0.0.1 にアクセスする(安全ではありません)」をクリックしてください。これで反映されるはずです。

本番時のカスタマイズ反映

以下のコマンドを実行するとカスタマイズファイルをアップロードします。

> npm run prod

脱超初心者編2に続く

kintoneのカスタマイズ効率をあげよう。脱超初心者編2

この記事を書いた人