目指せ!JavaScript カスタマイズ中級者(3)〜自動で一括ファイルアップロード編〜

目次

はじめに

これまで、このシリーズでは、次の内容をお伝えしました。
未読の場合はぜひご覧になった上で当記事を読んでください。

ただ、手動でしかカスタマイズをアップロードできないようになっていたため、デバッグ上は不便だったかと思います。
今回はそのカスタマイズを自動でアップロードできるしくみと使い方を説明します。

目指せ中級者シリーズの記事一覧は以下を参照してください。
目指せ中級者シリーズ

アップロードのしくみ

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

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

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

使い方

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

https://github.com/cybozudevnet/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 --upload

おわりに

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

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