kintoneのカスタマイズ効率をあげよう2 – 自動適用

  • 投稿日
  • 更新日
  • 著者 potara
  • カテゴリー 環境構築

Featured Image(Photo) by Artem Sapegin on Unsplash

更新履歴

  • 2021/1/29 customize-uploaderのバージョンアップに対応しました
  • 2020/5/22 「環境変数の設定」を追加しました

はじめに

kintoneのカスタマイズ効率をあげよう1 – エディタ設定の続きです。

本記事ではcustomize-uploaderを利用してカスタマイズの適用を自動化します。

customize-uploaderのインストール

カスタマイズファイルの反映を自動でやってくれるcustomize-uploaderをインストールします。

> npm install --save-dev @kintone/customize-uploader

local-web-serverのインストール

customize-uploaderも反映までは数秒かかって手間なので、ローカルにWebサーバーを立てます。

> npm install --save-dev local-web-server

カスタマイズ反映の準備

customize-uploader用のファイルを作成します。

まずは開発用のファイル「manifest.dev.json」を作成します。アプリIDは書き換えてください。

{
  "app": "アプリID",
  "scope": "ADMIN",
  "desktop": {
    "js": ["https://127.0.0.1:8000/index.js"],
    "css": []
  },
  "mobile": {
    "js": [],
    "css": []
  }
}

開発中はアプリ管理者にのみカスタマイズが適用されるようにscopeにはADMINを指定します。JavaScriptファイルはローカルのWebサーバーを参照します。

次は本番用のファイル「manifest.prod.json」を作成します。

{
  "app": "アプリID",
  "scope": "ALL",
  "desktop": {
    "js": ["index.js"],
    "css": []
  },
  "mobile": {
    "js": [],
    "css": []
  }
}

運用中はすべてのユーザーにカスタマイズが適用されるようにscopeにはALLを指定します。JavaScriptファイルはアップロードします。

ここまでの作業でファイル構成は以下のようになっています。

次にpackage.jsonにws, dev, prodの3行を追加します。

  "scripts": {
    "ws": "ws --https",
    "dev": "kintone-customize-uploader manifest.dev.json",
    "prod": "kintone-customize-uploader manifest.prod.json",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

テスト時のカスタマイズ反映

以下のコマンドを実行するとローカルのindex.jsを参照します。

> npm run dev

ブラウザがアクセスできるようにlocal-web-serverを起動します。

> npm run ws

カスタマイズが反映されない場合は https://127.0.0.1:8000/ にアクセスしてください。以下のような画面が表示されるので、「詳細設定」をクリック、「127.0.0.1 にアクセスする（安全ではありません）」をクリックしてください。これで反映されるはずです。

本番時のカスタマイズ反映

以下のコマンドを実行するとカスタマイズファイルをアップロードします。

> npm run prod

環境変数の設定

customize-uploaderは環境変数を利用できます。毎回ドメイン名などを入力するのは手間なので環境変数を設定しましょう。PowerShellを起動して以下のコマンドを実行します。

  > [System.Environment]::SetEnvironmentVariable("KINTONE_BASE_URL", "https://xxxxx.cybozu.com", "User")
  > [System.Environment]::SetEnvironmentVariable("KINTONE_USERNAME", "xxxxx", "User")
  > [System.Environment]::SetEnvironmentVariable("KINTONE_PASSWORD", "xxxxx", "User")

反映にはターミナルの再起動が必要です。

自己証明書の作成

mkcertをダウンロードして、以下のコマンドを実行します。実行ファイル名はダウンロードしたファイル名に書き換えてください。実行方法がわからなければVisual Studio Code Live Server Extensionを使ってkintoneカスタマイズ開発効率をあげよう！を参考にしてください。

> ./mkcert-v1.4.1-windows-amd64.exe -install
> ./mkcert-v1.4.1-windows-amd64.exe localhost 127.0.0.1 ::1

実行できれば2つのファイルができるはずです。そのファイルをプロジェクトフォルダの1つ上に移動させます。カスタマイズフォルダはカスタマイズするアプリごとに増えますが、この自己証明書は共通だからです。

次はpackage.jsonを書き換えます。 

    "ws": "ws --https --cert ../localhost+2.pem --key ../localhost+2-key.pem",

これでhttps://127.0.0.1:8000/にアクセスする必要がなくなりました。

ここまでの設定

ここまでの設定は以下にあります。（自己証明書は除く）
https://github.com/potaracom/kintone-customize-template

その3に続く

kintoneのカスタマイズ効率をあげよう3 – 入力補完

Visual Studio Code カスタマイズ効率シリーズ

この記事を書いた人

potara

記事一覧