![](https://sp-ao.shortpixel.ai/client/to_webp,q_lossy,ret_img,w_1000,h_600/https://yu-syan.sakura.ne.jp/wp/wp-content/uploads/2022/07/71f8db9d88fc4d6b3dd3a738ca3c8e0b.jpg)
kintone×js vscodeデバッグ環境構築(JavaScript)
概要
kintone×jsのデバッグを
「ブラウザのデベロッパーツール」ではなく、
vscodeでデバッグする環境を構築する
![](https://sp-ao.shortpixel.ai/client/to_webp,q_lossy,ret_img,w_1024,h_574/https://yu-syan.sakura.ne.jp/wp/wp-content/uploads/2022/07/d9deeb1d2f7a420514d76dd6bb5479d3-1024x574.gif)
デバッグ環境を構築した理由
弊部では「kintone」にて
下記のような拡張機能をjavascriptで実現しておりますが、
- レコード保存時にslack通知
- 「日付」フィールドにて、5営業日後の日付しか受け付けない
- ステータスが更新された日時を「日時」フィールドに反映
javascriptのテスト方法が下記のように
「試作品作成→kintoneにjsアップ」を繰り返す…
というのが常套手段となっておりました
- 試作品コード作成
- javascriptアップロード
- エラーが起きていたら修正
- 再度javascriptアップロード
![](https://sp-ao.shortpixel.ai/client/to_webp,q_lossy,ret_img,w_833,h_846/https://yu-syan.sakura.ne.jp/wp/wp-content/uploads/2022/07/c63aec310e0bb7195989a6030d0047b1-1.png)
更に、変数の中身確認は全て
「console.log(変数)」と記載しておき、F12でコンソール画面を逐一確認しに行く…
という開発環境でした
![](https://sp-ao.shortpixel.ai/client/to_webp,q_lossy,ret_img,w_1024,h_480/https://yu-syan.sakura.ne.jp/wp/wp-content/uploads/2022/07/02_console_log-1024x480.png)
js開発に慣れている先輩達にとっては問題ないのですが、
js初心者の私には、ブレークポイント張って処理手順(結果)を逐一確認出来ないと開発出来ない…(処理の流れが全く理解出来ず、コピペエンジニアになるかも…と焦りました)
という事で、javascriptでもブレークポイントを使える開発環境を構築に着手致しました。
(windows版)kintone×jsデバッグ環境構築_方法
1、事前準備
1、下記サイトにアクセス
Visual Studio Code Live Server Extensionを使ってkintoneカスタマイズ開発効率をあげよう!
https://developer.cybozu.io/hc/ja/articles/360026502091
2、「mkcert-vX.X.X-windows-amd64.exe」をダウンロード
1、サイト内の「こちら」をクリック
![](https://sp-ao.shortpixel.ai/client/to_webp,q_lossy,ret_img,w_1024,h_157/https://yu-syan.sakura.ne.jp/wp/wp-content/uploads/2022/07/a81af387a3de83deecab8f5313aedb15-1-1024x157.png)
2、最新版の「mkcert-vX.X.X-windows-amd64.exe」をダウンロード
※2022/07/05当時の最新版は1.44
![](https://sp-ao.shortpixel.ai/client/to_webp,q_lossy,ret_img,w_1024,h_421/https://yu-syan.sakura.ne.jp/wp/wp-content/uploads/2022/07/cc1661c6c2e28bb95e855657c93dbe96-1024x421.png)
3、「mkcert-vX.X.X-windows-amd64.exe」を実行
1、コマンドプロンプトを立ち上げる
※「コマンドプロンプト立ち上げ方は下記参照
- 左下の検索窓に「cmd」を入力
- 「最も一致する検索結果」に「コマンドプロンプト」が表示されているので、クリック
![](https://sp-ao.shortpixel.ai/client/to_webp,q_lossy,ret_img,w_1024,h_940/https://yu-syan.sakura.ne.jp/wp/wp-content/uploads/2022/07/884a85810a68a054c72a879ad4e2cafd-1024x940.jpg)
2、コマンドプロンプトにて下記順に実行
※コマンドプロンプトでの貼り付けは右クリック (「Ctrl + v」ではないので注意)
- 「cd 【mkcert-vX.X.X-windows-amd64.exe】を格納したフォルダパス」を入力後、「Enter」キーを押す
※例「cd C:\Users\ユーザー名\Downloads」 - 「mkcert-vX.X.X-windows-amd64.exe -install」を入力し、「Enter」キーを押す
※赤文字「X.X.X」は実際の最新版の数字と合わせる事 - 「セキュリティ警告」が出るので「はい」をクリック
![](https://sp-ao.shortpixel.ai/client/to_webp,q_lossy,ret_img,w_784,h_768/https://yu-syan.sakura.ne.jp/wp/wp-content/uploads/2022/07/9764d935908d13dc67de69a158159ab0-2.png)
3、続けて、コマンドプロンプトにて下記順に実行
※コマンドプロンプトでの貼り付けは右クリック (「Ctrl + v」ではないので注意)
- 「mkcert-vX.X.X-windows-amd64.exe localhost 127.0.0.1 ::1」を入力後、
「Enter」キーを押す
※赤文字「X.X.X」は実際の最新版の数字と合わせる事
![](https://sp-ao.shortpixel.ai/client/to_webp,q_lossy,ret_img,w_1009,h_283/https://yu-syan.sakura.ne.jp/wp/wp-content/uploads/2022/07/968b6dd82bd073b74fc8298da300e167-1.png)
4、【mkcert-vX.X.X-windows-amd64.exe】を格納したパスに下記ファイルが生成された事を確認
- localhost+2.pem
- localhost+2-key.pem
![](https://sp-ao.shortpixel.ai/client/to_webp,q_lossy,ret_img,w_1024,h_468/https://yu-syan.sakura.ne.jp/wp/wp-content/uploads/2022/07/2d613d80a2d944bed1862234d814aac6-1024x468.png)
5、下記ファイルを「C:\Users\ユーザー名」直下に移動させる
- localhost+2.pem
- localhost+2-key.pem
- mkcert-vX.X.X-windows-amd64.exe
![](https://sp-ao.shortpixel.ai/client/to_webp,q_lossy,ret_img,w_1024,h_467/https://yu-syan.sakura.ne.jp/wp/wp-content/uploads/2022/07/12f19406e623f992498967d5b000b684-1-1024x467.png)
4、vscode設定
1、拡張機能「LiveServer」をインストールする
![](https://sp-ao.shortpixel.ai/client/to_webp,q_lossy,ret_img,w_451,h_548/https://yu-syan.sakura.ne.jp/wp/wp-content/uploads/2022/07/ceef6635ff72b6300a8cb605aea276ca.png)
2、vscodeを再起動する
※再起動しないと「LiveServer」の設定画面が出てこない
3、画面左下の歯車マーク > 設定をクリック
![](https://sp-ao.shortpixel.ai/client/to_webp,q_lossy,ret_img,w_430,h_508/https://yu-syan.sakura.ne.jp/wp/wp-content/uploads/2022/07/a12d853611f09bbd81d3373c54404580.png)
4、下記手順で「Live Server」を設定する
- 「ワークスペース」をクリック
- 「設定の検索」に「live http」を入力して検索
- 「Live Server > Settings: Http」項目に下記設定
「enable」→「true」
「cert」→「C:\Users\ユーザー名\localhost+2.pem」
「key」→「C:\Users\ユーザー名\localhost+2-key.pem」
「passphrase」→ 何もしなくてOK
![](https://sp-ao.shortpixel.ai/client/to_webp,q_lossy,ret_img,w_1024,h_367/https://yu-syan.sakura.ne.jp/wp/wp-content/uploads/2022/07/f51e6cec4e0916e0ff9c60af924f581e-1-1024x367.png)
5、下記手順でデバッグ環境「launch.json」構築をする
(実行とデバッグ)をクリック
- 歯車(launch.jsonを開く)をクリック
- 「launch.json」の中身を下記コードにコピペで差し替える
- 「launch.json」を上書き保存して閉じる
![](https://sp-ao.shortpixel.ai/client/to_webp,q_lossy,ret_img,w_1024,h_397/https://yu-syan.sakura.ne.jp/wp/wp-content/uploads/2022/07/09bdc5f57d1cf0b4936a2b79fc95687f-1024x397.png)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | { "version": "0.2.0", "configurations": [ // 「Form_Bridge」デバック構成 { "name": "FormBridge", "type": "chrome", "request": "attach", "urlFilter": "https://formbridge.kintoneapp.com/*", "port": 9222, "sourceMaps": true, "trace": true, }, // 「kintone」デバック構成 { "name": "kintone", "type": "chrome", "request": "attach", "urlFilter": "https://*.cybozu.com/k/*", "port": 9222, "sourceMaps": true, "trace": true, } ] } |
![](https://sp-ao.shortpixel.ai/client/to_webp,q_lossy,ret_img,w_654,h_1024/https://yu-syan.sakura.ne.jp/wp/wp-content/uploads/2022/07/2eb04402dc64a5676380df02749a100c-2-654x1024.png)
6、vscodeを再起動する
5、googleブラウザ起動用バッチ作成
1、下記「kintone_jsデバッグ用_chrome実行.zip」をダウンロードする
2、zipファイルを解凍し、「kintone_jsデバッグ用_chrome実行.bat」が存在している事を確認
※会社のセキュリティ関連でダウンロード出来ない方は、下記手順でバッチを作成して下さい。
- メモ帳を開く
- 下記プログラムをメモ帳に貼り付け
- メモ帳を「kintone_jsデバッグ用_chrome実行.txt」で保存
- 「kintone_jsデバッグ用_chrome実行.txt」の拡張子を「bat」に変更
1 | "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 |
kintone×jsデバッグ手順
1、事前準備
1、googleブラウザを全て閉じる
※閉じないとデバッグモードがブラウザに反映されないので注意
2、「kintone_jsデバッグ用_chrome実行.bat」をダブルクリックする
3、新たにgoogleブラウザが開かれた事を確認
4、vscodeにて右下の「Go Live」をクリック
![](https://sp-ao.shortpixel.ai/client/to_webp,q_lossy,ret_img,w_132,h_39/https://yu-syan.sakura.ne.jp/wp/wp-content/uploads/2022/07/09_Go_Live.png)
5、vscodeにて右下が「Port:5500」になっている事を確認
※「Go Live」のままではデバッグ出来ません
![](https://sp-ao.shortpixel.ai/client/to_webp,q_lossy,ret_img,w_154,h_35/https://yu-syan.sakura.ne.jp/wp/wp-content/uploads/2022/07/11_Port_5500.png)
6、googleブラウザに開発環境の全フォルダ、ファイルが表示されている事を確認
![](https://sp-ao.shortpixel.ai/client/to_webp,q_lossy,ret_img,w_1024,h_648/https://yu-syan.sakura.ne.jp/wp/wp-content/uploads/2022/07/5cee8675bf07254539864edb3d86ccd9-1024x648.png)
7、デバッグしたいjavascriptを格納しているフォルダに移動する
※フォルダをクリックすると、フォルダ内にアクセス出来ます
※筆者は「js」フォルダ内に格納しているので、「js」フォルダをクリック
![](https://sp-ao.shortpixel.ai/client/to_webp,q_lossy,ret_img,w_903,h_401/https://yu-syan.sakura.ne.jp/wp/wp-content/uploads/2022/07/600bef6f7279ad229537cdf251a00a4b-1.png)
8、デバッグしたいjavascriptファイルをクリックし、URLをコピーする
※URL内に日本語が含まれているとデバッグ出来ないので注意
![](https://sp-ao.shortpixel.ai/client/to_webp,q_lossy,ret_img,w_782,h_645/https://yu-syan.sakura.ne.jp/wp/wp-content/uploads/2022/07/776cac20c39568ad5d9ff26126c22c43-1.png)
9、下記手順でjavascriptをkintoneアプリに反映
- 「URL指定で追加」をクリック
- 先程コピーしたURLを貼り付ける
- 「保存」をクリック
- 「アプリを更新」をクリック
![](https://sp-ao.shortpixel.ai/client/to_webp,q_lossy,ret_img,w_566,h_552/https://yu-syan.sakura.ne.jp/wp/wp-content/uploads/2022/07/d03225a89de2c5b9df185a84917228c2.png)
![](https://sp-ao.shortpixel.ai/client/to_webp,q_lossy,ret_img,w_1024,h_131/https://yu-syan.sakura.ne.jp/wp/wp-content/uploads/2022/07/2fff2fe1e1f34cd82a418ebf8c360b7a-1-1024x131.png)
2、デバッグ開始
1、vscodeにて何のデバッグをするのか?を選ぶ
※kintoneをデバッグしたい場合は「kintone」を選ぶ
![](https://sp-ao.shortpixel.ai/client/to_webp,q_lossy,ret_img,w_432,h_362/https://yu-syan.sakura.ne.jp/wp/wp-content/uploads/2022/07/bc26298433fbd2dff47bea2c83f4df86.png)
2、「kintone」を選んだら実行ボタン(▷)をクリック
![](https://sp-ao.shortpixel.ai/client/to_webp,q_lossy,ret_img,w_370,h_47/https://yu-syan.sakura.ne.jp/wp/wp-content/uploads/2022/07/f8ddd3b16fc5457af33ff4467fccdf07.png)
3、ブレークポイントを好きな行に設定し、kintoneでjs実行のトリガーを踏んでデバッグを開始する
※添付画像のjsでは「保存ボタンを押した時」のイベントの為、保存ボタンを押す
![](https://sp-ao.shortpixel.ai/client/to_webp,q_lossy,ret_img,w_1024,h_574/https://yu-syan.sakura.ne.jp/wp/wp-content/uploads/2022/07/d9deeb1d2f7a420514d76dd6bb5479d3-2-1024x574.gif)
3、デバッグのやり方
ほぼ、下記3個の機能しか使いません!
1、次のブレークポイントまで処理を続行する
![](https://sp-ao.shortpixel.ai/client/to_webp,q_lossy,ret_img,w_257,h_119/https://yu-syan.sakura.ne.jp/wp/wp-content/uploads/2022/07/98bbede4d53d682c79f99575c8ab89b1.png)
2、修正したjsをkintoneに反映させる
※「修正したコードが反映されていない」「デバッグが開始されない!」等は再起動で直ります
![](https://sp-ao.shortpixel.ai/client/to_webp,q_lossy,ret_img,w_411,h_99/https://yu-syan.sakura.ne.jp/wp/wp-content/uploads/2022/07/dd579c54af085508c2b7e9dfa721aa56.png)
3、デバッグを中止する
![](https://sp-ao.shortpixel.ai/client/to_webp,q_lossy,ret_img,w_392,h_103/https://yu-syan.sakura.ne.jp/wp/wp-content/uploads/2022/07/1540fd342b5169da4ca8fdd807ce3a7f.png)
【おまけ】フォームブリッジ×jsデバッグ方法
何をデバッグしたいのか?にて「FormBridge」を選ぶだけです!
※それ以外はkintoneと同じ
![](https://sp-ao.shortpixel.ai/client/to_webp,q_lossy,ret_img,w_491,h_383/https://yu-syan.sakura.ne.jp/wp/wp-content/uploads/2022/07/6b4c9cc45b09bce5e47d51c1e55ee02f.png)
参考URL
【kintone】VSCodeから直接操作でデバッグ効率アップ
https://qiita.com/edamame-peperoncino/items/c3e556997ff4bda56e5b
Visual Studio Code Live Server Extensionを使ってkintoneカスタマイズ開発効率をあげよう!
https://developer.cybozu.io/hc/ja/articles/360026502091
感想
デバッグ環境を整えた事で、
kintone×javascriptの処理の流れも理解出来て
下記等の複雑なロジックも組めるようになってきました
先輩社員から「複雑なjs作成、調査はゆーしゃんに任せます!」
と言われるくらいには技術力が向上してきました
編集履歴
2022/07/09 新規作成
2022/07/24 更新:「URL内に日本語が含まれているとデバッグ出来ない」注意書きを追加