入門編｜kintoneをJavaScriptカスタマイズする方法！活用例も紹介

kintone（キントーン）は高い拡張性を持っており、カスタマイズが前提になっているため、基本機能だけでは物足りない場合も多いでしょう。

kintoneの基本機能で足りない部分は、プログラミング言語のJavaScriptを使ったカスタマイズで、追加・拡張できます。プログラミングというと難しそうですが、サンプルコードを活用することで、非エンジニアでも簡単に実現可能です。

本記事では、JavaScriptカスタマイズの方法と活用例を解説します。活用例とサンプルコードも紹介するので、記事を読みながら実際にJavaScriptカスタマイズに挑戦してみてください。

kintoneのJavaScriptカスタマイズでできること

kintoneは、プログラミング言語のJavaScript（ジャバスクリプト）を使ってカスタマイズすると、基本機能にはない機能の追加や拡張が可能です。

kintoneのJavaScriptカスタマイズでできることは、大きく3つに分けられます。

• kintoneの画面・動作をカスタマイズする
• フィールドやレコードの入力・処理を自動化する
• ほかのアプリや外部システムと連携する

自社に必要なカスタマイズを考えながら読んでみてください。

kintoneの画面・動作をカスタマイズする

kintoneでは、プログラミング言語のJavaScriptを使って、画面の見た目や動作をカスタマイズできます。

たとえば、以下のカスタマイズが可能です。

• 入力項目の表示・非表示を切り替える
• 背景色や文字色を変更する
• 一覧画面のデザインを変更する
• ボタンやラベルを非表示にする
• 独自のボタンを追加してアクションを実行する

これらのカスタマイズには、JavaScriptのほかにCSSやkintone JavaScript API（※）を活用します。

kintoneでは、JavaScriptだけではなくCSSやkintone JavaScript APIを組み合わせることで、より柔軟にカスタマイズ可能です。

たとえば、見積書を作成するアプリで「税率」や「割引率」を入力すると、自動で合計金額を計算し、ミスを防ぐ仕組みを追加できます。手計算の負担が減るとともに、ヒューマンエラーを防げるため、業務の正確性と効率の向上が可能です。

自社に合ったkintoneにカスタマイズすることで、作業効率の向上が期待できます。

※ API：ソフトウェア同士をつなぎ、機能を拡張したり連携させたりする仕組みのこと

フィールドやレコードの入力・処理を自動化する

kintoneでは、JavaScriptを活用することで、フィールド（※1）やレコード（※2）などの入力や処理を自動化できます。

たとえば、以下のカスタマイズが可能です。

JavaScriptカスタマイズを活用すれば、手作業を減らし、業務効率を向上させるとともに、ヒューマンエラーも防げます。

たとえば、経費を精算するアプリに領収書の金額を入力すると、自動で消費税を計算し、合計金額を表示する機能を追加できます。

その結果、手書きの申請書が不要になり、経費申請にかかる手間を削減可能です。スムーズに申請できるため、後回しにして申請漏れが発生するリスクも軽減できるでしょう。

※1 フィールド：入力項目は決められているが、Excelのセルのようなもの
※2 レコード：フィールドが集合したデータ単位で、Excelの行のようなもの

ほかのアプリや外部システムと連携する

kintoneでは、JavaScriptカスタマイズを活用して、ほかのkintoneアプリや外部システムとデータを連携させられます。

たとえば、以下のカスタマイズが可能です。

• kintone REST API（※1）を使ってデータの取得・更新を行う
• Google スプレッドシートや外部サービスとデータ連携する
• Webhook（※2）でリアルタイム通知を実装する
• SlackやLINE WORKSなどのチャットツールと連携する

複数システムのデータを自動連携できるため、手作業を減らし、業務の効率化やリアルタイムな情報共有が可能になります。

たとえば、Googleカレンダーとkintoneを連携させると、kintoneで登録した打ち合わせ予定が自動的にGoogleカレンダーに反映されます。

同じ予定を2回入力する手間が省かれ、どちらか一方に登録し忘れるリスクも軽減できるため、スケジュール管理の効率化につながるのです。

ただし、これらのカスタマイズには、API通信（※3）や外部サーバーの利用が必要です。

API通信にはリクエストの送受信や認証を行うため、JavaScriptの基本知識に加えて、REST APIの仕組みへの理解が求められます。また、外部サーバーの設定には、サーバー管理の知識も必要なため、連携作業は非エンジニアにとって難易度が高くなります。

※1 kintone REST API：kintoneのデータを外部から操作するための仕組み
※2 Webhook：kintoneの特定の操作をきっかけに、外部サービスへ通知を送る仕組み
※3 API通信：異なるシステム同士がデータをやり取りする仕組み

kintoneのJavaScriptカスタマイズの準備｜開発環境を整えよう！

kintoneでJavaScriptカスタマイズを行うためには、以下の準備が必要です。

• スタンダードコース以上に登録する
• Webブラウザの条件を確認する
• kintone開発者ライセンスを取得する
• エディターを用意する（任意）

それほど難しい準備はありません。開発環境を整えて、JavaScriptカスタマイズに挑戦してみましょう。

スタンダードコース以上に登録する

kintoneのJavaScriptカスタマイズを行うためには、kintoneのコースのうち、スタンダードコース以上に登録する必要があります。

• ライトコース：月額1,000円（税別）／ユーザー
• スタンダードコース：月額1,800円（税別）／ユーザー
• ワイドコース：月額3,000円（税別）／ユーザー

ライトコースの利用者で、JavaScriptカスタマイズを利用したい場合は、スタンダードコース以上にアップグレードが必要です。

なお、月額コストが上がるため、費用対効果を検証してからのアップグレードをおすすめします。

Webブラウザの条件を確認する

kintoneのJavaScriptカスタマイズを行うためには、以下のWebブラウザの条件を満たす必要があります。

※最新2バージョンとは、最新バージョンとそのひとつ前のバージョンのこと
参考：動作環境｜サイボウズのクラウド基盤

Webブラウザが最新の状態か確認し、条件を満たしていない場合はアップデートしてください。

なお、スマートフォンのブラウザ条件や対応するメールサーバーなども指定されているため、確認のうえJavaScriptカスタマイズに挑戦しましょう。

kintone開発者ライセンスを取得する（任意）

kintoneの開発者ライセンスを取得すると、無料で専用の開発環境を整えられます。APIのテストがしやすくなるため、高度なカスタマイズの開発テスト環境として活用可能です。

cybozu developer networkでアカウントを登録後、申し込みフォームに必要事項を記入して申請すれば、開発者ライセンスを取得できます。

JavaScriptカスタマイズに慣れて、高度なカスタマイズを実践するときに活用してみてください。

エディターを用意する（任意）

コードを書いたり考えたりするためにエディターを用意すると、効率的にJavaScriptカスタマイズを行えます。

エディターとは、コードの作成・編集を行うソフトウェアです。色分けや自動補完機能があり、コーディングを効率化できます。

Webブラウザの開発者ツールで代用できますが、専用のエディターのほうがより快適に作業が可能です。とくに自分でコードを書くなら、エディターの利用をおすすめします。

なお、『JSEdit for kintone』を活用すると、kintone上で直接JavaScriptやCSSを編集できるので、活用してみてください。

kintoneのJavaScriptカスタマイズのやり方【サンプルコードあり】

ここでは、レコード一覧の文字色をフィールドの条件に沿って変更するカスタマイズで、ステータス状況をひと目見て分かるように調整するやり方を紹介します。

1. カスタマイズしたいアプリを選択する
2. JavaScriptファイルを作成する
3. kintoneにJavaScriptを適用する
4. kintoneの動作を確認する

はじめてJavaScriptカスタマイズに挑戦する方でも簡単にできるよう、サンプルコードも掲載するので、ぜひお試しください。

1.カスタマイズしたいアプリを選択する

まずは、カスタマイズしたいアプリを選択します。

今回は、無料で利用できるサンプルアプリの問い合わせ管理アプリを使用します。

【初期状態の問い合わせ管理アプリ】

初期状態だと、対応状況や期限がすべて黒字で表示されており、見にくいですね。対応状況が「未対応」の問い合わせを見落として、対応漏れが発生するおそれがあります。

そこで、今回は「対応状況」のステータスが変更されたら、以下のように文字色が変わる設定を行います。

• 未対応：赤
• 対応中：オレンジ
• 完了：緑

問い合わせ管理アプリには、元からサンプルデータが入っているので、これを活用して早速カスタマイズしてみましょう。

2.JavaScriptファイルを作成する

JavaScriptカスタマイズを実施するためには、コードを作成してJavaScriptファイルという形式で保存する必要があります。

サンプルコードは、以下のとおりです。

(() => {
‘use strict’;

// レコード一覧画面の表示後に「対応状況（Status）」の文字色を変更する
kintone.events.on(‘app.record.index.show’, (event) => {
const elStatus = kintone.app.getFieldElements(‘Status’);

for (let i = 0; i < elStatus.length; i++) {
const record = event.records[i];

switch (record.Status.value) {
case ‘完了’:
elStatus[i].style.color = ‘green’; // 文字色を緑にする
break;
case ‘未対応’:
elStatus[i].style.color = ‘red’; // 文字色を赤にする
break;
case ‘対応中’:
elStatus[i].style.color = ‘orange’; // 文字色をオレンジにする
break;
default:
elStatus[i].style.color = ‘black’; // デフォルトは黒
break;
}
}
});

})();

エディターを使用する場合は、サンプルコードを貼り付けて任意のファイル名を指定し、保存してください。なお、文字コードは「UTF-8」に指定が必要です。

今回はエディターを使わず、Windowsのメモ帳で代用します。

メモ帳は、右下（赤枠）で文字コードを確認可能です。

メモ帳にサンプルコードを貼り付けたら、JavaScriptファイル形式で保存します。初期状態だとテキストファイルのまま保存されるため、以下の手順で拡張子を変更してください。

1. 「すべてのファイル」を選択
2. 拡張子「.txt」を「.js」に変更

上記の状態で保存すれば、JavaScriptファイルの完成です。テキストファイルはkintoneで読み込めないため、注意しましょう。

3.kintoneにJavaScriptを適用する

次に、問い合わせ管理アプリでJavaScriptファイルを読み込みます。

問い合わせ管理アプリを開いて、「設定」アイコン（歯車マーク）をクリックしてください。

「設定」タブをクリックして、「JavaScript / CSSでカスタマイズ」（赤枠）を選択します。

すると、以下の画面が表示されるのでJavaScriptファイルの「アップロードして追加」をクリックし、先ほど作成したJavaScriptファイルを選択してください。

正常にファイルがアップロードされると以下の画面が表示されます。赤線部分のファイル名を確認して、問題がなければ右下の「保存」（赤枠）をクリックしてください。

以下のメッセージが表示されたら、右下の「アプリを更新」（赤枠）をクリックしましょう。

以上で、問い合わせ管理アプリの設定は完了です。

4.kintoneの動作を確認する

アプリを更新すると、問い合わせ管理アプリの一覧画面に戻るので設定どおりになっているかを確認してみましょう。

うまくいけば「対応状況」のステータスの文字が色付けされます。

kintoneのJavaScriptカスタマイズ活用例

kintoneのJavaScriptカスタマイズの大まかなやり方が分かったところで、ほかのカスタマイズを試してみましょう。

ここでは、JavaScriptカスタマイズの活用例を3つ紹介します。

• 数値フィールドに数字以外の文字列が入らないようにする
• 「さらに表示」から101件以上のレコードを表示させる
• kintoneのフォームに法人番号を入力すると自動で法人情報を反映する

やり方を覚えるためにも、実際にカスタマイズしてみてください。

なお、サンプルの動作については保証いたしかねます。利用の際は十分に注意し、自己責任でお願いします。

数値フィールドに数字以外の文字列が入らないようにする

JavaScriptを使うと、数値フィールドに入力があったとき、数値以外の文字列を削除することが可能です。

以下のJavaScriptをコピーしてお使いください。

kintone.events.on([‘app.record.edit.change.数値’, ‘app.record.create.change.数値’], function (event) {
var record = event.record;

var val = record.数値.value;
val = val.replace(/[^0-9]+/g, “”);
record.数値.value = val;

return event;
});

kintoneでは、数値フィールドにエクセルからデータを貼り付けるとき、カンマをはじめとする不要な文字列が含まれることがあります。紹介したJavaScriptは、入力直後に自動で不要な文字列を削除できるため、この課題の解決が可能です。

「さらに表示」から101件以上のレコードを表示させる

JavaScriptを使うと、kintoneの一覧画面にある「さらに表示」ボタンを押したとき、101件以上のレコードを表示させることが可能です。

以下のJavaScriptファイルをダウンロードしてご活用ください。

【JavaScriptファイル】
cstap_lib_show_more_records.js

kintoneの基本機能だと、一覧画面のレコードは最大100件までしか表示できません。

100件を超えるデータがある場合、一覧画面の下に「さらに表示」ボタンが自動で表示されます。このボタンをクリックすると、100件ずつデータが読み込まれる仕組みです。

たとえば、500件のデータを最後まで見るには、「さらに表示」ボタンを4回も押さなければならず、データが増えるほど手間と時間がかかります。

ここで紹介したJavaScriptファイルを使えば、1度ボタンを押すだけですべてのデータを一覧で見られるため、業務を効率化できます。

以下の記事では、JavaScriptファイルのソースコードを公開しているので、あわせてご覧ください。

関連記事：kintone:101件以上を「さらに表示」ボタンを使って表示する

kintoneのフォームに法人番号を入力すると自動で法人情報を反映する

JavaScriptを使うと、kintoneのフォームに法人番号を入力したとき、法人番号APIを通じて自動で法人情報を反映するカスタマイズが可能です。

顧客となる企業情報の入力にかかる手間を削減したいときに活用できます。一度登録したあとは、定期的に一括更新することも可能です。

サンプルコードと詳しい設定方法は、以下の記事で紹介しているので、参考にしてみてください。

関連記事：法人番号API×kintone連携で法人情報を取得しよう

kintoneのJavaScriptが動かないときは？デバッグをしてみよう

JavaScriptカスタマイズをやってみると、思いどおりに見た目や動作が変更されないことがあります。JavaScriptが動かないときは、どこで問題が起こっているか特定することが重要です。

そのためには、エラーや不具合を見つけて修正する「デバッグ」を行います。

Webブラウザの開発者ツールを使ってデバッグを行う手順は、以下のとおりです。

1. 開発者ツールの「Console（コンソール）」を開き、エラーメッセージを確認する
2. console.log() を使い、変数やデータの中身を表示して処理が正しく動いているか確認する
3. 「debugger;」をコード内に入れて処理を一時停止させ、エラー箇所を詳細に調査する
4. エラー箇所を特定できたら、正しく修正する

はじめのうちは、エラー箇所を特定するまでに時間がかかり、どのように修正すればよいかが分からないはずです。その場合は、生成AIに作成したコードを貼り付け、どこが間違っているか訊いてみるとヒントを得られるので、試してみてください。

kintoneのJavaScriptカスタマイズの注意点

kintoneでJavaScriptファイルを読み込めるのは、管理者のみです。アプリの管理者権限を持っていても、JavaScriptファイルを適用できません。

そのため、カスタマイズを行うときは、事前にシステム管理者権限を持つユーザーに依頼するか、自分にその権限を付与する必要があります。

kintoneの設定画面から「ユーザー管理」を開き、ユーザー一覧を見ると、自分のアカウントがシステム管理者権限を持っているかどうか分かるので、確認してみてください。

JavaScriptを使わずにkintoneをカスタマイズする方法

JavaScriptを習得すれば、kintoneアプリの動作を自由にカスタマイズできます。しかし、スキルの習得からはじめるのは、非エンジニアにとって大きな負担です。

そこで、簡単にkintoneの機能を拡張できるkintone連携サービスの活用も選択肢に入れてみてください。

たとえば、トヨクモの『PrintCreator（プリントクリエイター）』は、kintoneの情報を基に書類の作成および出力ができるkintone連携サービスです。電子署名法に対応した電子契約機能も搭載されており、契約書の作成から契約締結までをkintoneで完結できます。

kintoneの基本機能では、CSVにエクスポートし、エクセルで整えたうえで印刷しなければなりません。『PrintCreator』を導入すれば、ワンクリックでkintoneから直接印刷でき、従来の手間と時間を削減可能です。

導入後は、非エンジニアの方でも、簡単な設定だけでkintoneをカスタマイズできます。

『PrintCreator』が気になる方は、30日間の無料お試しをご活用ください。

kintoneをJavaScriptカスタマイズして自社に合った環境を構築しよう！

kintoneは、ノーコード・ローコードである程度のカスタマイズが可能ですが、より自社に合った環境を構築するためには、柔軟性が高いJavaScriptカスタマイズが求められます。

サンプルコードを活用すれば、非エンジニアの方でも簡単にJavaScriptカスタマイズが可能です。しかし、複雑な機能を付加したいときは、高度なカスタマイズが必要となるため難易度が上がります。

kintone連携サービスなら、導入と簡単な設定だけでkintoneをカスタマイズできるため、非エンジニアの方も気軽に利用可能です。

トヨクモは『PrintCreator』のほか、以下のkintone連携サービスを提供しています。

• FormBridge：Webフォームの作成からkintoneへのデータ入力まで一元化
• kViewer：kintoneのデータをWebページ化して外部公開
• kMailer：kintone上のアドレス宛に自動でメールを配信
• DataCollect：エクセル感覚でkintoneのデータを集計
• kBackup：kintone上のデータや添付ファイルをバックアップ

30日間無料でお試しいただけますので、ぜひ機能や使い心地を体験してみてください。