[ kintone devCamp 演習コンテンツ ] Step1 JavaScript 編

14639 ワード
JavaScript 開発者ツール kintone JavaScript テキストリンク

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

🍙 はじめに

導入編として、Google Chrome ブラウザの開発者ツールを使って JavaScript の基本構文や kintone での JavaScript の実行の仕方を勉強しました。
知識を身に付けるために、復習問題をご用意しましたので、ぜひチャレンジしてみてください(｀・∀・´)
解説付きなので、ちょっと不安な方もご安心を。

🍙 目次

  • 事前準備
  • 問題チャレンジ！
    • 問題1（難易度⭐️）：確認ダイアログの回答結果によってコンソール出力内容の出し分け
    • 問題2（難易度⭐️⭐️）：kintone 案件管理アプリで、案件名と確度フィールドを変更した時に、イベントオブジェクトで受け取った値を連結させて別フィールドに入力
  • ステップアップ情報

🍙 事前準備

  • Google Chrome ブラウザ
  • システム管理権限のある kintone アカウント
  • 営業支援パックアプリ
  • Google Chrome ブラウザの開発者ツール
    • テキストエディタは使わずに開発者ツールの「Console」タブ上でカスタマイズをします。

🍙 問題チャレンジ！

問題1（難易度⭐️）

確認ダイアログを出し、「OK」もしくは「キャンセル」ボタンの選択によって、コンソールに「Yes」もしくは「No」の結果を出力するプログラムを記述してください。
以下の×マークの部分を埋めて、開発者ツールで実行してください。

考え方

プログラムを書く前に、まずは手順を頭の中で組み立ててみましょう。

  1. 確認ダイアログを表示する。
  2. OK を選択した時は「Yes」、それ以外（キャンセル）を選択した時は「No」とコンソールに出力する。

カスタマイズ

手順が分かったら、以下の穴埋めプログラムの×マークを埋めていきましょう。

穴埋め.js
// 確認ダイアログの定義
const answer = window.×××('JavaScript は初めてですか？');

// 回答内容によってコンソールへの出力内容の出し分け
××× (×××) {
  console.log('Yes');
} ××× {
  console.log('No');
}

💡 ヒント

  • ブラウザにて開発者ツール「Console」タブを出すには、ブラウザ上で右クリック > 「検証」をクリック > Console タブに移動する。
    ※ コンソールの色や位置は、それぞれ違って大丈夫です。

  • 確認ダイアログを出したい場合は、講義中に使っていた window.alert メソッドではなく、**window.confirm メソッド**を利用する。

  • 「◯◯だったら△△する、××だったら◇◇する」という条件分岐には、**if文**というものを使う。初耳な方は、developer network はじめようシリーズの記事へ。

📝 答え

**ここ をクリックすると答えが表示されます。**
正解.js
// 確認ダイアログの定義
const answer = window.confirm('JavaScript は初めてですか？');

// 回答内容によってコンソールへの出力内容の出し分け
if (answer) {
  console.log('Yes');
} else {
  console.log('No');
}

画面上、このようになれば成功です。

プログラムを書いて「Enterキー」を押すと、確認ダイアログが表示されます。

OK をクリックすると...

コンソールに、"Yes" と出力されます。

🎓 解説

  • まず確認ダイアログを表示するメソッドを書く
  • そのメソッドを実行した時に受け取った値を answer という変数に入れる
  • 次に、if文を使って、window.confirm の結果が true（真 = OKをクリック）の時と false（偽 = キャンセルをクリック）の時の出力内容を出し分ける
    • true の場合は if(answer)、false の場合は if(!answer) と記述することができるが、今回は if-else の書き方を使っている

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

kintone 案件管理アプリにおいて、レコード追加画面や編集画面を開いて案件名と確度フィールドを変更した時に、詳細フィールドに案件名と確度の値を連結させた文字列を入力するプログラムを記述してください。
以下の×マークの部分を埋めて、kintone の案件管理アプリの追加画面や編集画面を開いた上で、開発者ツールで実行してください。

考え方

プログラムを書く前に、まずは手順を頭の中で組み立ててみましょう。

  1. 文字列を連結させたいのは、レコード追加画面と編集画面、特定のフィールドの値を編集した時。
  2. まず2つのフィールドの値を文字列として連結させる。
  3. 連結した結果の文字列を、詳細フィールドに入力する。
  4. kintone に値を反映する。

カスタマイズ

手順が分かったら、以下の穴埋めプログラムの×マークを埋めていきましょう。

穴埋め.js
// 別フィールドへの入力関数
const inputValue = (event) => {
  const text = `${×××}の確度は${×××}です。`;
  ××× = text;
  return ×××;
}

// レコード追加・編集画面でのフィールド値変更イベントで inputValue 関数の実行
kintone.events.on([
  'app.record.×××',
  'app.record.×××',
  'app.record.×××',
  'app.record.×××'
], inputValue);

💡 ヒント

  • kintone JavaScript API 一覧はこちら。
    • 各フィールドの値変更時のイベントを指定する必要がある。（4つ > 複数指定の場合は、配列（[ ]:中括弧 の箇所）という書き方を使う）
  • 各フィールドの値を指定する方法は、console.log(event); を書いて調べてみる。
  • JavaScript で左辺に右辺の値を代入したい時は、「=」を使う。

📝 答え

**ここ をクリックすると答えが表示されます。**
正解.js
// 別フィールドへの入力関数
const inputValue = (event) => {
  const text = `${event.record.案件名.value}の確度は${event.record.確度.value}です。`;
  event.record.詳細.value = text;
  return event;
}

// レコード追加・編集画面でのフィールド値変更イベントで inputValue 関数の実行
kintone.events.on([
  'app.record.create.change.案件名',
  'app.record.create.change.確度',
  'app.record.edit.change.案件名',
  'app.record.edit.change.確度'
], inputValue);

kintone 案件管理アプリのレコード編集画面もしくは追加画面を開いて、プログラムを書いて「Enterキー」を押します。
案件名や確度フィールドを編集した時に、詳細フィールドに2フィールドの文字列を連結した文言が入っていたら成功です！
複数のイベントを指定しているので、色々試してみてください。

🎓 解説

  • 追加画面と編集画面両方のフィールド変更時イベントを指定するので、イベントは合計4つ指定することになる。
    • 複数のイベントを指定する場合は、配列の書き方で囲う。
  • inputValue 関数を定義する。
    • text オブジェクトを詳細フィールドの値に代入する。
    • return event で kintone に値を反映する。

🍙 ステップアップ情報

お疲れ様でした！問題は解けましたか？
コツコツ実践を積んでスキルアップしていきましょう！

他にも予習復習には以下のコンテンツが参考になります。余裕がある方はぜひチャレンジしてみてください〜

最後まで読んでいただきありがとうございました！
それではまた次回👋