kintoneのカスタマイズ効率をあげよう。脱超初心者編2

Featured Image(Photo) by Artem Sapegin on Unsplash

更新履歴

  • 2020/5/22 「環境変数の設定」を追加しました

はじめに

kintoneのカスタマイズ効率をあげよう。脱超初心者編1の続きです。まだ見ていない人は先に1を見てください。

今回やることは3つです。

  • アップロード時のドメイン名などの入力を不要にします。
  • https://127.0.0.1:8000/ のアクセスを不要にします。
  • 2つ目、3つ目のカスタマイズをしやすいようにGitHubを使って複製できるようにします。

環境変数の設定

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

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

反映にはターミナルの再起動が必要です。Visual Studio Codeを再起動してください。

自己証明書の作成

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/ にアクセスする必要がなくなりました。

つぎは2つ目、3つ目のカスタマイズテンプレートを作りやすくします。これまでに作ってきたkintone-customize-templateフォルダをコピーしてもいいのですが、不要なファイルの書き換えなど少し面倒です。なのでGitHubを使ってそれを簡単にします。

Gitのインストール

以下からダウンロードしてインストールします。
https://git-scm.com/

インストール途中の選択肢「Choosing the default editor used by Git」では「Use Visual Studio Code as Git’s default editor」を選択します。

kintone-customize-templateをclone

以下のコマンドを実行します。

> git clone git@github.com:potaracom/kintone-customize-template.git プロジェクト名
> cd プロジェクト名
// .gitフォルダを削除
// package.jsonのname, dev, prodを書き換え
// manifest.dev.json, manifest.prod.jsonのappを書き換え
> npm install

これでカスタマイズを始める準備完了です。

この記事を書いた人