カテゴリー内の他の記事

関連レコードのデータを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'))
    ボタンがない場合のみ、ボタン要素を生成することで増殖バグを防ぎます [16行目]
  • CSVButtonEl.addEventListener('click', function() {...}); でボタンを押した際に処理を行います [26行目]

【CSVファイルの作成】

  • var header = ['会社名', '部署名', '担当者名', 'TEL', 'メールアドレス', '製品名', '小計'].join(',');
    CSVファイルの各項目名(ヘッダー)は手動で作成する必要があります。
    CSVはカンマ区切りなので、join(',') で配列の要素を結合した文字列を生成します [35行目]
  • 関連レコードは kintone.api で取得します。kintone.api は非同期実行なので、顧客ごとに関連レコードを取得するために fetchRelatedRecords を再帰呼出しをします。
    取得した関連レコードの内容をCSVの各行に追加します[46行目-]

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

  • Dateオブジェクトで現在の日時を取得します[107行目]
  • getMonth()は前の月を取得しますので、注意して+1します [109行目]
  • 月や日付の桁数が一桁場合、前に0を足して二桁にします [113行目~]
  • 最後にYYYY + MM + DD + hh + mmの形式で返します [117行目]

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

完成形

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

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

 

最後に

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

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

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

ぜひお試しください♪

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

デモ環境

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

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

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

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

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

Avatar
菅原尚哉

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

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

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

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

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

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

Avatar
cybozu development team

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

Avatar
yanbingms

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

Avatar
yanbingms

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

Avatar
Toshimichi Konno

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

Avatar
M.Nishimura

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

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

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

Avatar
yanbingms

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

Avatar
M.Nishimura

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

Avatar
yanbingms

M.Nishimura さん

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

Avatar
岡田美緒

このjavascriptについて

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

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

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

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

 

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

宜しくお願い致します。

Avatar
cybozu Development team

岡田美緒さん

こんにちは。関連レコード内のデータのあるなしに関わらず、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';
    }


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

Avatar
MFR

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

Avatar
cybozu Development team

MFR様

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

Avatar
MFR

cybozu Development team ご担当者様

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

Avatar
cybozu Development team

MHR様

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

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

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

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

Avatar
MFR

cybozu Development team ご担当者様

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

Avatar
kamewo

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

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

Avatar
ダン吉

kamewo様

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

Avatar
teranaka

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

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

Avatar
cybozu Development team

teranaka様

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

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

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

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

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

Avatar
teranaka

cybozu Development team 担当者様

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

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

Avatar
hiroT

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

Avatar
cybozu Development team

hiroT様

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

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

Avatar
hiroT

cybozu Development team ご担当者さま

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

Avatar
Takeru Takaoka

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

Avatar
cybozu Development team

Takeru Takaoka 様

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

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

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

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

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

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