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

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

「kintoneアプリで複数jsをwebpackでバンドルする」の続きです。

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 カスタマイズの設定を変更しました!
運用環境への反映の完了を待っています...
運用環境への反映の完了を待っています...
運用環境に反映しました!

bundle.jsがアップロードされていることが確認できます。

参考サイト

@kintone/customize-uploader

A kintone customize uploader. Latest version: 8.0.14, last published: 3 months ago. Start using @kintone/customize-uploa...

www.npmjs.com

高橋

KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES20xx),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^