GitHub Actionsでcustomize-uploaderを実行してアプリにカスタマイズファイルを自動適用しよう

はじめに

kintoneカスタマイズのテストには専らVSCodeのLiveServerを使っているわけですが、ローカルサーバーなので自分自身しか動作確認ができないという問題点があります。
そこで出てくるのがcustomize-uploaderなのですが、結局ファイルを同期する必要があり、チームでカスタマイズを進める場合はGitHubを併用せざるを得ない状況になります。

今回は、GitHubのMainブランチにマージされたときにGitHub Actionsを実行し、customize-uploaderでkintoneにカスタマイズファイルを自動適用させる仕組みづくりをやっていこうと思います。

処理の流れ

VSCode

今回はsrc/script.jsとsrc/style.cssをアップロードする形にします。
GitHub Actionsがメインの記事なのでGitHubへのPush操作などは割愛します。

ディレクトリ構成

.
├── src
│   ├── script.js
│   └── style.css
└── dest
    └── customize-manifest.json

customize-manifest.json

{
  "app": "適用するアプリID",
  "scope": "ALL",
  "desktop": {
    "js": ["src/script.js"],
    "css": ["src/style.css"]
  },
  "mobile": {
    "js": [],
    "css": []
  }
}

GitHub Actions

GitHub Actionsではmainブランチにpushされた場合にcustomize-uploaderを実行するymlファイルを作成します。

secretsの設定

公開リポジトリの場合は、kintoneのURLやユーザー名・パスワードなど秘匿したい情報があります。
GitHub Actionsでは環境変数が用意されていますので、必ずそちらに保存しましょう。

リポジトリの上部メニューから下記の設定に遷移します。
Settings > Secrets & Variables > Actions
その中のRepository secretsのNew repository secretsを押して各項目を登録します。

今回は下記の３項目を設定できればOKです。
※変数名を変える場合は後述するymlファイルの変数名も必ず変更してください。

チームで活用する場合はアプリ管理権限のあるユーザーアカウントをシステム用で一つ用意して使うと良いかもしれませんね。

Workflowの作成

それではいよいよWorkflowの作成です。
リポジトリの上部メニューからActions > New workflow > set up a workflow yourselfをクリックします。
ymlファイルを作成するエディターが表示されますので、下記のコードを適用しCommit changesを行ってください。
※事前にGitHubのmainブランチにカスタマイズファイルをpushしておくことを忘れないようにしてください

name: Deploy to Kintone
on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: 14

      - name: Install @kintone/customize-uploader
        run: npm install -g @kintone/customize-uploader
      
      - name: Deploy to Kintone
        run: |
          kintone-customize-uploader --base-url ${{ secrets.KINTONE_DOMAIN }} --username ${{ secrets.KINTONE_USER_NAME }} --password ${{ secrets.KINTONE_USER_PASSWORD }} dest/customize-manifest.json

動作しない時

• 環境変数に登録している値が正しいかを確認しましょう（KINTONE_DOMAINはhttps://example.cybozu.comの形式です）
• ディレクトリ構成が正しいかを確認しましょう
• 環境変数で設定したkintoneアカウントが該当アプリの管理権限をもっているかを確認しましょう