【超簡単】初心者でもできる！kintoneの開発環境構築手順(VSCode)

kintoneといえば、ノンプログラミングでアプリを作成できるツールであり、いろいろな自治体をはじめ、多くの企業で活用されているフレームワークです。

しかし、アプリ間の連携を取るなど、開発規模が大きくなると、標準の機能でカバーできなくなってしまいます。

その際には、CSSやJava Scriptでカスタマイズすることが可能です。

今回は、開発環境の構築手順についてまとめてみました。

Visual Studio Code(VSCode)を用いて開発環境を構築する

今回は、人気のコード エディター「Visual Studio Code」通称VSCodeで開発環境を構築します。

ぼくの環境はWindowsですが、Macでも同様の手順で開発環境を構築できると思います。

Visual Studio Code(VSCode)をインストールしよう

まずはVSCodeをインストールします。

上記のリンクに飛ぶと、以下のようなページが表示されるので、「今すぐ無料でダウンロードする」をクリック。

ご自身の環境にあったインストーラーをダウンロードしてください。

VSCodeUserSetup-xxxx-x.xx.x.exeのインストールファイルを起動します。

[次へ]をクリックします。

インストール先のフォルダを指定して[次へ]をクリックします。

プログラムアイコンを作成するフォルダを指定して[次へ]をクリックします。

インストール時のオプションを選択して[次へ]をクリックします。

インストール時の設定が問題なければ[インストール]をクリックします。

これでVSCodeのインストールが完了です。

日本語対応も忘れずに！

画面左のサイドバーから拡張機能アイコンをクリックし、「Japanese language」と検索してインストールします。

インストールが完了したらVSCodeを再起動してください。

kintoneからlocalhostを参照し変更を随時監視する

vscodeのLive serverを使用し、kintoneからGoLiveでhostした

 https://127.0.0.1:5500/指定ファイル名

にアクセスしファイル内のJava Scriptを参照します。

Live serverはデフォルトで「http通信」しか対応していないため、「https通信」を可能にするため証明書発行・vscodeのsetting.jsonの編集をする必要があります。

では、さっそく準備に取り掛かりましょう。

1.Vscodeの拡張機能「Live server」をインストールする

画面左のサイドバーから拡張機能アイコンをクリックし、「Live Server」と検索してインストールします。

2.https://localhostへのアクセスをブラウザが安全と判断するためOSに証明書をインストールする

https://github.com/FiloSottile/mkcert/releases/　にアクセスし、mkcert-v?.?.?-windows-amd64.exeをダウンロード。

3.exeファイルを実行し証明書取得

先程がダウンロードしたmkcert-v?.?.?-windows-amd64.exeの名前をmkcert.exeに変更し、コマンドプロンプトから以下のコマンドを実行します。

mkcert -install
mkcert localhost 127.0.0.1 ::1

※ダウンロードフォルダにmkcert.exeがある場合は、コマンドプロンプト上でcdコマンドを使用してカレントディレクトリをダウンロードフォルダに変更しておいてください。

パスワードの代わりにセキュリティの警告が表示されるので「はい」をクリックします。
※この証明書や秘密鍵は開発用途のみ利用するものとし、他人とは共有しないでください。

4.作成されたpemファイル(2種類)をC:\cert\に移動

以下の様に、C:\cert\に2種類のpemファイルが格納できればOKです。

5.mkcertが作った証明書と秘密鍵を使ってLiveServerをhttpsで動作するように設定

メニューから「ファイル」→「ユーザー設定」→「設定」の順にクリックし、設定タブを開きます。

設定タブ内の「ワークスペース」をクリックし、検索窓に「Live Server」と入力します。
検索結果の中から「Https」の項目を探し、「settings.jsonで編集」をクリックします。

// settings.json
{
	"liveServer.settings.https": {
		"enable": true,
		"cert": "C:\\cert\\localhost+2.pem",
		"key": "C:\\cert\\localhost+2-key.pem",
		"passphrase": ""
	}
}

settings.jsonに上記のコードをコピペしてください。

6.VSCode再起動し、画面下部にある「GoLive」で「https://127.0.0.1:5500」を立ち上げる

VSCodeの右下にGo Liveが表示されるので、クリックしてください。

7.kintoneJsファイルアップロードするページで「URL指定で追加」からパスを通す

まとめ

ここまで設定できれば、kintoneに紐づけたソースコードの編集をVSCode上で行い保存をかけると、リアルタイムでkintoneでの動作確認が行えます。

開発用はURLで指定し、本番用はファイルをアップロードすることで、開発中の機能を一般ユーザーに見せないことも可能です。

毎回JSファイルをアップロードして動作確認するのは手間ですので、しっかり環境構築を行い、有意義なkintone開発を行ってください！