公開日：
こんにちは！
システム開発グループのかっつんです。
今回は、カスタマインを用いて、マスタアプリから複数の値を取得し、テーブルにセットするカスタマイズをご紹介します。例として、商品マスタから複数の商品を選択して、商品テーブルに型番、商品名、価格をセットする処理を考えてみます。
他にも同じ考え方を用いることで、承認者マスタから複数の承認者を選択して、申請アプリの承認者テーブルにユーザーをセットする処理を作成するなど応用の効く内容かと思います。
この「マスタアプリから値を取得して、テーブルにセットする」処理においては、カスタマインの「リストから要素を取り出す」という ”やること” を使用します。
その際に便利な「コンソールにアクションの結果を出力する」という “ やること” の使い方についても併せてご紹介します。
今回設定したカスタマイズの挙動（動画）
まずはどのような挙動のカスタマイズを作成するのかご覧ください。
カスタマイズの仕様は以下となります。
- レコード追加画面または編集画面を表示したときに、商品テーブルのフィールド名の右横に「商品をセットする」ボタンを配置する。
- 「商品をセットする」ボタンを押下したとき、商品マスタの全レコードを取得する。
- 取得したレコードを型番の昇順でポップアップに表示する。
- ポップアップに表示されたレコード（商品一覧）は複数選択できるようにし、選択された商品の「型番」「商品名」「価格」を商品テーブルにセットする。
余談TIPS
今回の記事では割愛していますが、商品数が多い場合は、カテゴリー選択のポップアップを表示させ、カテゴリーで商品を絞り込むといったカスタマイズを作成することも可能です。
今回設定したカスタマイズの設定画面（スクリーンショット）
カスタマインの操作に慣れている方であれば、カスタマイズの設定画面を見ていただくのが分かりやすいと思いますので、今回設定したカスタマイズの設定画面とアクショングラフを先に掲載します。
具体的な設定手順については、後述します。
カスタマイズ設定画面
アクショングラフ
前提①（事前準備）
今回は、商品一覧を登録した「商品マスタ」アプリと商品をセットする「商品セット先」アプリを準備します。
※実業務においては、「商品セット先」アプリは、「請求書発行」アプリや「備品購入申請」アプリなどを想定しています。今回はカスタマイズに焦点を当てたいため、簡易的に「商品セット先」アプリとしておきます。
| フィールド名 / フィールドコード | フィールドタイプ |
|---|---|
| 型番 | 文字列1行 |
| 商品名 | 文字列1行 |
| 価格 | 数値 |
商品マスタのレコード一覧画面
商品セット先アプリのレコード追加画面
前提②（複雑なカスタマイズを組む際の心構え）
今回使用する「リストから要素を取り出す」を使用するカスタマイズなど複雑なカスタマイズを組む場合は、以下を心がけることが重要です。
コンソールログを確認しながら、実装していく。
リストから要素を取り出す処理は、慣れていないと直感的に値をセットするのが難しいと思います。そこで、コンソールログを確認しながら、値のマッピングを設定していきます。
参考
コンソールログについては、弊社鈴木さんのブログが参考になります。
カスタマインを使ってkintoneのレコード内を探検しに行こう！
リストから要素を取り出す処理については、弊社つっきーさんのYouTube動画が参考になります。
カスタマインの秘密兵器！リストから要素を取り出す 完全理解
小さく実装していく。
今回のカスタマイズで言えば、いきなり「型番、商品名、価格」をセットする処理を書こうとせず、まずは「商品名」のみ登録するカスタマイズを組みます。
コメントに「理由」を書きながら、実装していく。
コメントは実装した人以外の方がカスタマイズ設定画面を見た際に「なぜその処理を実装したのか」が分かるように”理由”を書きましょう。
将来、自分が実装したカスタマイズを改修する際にも「なぜこんな処理を入れたのだろう？」と悩む時間を短縮することができます。
実装パート
今回は3段階に分けて、実装していきます。
① 選択した商品の内容をコンソールログに表示させるところまで
仕様に沿って以下の画像のように実装していきます。
ポイントはいきなりテーブルに値をセットする処理を書かずに、コンソールログにセットしたい値を出力できているか確認することです。このログを見ることで、次の工程であるテーブルに値をセットする処理の書き方が分かります。
実際にコンソールログを確認しましょう。
コンソールログはWindows PCでGoogle Chromeを使用している場合「F12」または「右クリック -> 検証」とすると表示されます。
コンソールログを確認するときのコツは、「コンソールにアクションの結果を出力する」が動作する前に、その前段までに出力されたログを一度クリアすることです。
検証画面の左上にあるクリアボタンを押すと、コンソール画面をクリアすることができます。
今回のカスタマイズの場合、ポップアップの「OK」ボタンを押す直前でコンソールをクリアします。
では、設定したカスタマイズを実行してみましょう。
実行するとポップアップで選択した商品名を含む配列の情報がコンソールに出力されていることが分かります。
また、配列には、商品名だけでなく、型番や価格の情報も含まれていることが分かります。
配列の構造からキー（型番、商品名、価格など）を指定することで値を取得できることが分かります。
② 選択した商品の「商品名」のみをテーブルにセットするように変更する
手順①で確認したログからアクション5にて、リストから要素を取り出したときの値（配列）が分かりました。
そこで、「$5.商品名」とすることで商品名を取得することができるので、商品名フィールドへのマッピングは「商品名 = $5.商品名」と設定します。
「商品名 = $5.商品名」を日本語で書くと、「アクション5により取り出された値（配列）の中のキーが商品名の値を商品名フィールドにセットする」となります。
③ 選択した商品の「型番」「商品名」「価格」をテーブルにセットし、空行を削除する
あとは、同様に型番と価格のマッピングを設定し、「リストからの取り出しが終了した時」にテーブルに残っている空の行を削除する処理を加えて完成です。
あとがき
実際に業務で使用するアプリを作成する際は、
- 現在、ユーザーが商品を選ぶときはどのようにして商品を選択しているのか。
- 商品マスタにはどのような情報を持たせておく必要があるのか。
- 商品をセットしたテーブルの情報を後続の業務でどのように使うか。
など、考慮すべきことが多くあります。
アールスリーインスティテュートのシステム開発グループが展開するサービス「キミノマホロ」では、システムをお客さまに代わって構築するサービスだけでなく、お客さま自身がkintoneアプリを内製化したい場合に、成功に向けてアシストするサービスも展開しています。
kintoneを導入しようと考えているが、正直どう進めていけばよいか分からない場合や、kintoneを導入したものの、うまく活用できていない場合などお困りのことがございましたら、ぜひ一度お問い合わせいただけますと幸いです。
必要なものを、必要なだけ。
業務改善の新しいカタチ。
kintoneを活用した業務改善・システム開発サービス
kintoneを活用した業務改善・システム開発サービス
投稿者プロフィール
-
システム開発グループ所属。
滋賀県の琵琶湖近くに生息しています。
kintone CERTIFIED
┗ カイゼンマネジメントエキスパート
┗ システムデザインエキスパート
最新の投稿
gusuku2025年10月29日カスタマインを使って、マスタからテーブルに値をセットしよう！- kintone2025年9月2日「一番良い」より「あなたに合う」——kintone×キミノマホロが選ばれる理由
- kintone2025年7月16日kintone「タスク管理アプリ」を“まず”作る理由
- kintone2025年5月14日【kintoneで育てる単語帳】翻訳を保存できるChrome 拡張を作ってみた
