カテゴリー内の他の記事

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

作成日2014年12月17日 03:00
更新日2022年10月31日 01:36

（著者：サイボウズ楊　思夢）

はじめに

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

今回は関連レコードも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ファイルの中にデータを格納する流れになっております。それでは簡単にご説明いたします。

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

kintone.app.getRelatedRecordsTargetAppId('フィールドコード') で関連レコードのアプリIDを取得します
kintone.app.getHeaderMenuSpaceElement() でボタンのためのレコード一覧のメニューの右側の空白部分の要素を取得します。
const customerRecord = customerRecords[index];
customerRecords は、顧客管理アプリを一覧表示したときの event.records です。index で一つずつレコードを取り出し、各変数の中にフィールドの値を格納します。
const query = `company = "${company}"`;
検索条件でキーとなる会社名を変数に格納します (クエリで条件を指定しレコードを一括取得します)。

【ボタンの生成＆処理】

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の形式で返します。

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

詳しくはこちらのTips「集計したデータをCSVでダウンロードするには」をご参照ください

完成形

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

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

最後に

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

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

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

ぜひお試しください♪

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

デモ環境

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

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

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

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

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

菅原尚哉 2015年06月26日 07:10

いつも参考にさせていただいております。
このjavascriptについて、ご質問がございます。

フィールドコードの値を変えて実装してみたところ上手く動作はしたのですが、関連レコードを表示するために絞り込んだ条件は反映されませんでした。

もう少し具体的に申しますと、Aというアプリに登録されているレコードには、「所属（ドロップダウン）」というフィールドがあり、「a」「b」「c」「d」から選択するようになっております。関連レコードを表示させるBというアプリには、「所属」の値が「a」と「b」のレコードだけ表示させるようにしてあります。

上記のjavascriptの値を変更して実装しCSVに書き出した場合、「所属」の値が「a」と「b」だけではなく、「c」と「d」のレコードの情報も書き出されてしまいます。

条件で絞り込んだレコードの情報だけ書き出すようにはできないのでしょうか？

ご教授のほど、よろしくお願いいたします。

cybozu development team 2016年03月08日 07:51

菅原尚哉さん
cybozu.com developer network事務局です。
もう解決されてしまったかもしれませんが、サンプルコードの59行目の指定の変更でやりたいことが実現できそうです。

yanbingms 2016年05月10日 05:34

このjavascriptを実行するために、どのライブラリを適用する必要でしょうか？下記の投稿でMomentsライブラリを適用することが明確に記載されています。
https://cybozudev.zendesk.com/hc/ja/articles/202341844

yanbingms 2016年05月10日 05:35

ちなみに、下記の投稿で質問していますが、ご確認いただけると助かります。
https://cybozudev.zendesk.com/hc/ja/community/posts/205625113-%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E8%BF%BD%E5%8A%A0-%E7%B7%A8%E9%9B%86%E6%99%82%E3%81%ABcsv%E3%82%92%E5%90%90%E3%81%8D%E5%87%BA%E3%81%99%E6%96%B9%E6%B3%95%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6

yanbingms 2016年05月10日 06:02

お騒がせいたしました。申し訳ありません。
上記の質問を無視してください。
>このjavascriptを実行するために、どのライブラリを適用する必要でしょうか？下記の投稿でMomentsライブラリを適用することが明確に記載されています。
ライブラリなしで動きました。

Toshimichi Konno 2016年05月21日 08:50

55行目　if(resp[i].length !=0) {　は
if(resp[i].records.length !=0) {
ではないでしょうか。

M.Nishimura 2016年05月23日 23:58

サンプルが動かないため確認したところ、44行目が実行できずにエラーとなってしまうようです。
（全てコメントアウトして1行ずつ戻して確認しました。）

「デモ環境」は正しく表示できます。
表示環境は Google Chrome バージョン 50.0.2661.102 m です。

デモ環境のJSは参照できないでしょうか。

yanbingms 2016年05月24日 00:21

サンプルコードはChromeで正常に動けるが、IE11だと出力されたCSVのレコード数が合わない。皆さんがこの問題に気づきましたか？

M.Nishimura 2016年05月24日 04:42

51行目のコメントが syntax error を起こしていました。
コメントを外して動作しましたが、Chromeでもレコード数がありません。

yanbingms 2016年05月24日 04:48

M.Nishimura さん

メールアドレスを教えてもらえれば、僕が成功したJSを送ります。
ここで添付したいのですが、機能がないから。

岡田美緒 2016年08月24日 02:21

このjavascriptについて

関連レコードを含めたCSVの出力は出来るようになったのですが、

関連レコードの無いものが出力できません。（省かれてしまう）

すべてのデータを出力することはできないでしょうか？

※関連レコードがあってもなくても

アドバイスいただけると幸いです。

宜しくお願い致します。

cybozu Development team 2016年09月12日 02:01

岡田美緒さん

こんにちは。関連レコード内のデータのあるなしに関わらず、CSVにレコードデータを書き出されたいということですね。
記事内のソースコードでは関連レコード内のデータがない場合の分岐文が書かれていませんでした。
以下のソースコードの太字部分を書き加えていただけると、動作するようになります。
ぜひお試しください。

//同じ会社名の関連レコードを取得
resp[i] = request(app_id, query);
    if(resp[i].records.length !=0) {
        for(var j = 0; j < resp[i].records.length; j++) {
            product = resp[i].records[j]['product']['value'];
            subtotal = resp[i].records[j]['subtotal']['value'];
            csv += company + ',' + division + ',' + assignee + ',' + tel + ',' + mail + ',' + product + ',' + subtotal + '\n';
        } 
    } else {
        csv += company + ',' + division + ',' + assignee + ',' + tel + ',' + mail + '\n';
    }

※記事内のソースコードも上記に変更致しました

MFR 2016年12月23日 05:58

顧客リストのレコード数が100件以上ありcsv出力した場合、表示されている画面に表示されている100件のcsvデータが出力されますが
顧客リスト内のの全てのレコードデータを出力することは可能でしょうか。
よろしくお願いいたします。

cybozu Development team 2016年12月26日 00:51

MFR様

クエリで条件を指定しレコードを一括取得を51行目で使用しているため、リンク先に記載のlimitオプションを500にした場合500件までは取得可能と思いますが、すでにお試しになられているでしょうか？

MFR 2016年12月26日 06:00

cybozu Development team ご担当者様

ご回答ありがとうございます。
limitオプションは試しておりませんでしたが今回全レコードを出力したく対象のレコード数も4桁を超えるのですが
対応可能でしょうか。
よろしくお願いいたします。

cybozu Development team 2016年12月27日 01:21

MHR様

4桁を超えるような件数の場合は100件や500件ごとに繰り返し文でGETするような処理で可能になるかと思います。

こちらのTipsの書き方が参考になりそうです。

複数のレコードをループして取得するワザ

https://cybozudev.zendesk.com/hc/ja/articles/201501294

MFR 2017年01月08日 08:54

cybozu Development team ご担当者様

ご回答ありがとうございます。
ご提示頂いたTipsを参考に全件出力できました。
ありがとうございました。

kamewo 2017年07月18日 00:29

こちらの記事を参考に、顧客リストの一覧画面に「関連レコード一覧」のフィールド（製品名など）も表示させたいのですが、どのようにしたらよいでしょうか？

カスタマイズビュー＆JavaScriptで実現したいのですが、どのようなコードとなるかご教示いただけると助かります。

cybozu Development team 2017年07月18日 01:21

kamewo様

こちらのご質問も、別途ご回答いたしましたとおり、有志ユーザーが回答が可能なcybozu developer コミュニティをご活用いただければと思います。

teranaka 2017年12月06日 10:05

基本的な質問で申し訳ございませんが

CSV出力時の文字コードをSJIS型で出力したいのですが、何か方法はありますでしょうか。

cybozu Development team 2017年12月11日 06:54

teranaka様

cybozu developer networkをご利用いただき、ありがとうございます。

こちらのコメント欄では、記事に関するフィードバックをお願いしております。

技術的な疑問などに関してましては、コミュニティにご登録いただきますと、詳しい方や同じようなことをやった方などからのアドバイスを受けることが可能です。

是非、コミュニティもご活用ください。

なおコメントいただいた文字コードの変換に関しては、文字コード変換ライブラリがいくつかあるようです。ご確認いただければと思います。

teranaka 2017年12月11日 07:08

cybozu Development team　担当者様

ご回答いただきありがとうございました。

失礼いたしました。承知しました。

Permanently deleted user 2019年09月15日 10:30

こちらのTipsは、サブテーブルは出力対象外なのでしょうか？

cybozu Development team 2019年09月18日 00:21

hiroT様

本記事のサンプルコードでは、テーブル内のフィールドは出力対象外となっています。
サンプルコードを書き換えていただくことで出力は可能です。

技術的な質問に関してはコミュニティをご活用ください。

Permanently deleted user 2019年09月18日 04:14

cybozu Development team　ご担当者さま

ご回答ありがとうございます。コミュニティで質問させていただきます。

Takeru Takaoka 2019年09月21日 18:41

ソースコードを参考にフィールドコードを変えて実装しましたが、表示されたCSV出力ボタンを押してもダウンロードが開始されません。お気付きの点があれば教えて頂けますでしょうか。

cybozu Development team 2019年09月24日 09:14

Takeru Takaoka 様

変更されたのは「フィールドコード」のみでしょうか？

「フィールドコード」のみの変更であれば、
ソースコード内の「フィールドコード」の書き換えに漏れがあることが考えられます。再度ご確認ください。

動作がうまくいかない際は、デバッグをしてみると原因が判明することもあります。
参考：動かない？そんな時はデバッグをしてみよう！入門編

また、こちらのコメント欄は、記事通りに試したが動かない等の記事へのフィードバック用となります。
カスタマイズ方法等についてはぜひコミュニティをご活用ください。
https://developer.cybozu.io/hc/ja/community/topics

よろしくお願いいたします。

TI 2020年07月01日 05:21

cybozu Development team ご担当者様

顧客リストのレコード数が100件以上ある場合、顧客リスト内のの全てのレコードデータを出力するためにlimitオプションを試せとあるのですが、limitオプションの使い方が全くわかりません。実際のコードの書き方を教えていただけないでしょうか？（ソースコードのどこをどう変更すれば良いのでしょうか？）

cybozu Development team 2020年07月02日 04:45

TI 様

57行目でクエリで条件を指定しレコードを一括取得で利用するqueryのパラメーターを指定しています。リンクのドキュメントの「queryパラメータで使用できるオプション」を参考の上、limitオプションを500にしていただくと、最大500件まで取得可能です。

500を超える全件を取得したい場合は offset の制限値を考慮したレコード一括取得についてのTipsが参考になるかと思います。

また、こちらのコメント欄は、記事通りに試したが動かない等の記事へのフィードバック用となります。
上記試してみてわからないなどあれば、ぜひコミュニティをご活用ください。
https://developer.cybozu.io/hc/ja/community/topics

mk 2020年10月05日 06:22

こちらに記載の手順で1つのレコードにある1つの関連データのCSV出力は実現できたのですが、1つのレコードに複数の関連レコードが存在する場合の出力について、ご教授頂けないでしょうか？

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