Tips

customize-uploaderを使って、複数のkintoneアプリにkintoneカスタマイズファイルを自動でアップロードしよう

目次

はじめに

固定リンクがコピーされました

この記事では、customize-uploaderを使って、複数のkintoneアプリに複数のkintoneカスタマイズファイルを自動でアップロードする方法を紹介します。

次の記事を読んだ前提で書かれているため、未読の場合はこれらの記事を先に読んでから、この記事を読み進めることをおすすめします。

アップロードのしくみ

固定リンクがコピーされました

kintoneにカスタマイズファイルをアップロードする方法は下記リンクのようにいくつかあります。
kintoneカスタマイズファイルのアップロード方法まとめ

今回は自動でアップロードするために、サイボウズが公開している customize-uploader (External link) を利用しています。

ただし、customize-uploaderは単一アプリのカスタマイズアップロードが前提のため、複数のアプリに対し複数のファイルを一括でアップロードするようなことはできません。
今回は kintoneカスタマイズにwebpackを導入するメリット で紹介したwebpackの設定などを拡張し、ビルドされたJavaScriptファイルを一括してアップロードするためのコマンドを用意しています。

使い方

固定リンクがコピーされました

まず、次のリポジトリをcloneやpullして最新の状態にしておいてください。

https://github.com/kintone-samples/sample-kintone-webpack-for-intermediate (External link)

カスタマイズマニフェストファイルの用意

固定リンクがコピーされました

カスタマイズマニフェストファイルは、カスタマイズアップローダーに「どのJavaScriptファイルをどのアプリに設定するか」などといった設定を伝えるものです。

JavaScriptファイルが格納されているところと同じ階層に、「customize-manifest.json」を用意してください。
たとえば「src/apps/app1」の下にJavaScriptファイルを配置した場合、「src/apps/app1/customize-manifest.json」を作成します。

カスタマイズマニフェストファイルの設定例は次のとおりです。
ビルドされたファイルは「dist」以下に保存されるため、jsには「dist/app1.js」を指定します。
その他のJSやCSSなどは必要に応じて設定してください。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

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

kintoneの環境情報の用意

固定リンクがコピーされました

.envファイルを、プロジェクト直下に用意し次のようにアップロードしたい環境の情報を記載します。

.envファイルは公開したり第三者に渡さないよう注意してください。

.envファイル

次のようにドメインとユーザー、パスワードを設定します。
ユーザーはJavaScriptカスタマイズを管理できる権限のあるものにする必要があります。

kintoneの環境情報が次の場合の.envファイルの例を示します。

  • ドメイン：https://sample.cybozu.com
  • ユーザー名：user01
  • パスワード：password01
1
2
3

KINTONE_BASE_URL=https://sample.cybozu.com
KINTONE_USER=user01
KINTONE_PASSWORD=password01

ビルドとアップロード

固定リンクがコピーされました

Readmeの事前準備 (External link) を確認し、Node.jsのセットアップと依存ライブラリをインストールしてください（初回のみ）。

「customize-manifest.json」が用意できたら前回までと同様にビルドします。

1

npx webpack --mode production

次に、下記コマンドでアップロードできます。
カスタマイズマニフェストを定義してあるファイルを一括でアップロードします。

1

npm run upload

個別にアップロードしたい場合は次のようにマニフェストファイルを指定してください。

1

npm run upload src/apps/app1/customize-manifest.json

これでコマンドラインに次のような結果が表示されれば成功です。

開発モードでのアップロード

固定リンクがコピーされました

下記コマンドを実行することで、ファイルの変更を検知して、変更されたファイルのビルドとアップロードを自動で行うことができます。
開発時やデバッグ時に使ってください。

1

npx webpack --watch --mode development --env upload

おわりに

固定リンクがコピーされました

今回紹介した方法を取り入れると、ファイルを自動でアップロードできるため、効率よく開発できると思います。
ぜひご活用ください。

少々難易度は高いかもしれませんが、自分のプロジェクトに合わせてwebpackやスクリプトをカスタマイズすると「開発環境と本番環境を分けてアップロードする」といったことも実現可能です。
参考になればと思います。