プログラマーのメモ書き

伊勢在住のプログラマーが気になることを気ままにメモったブログです

kintone カスタマイズファイルのアップロード

kintone

kintone のカスタマイズファイルを設定するとき、いちいちアプリの設定画面からファイルを指定するのって面倒です。さすがにこれについては、 kintone がカスタマイズ用の js ファイルをアップロードするためのツールが提供してくれています。

customize-uploader - cybozu developer network

なので、これを使って簡単にアップロードしてみます。

設定

まずは、設定します。

PS D:\work\tmp\kintone_tutorial\revert_live_server> npm install --save-dev @kintone/customize-uploader

added 183 packages, and audited 301 packages in 16s

71 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
PS D:\work\tmp\kintone_tutorial\revert_live_server>

インストールできたら、初期化して、カスタマイズファイルのアップロード用の設定ファイルを作成します。

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

nnn の部分は実際のアプリID（数値）を入力します。作成されたファイルのファイル名は必要に応じて変更することもできます。

作られたファイルのひな型はこんな感じです。

{
    "app": "nnn",
    "scope": "ALL",
    "desktop": {
        "js": [],
        "css": []
    },
    "mobile": {
        "js": [],
        "css": []
    }
}

webpack でバンドルしたファイルを指定するならば

    "desktop": {
        "js": ["dist/kintone-revert-test.js"],
        "css": []
    },

のように、バンドル後に作成されるファイルを指定しておきます。

アップロード

では、実際にアップロードしてみましょう。

アップロード前は、下記のように VSCode Live Server のファイルを参照するようにしています。

この状態で、アップロードすると

PS D:\work\tmp\kintone_tutorial\revert_live_server> npx kintone-customize-uploader --base-url https://kintoneのドメイン名.cybozu.com --username mail@example.com --password ログインパスワード dest/customize-manifest.json 
カスタマイズのアップロードを開始します
dist/kintone-revert-test.js をアップロードしました!
JavaScript/CSS ファイルをアップロードしました!
JavaScript/CSS カスタマイズの設定を変更しました!
運用環境への反映の完了を待っています...
運用環境への反映の完了を待っています...
運用環境への反映の完了を待っています...
運用環境に反映しました!
PS D:\work\tmp\kintone_tutorial\revert_live_server>

のように実行できます。実行時、マニフェストファイルのファイル名を指定するので、デフォルト以外の名前にしていても問題ありません。

実行後に、アプリの設定画面を見ると、

のように、アップロードされたファイルが指定されているのがわかります。

複数アプリでのアップロード

なかなかいい感じですね。

でも、 kintone が提供してくれている customize-uploader は、複数のアプリに対してまとめてアップロードするということができません。なので、複数アプリに対してカスタマイズファイルをアップロードしたければ、アプリごとにマニフェストファイルを作成し、それを引数にとるシェルスクリプトを実行することで、コマンド一つで一括して一連のアプリのカスタマイズファイルをアップロードできるようにすることができます。

たとえば、一例として WSL の bash を利用したシェルスクリプトだと、フォルダ構成をこんな感じにしておいて

bin ディレクトリ以下に、下記の２ファイルを作成します。

kintone_upload.sh : １アプリごとのアップロードを処理するシェルスクリプト

#!/bin/bash
#
# kintone-customize-uploader を用いた、カスタマイズファイルのアップロード
#
# 呼び出し時に、ユーザー名とパスワードを入力すれば、manifest.json
# に従って、アップロードされる
#
# 2023/12/18, Junichi MORI

BASE_URL="https://kintoneのドメイン名.cybozu.com"

script_dir=$(cd $(dirname $0); pwd)
kintone_root_dir=$(dirname $script_dir)

if [ $# != 3 ]
then
    echo "Usage : kintone_upload  manifest_json_dest_file_name  user_name  password"
    exit 1
fi

MANIFEST_FN=$1
USER_NAME=$2
PASSWORD=$3

# kintone_root_dir からの相対パスに変更
MANIFEST_FN=`realpath --relative-to=${kintone_root_dir} ${MANIFEST_FN}`

# kintone_root_dir にて処理を行う
cd ${kintone_root_dir}
./node_modules/.bin/kintone-customize-uploader --base-url ${BASE_URL} --username ${USER_NAME} --password ${PASSWORD}  ${MANIFEST_FN}

kintone_upload_all.sh : 指定したフォルダ以下にあるマニフェストファイルをすべてアップロードするシェルスクリプト

#!/bin/bash
#
# kintone-customize-uploader を用いた、カスタマイズファイルの一括アップロード
#
# 呼び出し時に、ユーザー名とパスワードを入力すれば、指定したフォルダ内の
# 全てのマニフェストファイルに従って、アップロードされる
#
# 2023/12/18, Junichi MORI

script_dir=$(cd $(dirname $0); pwd)
kintone_root_dir=$(dirname $script_dir)

if [ $# != 3 ]
then
    echo "Usage : kintone_upload_all  manifest_folder  username  ppassword"
    exit 1
fi

MANIFEST_FOLDER=$1
USER_NAME=$2
PASSWORD=$3

# kintone_root_dir からの相対パスに変更
MANIFEST_FOLDER=`realpath --relative-to=${kintone_root_dir} ${MANIFEST_FOLDER}`

# kintone_root_dir にて処理を行う
cd ${kintone_root_dir}
for fn in `ls -1 ${MANIFEST_FOLDER}/*.json`
do
    echo ${script_dir}/kintone_upload.sh $fn
    ${script_dir}/kintone_upload.sh $fn $USER_NAME $PASSWORD
done

シェルスクリプトなので、 wsl の bash から実行します。

mor@マシン名:サンプルフォルダ名/revert_live_server/bin$ ./kintone_upload_all.sh ../dest ユーザー名 ログインパスワード
サンプルフォルダ名/revert_live_server/bin/kintone_upload.sh dest/customize-manifest.json
カスタマイズのアップロードを開始します
dist/kintone-revert-test.js をアップロードしました!
JavaScript/CSS ファイルをアップロードしました!
JavaScript/CSS カスタマイズの設定を変更しました!
運用環境への反映の完了を待っています...
運用環境への反映の完了を待っています...
運用環境への反映の完了を待っています...
運用環境に反映しました!
mor@マシン名:サンプルフォルダ名/revert_live_server/bin$

マニフェストファイルが複数あれば、その分だけ kintone_upload.sh が呼び出されて、一括してアップロードできます。

まとめ

アプリ数が少なければ、 直接 customize_uploader を呼べばいいし、アプリ数が多い場合は、上記の例のように簡単なシェルスクリプトを書いてやれば、一括してアップロード処理を行うことができます。いいですねー。

ちなみに、このサンプルを入れてあるフォルダ名が revert_live_server となっているのが、ちょっと気になるかもしれません。これは、開発した js ファイルをアップロード後、再度 Live Server 環境に戻すときのサンプルも兼ねているためです（これもいちいちアプリごとに指定する必要があるんですよね）。これについてもそのうち記事にまとめたいと思います。