kintoneでデータを書き出す際にcsvのタイトルを変える方法【kintone カスタマイズ】

All
スポンサーリンク

Kintone アプリカスタマイズ
kintoneでアプリカスタマイズをしようとした際に調べてもあまり情報がなかったので、kintone アプリカスタマイズについて記事を投稿していきたいと思います。今回する内容としては…

【やりたいこと】
CSVファイルの書き込み時にファイルを任意で決める。

【通常操作だと…】

上記のようにダウンロードするファイルがアプリ名になってしまいます。これをなんとかしたい…ということでJavascriptでカスタマイズすることにしました。

【準備するもの】
わかりやすくするために、アプリのフォームは文字列1行でフィールドコードがAとBにしてみました。

【Javascriptを使って書いたコード】

cybouzu developer network で調べて見たらやり方が書いてあったので、自分なりに簡単に書き換えて記載してみました!コードが下記になります。使い方はコードの後に説明していきます。

 
(function() {
    'use strict';

    var CSVButtonEl;
    kintone.events.on('app.record.index.show', function (event) {

        //変数の定義
        var records = event.records;
        console.log(records);
        //フィールドコード
        var A, B = "";

        //function requestで使う変数
        var resp = [];
        var query = "";
        var app_id = kintone.app.getRelatedRecordsTargetAppId('reference');

        //csvの配列
        var csv = [];

        //ボタンの有無をチェック
        if (!CSVButtonEl) {
            setBtn();
            CSVButtonEl.addEventListener('click', toClick);
        }

        //ボタンエレメントの生成
        function setBtn() {
            var spaceEl = kintone.app.getHeaderMenuSpaceElement();
            var text = document.createTextNode('CSVファイル出力');
            CSVButtonEl = document.createElement('button');
            CSVButtonEl.appendChild(text);
            spaceEl.appendChild(CSVButtonEl);
        }

        //クリックした際の処理
        
        function toClick() {
            getMakeCsv();
            downloadFile(csv);
            console.log('ok');
        }

    function getMakeCsv() {
            //現在のレコード情報を取得
            csv += ['test', 'naiyou', 'hoge', '\n'];//1行目の項目名は手動で設ける必要がある
            for (var i = 0; i < records.length; i++) {
                A = records[i]['A']['value'];
                B = records[i]['B']['value'];
                
                //CSVファイルにkintone上記で取得したデータを記入していく
                csv += A + ',' + B + ',' +  '\n';
            }
        }

        
        function request(app_id, query){
            var appUrl = kintone.api.url('/k/v1/records') + '?app=' + app_id + '&query=' + query;
            var respdata = JSON.parse(xmlHttp.responseText);
            return respdata;
        }

        //ダウンロード関数
        function downloadFile(csv) {
        //ファイル名の設定
            var filename = 'TEST' + /*getTimeStamp()*/  '.csv';

            //Blob準備
            var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
            var blob = new Blob([bom, csv], {type: 'text/csv'});

            if (window.navigator.msSaveBlob) {
                window.navigator.msSaveBlob(blob, filename);
            } else {
                var url = (window.URL || window.webkitURL);
                var blobUrl = url.createObjectURL(blob);
                var e = document.createEvent('MouseEvents');
                e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                var a = document.createElementNS("http://www.w3.org/1999/xhtml", "a");
                a.href = blobUrl;
                a.download = filename;
                a.dispatchEvent(e);
            }
        }

        //ファイル名に付与する日付の取得
        function getTimeStamp() {
            var d = new Date();
            var YYYY = d.getFullYear();
            var MM = (d.getMonth() + 1);
            var DD = d.getDate();
            var hh = d.getHours();
            var mm = d.getMinutes();
            if (MM < 10) { MM = '0' + MM; }
            if (DD < 10) { DD = '0' + DD; }
            if (hh < 10) { hh = '0' + hh; }
            else if (mm < 10) { mm = '0' + mm; }
            String();
            return '' + YYYY + MM + DD + hh + mm;
        }
    });
})();

 

【上記のコードを実装してできること】
ファイル名の変更
出力したcsvの一行目の設定

使い方としては、一覧画面にCSVファイル出力というボタンが出てくると思うので押したらダウンロードされるので後はファイルを開いて中身を確認してみてください。

Toshikazu Hirano

Nagasaki→Tokyo→China(Shenzhen)

1992/07/02
宮崎産まれ、長崎育ち。

前職は、東京のベンチャー企業(IT関連)で仕事をしておりその経験からホームページ作成。運営を行なっています。現在は、中国(深圳市)に住んでおりホームページの運営からYouTube動画の作成等いろいろな活動をしています。

Toshikazu Hiranoをフォローする
All
スポンサーリンク
Toshikazu Hiranoをフォローする
All One's Life

コメント

Translate »