カテゴリー内の他の記事

関連レコードのデータをCSV出力する方法

(著者:サイボウズ 楊 思夢)

はじめに

こんにちは!サイボウズの楊です(^^)

今回は関連レコードもCSV出力したい!というニーズにお応えしたいと思います♪

kintoneのアプリでは他アプリのレコードを参照できる関連レコード一覧の機能があります。一つのフィールドをキーに関連するレコードを現在のレコード詳細画面に表示させることができます。
しかし、この場合、関連レコードのデータは表示させているだけであり、データとして所持している訳ではありません。

 

またkintoneにはデータをCSV形式でダウンロードする機能があります。
レコードをCSVファイルで書き出す場合、関連レコードはそのデータを保持していないため、通常は関連レコードをCSV出力できません。

そこで!関連レコードを含めたCSVを出力するTipsをご紹介できればと思います。

完成イメージ

完成イメージ

 

アプリの準備

今回使用するのはアプリストアにある「案件管理」と「顧客リスト」のアプリを応用したものです。
※後ほど「顧客リスト」アプリの関連レコードのフィールド設定で「案件管理」アプリが必要となりますので、先に「案件管理」のアプリの追加をしてください。

案件管理

案件管理

フィールドコードが異なるとJavaScriptが正常に動作しないため注意して変更しましょう。
案件管理アプリのフィールドの設定は以下の通りです。※記載していないフィールドはデフォルトのままです。

フィールドタイプ フィールド名 フィールドコード
文字列(1行) 会社名 company
ドロップダウン 製品名 product
計算 小計 subtotal

▼アプリイメージ
案件管理アプリ アプリイメージ

顧客リスト

顧客リスト

▼顧客リストアプリに「関連レコード」フィールドを追加
関連レコードフィールドの追加

▼関連レコード一覧の詳細設定
関連レコード一覧の詳細設定

フィールドコードが異なるとJavaScriptが正常に動作しないため注意して変更しましょう。
顧客リストアプリのフィールドの設定は以下の通りです。※記載していないフィールドはデフォルトのままです。

フィールドタイプ フィールド名 フィールドコード
文字列(1行) 会社名 company
文字列(1行) 部署名 division
文字列(1行) 担当者名 assignee
文字列(1行) TEL TEL
文字列(1行) メールアドレス Mail
関連レコード一覧 ※追加したフィールド 関連レコード一覧 reference

▼アプリイメージ
顧客リスト アプリイメージ

JavaScript

【注意点】

  • JSファイルはURL指定もしくはローカルから「顧客リスト」アプリに適用してください。

ソースコードの説明

今回はレコードの詳細情報を取得し、CSVファイルを手動で作成して、そのCSVファイルの中にデータを格納する流れになっております。それでは簡単にご説明いたします。

【レコード情報&要素の取得】

【ボタンの生成&処理】

  • if (document.getElementById('btn-export-csv'))
    ボタンがない場合のみ、ボタン要素を生成することで増殖バグを防ぎます

  • CSVButtonEl.addEventListener('click', () => {...}); でボタンを押した際に処理を行います

【CSVファイルの作成】

  • const header = ['会社名', '部署名', '担当者名', 'TEL', 'メールアドレス', '製品名', '小計'].join(',');
    CSVファイルの各項目名(ヘッダー)は手動で作成する必要があります。
    CSVはカンマ区切りなので、join(',') で配列の要素を結合した文字列を生成します。

  • 関連レコードは kintone.api で取得します。kintone.api は非同期実行なので、顧客ごとに関連レコードを取得するために fetchRelatedRecords を再帰呼出しをします。
    取得した関連レコードの内容をCSVの各行に追加します。

【現在の日付にファイル名に】

  • Dateオブジェクトで現在の日時を取得します。

  • getMonth()は前の月を取得しますので、注意して+1します。

  • 月や日付の桁数が一桁場合、前に0を足して二桁にします。

  • 最後にYYYY + MM + DD + hh + mmの形式で返します。

【データのダウンロード】

完成形

▼アプリイメージ
完成形 アプリイメージ

▼ダウンロードしたCSVファイルのイメージ
CSVのイメージ

 

最後に

いかがでしたでしょうか?

これで関連レコードもCSV出力できるようになりました(^0^)/

また上記のテクニックを活用することで関連レコードに限らず、自由に他アプリからのデータをCSV出力できます。

ぜひお試しください♪

このTipsは、2022年10月版で確認したものになります。

デモ環境

(顧客リスト) https://dev-demo.cybozu.com/k/88/

(案件管理) https://dev-demo.cybozu.com/k/87/

※デモ環境についての説明はこちら

記事に関するフィードバック

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

Avatar
cybozu Development team

mk様

お世話になっております。
cybozu developer network 運営局です。

サンプルコードを書き換えていただくことで複数の関連データの出力は可能かと思われますが、
こちらのコメント欄は記事内容のフィードバック目的となっております。

恐れ入りますが、技術的な質問に関しては コミュニティ をご活用ください。

Avatar
常野 誠

昨年、Kintone を導入後、社内のシステムの移植で、少し、大きめの開発していますが、分かり易い説明で、大変、参考になりました。

 

サインインしてコメントを残してください。