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

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

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

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

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

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

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

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

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

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

azure.microsoft.com

Visual Studio Code – コードエディター | Microsoft Azure

https://azure.microsoft.com/ja-jp/products/visual-studio-code/

ほぼすべての言語に対応し、任意の OS で動作する強力なコードエディター、Visual Studio Code を使用して、Azure で編集、デバッグ、デプロイを行います。

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

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

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をダウンロード。

GitHub

FiloSottile/mkcert

https://github.com/FiloSottile/mkcert/releases/

A simple zero-config tool to make locally trusted development certificates with any names you'd like. - FiloSottile/mkcert

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に上記のコードをコピペしてください。

上記コードの解説

enable: trueを設定するとhttpsで動作します
cert: mkcertで生成された証明書へのパスを設定します
key: mkcertで生成された秘密鍵のパスを設定します
passphrase: パスフレーズですが空文字を設定します

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

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

未接続時
接続時

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

まとめ

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

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

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

kintoneで見やすいのカンバン形式を無料で導入する方法

kintoneでカンバン形式のタスク管理を使う場合、有料のプラグインを使うか、無料の場合はjava scriptでコードを作成する必要があります。前者のプラグインを使う場合はArcesさんのプラグインを使うのが良いかと思いますが、今回はcybozu developer network内にて公開されているツールをカスタマイズして「ちょっと便利」にしちゃおうと思います。無料でkintoneにガントチャートとカンバンを設置する方法手っ取り早く進めていきましょう。無料でカンバンを設置する方法は以下のリンク先を ...

Kintoneはプラグインでこんなに良くなる！Kintoneのオススメプラグイン

ノンコーディングでアプリが作成できるフレームワーク「Kintone」。しかし、細かいカスタマイズをしようとすると、どうしてもJSでのコーディングが必要になってきます。実際に開発スキルがないけど、やりたいことがいっぱいある！という方向けに、有料/無料に分けてオススメのプラグインをご紹介します。【無料】オススメプラグイン一覧テキスト絞り込み検索プラグイン(TIS) 無料プラグインといえば「TIS」ですよね。そのTISからご紹介するのは「一覧画面でのテキスト絞り込み」を可能にする検索窓設置プラグインです。 ...

Kintoneで郵便番号から住所を検索する方法

過去に同様の記事を書きましたが、2020年6月でAPIの提供が終了してしまいました。新たにzipcloudが郵便番号検索APIを提供してくれていますので、こちらを使って郵便番号から住所を取得するサンプルコードを記載します。郵便番号検索APIとは郵便番号検索APIは、日本郵便が公開している郵便番号データを検索する機能をRESTで提供しています。現在使用しているデータは、「2020年6月30日更新分の全国一括データ（加工済バージョン）」です。 zipcloud.ibsnet.co.jp 58 ...

WordPressの問い合わせフォームContact Form 7とkintoneを連携する方法

WordPressでHPを作成している場合、プラグインの Contact Form 7 で問い合わせフォームを作成している方も多いと思います。今回は、Contact Form 7 と Kintone を連携し、問い合わせ内容をそのまま Kintone に転記する方法をご紹介します。 Contact Form 7 をインストールしてフォームの作成をするまずはContact Form 7 をインストールし、フォームの作成をしておいてください。手順は以下の記事を参考にしてください。 Form data t ...

【kintone】ボタンクリックで別アプリの編集画面に値をコピーした状態で開く方法

タイトルだけ見ると何を言ってるか分かりませんよね…＾＾； Aアプリのスペースに設定したボタンからBアプリの編集画面を立ち上げ、Aアプリの内容をフィールドに事前に設定しておきたいケースに使用するサンプルコードです。 (function() { "use strict"; var events = ['app.record.detail.show','app.record.create.show','app.record.edit.show' ...

【kintone】JavaScriptを使って郵便番号から住所を作成する(コピペでOK)

kintoneの顧客管理アプリを作ってる中で、ふとこんなことを思ったのがきっかけ。 kotopapa住所入力面倒だなぁ…。郵便番号からある程度情報取れないかな…。 JavaScriptを使えばあっという間に実現できました！ kintoneのフィールド情報 kintoneのアプリには以下のようなフィールドを追加してください。フィールド名フィールド形式フィールドコード郵便番号文字列(1行) zipcode 都道府県文字列(1行) pref 市区町村文字列(1行) city 以下住所文字列(1行 ...

JavaScriptを使ってkintoneの一覧画面上に全レコードを対象とした一括処理ボタンを実装したい

kintoneを使っているとよく発生する事象です。アプリ内のレコード数が数千件あるが、この新しくフィールドを追加することになった。全件条件分岐で内容を入れたいが、ひとつずつやっているといつまでかかるかわからない…。そんな時は、一括で処理してくれるボタンを実装しちゃいましょう！ (function () { "use strict"; kintone.events.on('app.record.index.show', function (event) { if ( ...

kintoneのJava Scriptで非同期処理の完了を待つ方法

kintoneのjava scriptで機能拡張していると、便利なはずの非同期処理がかえって困るケースがあります。例えば、保存時の処理。 submit.successの処理時に他アプリの値を取ってきたり、書き換えたり。 kintone.apiのGETやPUT、POSTに関して、returnをつけることで簡単に非同期処理の完了を待つことができることをご存じでしょうか？ return kintone.api(kintone.api.url('/k/v1/records', true), &# ...

kintoneでJava Scriptを使ってサブテーブルを初期化する方法

kintoneで別アプリのレコード情報をサブテーブルにまとめて取得する場合、まずはサブテーブルを初期化…。あれ？サブテーブルの初期化ってどうやるの！？となったあなた。そんな時は以下のコードで初期化することができますよ。 // テーブル初期化関数 function initRow(table_name) { let record = kintone.app.record.get().record; for(let i = record[table_name].value.length; i >= ...

kintoneでJava Scriptを使ってダイアログ(確認ポップアップ)を表示する

kintoneの保存前に保存チェックをしたり、保存キャンセルをしたり、ダイアログを表示することで処理の切り替えをすることが可能です。ダイアログで他アプリの登録画面を表示したい kotopapa管理アプリに紐づく別アプリの登録が済んでない場合、別アプリの登録を促したい… 　そういう場合に、ダイアログでユーザーに注意を促し、他アプリの登録画面に遷移するようなサンプルコードはこちら。 let appid = 10; //開きたいアプリのID let res = confirm("××が未申請です。 ...