LoginSignup
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@Harshey(Hiroyuki H)in株式会社エクスブレーン

【初心者向け】kintoneでJavaScriptカスタマイズを始める3つのステップを徹底解説

Posted at

はじめに

kintoneで業務効率を向上させたいのに、

  • 複雑な手作業を自動化するには標準機能だけでは解決できない
  • システム間のデータ連携に課題感がある
  • 業務にフィットさせたいけれど、どこから手をつけていいのやら

といった悩みは、多くの方が抱える共通の課題です。

現場からの「こんなことできないの？」という声に、どう応えようかと頭を抱えてしまうのは自然なことなので安心してください。

:dart: 記事の目的

そんな方のために「kintoneカスタマイズの壁」を打ち破るための 具体的なステップ を示すことを目的としています。

kintone JavaScriptカスタマイズを初めて取り組む方でも、安心して始められるように**「3つのステップ」で徹底解説**します。

これを読めば kintone JavaScriptカスタマイズの基本 が理解でき、業務改善に着手できる自信がつくでしょう。

:beginner: こんな方におすすめ

  • kintoneの基本操作は習得済みで、踏み込んだ業務改善を考えている方
  • JavaScriptの基礎（変数、関数、条件分岐、ループなど）は理解しているが、実際の開発経験は少ない方
  • プログラミングで業務改善に貢献したいと考えているIT担当者や情シス担当者、意欲ある現場担当者

:triangular_flag_on_post: 背景・動機

kintoneはその柔軟性から多くの企業で利用されていますが、

「もっとこんな機能があれば…」
「あのデータと連携できれば…」

といった、標準機能だけでは難しい要望が出てくることがあります。

現場の「こうしたい」という声に「できません」と回答するのはさすがに心が痛みました。

詳しい背景・動機 さらに、社内のデータがkintone以外のシステムに散らばっていて「**これらの情報をスムーズにつなげられたら、もっと業務が効率化するのに**」と感じることもありました。

そんなときに頭をよぎるのがJavaScriptカスタマイズです。

私自身もkintoneを使い始めた頃は、定型業務の自動化や入力補助など、細やかな改善ニーズに直面することが多くありました。
その際は標準機能や無償のプラグインで対応をしていましたが、すぐに限界がやってきました。
試行錯誤する中でJavaScriptカスタマイズという手段を知り、挑戦することにしました。

最初は戸惑うこともありましたが、一つずつできるようになるにつれて、kintoneが自分の業務や既存システムと連携しながら変化していく感覚に、大きな喜び を感じました。

この記事を読むことでJavaScriptカスタマイズへの 心理的なハードルが下がり 、自力で解決できる経験 をすることで、あなたに自信を持ってもらえたらうれしいと思っています。

3つのシンプルなステップを通して、kintoneカスタマイズの楽しさと、業務改善で成功する喜びを感じるきっかけになれば幸いです。

さあ、一緒にkintoneカスタマイズの扉を開き、楽しんで最初のステップへと進んでいきましょう！

kintone JavaScriptカスタマイズを始める3つのステップ

kintoneでJavaScriptカスタマイズを始めるための具体的な手順を、3つのステップに分けて解説します。
それぞれのステップで必要な準備から実装、動作確認までをひとつずつ見ていきましょう。

ステップ1. 準備：カスタマイズの土台を築く

JavaScriptコードを記述し、kintoneアプリに適用するための準備を整えます。

:airplane: 環境・前提条件の確認

本記事の解説を進めるにあたって、以下の環境・条件が必要です。

Kintone JavaScriptカスタマイズ 環境・前提条件
項目 説明
kintone環境 kintoneの利用環境（開発者ライセンスでも可）
テキストエディタ VS Codeなど、JavaScriptのコードを書けるもの
Webブラウザ Google Chrome

kintone開発者ライセンス1

:page_with_curl: JavaScriptファイルの作成とアップロード

  1. JavaScriptファイルの作成:

    • デスクトップなどの任意の場所に.js拡張子のファイルを新規作成します。
      例えば my_custom.js という名前で保存しましょう。
    • この時点ではファイルの中身は空で構いません。

  2. kintoneアプリへのアップロード:

    • カスタマイズしたいkintoneアプリを開き、「設定」タブから「JavaScript/CSSでカスタマイズ」を選択します。
      ※操作にはkintoneシステム管理の権限が必要です。
    • 「PC用JavaScriptファイル」の「追加」ボタンをクリックし、先ほど作成したJavaScriptファイルをアップロードします。
    • アップロード後、「設定を保存」をクリックし、アプリの設定を更新します。この操作で、kintoneがあなたのJavaScriptファイルを読み込む準備が整います。

ステップ2. 実装：最初のコードを書いてみる

実際にkintoneをカスタマイズするJavaScriptコードを記述します。kintoneには、特定の操作が行われたときにJavaScriptを実行するための「イベント」という仕組みがあります。

:hammer: kintone JavaScript APIの基本

kintoneのJavaScriptカスタマイズは、kintoneが提供するJavaScript APIを利用します。

まずは、カスタマイズの起点となる「イベント」を把握することが重要です。

今回はレコード詳細表示イベントを例に、特定のフィールドの値を操作するシンプルなコードを記述していきます。

:writing_hand_tone1: サンプルコードの記述

先ほど作成した my_custom.js ファイルに以下のコードをコピペしてください。

JS
(function() {
    "use strict";
    // レコード詳細表示イベントが発生した時の処理
    kintone.events.on('app.record.detail.show', function(event) {
        console.log(event); // イベントオブジェクトの内容をコンソールに表示
        return event; // イベントオブジェクトを必ず返します
    });
})();

このコードは、レコードの詳細画面が表示された際に、開発者ツールのコンソールにイベントオブジェクトの内容を出力するだけのものです。

まずは、このコードが正常に動くことを確認しましょう。

ステップ3. 動作確認：カスタマイズが正しく動いているか確認する

書いたコードがkintoneで正しく動作するかを確認します。

:flashlight: kintoneアプリの更新とキャッシュクリア

  1. kintoneアプリの更新
    • my_custom.js ファイルを保存したら、kintoneアプリの設定画面に戻り、再度「設定を保存」をクリックしてアプリを更新します。変更をkintoneに反映させるには、この保存操作が必須です。
  2. ブラウザのキャッシュクリア
    • ブラウザに古いJavaScriptファイルがキャッシュされている可能性があるため、反映されない場合は、スーパーリロード（Windows: Ctrl + Shift + R / Mac: Cmd + Shift + R） を行い、最新のJavaScriptファイルを強制的に読み込み直します。

:bug: 開発者ツールを使ったデバッグ

  1. 開発者ツールを開く
    • カスタマイズしたkintoneアプリのレコード詳細画面を開きます。
    • Webブラウザの開発者ツール（F12キー） を開き、「Console」タブを選択します。
  2. コンソール出力の確認
    • 「Console」タブに console.log(event); の出力（イベントオブジェクトの内容）が確認できれば、JavaScriptファイルが正常に読み込まれ、イベントが認識・発動している証拠です。
    • もしエラーメッセージが表示された場合は内容を確認し、コードを修正しましょう。
  3. カスタマイズの動作確認
    • 以下のブロック内でコメントアウトしているフィールドの値を変更するコードを有効にし、実際にフィールド値が変更されることを確認します。期待通りに動作すれば、最初のJavaScriptカスタマイズ成功です！書き換えたら my_custom.js 再度保存を忘れずに。
JS
(function() {
    "use strict";
    // レコード詳細表示イベントが発生した時の処理
    kintone.events.on('app.record.detail.show', function(event) {
        console.log(event); // イベントオブジェクトの内容をコンソールに表示

        // ここにカスタマイズ処理を記述します
        // 例: レコードの「文字列（1行）」フィールドに「カスタマイズされました！」と表示
        // ※「文字列_1行」は、ご自身のkintoneアプリのフィールドコードに置き換えてください
        // event.record['文字列_1行'].value = 'カスタマイズされました！';

        return event; // イベントオブジェクトを必ず返します
    });
})();

スムーズな学習のためのヒント

初めてのカスタマイズでは、いくつかの「ハマりどころ」があります。

これらを事前に知っておくことで、スムーズに学習を進められます。

  • フィールドコードの正確性
    kintoneのフィールドコードは厳密な大文字・小文字を区別します。
    アプリの設定画面から正確なフィールドコードを確認し、記述ミスがないか注意しましょう。

  • キャッシュの問題
    JavaScriptファイルを更新したにも関わらず、挙動が変わらない場合は、ブラウザのキャッシュが原因であることが非常に多いです。
    迷ったらまずスーパーリロードを試しましょう。

  • エラーメッセージの確認
    開発者ツールのコンソールに表示されるエラーメッセージは、デバッグの強力な手がかりです。
    メッセージをよく読み、行番号を確認することで、問題の箇所を特定できます。

  • 非同期処理
    より複雑なカスタマイズ（kintoneのレコードをAPIで取得・更新するなど）を行う際には、JavaScriptの非同期処理（Promise, async/await）を理解する必要があります。
    最初は簡単な同期処理から始め、徐々にステップアップしていきましょう。

小さな成功から大きな業務改善へ

この3つのステップを踏むことで、kintoneのJavaScriptカスタマイズの基本的な流れを理解し、実際にシンプルなカスタマイズを実装することができました。

これは、単なるプログラミングの練習ではありません。

あなたのkintoneは、標準機能ではできなかった柔軟なデータ表示、入力制御、外部サービスとの連携といった 新たな可能性 を秘め始めました。

この小さな成功が、今後の大きな業務改善へと繋がる第一歩となるでしょう。

カスタマイズの世界へようこそ

さらに一歩踏み込んだカスタマイズ

今回学んだ基本を活かして、kintoneをもっと便利に改善していきましょう。

次のステップ

  • 特定の条件を満たした場合にのみ、フィールドの値を自動で変更したり、入力可否を制御
  • 複数のフィールドの値を組み合わせて新たな値を生成し、自動入力
  • ルックアップフィールドの挙動をカスタマイズし、関連情報の一括取得や表示を最適化
  • kintone REST APIを利用して、他のアプリからデータを取得・更新したり、外部サービスと連携

広がるJavaScriptの世界

今回学んだJavaScriptカスタマイズの知識は、kintoneだけに留まらず、他のWebアプリケーション開発にも広く応用できます。

JavaScriptの基本的な文法、イベント駆動プログラミング、デバッグ方法は共通のスキルです。

ぜひこの経験を活かし、様々な分野での課題解決に挑戦してみてください。

あなたのプログラミングスキルは、間違いなく次のレベルへと引き上げられるでしょう。

挑戦から生まれる喜びを

この記事を読んで、kintone JavaScriptカスタマイズに少しでも「できるかも！」と感じていただけたなら幸いです。

最初は小さなカスタマイズからで構いません。

一つずつ成功体験を積み重ねることで、あなたのkintoneは劇的に進化し、日々の業務がよりスムーズに、より創造的になるはずです。

ぜひ積極的に挑戦し、kintoneがあなたの仕事に合わせて変化していく喜びを体験してください。

まとめ

kintoneでJavaScriptカスタマイズを始めるための実践的な3つのステップを解説しました。

  1. 準備
    カスタマイズ用JavaScriptファイルの作成とkintoneアプリへのアップロード設定
  2. 実装
    kintone JavaScript APIを活用したイベント処理の基本とサンプルコードの記述
  3. 動作確認
    開発者ツールを用いたデバッグとキャッシュ問題への対応

kintoneのJavaScriptカスタマイズは、一見複雑そうに見えても、基本的な流れを掴み、少しずつ試すことで誰でも習得可能です。

特に、エラーメッセージを読み解く力と、試行錯誤を続ける忍耐力が、上達への近道となるでしょう。

この経験が、皆さんのプログラミング学習と業務改善に繋がることを願っています。

さいごに

この記事について、ご意見やご感想、間違いなどございましたら、ぜひコメントで教えていただけると幸いです。
皆さんのフィードバックを元に、より良い記事にしていきたいと思います。

補足情報

  • まだお持ちでない方は、kintone開発者ライセンスの取得を検討しましょう。無料で開発環境を利用できます。
  • kintone JavaScript APIリファレンスを読み込み、様々なイベントやAPIを組み合わせて、より高度なカスタマイズに挑戦してみてください。
  • QiitaやCybozu Developer Network、GitHubなどで、他の開発者のカスタマイズ事例や公開ライブラリを参考に、アイデアを広げましょう。

参考リンク・資料

  1. https://cybozu.dev/ja/kintone/developer-license/ ↩

2
1
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
Sign upLogin
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?