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カスタマイズを管理できる権限のあるものにする必要があります。
ドメインが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やスクリプトのカスタマイズを行うことも可能ですので、参考になればと思います。
シリーズの記事一覧はこちら。
をするとkintoneに正常にアップロードされることは確認できました。
その次に記載されている
を実行した所、watchが正常に反応しており、ソースの修正に伴いビルドはできたのですが、kintoneへのファイルアップロードが行われないのです…。
オプションの指定の仕方等、色々と試してみたのですが進展せず。
アドバイスいただくことはできますでしょうか??
kume@AISIC 様
お世話になっております。cybozu developer network 運営でございます。
こちらの環境では特に問題なく動作するのですが、
コマンドライン上にどういう結果が表示されるか教えていただけますでしょうか?
アップロードでエラーになるのならば、エラーが表示されるかと思います。よろしくおねがいします。
cybozu developer network 運営 さま
お返事ありがとうございます。
もう一度、試してみた所、ちゃんとアップロードまでできました。
色々と試している内に、何らかの設定ファイルがおかしくなってしまったのかもしれません…。
お騒がせしましたm(_ _)m
kume@AISIC 様
お世話になっております。cybozu developer network 運営でございます。
解決されたようで安心いたしました。
ネットワークの問題などでアップデートに時間がかかっていたなどがあったのかもしれません。
お試しいただき、記事から派生した技術的なご質問などございましたらcybozu developer コミュニティをご活用ください。
よろしくお願い致します。
個別アップロードのpathですが、
ではなくて
だと思われます。
コマンドはスペルミスを防ぐためにコピペで実行することがあるので
一応報告まで。
T.H 様
お世話になっております。cybozu developer network 運営でございます。
記事内コマンドの誤字報告、ありがとうございます。
修正いたしましたので、ご確認いただけると幸いです。
よろしくお願いいたします。