（著者：サイボウズ 楊 思夢）
はじめに
こんにちは！サイボウズの楊です(^^)
今回は関連レコードもCSV出力したい！というニーズにお応えしたいと思います♪
kintoneのアプリでは他アプリのレコードを参照できる関連レコード一覧の機能があります。一つのフィールドをキーに関連するレコードを現在のレコード詳細画面に表示させることができます。
しかし、この場合、関連レコードのデータは表示させているだけであり、データとして所持している訳ではありません。
またkintoneにはデータをCSV形式でダウンロードする機能があります。
レコードをCSVファイルで書き出す場合、関連レコードはそのデータを保持していないため、通常は関連レコードをCSV出力できません。
そこで！関連レコードを含めたCSVを出力するTipsをご紹介できればと思います。
デモ環境
デモ環境で実際に動作を確認できます。
ログイン情報は cybozu developer network デモ環境 で確認してください。
完成イメージ
アプリの準備
今回使用するのはアプリストアにある「案件管理」と「顧客リスト」のアプリを応用したものです。
※後ほど「顧客リスト」アプリの関連レコードのフィールド設定で「案件管理」アプリが必要となりますので、先に「案件管理」のアプリの追加をしてください。
案件管理
▼フィールドコードが異なるとJavaScriptが正常に動作しないため注意して変更しましょう。
案件管理アプリのフィールドの設定は以下の通りです。※記載していないフィールドはデフォルトのままです。
| フィールドタイプ | フィールド名 | フィールドコード |
| 文字列（1行） | 会社名 | company |
| ドロップダウン | 製品名 | product |
| 計算 | 小計 | subtotal |
▼アプリイメージ
顧客リスト
▼顧客リストアプリに「関連レコード」フィールドを追加
▼関連レコード一覧の詳細設定
▼フィールドコードが異なるとJavaScriptが正常に動作しないため注意して変更しましょう。
顧客リストアプリのフィールドの設定は以下の通りです。※記載していないフィールドはデフォルトのままです。
| フィールドタイプ | フィールド名 | フィールドコード |
| 文字列（1行） | 会社名 | company |
| 文字列（1行） | 部署名 | division |
| 文字列（1行） | 担当者名 | assignee |
| 文字列（1行） | TEL | TEL |
| 文字列（1行） | メールアドレス | |
| 関連レコード一覧 ※追加したフィールド | 関連レコード一覧 | 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出力できるようになりました(^0^)/
また上記のテクニックを活用することで関連レコードに限らず、自由に他アプリからのデータをCSV出力できます。
ぜひお試しください♪
このTipsは、2022年10月版で確認したものになります。
いつも参考にさせていただいております。
このjavascriptについて、ご質問がございます。
フィールドコードの値を変えて実装してみたところ上手く動作はしたのですが、関連レコードを表示するために絞り込んだ条件は反映されませんでした。
もう少し具体的に申しますと、Aというアプリに登録されているレコードには、「所属（ドロップダウン）」というフィールドがあり、「a」「b」「c」「d」から選択するようになっております。関連レコードを表示させるBというアプリには、「所属」の値が「a」と「b」のレコードだけ表示させるようにしてあります。
上記のjavascriptの値を変更して実装しCSVに書き出した場合、「所属」の値が「a」と「b」だけではなく、「c」と「d」のレコードの情報も書き出されてしまいます。
条件で絞り込んだレコードの情報だけ書き出すようにはできないのでしょうか？
ご教授のほど、よろしくお願いいたします。
菅原尚哉さん
cybozu.com developer network事務局です。
もう解決されてしまったかもしれませんが、サンプルコードの59行目の指定の変更でやりたいことが実現できそうです。
このjavascriptを実行するために、どのライブラリを適用する必要でしょうか？下記の投稿でMomentsライブラリを適用することが明確に記載されています。
https://cybozudev.zendesk.com/hc/ja/articles/202341844
ちなみに、下記の投稿で質問していますが、ご確認いただけると助かります。
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
お騒がせいたしました。申し訳ありません。
上記の質問を無視してください。
>このjavascriptを実行するために、どのライブラリを適用する必要でしょうか？下記の投稿でMomentsライブラリを適用することが明確に記載されています。
ライブラリなしで動きました。
55行目 if(resp[i].length !=0) { は
if(resp[i].records.length !=0) {
ではないでしょうか。
サンプルが動かないため確認したところ、44行目が実行できずにエラーとなってしまうようです。
（全てコメントアウトして1行ずつ戻して確認しました。）
「デモ環境」は正しく表示できます。
表示環境は Google Chrome バージョン 50.0.2661.102 m です。
デモ環境のJSは参照できないでしょうか。
サンプルコードはChromeで正常に動けるが、IE11だと出力されたCSVのレコード数が合わない。皆さんがこの問題に気づきましたか？
51行目のコメントが syntax error を起こしていました。
コメントを外して動作しましたが、Chromeでもレコード数がありません。
M.Nishimura さん
メールアドレスを教えてもらえれば、僕が成功したJSを送ります。
ここで添付したいのですが、機能がないから。
このjavascriptについて
関連レコードを含めたCSVの出力は出来るようになったのですが、
関連レコードの無いものが出力できません。（省かれてしまう）
すべてのデータを出力することはできないでしょうか？
※関連レコードがあってもなくても
アドバイスいただけると幸いです。
宜しくお願い致します。
岡田美緒さん
こんにちは。関連レコード内のデータのあるなしに関わらず、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'; }※記事内のソースコードも上記に変更致しました
顧客リストのレコード数が100件以上ありcsv出力した場合、表示されている画面に表示されている100件のcsvデータが出力されますが
顧客リスト内のの全てのレコードデータを出力することは可能でしょうか。
よろしくお願いいたします。
MFR様
クエリで条件を指定しレコードを一括取得 を51行目で使用しているため、リンク先に記載のlimitオプションを500にした場合500件までは取得可能と思いますが、すでにお試しになられているでしょうか？
cybozu Development team ご担当者様
ご回答ありがとうございます。
limitオプションは試しておりませんでしたが今回全レコードを出力したく対象のレコード数も4桁を超えるのですが
対応可能でしょうか。
よろしくお願いいたします。
MHR様
4桁を超えるような件数の場合は100件や500件ごとに繰り返し文でGETするような処理で可能になるかと思います。
こちらのTipsの書き方が参考になりそうです。
複数のレコードをループして取得するワザ
https://cybozudev.zendesk.com/hc/ja/articles/201501294
cybozu Development team ご担当者様
ご回答ありがとうございます。
ご提示頂いたTipsを参考に全件出力できました。
ありがとうございました。
こちらの記事を参考に、顧客リストの一覧画面に「関連レコード一覧」のフィールド（製品名など）も表示させたいのですが、どのようにしたらよいでしょうか？
カスタマイズビュー＆JavaScriptで実現したいのですが、どのようなコードとなるかご教示いただけると助かります。
kamewo様
こちらのご質問も、別途ご回答いたしましたとおり、有志ユーザーが回答が可能なcybozu developer コミュニティをご活用いただければと思います。
基本的な質問で申し訳ございませんが
CSV出力時の文字コードをSJIS型で出力したいのですが、何か方法はありますでしょうか。
teranaka様
cybozu developer networkをご利用いただき、ありがとうございます。
こちらのコメント欄では、記事に関するフィードバックをお願いしております。
技術的な疑問などに関してましては、コミュニティにご登録いただきますと、詳しい方や同じようなことをやった方などからのアドバイスを受けることが可能です。
是非、コミュニティもご活用ください。
なおコメントいただいた文字コードの変換に関しては、文字コード変換ライブラリがいくつかあるようです。ご確認いただければと思います。
cybozu Development team 担当者様
ご回答いただきありがとうございました。
失礼いたしました。承知しました。
こちらのTipsは、サブテーブルは出力対象外なのでしょうか？
hiroT様
本記事のサンプルコードでは、テーブル内のフィールドは出力対象外となっています。
サンプルコードを書き換えていただくことで出力は可能です。
技術的な質問に関しては コミュニティ をご活用ください。
cybozu Development team ご担当者さま
ご回答ありがとうございます。コミュニティで質問させていただきます。
ソースコードを参考にフィールドコードを変えて実装しましたが、表示されたCSV出力ボタンを押してもダウンロードが開始されません。お気付きの点があれば教えて頂けますでしょうか。
Takeru Takaoka 様
変更されたのは「フィールドコード」のみでしょうか？
「フィールドコード」のみの変更であれば、
ソースコード内の「フィールドコード」の書き換えに漏れがあることが考えられます。再度ご確認ください。
動作がうまくいかない際は、デバッグをしてみると原因が判明することもあります。
参考：動かない？そんな時はデバッグをしてみよう！入門編
また、こちらのコメント欄は、記事通りに試したが動かない等の記事へのフィードバック用となります。
カスタマイズ方法等についてはぜひコミュニティをご活用ください。
https://developer.cybozu.io/hc/ja/community/topics
よろしくお願いいたします。
cybozu Development team ご担当者様
顧客リストのレコード数が100件以上ある場合、顧客リスト内のの全てのレコードデータを出力するためにlimitオプションを試せとあるのですが、limitオプションの使い方が全くわかりません。実際のコードの書き方を教えていただけないでしょうか？（ソースコードのどこをどう変更すれば良いのでしょうか？）
TI 様
また、こちらのコメント欄は、記事通りに試したが動かない等の記事へのフィードバック用となります。
上記試してみてわからないなどあれば、ぜひコミュニティをご活用ください。
https://developer.cybozu.io/hc/ja/community/topics
こちらに記載の手順で1つのレコードにある1つの関連データのCSV出力は実現できたのですが、1つのレコードに複数の関連レコードが存在する場合の出力について、ご教授頂けないでしょうか？