こちらは、「ステップで学ぶ kintone カスタマイズ勉強会」 kintone devCamp Step2 kintone JavaScript API の復習コンテンツです。

🍙 はじめに

Step2 では、kintone アプリに JavaScript を適用して、実行する方法を実践課題を使って勉強しました。
知識を身に付けるために、復習問題をご用意しましたので、ぜひチャレンジしてみてください(｀・∀・´)

🍙 目次

事前準備
問題チャレンジ！
- 問題 1（難易度⭐️⭐️）
  - 「製品名」フィールドの選択肢によって、「単価」フィールドの値を変更する
- 問題 2（難易度⭐️⭐️）
  - レコード一覧画面が表示された時、「確度」フィールドの値が「A」だったら、文字スタイルを赤文字・太字に変更する
ステップアップ情報

🍙 事前準備

Google Chrome ブラウザ
システム管理権限のある kintone アカウント
「[Step2_復習] 案件管理」アプリ (※ 講義で使ったアプリとは別物になります。)
- こちらより「[Step2_復習] 案件管理.zip」というアプリテンプレートファイルをダウンロードし、kintone 環境に追加してください。
  - リンク先は GitHub の画面になります。画面上に表示されている「Download」ボタンを押してファイルをダウンロードしてください。
  - アプリテンプレートからアプリを追加する方法はこちらをご参照ください。
「Step2_HomeWork.js」ファイル（穴埋め問題）
- ダウンロードしてkintone環境に追加して頂いたアプリテンプレートの中には、後ほど使う「「Step2_HomeWork.js」ファイルが予め適用されています。（ハンズオンの際にはこちらをご利用ください。）
JSEdit for kintone プラグイン（ダウンロード・適用がまだの方向け）
- 「ステップで学ぶ kintone カスタマイズ」勉強会にご参加の方は、すでにご自身のkintone環境にプラグインが適用されているので、アプリテンプレートを追加した後は、特にこちらの設定は必要ありません。
- プラグインのダウンロードはこちらをご参照ください。（プラグインの適用方法はこちら）
  
  ※ ご自身の 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 はじめようシリーズの記事へ。
- はじめようJavaScript第6回 JavaScriptの基本機能繰り返し処理をする for文
- はじめようJavaScript第7回 JavaScriptの基本機能繰り返し処理をする、for文その2 〜配列を使ってみよう〜
文字スタイルを変更するために、先に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

回答の条件によって別フィールドの表示/非表示を切り替える

回答の条件によってグループフィールドの開閉を切り替える

🍙 参考

ファイルを間違って削除した場合
- こちらから「download」ボタンをおして、改めてファイルをダウンロードしてください。アプリにファイルを適用する際には、ダウンロードしたzipファイルを解凍してお使いください。
正解ファイルが欲しい場合
- こちらから「Step2_HomeWork_answer.js.zip」ファイルをダウンロードしてください。アプリにファイルを適用する際には、ダウンロードしたzipファイルを解凍してお使いください。

[ kintone devCamp 復習コンテンツ ] Step2 kintone JavaScript API 編

🍙 はじめに

🍙 目次

🍙 事前準備

🍙 問題チャレンジ！

問題1（難易度⭐️⭐️）

実装イメージ

考え方

カスタマイズ

💡 ヒント

📝答え

🎓 解説

問題2（難易度⭐️⭐️）

実装イメージ

考え方

カスタマイズ

💡 ヒント

📝 答え

🎓 解説

🍙 ステップアップ情報

cybozu developer network はじめようシリーズ

cybozu developer network Tips

🍙 参考