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

フォローする

はじめに

kintoneではJavaScriptプログラムを利用することで、kintoneの各機能の動作や画面をカスタマイズすることができます。
このチュートリアルではまず最初に、helloという文字を画面に表示するという簡単なカスタマイズを例に、kintoneアプリにカスタマイズを設定する手順をご紹介します。

後半には、kintone JavaScript APIやREST APIを利用したカスタマイズ例をご紹介します。このチュートリアルの学習内容は以下の通りです。

  • イベント処理の記載
    -「hello」という文字をメッセージで表示する
  • レコードの取得・操作  
    -レコード一覧イベントを取得し「確度」が"A"の「会社名」と「確度」を赤字に変更する
    -レコード表示イベントを取得し「ユーザー数」が500人以上の顧客情報については「見込み時期」をメッセージで表示する
  • REST APIを使用したレコード操作
    -レコード一覧表示時にレコード取得APIを使用し案件担当者が自分自身(例:山田太郎)の顧客名をメッセージで表示する

 

環境の準備

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

kintone

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

Webブラウザ

下記のブラウザをご用意ください。

  • Internet Explorer 8 以上
  • Mozilla Firefox 最新版
  • Google Chrome 最新版
  • Safari 6.0 以上

kintoneの動作環境に準じていますので詳細はこちらをご参照ください。

エディタ

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

カスタマイズ

アプリの作成

まず、カスタマイズ対象となるアプリをkintoneアプリストアから取得します。

手順1.kintoneにログインします。

 

手順2.kintoneのトップページで[アプリを作成]をクリックします。

 

手順3.「アプリストアから選ぶ」を選択します。

 

手順4.kintoneアプリストアに遷移します。kintoneアプリストアには、さまざまなアプリが用意されていますが、このチュートリアルでは「案件管理」アプリを使用しますので「案件管理」アプリの[このアプリを追加]をクリックします。

 

手順5.確認ダイアログが表示されますので[追加]をクリックします。

 

手順6.作成した「案件管理」アプリに事前にデータを登録します。

会社名先方担当者見込み時期確度ユーザー数案件担当者名
森川不動産 佐藤昇 2014-04-01 A 300 山田太郎
ミヤタシステムズ 加藤美咲 2014-04-10 B 150 田中麻子
東山産業 白石航平 2014-05-31 C 1200 山田太郎
安井電機 菊地浩二 2014-04-20 A 200 山田太郎
医療法人坊主会 高橋太郎 2014-05-15 B 500 田中麻子

(山田太郎=ログインユーザ)

JavaScriptファイルの実装

実際にJavaScriptファイルを実装して動きを確認します。

手順1.JavaScriptファイルを用意します。

ファイル名は「sample_customize.js」とし、次のように編集します。

※文字コードは「utf-8」にしてください。

 

手順2.「案件管理」アプリの一覧画面右側の[・・・]アイコンをクリックし[アプリの設定を変更]を選択します。

 

手順3.【設定】タブを選択し、[JavaScript / CSSでカスタマイズ]をクリックします。

 

手順4.今回はPC用のカスタマイズを実施しますので、「PC用のJavaScriptファイル」の[アップロードして追加]をクリックし、先ほど作成したJavaScriptファイル(sample_customize.js)を選択します。選択後[保存]ボタンをクリックし、管理画面に戻ります。

 

手順5.[アプリを更新]ボタンをクリックすると確認用ダイアログが表示されますので、[OK]ボタンをクリックします。

 

手順6.一覧画面に遷移し、メッセージが表示されていれば成功です。

 

 

JavaScript APIの利用

JavaScript APIはkintone アプリのウェブ画面をカスタマイズするためのAPIを提供しています。このAPIを利用することで、多様なユーザーニーズを表現することができます。

JavaScript APIではkintone 使用中に発生する様々なイベントについて、ハンドラーを紐付けして実行することができます。
今回は下記のイベント取得及び処理を実装します。

  • レコード一覧イベントを取得し「確度」が"A"の「会社名」と「確度」を赤字に変更する
  • レコード表示イベントを取得し「ユーザー数」が500人以上の顧客情報については「見込み時期」をメッセージで表示する

<レコード一覧イベントを取得し「確度」が"A"の「会社名」と「確度」を赤字に変更する>

手順1.先ほど実装した「sample_customize.js」をエディタで編集します。

 

手順2.JavaScriptを実装します。

※既に実装してあるファイルを削除してから実装してください。

 

 

 <レコード表示イベントを取得し「ユーザー数」が500人以上の顧客情報については「見込み時期」をメッセージで表示する>

手順3.手順2で実装した「sample_customize.js」を再度編集します。

先ほど記載したイベント処理の次の項目に処理を記載し、JavaScriptファイルを実装します。

 

kintone REST APIの利用

REST APIはkintone アプリのフォーム設計情報の取得やレコードの操作、スペースを操作することができます。今回は下記の実装をします。

  • レコード一覧表示時にレコード取得APIを使用し案件担当者が自分自身(例:山田太郎)の顧客名をメッセージで表示する

 <レコード一覧表示時にレコード取得APIを使用し案件担当者が自分自身(例:山田太郎)の顧客名をメッセージで表示する>

手順1.JavaScript APIで使用した「sample_customize.js」をエディタで編集します。

手順2.レコード一覧取得イベント内に下記のコードを追記します。

コメント

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'] == '未回収') {

 

で動作しませんか。

ログインしてコメントを残してください。
Powered by Zendesk