目指せ!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 やスクリプトをカスタマイズすると「開発環境と本番環境を分けてアップロードする」といったことも実現可能です。
参考になればと思います。