はじめに

目指せ！JavaScriptカスタマイズ中級者（１） 〜webpack編〜では複数のアプリカスタマイズを扱うためのWebpackの導入などの環境構築をお伝えし、
目指せ！JavaScriptカスタマイズ中級者（２） 〜Promiseのかわりにasync/await編〜ではPromiseをかんたんに表現するasync/awaitについて説明しました。
（未読の場合は是非ご覧になった上で当記事をご覧ください）

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

シリーズの記事一覧はこちら。

アップロードの仕組み

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

kintone カスタマイズファイルのアップロード方法まとめ

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

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

使い方

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

https://github.com/cybozudevnet/sample-kintone-webpack-for-intermediate

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

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

src/apps/app1 などのJavaScriptファイルが格納されているところと同じ階層に、customize-manifest.jsonを用意してください。

• 例: src/apps/app1/customize-manifest.json
  下記がapp1を対象にした設定例になります。ビルドされたファイルはdist/app1.jsに保存されますので、それを指定します。その他のJSやCSSなどは必要に応じて設定してください。
  

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

kintoneの環境情報の用意

.envファイルを、プロジェクト直下に用意し下記のようにアップロードしたい環境の情報を記載します。.envファイルは公開したり第三者に渡さないよう注意してください。

• .envファイル
  下記の様にドメインとユーザー、パスワードを設定します。ユーザーはJavaScriptカスタマイズを管理できる権限のあるものにする必要があります。
  
  ドメインがhttps://{sample}.cybozu.com、ユーザー名がuser01、パスワードがpassword01の場合の記述例）
  

  KINTONE_BASE_URL=https://｛sample｝.cybozu.com
  KINTONE_USER=user01
  KINTONE_PASSWORD=パスワード password01

ビルドとアップロード

Readmeの事前準備をお読みいただき、npmのインストールと依存ライブラリのインストールをしてください。※初回のみ

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

npx webpack --mode production

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

npm run upload

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

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

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

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

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

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

おわりに

これで自動でアップロードもできるようになりますので、効率よく開発することができると思います。ぜひご活用ください。

少々難易度は高いかもしれませんが、今回は提供していない、開発環境と本番環境をわけてアップロードなど、必要に応じて自分のプロジェクトにあわせてwebpackやスクリプトのカスタマイズを行うことも可能ですので、参考になればと思います。

シリーズの記事一覧はこちら。