見出し画像

スクリプトを使わずに、スプレッドシートの表をのタグに変換する【googleスプレッドシート】【関数】【HTML】

以前ご案内した記事です。
こちらでは、スプレッドシートの表をHTMLに変換して、メールで送信する方法のご案内でした。

そちらの内容では、GASの繰り返しとgetRange()、getValue()を使って
HTMLを作成しました。今回はGASを使わずに、関数のみを使ってHTMLを作成する方法です。

スプレッドシートの関数だけでHTMLに変換できました

GASを使ってHTML表を作成する構成としては、
1.1行に対して列を<td></td>で囲むことを繰り返す
2.<tr></tr>をつけて列を作成する
3.全体を<table></table>で囲む
でした。
繰り返し①で「1」を作成
繰り返し②で「2」を作成が基本になります。

この表を

こういうHTMLに変換するのがゴールです(まずは、すべてTH)

<table><tr>
<td>あ<td/><td>い<td/><td>う<td/><td>え<td/><td>お</td>
</tr><tr>
<td>あ<td/><td>い<td/><td>う<td/><td>え<td/><td></td>
</tr><tr>
<td>あ<td/><td>い<td/><td>う<td/><td><td/><td></td>
</tr><tr>
<td>あ<td/><td>い<td/><td><td/><td><td/><td></td>
</tr><tr>
<td>あ<td/><td><td/><td><td/><td><td/><td></td>
</tr><tr>
<td>あ<td/><td><td/><td>う<td/><td><td/><td></td>
</tr><table>

スプレッドシートの関数「TEXTJOIN」で行を作る方法

結論から言いますと、「TEXTJOIN」をつかえばHTMLが作成できます。

①1行目に指定する関数です。
「A2」
="<tr><td>"&TEXTJOIN("<td/><td>",FALSE,(B2:F2))&"</td></tr>"
これを、行数オートフィルします。
作成した6行に対し
「A8」
②="<table>"&CONCATENATE(A2:A7)&"<table>"で全体を生成します。

こちらで試してみて、表になっていました。

1行目を見出しにするとき

1列目だけ、こちらに書き換えます。<td>⇒<th>ですね。
="<tr><th>"&TEXTJOIN("<th/><th>",FALSE,(B2:F2))&"</th></tr>"
結果です。

1列目を見出しにするとき

こちらは6行とも書き換えます。1列目を個別にして、2列目以降をTEXTJOINで結合します。
="<tr><th>"&B2&"</th><td>"&TEXTJOIN("<td/><td>",FALSE,(C2:F2))&"</td></tr>"
結果です。

まとめ

「TEXTJOIN」これは単純な文字の連結ではなく、「間に特定のテキストを挟んで連結する」という連結方法です。
「空白セルを無視する」・「空白セルも考慮する」の使い分けもできるので、用途によって使い分けて活用しましょう。

今回のシートです。
https://docs.google.com/spreadsheets/d/1uTMlUvTMlNPuix3d-D0FMAP8TAb-CZH_KD3J5QR6fY4/edit#gid=759069975

この記事が参加している募集

#つくってみた

19,294件

どんな記事ならサポートしてみようと思えるか、ご要望ありましたら教えてくださいね。