Index
はじめに
目指せ!JavaScriptカスタマイズ中級者(1) 〜webpack編〜では複数のアプリカスタマイズを扱うためのWebpackの導入などの環境構築をお伝えし、
目指せ!JavaScriptカスタマイズ中級者(2) 〜Promiseのかわりにasync/await編〜ではPromiseをかんたんに表現するasync/awaitについて説明しました。
(未読の場合は是非ご覧になった上で当記事をご覧ください)
ただ、手動でしかカスタマイズをアップロードできないようになっていたため、デバッグ上は不便だったかと思います。
今回はそのカスタマイズを自動でアップロードできる仕組みと使い方を説明します。
アップロードの仕組み
kintoneにカスタマイズファイルをアップロードする方法は下記リンクのようにいくつかあります。
kintone カスタマイズファイルのアップロード方法まとめ
今回は自動でアップロードするために、サイボウズが公開しているcustomize-uploaderを利用しています。
ただし、customize-uploaderは単一アプリのカスタマイズアップロードが前提のため、複数のアプリに対し複数のファイルを一括でアップロードするようなことはできません。
今回は目指せ!JavaScriptカスタマイズ中級者(1) 〜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カスタマイズを管理できる権限のあるものにする必要があります。
ドメインが{sample}.cybozu.com、ユーザー名がuser01、パスワードがpassword01の場合の記述例)
KINTONE_DOMAIN={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/app/app1/customize-manifest.json
これでコマンドラインに下記のような結果が表示されれば成功です。
開発モードでのアップロード
下記コマンドを実行することで、ファイルの変更があったとき、変更があったファイルのビルドとアップロードを自動で行うことができます。開発時やデバッグ時に使ってください。
npx webpack --watch --mode development --upload
おわりに
これで自動でアップロードもできるようになりますので、効率よく開発することができると思います。ぜひご活用ください。
少々難易度は高いかもしれませんが、今回は提供していない、開発環境と本番環境をわけてアップロードなど、必要に応じて自分のプロジェクトにあわせてwebpackやスクリプトのカスタマイズを行うことも可能ですので、参考になればと思います。
記事に関するフィードバック
記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。