kintoneアプリでjsを@kintone/customize-uploaderモジュールを使用してアップロードする

kintoneアプリでjsを@kintone/customize-uploaderモジュールを使用してアップロードする

kintoneアプリでjsを@kintone/customize-uploaderモジュールを使用してアップロードする

webpackでバンドルしたjsファイルを画面からポチポチ押してアップロードするのは結構面倒です。

これをnpm scriptsでやってしまう@kintone/customize-uploaderモジュールが用意されています。

依存関係をインストールします。

npm i --save-dev dotenv @babel/node glob @kintone/customize-uploader
touch .env
touch uploader.js

uploader.js

uploader.jsをプロジェクト直下に配置します。

import {execSync} from 'child_process';
import glob from 'glob';

const command = `npx kintone-customize-uploader --base-url ${process.env.KINTONE_DOMAIN} --username ${process.env.KINTONE_USER} --password ${process.env.KINTONE_PASSWORD} `;
const entries =
  process.argv.slice(2).length > 0
    ? process.argv.slice(2)
    : glob.sync('dest/customize-manifest.json');
entries.forEach(file => {
  console.log('\nuploading... ', file);
  const result = execSync(command + file);
  console.log('\n' + result);
});

.env

.envをプロジェクト直下に配置します。

KINTONE_DOMAIN=https://xxxxxxxxxx.cybozu.com
KINTONE_USER=xxx@example.com
KINTONE_PASSWORD=yyyyyyyyy

npm scripts

npm scriptsにuploadを追加します。これでnpm run uploadが実行できます。

"scripts": {
  "dev": "webpack --mode development",
  "prod": "webpack --mode production",
  "upload": "babel-node --presets @babel/env -r dotenv/config uploader.js"
},

customize-manifest.json

このファイルを作成します。

$ npx kintone-customize-uploader init
? アプリIDを入力してください: 7
? カスタマイズの適用範囲を選択してください: ALL
dest/customize-manifest.json を生成しました

dest\customize-manifest.jsonファイルが作成されます。

customize-manifest.json

ファイルを開いて、dist/bundle.jsを追加します。

{
    "app": "7",
    "scope": "ALL",
    "desktop": {
        "js": [
            "./dist/bundle.js"
        ],
        "css": []
    },
    "mobile": {
        "js": [],
        "css": []
    }
}

これで準備OKです。

$ npm run prod
$ npm run upload

uploading...  dest/customize-manifest.json

カスタマイズのアップロードを開始します
./dist/bundle.js をアップロードしました!
JavaScript/CSS ファイルをアップロードしました!
JavaScript/CSS カスタマイズの設定を変更しました!
運用環境への反映の完了を待っています...
運用環境への反映の完了を待っています...
運用環境に反映しました!