カテゴリー内の他の記事

目指せ!JavaScriptカスタマイズ中級者(3) 〜自動で一括ファイルアップロード編〜

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

FEW4P6wsRo.gif

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

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

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

mceclip0.png

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

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

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

おわりに

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

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

記事に関するフィードバック

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

サインインしてコメントを残してください。