Googleスプレッドシートで選択セルをHTML Tableに生成するスクリプト

2019/07/26

ブログに表を簡単に作成したいと思い、Googleスプレッドシートで下記のように選択したセルのところをHTML Tableに起こすスクリプトを作りました。

動画にもしました。サイドバー内にHTML Tableタグが現れるのでそれをコピペすればOKです。

↓こちらが生成したタグをコピペしたものです。スタイルシートは全く使っていないのでWordPressの場合スタイルは使っているテーマに依存します。

B3	C3	D3
B4	C4	D4
B5	C5	D5
B6	C6	D6
B7	C7	D7

ソースコード

index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h2>Table HTML</h2>
    <textarea id="text" style="font-size:10pt;width:100%;height:400px;"></textarea>
  </body>
  <script>
    window.onload = function() {  
      google.script.run
        .withFailureHandler(onFailure)
        .withSuccessHandler(onSuccess)
        .getText();
    }

    function onSuccess(result) {
      document.getElementById("text").value = result;
    }

    function onFailure(e) {
      document.getElementById("text").value = "Error";
    }
  </script>
</html>

コード.gs

function showSideBar() {
  var ui = SpreadsheetApp.getUi();
  var htmlOutput = HtmlService.createHtmlOutputFromFile('index')
                   .setTitle("Table");
  ui.showSidebar(htmlOutput);
}

function getText() {
  var mySheet = SpreadsheetApp.getActiveSheet();
  var range = mySheet.getActiveRange();
  var data = range.getValues();
  var table = '<table>\n<thead>\n';

  for(var i=0; i<data.length; i++){
    table += "<tr>\n";
    for(var j=0; j<data[i].length; j++){
      if(i==0){
        table += "<th>" +data[i][j]+ "</th>\n";
      }else{
        table += "<td>" +data[i][j]+ "</td>\n";
      }
    }
    table += "</tr>\n";
    if(i==0) table += "</thead>\n<tbody>\n";
  }
  table += "</tbody></table>";

  return table;
}

- Google Apps Script, Google Dirve