目指せ!JavaScript カスタマイズ中級者(3)〜自動で一括ファイルアップロード編〜
目次
はじめに
これまで、このシリーズでは、次の内容をお伝えしました。
未読の場合はぜひご覧になった上で当記事を読んでください。
-
目指せ!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ファイルをどのアプリに設定するか」などといった設定を伝えるものです。
JavaScriptファイルが格納されているところと同じ階層に、「customize-manifest.json」を用意してください。
たとえば「src/apps/app1」の下にJavaScriptファイルを配置した場合、「src/apps/app1/customize-manifest.json」を作成します。
カスタマイズマニフェストファイルの設定例は次のとおりです。
ビルドされたファイルは「dist」以下に保存されるため、js
には「dist/app1.js」を指定します。
その他のJSやCSSなどは必要に応じて設定してください。
|
|
kintone の環境情報の用意
.env
ファイルを、プロジェクト直下に用意し次のようにアップロードしたい環境の情報を記載します。
.env
ファイルは公開したり第三者に渡さないよう注意してください。
.env
ファイル
次のようにドメインとユーザー、パスワードを設定します。
ユーザーはJavaScriptカスタマイズを管理できる権限のあるものにする必要があります。
kintoneの環境情報が次の場合の.env
ファイルの例を示します。
- ドメイン:https://sample.cybozu.com
- ユーザー名:user01
- パスワード:password01
|
|
ビルドとアップロード
Readmeの事前準備 を確認し、Node.jsのセットアップと依存ライブラリをインストールしてください(初回のみ)。
「customize-manifest.json」が用意できたら前回までと同様にビルドします。
|
|
次に、下記コマンドでアップロードできます。
カスタマイズマニフェストを定義してあるファイルを一括でアップロードします。
|
|
個別にアップロードしたい場合は次のようにマニフェストファイルを指定してください。
|
|
これでコマンドラインに次のような結果が表示されれば成功です。
開発モードでのアップロード
下記コマンドを実行することで、ファイルの変更を検知して、変更されたファイルのビルドとアップロードを自動で行うことができます。
開発時やデバッグ時に使ってください。
|
|
おわりに
今回紹介した方法を取り入れると、ファイルを自動でアップロードできるため、効率よく開発できると思います。
ぜひご活用ください。
少々難易度は高いかもしれませんが、自分のプロジェクトに合わせてwebpackやスクリプトをカスタマイズすると「開発環境と本番環境を分けてアップロードする」といったことも実現可能です。
参考になればと思います。