2020年3月2日(月)2020年2月29日(土) 投稿者: iwbjp

Googleスプレッドシートの選択範囲をtableタグに変換する方法

選択範囲をtableタグに変換
スクリプトの準備をする
HTMLの準備をする
実装に必要なことのまとめ

選択範囲をtableタグに変換

HTMLを書いているとGoogleスプレッドシートの選択範囲をHTMLのtableタグに変換したいことがある。

しかし残念ながらGoogleスプレッドシートには選択範囲をtableタグに変換するような機能は存在しない。

しかし、Google Apps Script (Excel VBAのようなもの、以下GAS)を使用すればGoogleスプレッドシートの選択範囲をtableタグに変換する機能を簡単に追加することができる。

スクリプトの準備をする

選択範囲をtableタグに変換する機能を追加するには、まずスプレッドシートのメニューのツール => スクリプトエディタを選択する。

選択するとスクリプトエディタが表示されるので下記のコードを「コード.gs」の内容をすべて削除したあとに貼り付ける。

function onOpen() {
  SpreadsheetApp.getUi()
    .createMenu('tableタグ変換')
    .addItem('選択範囲を変換', 'convertTable')
    .addToUi();
}

function getData() {
  var activeSheet = SpreadsheetApp.getActiveSheet();
  var selection = activeSheet.getSelection();
  var data = selection.getActiveRange().getValues();
  if (data.length < 1) Browser.msgBox('複数のセルを選択してください');
  return data;
}

function convertTable() {
  var html = HtmlService.createTemplateFromFile('table').evaluate();
  SpreadsheetApp.getUi().showSidebar(html);
}

var escapeHtml = (function (String) {
  var escapeMap = {
    '&': '&amp;',
    "'": '&#x27;',
    '`': '&#x60;',
    '"': '&quot;',
    '<': '&lt;',
    '>': '&gt;'
  };
  var escapeReg = '[';
  var reg;
  for (var p in escapeMap) {
    if (escapeMap.hasOwnProperty(p)) {
      escapeReg += p;
    }
  }
  escapeReg += ']';
  reg = new RegExp(escapeReg, 'g');
 
  return function escapeHtml (str) {
    str = (str === null || str === undefined) ? '' : '' + str;
    return str.replace(reg, function (match) {
      return escapeMap[match];
    });
  };
}(String));

コードの解説するとスプレッドシートを開いた際にスプレッドシートのメニューに「tableタグ変換」を追加する。

セル選択中にその中の「選択範囲を変換」を押すとサイドバーにHTMLを読み込んでHTML内にtableタグに変換したものを表示するというスクリプトだ。

コードを見ただけでは理解できない方が大半かと思われますが、基本はコピペするだけで使えるので深く考えなくても問題ないです。

HTMLの準備をする

サイドバーにHTMLを読み込むためHTMLファイルも用意する。

HTMLファイルはスクリプトエディタのメニューからファイル => NEW => HTMLファイルを選択する。ファイル名はtable.htmlにする。

table.html内のコードは以下のようにする。

<style>
textarea { width: 100%; height: 400px; }
#c { text-align: center; }
</style>
<textarea id="r">
<table>
<? var data = getData(); ?>
<? for (var i = 0; i < data.length; i++) { ?>  <tr>
<? for (var j = 0; j < data[i].length; j++) { ?><? if (i === 0) { ?>    <th><?= escapeHtml(data[i][j]) ?>
</th>
<? } else { ?>    <td><?= escapeHtml(data[i][j]) ?>
</td>
<? } ?><? } ?><? if (j === data[i].length) { ?>  </tr>
<? } else { ?>
</tr><? } ?>
<? } ?>
</table>
</textarea>
<div id="c">
<button id="b" data-clipboard-target="#r">tableタグをコピー</button>
<div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
<script>
new ClipboardJS("#b");
</script>

HTML内にある「<?」などはGASのテンプレートタグでコードの見栄えが悪いのは半角スペース2個分のインデントになるよう調整したため。

ちなみに1行目はthタグ、2行目以降はtdタグになるようにしてある。

また、表示されたtableタグをコピーしやすいようClipboardJSでコピーボタンを追加してある。

以上の手順が完了すればGoogleスプレッドシートの選択範囲をtableタグに変換してサイドバーに表示できるようになる。