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

13886 ワード
kintone キントーン kintone テキストリンク

Qiitaではなく、下記のサイトに移行しました
続きも掲載していますのでこちらをご覧ください

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の設定

Prettier

やってくれること

こんなコードを

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

インストールと設定

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

Overviewに書いてある内容を見ると、デフォルトのフォーマッターを指定できます。
とりあえず最小構成で導入したいのでJavaScriptファイルのみ保存時にPrettierで整形します。

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

{
  "editor.formatOnSave": false,
  "[javascript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

またnpmのPrettierをインストールしておくと、そのPrettierを利用して整形してくれるようです。こちらもインストールしておきます。

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

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

> npm init
> npm install --save-dev prettier

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

ESLint

やってくれること

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

インストールと設定

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

これだけだと動作しないので、npmのESLintもインストールします。
またサイボウズオススメのESLintの設定があるのでこれも合わせてインストールします。
先ほどと同じフォルダ上で以下のコマンドを実行します。

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

ESLintの設定ファイルを作成します。ファイル名は.eslintrc.jsにします。
kintoneはIE11も動作対象なのでES5のルールにしておきましょう。

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

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用のファイルを作ります。
まずはテスト用です。アプリIDは書き換えてください。

manifest.dev.json
{
  "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行を追加します。
ドメイン名とユーザー名は書き換えてください。

package.json
  "scripts": {
    "ws": "ws --https",
    "dev": "kintone-customize-uploader --domain xxx.cybozu.com --username xxx manifest.dev.json",
    "prod": "kintone-customize-uploader --domain xxx.cybozu.com --username xxx 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