Google スプレッドシートのデータを複数タブ対応で JSON 形式でダウンロードする方法

はる

Google スプレッドシートのデータを JSON 形式でダウンロードしたいと思ったことはありますか？この記事では、Google スプレッドシートのデータを複数シート対応で JSON 形式でダウンロードする方法を紹介します。

シートの用意
手順1: Google Apps Script の設定
手順2: コードの入力
手順3: HTMLファイルの作成
手順4: スクリプトの保存と実行
まとめ
参考記事

シートの用意

まず、スプレッドシートを用意します。

上記画像のようにタブで『sheet1』から『sheet4』を作成します。
1行目にはラベルを記述し
2行目にはJSONのkeyを設定します。
3行目以降はデータを入力していきます。

手順1: Google Apps Script の設定

まず、Google スプレッドシートを開いてください。次に、「ツール」メニューから「スクリプトエディタ」を選択して、Google Apps Script のエディタを開きます。

手順2: コードの入力

以下のコードをコピーし、コード.gs に貼り付けてください。

// JSON ダウンロード用ダイアログを表示する関数
function displayJSONDownloadDialog() {
  // ダイアログの HTML テンプレートを読み込む
  var dialogHtml = HtmlService.createHtmlOutputFromFile("dl");

  // ダイアログを表示する
  SpreadsheetApp.getUi().showModalDialog(dialogHtml, "JSON 形式でダウンロード");
}

// シートのデータを取得し、JSON 文字列に変換する関数
function fetchSheetData(sheetName) {
  // 指定された名前のシートを取得する
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(sheetName);

  if (sheet == null) {
    throw new Error("シートが見つかりません: " + sheetName);
  }

  // シート内の最終行と最終列の番号を取得する
  var lastRow = sheet.getLastRow();
  var lastColumn = sheet.getLastColumn();

  // JSON オブジェクトのキーを格納する配列を作成する
  var jsonKeys = [];

  // データを格納する配列を作成する
  var jsonData = [];

  for (var x = 1; x <= lastColumn; x++) {
    jsonKeys.push(sheet.getRange(2, x).getValue());
  }

  // シートのデータを取得し、JSON オブジェクトに変換する
  for (var y = 4; y <= lastRow; y++) {
    var jsonObject = {};
    
    for (var x = 1; x <= lastColumn; x++) {
      jsonObject[jsonKeys[x-1]] = sheet.getRange(y, x).getValue();
    }

    // JSON オブジェクトを配列に追加する
    jsonData.push(jsonObject);
    Logger.log(jsonData);
  }

  // JSON 配列を整形し、文字列として返す
  return JSON.stringify(jsonData, null, '\t');
}

// スプレッドシートが読み込まれたときに実行される関数
function onOpen() {
  // メニューバーに「JSON で出力」メニューを追加する
  var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  var menuEntries = [{
    name : "JSONで出力",
    functionName : "displayJSONDownloadDialog"
  }];
  spreadsheet.addMenu("JSON", menuEntries);
}

手順3: HTMLファイルの作成

次に、エディタで新しい HTML ファイルを作成し、「dl.html」という名前を付けてください。以下のコードをコピーし、作成した HTML ファイルに貼り付けます。

<!DOCTYPE html>
<html>
<head>
    <base target="_top">
    <!-- JavaScriptを含むスクリプトタグ -->
    <script type='text/javascript'>
      // シート名を引数として受け取り、ダウンロード処理を行う関数
      function handleDownload(sheetName) {
          // スプレッドシートからデータを取得し、ダウンロードリンクを作成
          google.script.run.withSuccessHandler(function(content) {
              var blob = new Blob([content], { "type": "application/json" });
              var linkElement = document.createElement('a');
              linkElement.href = window.URL.createObjectURL(blob);
              linkElement.download = sheetName + '.json';
              linkElement.click();
          }).fetchSheetData(sheetName);
      }
    </script>
</head>
<body>
    <!-- シート1のダウンロードボタン -->
    <h2>シート１</h2>
    <button onclick="handleDownload('sheet1')">ダウンロード</button>

    <!-- シート2のダウンロードボタン -->
    <h2>シート２</h2>
    <button onclick="handleDownload('sheet2')">ダウンロード</button>

    <!-- シート3のダウンロードボタン -->
    <h2>シート３</h2>
    <button onclick="handleDownload('sheet3')">ダウンロード</button>

    <!-- シート4のダウンロードボタン -->
    <h2>シート４</h2>
    <button onclick="handleDownload('sheet4')">ダウンロード</button>
</body>
</html>