こちらは、「ステップで学ぶ kintone カスタマイズ勉強会」 kintone devCamp Step2 kintone JavaScript API の復習コンテンツです。
🍙 はじめに
Step2 では、kintone アプリに JavaScript を適用して、実行する方法を実践課題を使って勉強しました。
知識を身に付けるために、復習問題をご用意しましたので、ぜひチャレンジしてみてください(｀・∀・´)
🍙 目次
- 事前準備
- 問題チャレンジ！
- 問題 1（難易度⭐️⭐️）
- 「製品名」フィールドの選択肢によって、「単価」フィールドの値を変更する
- 問題 2（難易度⭐️⭐️）
- レコード一覧画面が表示された時、「確度」フィールドの値が「A」だったら、文字スタイルを赤文字・太字に変更する
- 問題 1（難易度⭐️⭐️）
- ステップアップ情報
🍙 事前準備
-
Google Chrome ブラウザ
-
システム管理権限のある kintone アカウント
-
「[Step2_復習] 案件管理」 アプリ (※ 講義で使ったアプリとは別物になります。)
-
「Step2_HomeWork.js」 ファイル （穴埋め問題）
- ダウンロードしてkintone環境に追加して頂いたアプリテンプレートの中には、後ほど使う 「「Step2_HomeWork.js」 ファイルが予め適用されています。（ハンズオンの際にはこちらをご利用ください。）
-
JSEdit for kintone プラグイン（ダウンロード・適用がまだの方向け）
🍙 問題チャレンジ！
問題1（難易度⭐️⭐️）
- 「製品名」フィールドの選択肢によって、「単価」フィールドの値を変更するプログラムを記述してください。
（単価フィールドは、金額の修正ができないように編集不可にしています。）
| 製品名 | 単価 |
|---|---|
| kintone | 1500 |
| Office | 500 |
| Garoon | 845 |
実装イメージ
考え方
プログラムを書く前に、まずは手順を頭の中で組み立ててみましょう。
-
「製品名」フィールドの選択肢によって、「単価」フィールドの値を変更するという処理を実行したいタイミングは、
- 「レコード追加画面で製品名フィールドの値を変更した時」
- 「レコード編集画面で製品名フィールドの値を変更した時」
- 「製品名」フィールドの選択によって、「単価」フィールドへの入力値を変える
（例： kintone」を選択したら「1500」） - kintoneにイベントオブジェクトを返す
カスタマイズ
手順が分かったら、以下の穴埋めプログラムの×××マークを埋めていきましょう。
- JSEdit for kintone プラグインでの開発方法
-
[Step2_復習]案件管理アプリ > 歯車マークより設定 > プラグイン > JSEdit for kintone プラグイン > 歯車マークよりエディタを開く。 - "黒い画面" でコードを編集して、保存ボタンをクリックすると kintone にカスタマイズが適用される。
-
穴埋め.js
(() => {
// 厳格モード
'××× ×××';
// 「製品名」フィールドの選択肢によって、「単価」フィールドの値を変更する関数
const changeProductPrice = (event) => {
// 「単価」フィールドを編集不可にする
event.record.単価.disabled = true;
// 「製品名」フィールドの値を変数に代入
const product = event.record.×××.×××;
// 「製品名」フィールドで「kintone」を選択したら、「単価」フィールドに「1500」を入力
××× (product === '×××') {
event.record.×××.value = 1500;
// 「製品名」フィールドで「Office」を選択したら、「単価」フィールドに「500」を入力
} ××× ××× (product === 'Office') {
event.record.×××.value = 500;
// 「製品名」フィールドで「Garoon」を選択したら、「単価」フィールドに「845」を入力
} ××× ××× (product === 'Garoon') {
event.record.×××.value = 845;
// 「製品名」フィールドで「-----」(初期値)を選択したら、「単価」フィールドに「0」を入力
} ××× ××× (product === undefined) {
event.record.×××.value = 0;
}
// kintone にイベントオブジェクトを返す
return event;
};
// レコード追加と編集画面でフィールドの値を変更時のイベントで、changeProductPriceを実行
kintone.events.on(['app.record.create.show', 'app.record.edit.show', 'app.record.×××.×××.×××', 'app.record.×××.×××.×××'], changeProductPrice);
// 省略
})();
※「ｘ」マークの数と答えは関係ありません。
💡 ヒント
- 最低限のコーディングルールである
即時関数と厳格モードを最初に書く。 - フィールドコードを確認する方法はこちら
- 「〇〇だったら△△する、xxだったら◇◇する。」 という条件分岐を書く。（if文の書き方を使う）
- フィールドを指定する時の書き方を思い出してみる。
- if文で 「等しい」 の書き方を思い出してみる。
- kintone JavaScript API の基本形は
kintone.events.on('イベント', 関数名); - 複数のイベントを書く時は、配列（[ ]:中括弧 の箇所）という書き方を使って
［〇〇, 〇〇, 〇〇］の形式で書く。
📝答え
**ここ をクリックすると答えが表示されます。**
正解.js
(() => {
'use strict';
// 「製品名」フィールドの選択肢によって、「単価」フィールドの値を変更する関数
const changeProductPrice = (event) => {
// 「単価」フィールドを編集不可にする
event.record.単価.disabled = true;
// 「製品名」フィールドの値を変数に入れる
const product = event.record.製品名.value;
// 「製品名」フィールドで「kintone」を選択したら、「単価」フィールドに「1500」を入力
if (product === 'kintone') {
event.record.単価.value = 1500;
// 「製品名」フィールドで「Office」を選択したら、「単価」フィールドに「500」を入力
} else if (product === 'Office') {
event.record.単価.value = 500;
// 「製品名」フィールドで「Garoon」を選択したら、「単価」フィールドに「845」を入力
} else if (product === 'Garoon') {
event.record.単価.value = 845;
// 「製品名」フィールドで「-----」(初期値)を選択したら、「単価」フィールドに「0」を入力
} else if (product === undefined) {
event.record.単価.value = 0;
}
//kintone にイベントオブジェクトを返す
return event;
};
// レコード追加と編集画面でフィールドの値を変更時のイベントで、changeProductPriceを実行
kintone.events.on(['app.record.create.show', 'app.record.edit.show', 'app.record.create.change.製品名', 'app.record.edit.change.製品名'], changeProductPrice);
// 省略
})();
レコード追加・編集画面で、 「製品名」フィールドの選択肢によって「単価」フィールドの値が変更したら成功です。
🎓 解説
- 製品ごとに単価を変更するために、if文を使って条件分岐をする。
- 最初の条件は
if （条件） ｛処理｝ - ２つ目の条件からは
else if (条件) ｛処理｝- １つ目の条件以外、全部同じ処理をしてほしい時は、
else ｛処理｝
- １つ目の条件以外、全部同じ処理をしてほしい時は、
- 「等しい」 は、
===と書く。「等しくない」 は、！==と書く。 -
=ひとつだと、右辺のものを左辺に代入する という意味になる。
- 最初の条件は
- フィールドの値を指定するために
event.record.単価.valueと書く。
※ イベントオブジェクトを関数のパラメータとして渡している場合 - 単価フィールドに製品の金額を代入する。
- イベントオブジェクトに変更を加えたので、
return event;でイベントオブジェクトを kintone に返して画面にも反映する。
【補足】
今回「レコードの追加・編集画面の表示イベント」も記載しています。これらを書いておくと、初期表示のタイミングで**「製品名フィールドの初期値が-----ではなく、kintone などに設定されている場合でも」**
対応する単価が入力されます。
問題2（難易度⭐️⭐️）
- レコード一覧画面が表示された時、 「確度」フィールドの値が「A」だったら、文字スタイルを赤文字・太字に変更するプログラムを記述してください。
実装イメージ
考え方
プログラムを書く前に、まずは手順を頭の中で組み立ててみましょう。
-
「確度」フィールドの選択肢が「A」だったら、「文字スタイルを赤文字・太字に変更する処理を実行したいタイミングは、- 「レコード一覧画面を開いた時」
- 「確度」フィールドの選択肢が「A」だったら（条件）
- 文字スタイルを赤文字・太字に変更する（処理）
カスタマイズ
ハンズオンをする前に、JSEdit for kintone 上で開いてるコード（問題１のコードの続きの部分）の38行目と56行目にある /* と */ を消してからハンズオンを実施してください。
穴埋め.js
// 省略
// 「確度」フィールドの値が「A」だったら、文字スタイルを赤文字・太字に変更する関数
const changeColor = (event) => {
// レコード一覧画面に表示されているレコードの数分を繰り返して、 「確度」フィールドの値に「A」があるかを確認
××× (let i = 0; i < event.×××.×××; i++) {
// 「確度」フィールドの値が「A」だったら、
if (event.×××[i].確度.value === 'A') {
// 「確度」の文字スタイルを赤文字に変更する
kintone.×××.×××('確度')[i].style.××× = '#ff0000';
// 「確度」の文字スタイルを太字に変更する
kintone.×××.×××('確度')[i].style.fontWeight = 'bold';
}
}
};
// 「レコード一覧画面を開いた時」に、関数を実行
kintone.events.on('app.record.index.show', changeColor);
//省略
💡 ヒント
- 繰り返し処理を書く時は、for文を使う。初耳な方は developer network はじめようシリーズの記事へ。
- 文字スタイルを変更するために、先にkintoneのフィールドの要素を取得するための書き方を調べる。
📝 答え
**ここ をクリックすると答えが表示されます。**
正解.js
// 省略
// 「確度」フィールドの値が「A」だったら、文字スタイルを赤文字・太字に変更する関数
const changeColor = (event) => {
// レコード一覧画面に表示されているレコードの数分、繰り返して、 「確度」フィールドの値に「A」があるかを確認
for (let i = 0; i < event.records.length; i++) {
// 「確度」フィールドの値が「A」だったら、
if (event.records[i].確度.value === 'A') {
// 「確度」の文字スタイルを赤文字に変更
kintone.app.getFieldElements('確度')[i].style.color = '#ff0000';
// 「確度」の文字スタイルを太字に変更
kintone.app.getFieldElements('確度')[i].style.fontWeight = 'bold';
}
}
};
// 「レコード一覧画面を開いた時」に、関数を実行
kintone.events.on('app.record.index.show', changeColor);
// 省略
コードを書き終えたら、アプリにレコードを2つほど追加します。（一つは「確度」フィールドの値が「A」、もう一つは「B」に設定。）
一覧画面で「確度」フィールドの値が「A」のときに、「A」という文字が太字の赤色に変わっていたら成功！
🎓 解説
※ for文は難しいので、少し詳しく説明します。
- 「確度」フィールドの値が「A」だったら、文字スタイル変更する
changeColor関数を作成する。 - 繰り返し処理のために for文を書く。（以下の構文に当てはめる）
for (①初期化; ②繰り返し条件; ③実行後の処理) { ④処理内容 }
ここ をクリックすると詳しい説明が表示されます。
-
①初期化：
let i = 0;を指定する。 -
②繰り返し条件：レコードの件数分繰り返したいので、
event.records.lengthでレコードの件数を指定する。- レコード一覧画面で受け取れるイベントオブジェクトには複数のレコード情報が紐づくので、
event.recordsプロパティを指定する。-
event.recordsの下に各レコード情報が配列形式で紐づいている。
※event.recordと間違えないように注意
-
- レコード一覧画面で受け取れるイベントオブジェクトには複数のレコード情報が紐づくので、
-
③実行後の処理：
iに 1 ずつ足しながら繰り返し処理を行いたいので、i++を指定する。 -
④処理：「確度」フィールドの値が「A」だったら、確度フィールドの要素を指定して、文字スタイルを赤文字・太字に変更する
- if文を使って、確度が「A」か判断する。
- 確度フィールドの値は、
event.records[i].確度.valueと指定する。（iは配列の何番目かを表す） - kintone のフィールドの要素を取得するために
kintone.app.getFieldElements()関数を利用する。- 文字色を指定する時は、
要素.style.color = 'カラーコード';と記載する。 - 文字の太さを指定する時は、
要素.style.fontWeight = 'bold';と記載する。
※ こちらのサイトを参考にすると、好きな色に変更できます。- このカスタマイズではイベントオブジェクトの中身を変更していないので、
return event;でイベントオブジェクトを kintone に返す必要はない。
- このカスタマイズではイベントオブジェクトの中身を変更していないので、
- レコード一覧画面の表示イベントを指定して、
changeColor関数を実行する。
- 文字色を指定する時は、
🍙 ステップアップ情報
お疲れ様でした！ いかがでしたでしょうか？
まだ難しいところはたくさんあると思いますが、わからないことはcybozu developer networkの記事をみたり、コミュニティを活用したりしながら引き続き頑張っていきましょう！
他にも予習・復習にお使いいただけるコンテンツがありますので、ぜひチャレンジしてみてください
cybozu developer network はじめようシリーズ
- kintone API 編（全12回）
cybozu developer network Tips
