スプレッドシートの内容を Json 形式で書き出す(配列対応)

　スプレッドシートの内容をシートごとに Json 形式のファイルとして書き出すための GS ファイルと HTML ファイルの作成例です。

　スプレッドシート内にメニューを追加し、指定したタイプの Json ファイルを書き出すことが出来ます。
ここでは２つのタイプに対応しています。

＜メニュー＞

＜通常のJson＞

＜内部の配列を持つ Json＞

dialogJson.gs の作成

　Json 形式の出力を行いたいスプレッドシートを開き、「拡張機能 → Apps Script」を選択します。
Apps Script が新しいタブやウインドウで開きますので、「＋」ボタンを押して、スクリプトを作成します。
　

dialogJson.gs

function generateJson() {

  const jsonKey = 'data'; // jsonのkey名
 
  // データの取得
  const sheet = SpreadsheetApp.getActiveSpreadsheet();  //.getSheetByName('シート名');
  const lastRow = sheet.getLastRow();
  const lastColum = sheet.getLastColumn();
  const keys = sheet.getSheetValues(1, 1, 1, lastColum).flat();
  const values = sheet.getSheetValues(2, 1, (lastRow-1), lastColum);
 
  // データの整形
  const data = values.map(currentValue => {
    return keys.reduce((obj, currentKey, index) => {
      obj[currentKey] = currentValue[index];
      return obj;
    }, {});
  });

  const json = JSON.stringify(data);

  return json;
}
 
function onOpen() {
  const ui = SpreadsheetApp.getUi();
  ui.createMenu('json')
    .addItem('json形式でダウンロード', 'downloadDialog')
    .addToUi();
};

function downloadDialog() {
  const html = HtmlService.createTemplateFromFile("dialog").evaluate();
  SpreadsheetApp.getUi().showModalDialog(html, 'json形式でダウンロード');
}

dialog.html の作成

　続いて「＋」ボタンを押し、HTML を選択してファイルを作成します。

dialog.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <button onclick="dl()">ダウンロードが始まらない場合はクリック</button>
 
    <script type='text/javascript'>
      function dl() {
        const json = <?= generateJson(); ?>;
        const blob = new Blob([json], {
          "type" : "application/json"
        });
        const link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = 'data.json';
        link.click();
      }
      dl();
  </script>
  </body>
</html>

スプレッドシートの再読み込み

　各ファイルを保存後、スプレッドシートの再読み込みを行ってください。
上部のメニューに Json が追加されます。

　実行すると開いているシート内の情報が Json ファイルで出力されます。

＜データの一部を配列としてまとめて出力するケース＞

　もう１つの出力方式を作成します。
「＋」ボタンを押してスクリプトを作成します。

exportToJson.gs

function exportToJson() {
  // シート名を指定
  const sheet = SpreadsheetApp.getActiveSpreadsheet();  //.getSheetByName('シート14'); // シート名は適切に変更

  // データを取得
  const data = sheet.getDataRange().getValues();

  // ヘッダー行を取得
  const headers = data[0];

  // データをJSON形式に変換
  const jsonData = [];

  for (let i = 1; i < data.length; i++) {
    const row = data[i];
    const obj = {};

    obj['tag'] = row[0];

    // 'jp', 'kr', 'en' の列を配列にまとめる
    obj['languageDatas'] = [row[1], row[2], row[3]];

    jsonData.push(obj);
  }

  // JSONデータを出力
  const jsonOutput = JSON.stringify(jsonData, null, 2);

  // HtmlServiceのダイアログを閉じるために出力
  return jsonOutput;
}

function onOpen() {
  const ui = SpreadsheetApp.getUi();
  ui.createMenu('Custom Menu')
    .addItem('JSON形式でダウンロード', 'downloadDialog')
    .addToUi();
}

function downloadDialog() {
  const html = HtmlService.createTemplateFromFile('combinedDialog').evaluate();
  SpreadsheetApp.getUi().showModalDialog(html, 'JSON形式でダウンロード');
}

function getSheetName() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  return sheet.getName();
}

dialogJson.gs の修正

　downloadDialog() 関数内の引数の指定を変更します。

　また新しく getSheetName() 関数をこちらにも追加します。

function downloadDialog() {
  const html = HtmlService.createTemplateFromFile('combinedDialog').evaluate();
  SpreadsheetApp.getUi().showModalDialog(html, 'JSON形式でダウンロード');
}

function getSheetName() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  return sheet.getName();
}

HTML ファイル

　スプレッドシートには１つの HTML ファイルしか設定できないため、
先ほど作成した通常の Json ファイルのダウンロード機能に、今回の一部を配列化して Json ファイルとしてダウンロード機能を追加します。
　
　また作成される Json ファイルの名称も動的にシート名に設定されるように変更もしています。

　そのため、HTML の名称も変更しましょう。

combinedDialog.html

<!-- combinedDialog.html -->

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <button onclick="exportJson()">JSON形式(一部配列)でダウンロード</button>
    <button onclick="dl()">通常のJSON形式でダウンロード</button>
 
    <script type='text/javascript'>

      function getSheetName() {
        return google.script.run.getSheetName();
      }

      function exportJson() {
        google.script.run.withSuccessHandler(function(sheetName) {
          const json = <?= exportToJson(); ?>;
          const blob = new Blob([json], {
            type: 'application/json'
          });
          const link = document.createElement('a');
          link.href = window.URL.createObjectURL(blob);
          link.download = `${sheetName}.json`; // シート名をファイル名に設定
          link.click();
        }).getSheetName();
      }

      function dl() {
        google.script.run.withSuccessHandler(function(sheetName) {
          const json = <?= generateJson(); ?>;
          const blob = new Blob([json], {
            type: 'application/json'
          });
          const link = document.createElement('a');
          link.href = window.URL.createObjectURL(blob);
        link.download = `${sheetName}.json`; // シート名をファイル名に設定
        link.click();
      }).getSheetName();
    }
    </script>
  </body>
</html>

スプレッドシートの再読み込み

　各ファイルを保存後、スプレッドシートの再読み込みを行ってください。
上部のメニューに Json を選択すると、ウインドウ内に新しいメニューが追加されています。

＜メニュー＞

　両方とも実行して、それぞれの Json 形式での出力が行われることを確認してみてください。

＜通常のJson＞

＜内部の配列を持つ Json＞

　以上で完成です。

このページを編集するこのページを元に新規ページを作成

印刷する

コメント（0）

スプレッドシートの内容を Json 形式で書き出す(配列対応) - i-school 先頭へ

コメントをかく

名前	ユーザIDを使用しないで書き込む	ユーザーIDを使う	ログインする
画像コード	画像に記載されている文字を下のフォームに入力してください。
備考	「http://」を含む投稿は禁止されています。
本文
利用規約をご確認のうえご記入下さい

i-school