選択範囲を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 = {
'&': '&',
"'": ''',
'`': '`',
'"': '"',
'<': '<',
'>': '>'
};
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タグに変換してサイドバーに表示できるようになる。
実装に必要なことのまとめ
色々書いたが、実装に必要なことは以下の3点だけだ。
- スクリプトエディタのコード.gsにコードをコピペして保存
- スクリプトエディタの新規HTMLファイルにコピペして保存
- スプレッドシートをブラウザのリロードで更新
初回実行時には「承認が必要です」というダイアログが表示されて実行許可を求められるので「続行」を押したあと「許可」を選択すれば使用できる。
