0
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

kintone開発環境作成

Last updated at Posted at 2021-11-26

#1. 概要
kintoneの開発環境作成のやり方をまとめました。

  • ソースのカスタマイズ時
  • プラグイン開発時

のどちらにも対応しています。
開発中に何度もアップロードしなくて済むので作業が捗ります!

#2. 方針
kintoneのファイル参照先を、kintoneにアップロードされているファイルではなくローカルPC上にあるファイルにすることで、修正したファイルを確認するためにいちいちアップロードしなくてもいいようになります。
ローカルPC上にあるファイルを参照させるには、ローカルPCにWebサーバを立て、ファイルをURLで指定することができるようにします。
※デバッグが終わったら参照先を正式なものに直す必要があります。

今回はコードエディタに「Visual Studio Code」を使用し、拡張機能の「Live Server」を使うことでローカルPCにWebサーバを立てます。

#3. 使用ツール

  • Visual Studio Code(VSCode)
  • Live Server (VSCodeの拡張機能)
  • mkcert
  • plugin-packer(プラグイン開発の場合)

#4. 開発環境の準備

4-1. Visual Studio Codeをインストールする

下記のサイトからVisual Studio Codeをダウンロードしてインストールします。

4-2. Live Serverをインストールする

① Visual Studio CodeでExtensionsアイコンをクリックして、Extensionsビューを表示します。
② 検索窓に「Live Server」と入力し検索します。
③ Live Serverをインストールします。

4-3. mkcertを使って証明書と秘密鍵を作成する

kintoneでは「http://~」のURLは指定できません。「https://~」である必要があります。
下記のページからmkcertをダウンロードし、証明書と秘密鍵を作成します。

Windowsの場合の手順を以下に書きます。
① Windowsの場合、mkcert-v1.4.3-windows-amd64.exeをダウンロードします。
(1.4.3は記事作成時の最新です。バージョン部分は適宜読み替えてください。)
② コマンドプロンプトで下記のコマンドを実行します。

(mkcertをダウンロードしたフォルダ) > mkcert-v1.4.3-windows-amd64.exe -install

※PCにJavaが入っている(環境変数に「JAVA_HOME」がある)場合、Javaのルートストアにもインポートしようとしてエラーメッセージが表示されます。
エラーが出ても以降の操作に問題はないですが、コマンドプロンプトを「管理者として実行」で立ち上げるとエラーは出なくなります。

セキュリティの警告が表示されたら「はい」をクリックする

(mkcertをダウンロードしたフォルダ) > mkcert-v1.4.3-windows-amd64.exe localhost 127.0.0.1 ::1

以上を実行すると、mkcert-v1.4.3-windows-amd64.exeと同じフォルダ内に秘密鍵と証明書ができています。

  • localhost+2.pem (証明書)
  • localhost+2-key.pem(秘密鍵)

4-4. LiveServerの設定を行う

① Visual Studio Codeの[File]>[Open Folder]で開発するソースフォルダを選択しておきます。
② Visual Studio Codeの画面左下にある歯車マーク > [Settings]をクリックします。
③ [Workspace]を選択し、検索窓に「Live Server http」と入力します。
④ 下記のように設定します。
image.png

項目
enable true
cert 4-3で生成された証明書のパス
key 4-3で生成された秘密鍵のパス
passphrase

4-5. LiveServerを起動する

Visual Studio Codeの[File]>[Open Folder]でソースフォルダを選択しておき、
画面下の「Go Live」をクリックするとWebサーバが起動します。

ブラウザが立ち上がり、各ソースファイルを「https://127.0.0.1:5500/~」
で参照することができるようになります。


この章の内容は下記のサイトに詳しく書かれています。
Visual Studio Code Live Server Extensionを使ってkintoneカスタマイズ開発効率をあげよう!
https://developer.cybozu.io/hc/ja/articles/360026502091

5. カスタマイズファイルの場合

kintoneの[アプリの設定] > [JavaScript / CSSでカスタマイズ]で、ローカル環境のファイルのURLを指定します。

一度指定すれば、その後ソースを修正した後にいちいちアップロードしなくても「アプリを更新」するだけで修正した内容が反映されます。

6. プラグイン開発の場合

6-1. マニフェストファイルを編集する

プラグインのファイル群の中にあるmanifest.jsonの中で、編集したいファイルのパスをローカル環境のURLに変更します。
例)
css/addin-style.css

https://127.0.0.1:5500/css/addin-style.css

image.png

6-2. 作成したプラグインのアップロード

① Node.jsをインストールする

既にNode.jsが入っている場合は、バージョンを確認します。

> node -V

この後インストールするplugin-packerに必要なNode.jsのバージョンは以下のサイトのengines プロパティに書かれているので確認します。
https://github.com/kintone/js-sdk/blob/master/packages/plugin-packer/package.json

  "engines": {
    "node": ">=12"
  }

上記の場合、Node.jsのバージョンは12以上が必要です。

② plugin-packerをインストールする

plugin-packerをインストールします。

> npm install -g @kintone/plugin-packer

この時に、Node.jsをインストールしてすぐだと

'npm' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。

というメッセージが表示されるかもしれません。
コマンドプロンプト画面を新規に開いて再度やってみてください。

また、社内のネットワークだとプロキシでエラーになることがあります。
下記の記事を参考にプロキシの設定をしてみてください。

③ プラグインをパッケージングする

下記のページの「基本の使い方」を参考に、プラグインをパッケージングします。

plugin-packerを使ってプラグインファイルをパッケージングしよう!
https://developer.cybozu.io/hc/ja/articles/360000910783

<参考>
プラグイン開発支援ツール群の案内
https://developer.cybozu.io/hc/ja/articles/360000975763

④ アップロード

プラグインを追加する場合は、まずシステム管理でプラグインを読み込み、アプリの設定で追加します。

  1.  [kintoneシステム管理] > [プラグイン]ページで「読み込む」をクリックし、①で作成したzipファイルを読み込む。
  2.  [アプリの設定] > [プラグイン]で「プラグインの追加」をクリックし、プラグインを追加する。

一度アップロードすれば、その後ソースを修正した後にいちいちアップロードしなくても「アプリを更新」するだけで修正した内容が反映されます。

#7. デバッグが終わったら
本番環境では、ローカル環境のURLを本番のパスに変更しておきましょう!

0
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?