ポンコツエンジニアのごじゃっぺ開発日記。

いろいろポンコツだけど、気にするな。エンジニアの日々の開発などの記録を残していきます。 自動で収入を得られるサービスやシステムを作ることが目標!!

【GAS】スプレッドシートからCSVをダウンロードする1クリックボタン/メニューを作成しよう

この記事は GAS道場 Advent Calendar 2019 の18日目の記事です。 Google Apps Script(GAS)をこれから使おうという方向けのアドベントカレンダーになります。

今回は、GASのダイアログを用いて、CSVをダウンロードする機能の作成をしたいと思います。

はじめに

使用するスプレッドシートは、このアドベントカレンダーでもおなじみに以下のようなデータにします。 f:id:ponkotsu0605:20191217232200p:plain このシートにCSVに出力してダウンロードする仕組みをつけたいと思います。

スクリプト

早速ですが、ソースコードの紹介になります。

function onOpen() {
  var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  var entries = [{
    name:"ダウンロード",
    functionName:"downloadCsv"
  }];
  spreadsheet.addMenu("CSV", entries);
};

function downloadCsv() {
  var html = HtmlService.createTemplateFromFile("dialog").evaluate();
  SpreadsheetApp.getUi().showModalDialog(html, "Download!!");
}

function getData() {
  var values = SpreadsheetApp.getActiveSheet().getDataRange().getValues();
  var data = [];
  for (var i = 0; i < values.length; i++) {
    data.push(values[i].join(","));
  }
  return data.join("\r\n");
}

function getFileName() {
  var sheetName = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet().getName()
  var datetime = Utilities.formatDate(new Date(),'Asia/Tokyo', 'yyyyMMddHHmm');

  return sheetName + '_' + datetime + '.csv';
}

そして、ダイアログ用にdialog.htmlも作成しましょう。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script type='text/javascript'>    
      window.onload = function(){
        handleDownload();
      }
      function handleDownload() {
        // 出力データを GAS から取得する
        var content = <?= getData(); ?>;
        var blob = new Blob([ content ], { "type" : "text/csv"});
        var link = document.createElement('a');
        // ファイル名を GAS から取得する
        link.download = <?= getFileName(); ?>;
        link.href = window.URL.createObjectURL(blob);
        link.click();
        // ダイアログを閉じる
        google.script.host.close();
      }
  </script>
  </head>
</html>

この2つのファイルを用意します。 f:id:ponkotsu0605:20191217232550p:plain

カスタムメニューから起動

onOpen()が書かれているということは、予想がつくかもしれませんが、スプレッドシートを更新してみましょう。 f:id:ponkotsu0605:20191217232707p:plain このように、ダウンロードのメニューがヘッダーに追加されたと思います。

一瞬だけポップアップが表示され、ダウンロードが始まるかと思います。

f:id:ponkotsu0605:20191217232834p:plain そして、しっかりとCSV形式でダウンロードが完了します。

ボタンをクリックしてダウンロード

カスタムメニューだとクリック回数が2回とちょっと手間ですね。ということで、今度はボタンを作成してみましょう。

ボタンの作り方は10日目の以下の記事でも紹介しましたので、詳細は省略します。

www.pnkts.net

以下のようにボタンを作成して、downloadCsvのスクリプトを割り当てましょう。 f:id:ponkotsu0605:20191217233159p:plain

そして、ボタンをクリックするとCSVのダウンロードが始まると思います。 こちらのほうが、クリックが1回で済むので楽ちんですね!

Googleドライブに出力

ちなみに、今回の目的からずれてしまいますが、CSVをダウンロードするのではなく、特定のGoogleドライブ上に出力する方法もあります。 こちらに関しては以下の記事で紹介しましたので御覧ください。

www.pnkts.net

さいごに

今回はダイアログのようにスプレッドシート上にHTMLのポップアップを表示することで、CSVのダウンロードというのを実現しました。 このように、HTMLやJavaScriptを動かすことができるので、フロントエンドのスクリプトを書くこともでき、より可能性が広がることがわかったと思います。