カテゴリー内の他の記事

JavaScriptを使用したkintoneのカスタマイズ

kintone JavaScript カスタマイズとは

kintoneは標準機能でさまざまなことができますが、標準機能だけでは実現できない以下のようなことも、JavaScriptカスタマイズをすると実現できるようになります。

  • レコード一覧画面にボタンを設置し、合計値を出力
  • 条件によって文字や背景の色やサイズを変更
  • 計算フィールドでは実現できない複雑な計算
  • などなど

JavaScriptが実行できるようになるということは、ボタンを設置したりそれを押したときの振る舞いを決めたり、データの計算処理をしたりなど、ブラウザ上でできることはほとんどできるようになるとのことです。
さらに、kintone APIと組み合わせることで、JavaScriptを使って任意のレコードを取得したり、更新したり削除したりということもできるようになります。

 

kintoneとJavaScriptカスタマイズのイメージ

kintone_JavaScriptカスタマイズのイメージ図

カスタマイズをはじめる準備

kintoneのカスタマイズを行うにあたり下記の環境が必要になります。

kintone

kintoneをまだお持ちでいない方は「cybozu.com」のサービスをご購入いただくか、5ユーザーで1年間無償のkintone開発者ライセンスを申し込むことができます。

※申し込みにはメンバー登録が必要です。

Webブラウザー

cybozu.com が動作保証しているWebブラウザーをご用意ください。

エディタ

JavaScriptのコーディングを行うためのエディタです。

プログラム開発において、開発環境を整えることは重要です。
エディタを利用することで、開発効率を上げることができます。

カスタマイズのはじめ方

チュートリアルにチャレンジ

kintonedeveloper_1ststep.png

kintone カスタマイズに必要な JavaScript の基礎知識や、kintone API を利用したカスタマイズの基礎を学ぶことができます。

自分のレベルに合うところから始めてみましょう。

実践的なカスタマイズにチャレンジ

次の2つのページでは、カスタマイズでどんなことができるのか、代表的な具体例を紹介しています。

カスタマイズでつまずいたら

カスタマイズがうまく動かないときは、デバッグをしてみましょう。

デバッグをしても解決できないときは、 コミュニティ で質問してみましょう。

cybozu developer コミュニティは、有志の技術者同士で困りごとを解決していく場です。
次のことに注意して利用してください。

  • 実現したい要件だけではなく、途中まで書いたコードや、調べた情報源も一緒に投稿しましょう。
  • 実装中のエラーについてコミュニティで質問をする際は、より良い回答が得られるようにデバッグした情報を元に投稿しましょう。
  • 回答があったら必ず返信をしましょう。

2022/06/23 記事の内容を更新しました。

記事に関するフィードバック

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

Avatar
Masahide Nishihama

見込時期のフィールドコードは、"日付" に変更されていませんか?

Avatar
青山昌司

フィールドにあるキーワードが入力されている場合にアラートを表示させたいのですが、

手順3を応用しようとしてやっていますが、アラートが表示されません。

何か足らないのでしょうか?

よろしくお願いいたします。

 

(function() {
"use strict";

//レコード表示イベントを取得
kintone.events.on('app.record.detail.show', function(event) {
//表示したレコードの取得
var record = event.record;

//ユーザー数が500人以上であればメッセージを表示
if (record['債権']['value'] >= 未回収) {
alert("未回収案件です);
}
});

Avatar
Fujii Mugen

if (record['債権']['value'] >= 未回収) {

 

こちらの部分どういう意味でしょうか。

>= 500 ではないでしょうか

Avatar
Fujii Mugen

債権のフィールドに未回収という文字が入力されていればということであれば、

 

if (record['債権']['value'] === '未回収') {

if (record['債権']['value'] == '未回収') {

 

で動作しませんか。

Avatar
佐藤龍太

「案件管理」アプリを使って、このページにある「レコード一覧イベントを取得し「確度」が"A"の「会社名」と「確度」を赤字に変更する」コードを実行しても、動作しません。

alertやボタンを追加するコードは動くようです。

ほかのコードでもフィールド値を取得するような処理が入ると動作しないようです。

文字コードはUTF-8(BOMなし)になっています。

何が原因なのでしょうか。

よろしくお願い致します。

Avatar
青山昌司

佐藤さん

今アプリ追加して試してみました。

私もあまり詳しくはないのですが、案件管理に手順通りjsを追加したらできました。

特に何も編集していないのです。(コピペでOKでした。)

解決にならないと思いますがご参考まで。

サインインしてコメントを残してください。