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のルールにしておきましょう。
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は書き換えてください。
{
"app": "アプリID",
"scope": "ADMIN",
"desktop": {
"js": ["https://127.0.0.1:8000/index.js"],
"css": []
},
"mobile": {
"js": [],
"css": []
}
}
次は本番用です。
{
"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 --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
