Googleスプレッドシートの関数でつくるnote用 表変換式
noteに書くようになってから2年経過するんですが、今さらながら・・・
👇こんな感じで note 上で表が作成できることを知りましてw
$$
\begin{array}{lllr}
\text{順位}&\text{タイトル}&\text{出版社}&\text{推定売上部数}\\ \hline
\text{1}&\text{呪術廻戦 30}&\text{集英社}&\text{210,029}\\ \hline
\text{2}&\text{呪術廻戦 29}&\text{集英社}&\text{203,445}\\ \hline
\text{3}&\text{地縛少年 花子くん 23}&\text{スクウェア・エニックス}&\text{69,230}\\ \hline
\text{4}&\text{ダンダダン 18}&\text{集英社}&\text{68,847}\\ \hline
\text{5}&\text{キングダム 74}&\text{集英社}&\text{47,652}\\ \hline
\text{6}&\text{SAKAMOTO DAYS 20}&\text{集英社}&\text{46,049}\\ \hline
\text{7}&\text{ブルーロック 32}&\text{講談社}&\text{43,199}\\ \hline
\text{8}&\text{【推しの子】 16}&\text{集英社}&\text{38,852}\\ \hline
\text{9}&\text{アオアシ 38}&\text{小学館}&\text{38,486}\\ \hline
\text{10}&\text{呪術廻戦 28}&\text{集英社}&\text{37,149}\\ \hline
\end{array}
$$
※オリコン調べ https://www.oricon.co.jp/rank/obc/w/2025-01-13/
この noteの表挿入について書いている他の方の過去noteを見ると
GASを実行させて、もしくはGASでカスタム関数を作って Googleスプレッドシート上の表を note用の表コードに変換する 記事はあるけど、
さすがに シート関数で数式を作ってる人はいないようだったんで、試しにmirが作ってみようかなとw
前回の noteは 「スプレッドシートに挿入した図形(ボタン)をクリックしたら指定のWebサイトを開きたい(GASでハイパーリンクボタンは作れるか?)」というお題を取り上げました。
今回は noteを書いていない人にはあまり参考にならないかもしれませんが、noteやってない人も Googleスプレッドシートの数式作成お題だと思ってチャレンジしてみてください。
noteは Texで数式や表作成ができる
たぶん知ってる人には今さらでしょうし、公式にもしっかり書いてあるんで読んでないのか!と怒られそうですが、実はnoteは Texを使って数式や表を入れることできたみたいですw
ちなみに Tex は 「テフ」って読みます。
大学でこれ使って卒論書いた記憶がおぼろげながらありますが、ほとんど覚えてません。忘却のサチコ、いや忘却の彼方です。。
noteでの数式の記述方法
👆 こんな感じで note に直接打ち込むと
編集状態の画面では このような状態になり、
保存した画面を確認すれば
$$
x =\frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
$$
👆
このように反映されます。
引用の中に数式や表を入れることも可能
また $$の後を改行しないで中カッコを使って $${数式}#$$ とすると、インラインで普通の文章の中に
こんな感じで「$${y = x^2}$$ 」数式を入れることが出来ます。
noteでの表の記述方法
数式に続いてメインの表の記述方法です。
👇こちらを参考にさせていただきました。
とりあえずは
という記述が基本となります。
👇
$$
\begin{array}{|c|c|c|} \hline
1 & 2 & 3 \\ \hline
4 & 5 & 6 \\ \hline
7 & 8 & 9 \\ \hline
\end{array}
$$
開始時の
$$
\begin{array}{表の縦オプション}
と
最後の
\end{array}
$$
は必須となります。
表内の 横の要素は &でつなぎ、\hline は、入れた箇所に 横線(HorizonLine)を入れるという意味です。
なので \hlineを 記述しない行を作れば
👇
$$
\begin{array}{|c|c|c|}
1 & 2 & 3 \\
4 & 5 & 6 \\
7 & 8 & 9 \\ \hline
\end{array}
$$
このように、横線を特定の行にのみ引くことが可能です。
表の縦線と 文字の配置は冒頭の \begin{array}{|c|c|c|}
ここ👉 {|c|c|c|} です。
| が縦線、cが文字の位置の設定となります。
| をいれなければ縦線はなくなり
$$
\begin{array}{|ccc|}
1 & 2 & 3 \\
4 & 5 & 6 \\
7 & 8 & 9 \\
\end{array}
$$
こんな表になります。
文字の位置設定は
とわかりやすいです。それぞれ
$$
\begin{array}{|c|l|r|} \hline
1 & 2 & 3 \\ \hline
100 & 200 & 300 \\ \hline
\end{array}
$$
👆こんな感じになります。
不要なスペースが入らないように注意。
表に文字列を入れる
ここまでは数値を扱った表でしたが、テキストの場合はどうでしょうか?
$$
\begin{array}{|c|c|c|} \hline
x & y & z \\ \hline
あ & あい & あいう \\ \hline
田中 & 佐藤 & 鈴木 \\ \hline
\end{array}
$$
アルファベットは 数式っぽい表記ですが一応はいりますね。
でも
$$
\begin{array}{ccc|} \hline
name & key & value \\ \hline
田中& 0110 & スーパーサブ \\ \hline
\end{array}
$$
👆 アルファベットがこうなっちゃうのはなんか嫌ですねー。普通がいいです。
このアルファベットの数式表記を回避する為には
文字を name → \text{name} とすれば良いとのこと。
$$
\begin{array}{|ccc|} \hline
\text{name} & \text{key} & \text{value} \\ \hline
田中& 0110 & スーパーサブ \\ \hline
\end{array}
$$
👆こんな感じになりました。
とりあえず 全部 \text{ } 形式にしちゃって良さそうですね。
noteへの Texを使った表の挿入方法は理解出来ました。
Googleスプレッドシート の表を noteに挿入できる表に変換する
それでは本題です。Googleスプレッドシートで作成した表を noteに挿入できる表(コード)に変換する数式を作ってみましょう。
ちなみに GASを使う方法は 👇コチラや
👇コチラが参考になります。
でも、今回の変換くらいなら GASを使う必要もないんで、標準のシート関数を組み合わせた数式で変換をしてみよう!ってのが、今回のnoteでやりたいことです。
Q1. Googleスプレッドシートの表を数式で note用の表に変換したい
それではお題いってみましょう!
お題用の表ですが
オリコンのサイトから 「週間 コミックランキング 2025年01月13日付 (2024年12月30日~2025年01月05日)」の1位~10位の情報を IMPORTDATA関数、IMPORTHTML関数で取得して成形して出力、テーブル化しています。
こっちの方が式としては難しいかもしれませんw
興味のある人は挑戦してみてください。
とりあえず元データは以下を A4にコピペでOKです。
順位 タイトル 出版社 発売日 価格(税込) 推定売上部数
1 呪術廻戦 30 集英社 2024/12/01 572 210,029
2 呪術廻戦 29 集英社 2024/12/01 572 203,445
3 地縛少年 花子くん 23 スクウェア・エニックス 2024/12/01 770 69,230
4 ダンダダン 18 集英社 2025/01/01 616 68,847
5 キングダム 74 集英社 2024/12/01 770 47,652
6 SAKAMOTO DAYS 20 集英社 2025/01/01 572 46,049
7 ブルーロック 32 講談社 2024/12/01 594 43,199
8 【推しの子】 16 集英社 2024/12/01 990 38,852
9 アオアシ 38 小学館 2024/12/01 792 38,486
10 呪術廻戦 28 集英社 2024/10/01 572 37,149
呪術廻戦 が完結ってことで3巻もランクインしてますね。
これを
👆このように変換して noteに貼り付けて
$$
\begin{array}{|l|l|l|l|l|l|} \hline
\text{順位}&\text{タイトル}&\text{出版社}&\text{発売日}&\text{価格(税込)}&\text{推定売上部数}\\ \hline
\text{1}&\text{呪術廻戦 30}&\text{集英社}&\text{2024/12/01}&\text{572}&\text{210,029}\\ \hline
\text{2}&\text{呪術廻戦 29}&\text{集英社}&\text{2024/12/01}&\text{572}&\text{203,445}\\ \hline
\text{3}&\text{地縛少年 花子くん 23}&\text{スクウェア・エニックス}&\text{2024/12/01}&\text{770}&\text{69,230}\\ \hline
\text{4}&\text{ダンダダン 18}&\text{集英社}&\text{2025/01/01}&\text{616}&\text{68,847}\\ \hline
\text{5}&\text{キングダム 74}&\text{集英社}&\text{2024/12/01}&\text{770}&\text{47,652}\\ \hline
\text{6}&\text{SAKAMOTO DAYS 20}&\text{集英社}&\text{2025/01/01}&\text{572}&\text{46,049}\\ \hline
\text{7}&\text{ブルーロック 32}&\text{講談社}&\text{2024/12/01}&\text{594}&\text{43,199}\\ \hline
\text{8}&\text{【推しの子】 16}&\text{集英社}&\text{2024/12/01}&\text{990}&\text{38,852}\\ \hline
\text{9}&\text{アオアシ 38}&\text{小学館}&\text{2024/12/01}&\text{792}&\text{38,486}\\ \hline
\text{10}&\text{呪術廻戦 28}&\text{集英社}&\text{2024/10/01}&\text{572}&\text{37,149}\\ \hline
\end{array}
$$
👆こんな感じで表にしたい!ってことです。考えてみましょう!
↓↓
回答はここから。
↓↓
A1. Googleスプレッドシートの表を数式で note用の表に変換する
回答です。幾つか方法はあるので一例です。
=ARRAYFORMULA(LET(
array,A4:F14,
_n,CHAR(10),
c,COLUMNS(array),
header,"$$"&_n&"\begin{array}{"&REPT("|l",c)&"|} \hline"&_n,
footer,"\end{array}"&_n&"$$",
x,SUBSTITUTE("\text{#}","#",array),
y,BYROW(x,LAMBDA(r,TEXTJOIN("&",true,r))),
z,TEXTJOIN("\\ \hline"&_n,false,y,""),
header&z&footer
))
できました~。
解説していきましょう。
パーツをばらして LETで名前付け
まず、このような複雑データ生成はパーツをばらして考えましょう。これは前々回のカレンダー生成でも登場しましたね。
今回もLET関数を使います。
まず表の範囲を arrayとしておきましょう。
LET(
array,A4:F14,
ちなみに今回はテーブル化してデータ範囲は 表_1というテーブルなので、
LET(
array,表_1[#ALL],
このように構造化参照で指定することもできます。
また、たびたび改行が出てくるので
_n,CHAR(10),
改行 CHAR(10) を _nと置いておきましょう。
本当は \n としたいところですが、LET関数では名前に \(バックスラッシュ)が使えません。
とりあえずフッター部分は固定なんで
footer,"\end{array}"&_n&"$$",
ここはいいですね。
REPT関数で列数分繰り返す
一方ヘッダー部分は表の列数に応じて可変となります。
$$
\begin{array}{|l|l|l|l|l|l|} \hline
{|l|l|l|l|l|l|} 👈 この部分ですね。
ここわかりにくいですが、
| パイプ
と
l 小文字のL
の繰り返しですw
まず 表の列数を
c,COLUMNS(array),
COLUMNS関数で取得して cと置いて
REPT("|l",c)
このようにREPT関数で |l を列数分繰り返します。
前後の文字列と組み合わせて
header,"$$"&_n&"\begin{array}{"&REPT("|l",c)&"|} \hline"&_n,
このようにヘッダー部分が出来上がりました。
ヘッダーは最後に改行 _n を入れておくことで後でbodyとスムーズに連結できるようにしています。
ヘッダー部分、フッター部分はこれで完成です。
=LET(
array,A4:F14,
_n,CHAR(10),
c,COLUMNS(array),
header,"$$"&_n&"\begin{array}{"&REPT("|l",c)&"|} \hline"&_n,
footer,"\end{array}"&_n&"$$",
body部分を3ステップで作っていく
残るbody部分はどうすればよいか?これは3つのステップで作成していきます。
①まずすべての値を \text{値} としてから
②行単位で各セルを &で連結して
③最後に各行の後ろに \\ \hline(改行) をつけて連結
この3ステップです。
SUBSTITUTEで表の全ての値を \text{値} とする
すべての値を 値 → \text{値} とする方法ですが、
でもいいんですが、実はこれだとちょっと困るケースがあります。
なので、今回はSUBSTITUTE関数を使って
このようにしています。
ここが配列処理なので、ARRAYFORMULA関数が必要になります。
ARRAYFORMULAは式の一番外側に一つだけが基本です。
SUBSTITUTE関数を配列で使う際、第1引数を配列として使うことが多いかと思いますが、実は 第3引数の置換後を配列とすることで、今回のようなすべてのセルの値の前後に 指定した文字を入れるといったことが出来ます。
さらに &で 連結する方法と違って
SUBSTITUTEの変換式だと 日付や数値が表示されているまま取得できるというメリットがあります。
&で連結した方は日付がシリアル値になってしまってますし、数値の3桁カンマも消えちゃってますね。
スラッシュ区切りの日付の表示や数値の3桁カンマは、どちらも表示形式によるものです。
この表示形式の扱いは、Googleスプレッドシートと Excelで違いがあります。また使う関数や演算子によって 表示形式のまま(見える形のまま)取得できるかどうかも変わってきます。
他に、REGEXREPLACE関数を使う方法も思いつきますが
文字列以外のセルが #VALUE!エラーとなってしまいます。
REGEXREPLACE関数は正規表現が使える非常に強力な置換関数ですが、数値のセルに対して使えないという弱点があるんです。
REGEXREPLACE関数は SUBSTITUTE関数の上位互換ではなく、ケースによっては SUBSTITUTE関数の方が良いってことですね。
この結果を 一旦 xと置いておきましょう。
x,SUBSTITUTE("\text{#}","#",array),
=ARRAYFORMULA(LET(
array,A4:F14,
_n,CHAR(10),
c,COLUMNS(array),
header,"$$"&_n&"\begin{array}{"&REPT("|l",c)&"|} \hline"&_n,
footer,"\end{array}"&_n&"$$",
x,SUBSTITUTE("\text{#}","#",array),
まずはここまで理解できましたでしょうか?
行毎に TEXTJOINしたい → BYROWの出番
つぎに ステップ② 行単位で各セルを &で連結 です。
ここで使うのは TEXTJOIN関数です。
ただ、そのまま使うと複数行が全部連結されてしまうので、各行単位で処理する為に BYROW関数を併用します。
BYROW関数は、行毎に〇〇したいを実現する関数です。
先ほどの結果 xを 行後に "&"を 間に挟んで連結したいので
こんな式になります。
この結果を yと置いておきましょう。
=ARRAYFORMULA(LET(
array,A4:F14,
_n,CHAR(10),
c,COLUMNS(array),
header,"$$"&_n&"\begin{array}{"&REPT("|l",c)&"|} \hline"&_n,
footer,"\end{array}"&_n&"$$",
x,SUBSTITUTE("\text{#}","#",array),
y,BYROW(x,LAMBDA(r,TEXTJOIN("&",true,r))),
TEXTJOINで一番最後にも区切り文字(連結文字)を付ける方法
最後のステップ③です。各行の後ろに \\ \hline(改行) をつけて連結しましょう。
これも先ほどと同じように "\ \hline"&_n を 区切り文字としてTEXTJOINで連結すればよいんですが
とすると
一番最後だけ "\ \hline"&_n が付きません。
連結箇所ではないので当然なんですが、最後にも 区切り文字が必要な場合はどうすればよいか?
もちろん &"\ \hline"&_n としてもいいんですが、もう少しクールな書き方があるんで覚えておきましょう。
第2引数の 空のセルを無視 を FALSEとして 空のセルを削除しない と設定した上で、第3引数の配列の後ろに ,"" 空文字を追加します。
TEXTJOINは
TEXTJOIN(区切り文字, 空のセルを無視, テキスト1, [テキスト2, ...])
このような構文で第3引数に カンマ区切りでテキスト(テキストの配列)を複数指定できます。
配列 yの後ろに ,"" として空文字をカンマ区切りで追加することで、yと空文字を連結する為に区切り文字が最後にも入るようになります。
これで body (最終的に zと置いた)が完成したので、最後に
header&z&footer
として完成です。
でも noteに貼るには横に長くてスクロールバー出ちゃってるんで、今回は CHOOSECOLS関数で発売日と価格を抜いた表にしておきましょう。
発売日(4列目)、価格(5列目)以外の列を取得すればいいので
として、これを array とすれば良いです。
=ARRAYFORMULA(LET(
array,CHOOSECOLS(A4:F14,1,2,3,6),
_n,CHAR(10),
c,COLUMNS(array),
header,"$$"&_n&"\begin{array}{"&REPT("|l",c)&"|} \hline"&_n,
footer,"\end{array}"&_n&"$$",
x,SUBSTITUTE("\text{#}","#",array),
y,BYROW(x,LAMBDA(r,TEXTJOIN("&",true,r))),
z,TEXTJOIN("\\ \hline"&_n,false,y,""),
header&z&footer
))
$$
\begin{array}{|l|l|l|l|} \hline
\text{順位}&\text{タイトル}&\text{出版社}&\text{推定売上部数}\\ \hline
\text{1}&\text{呪術廻戦 30}&\text{集英社}&\text{210,029}\\ \hline
\text{2}&\text{呪術廻戦 29}&\text{集英社}&\text{203,445}\\ \hline
\text{3}&\text{地縛少年 花子くん 23}&\text{スクウェア・エニックス}&\text{69,230}\\ \hline
\text{4}&\text{ダンダダン 18}&\text{集英社}&\text{68,847}\\ \hline
\text{5}&\text{キングダム 74}&\text{集英社}&\text{47,652}\\ \hline
\text{6}&\text{SAKAMOTO DAYS 20}&\text{集英社}&\text{46,049}\\ \hline
\text{7}&\text{ブルーロック 32}&\text{講談社}&\text{43,199}\\ \hline
\text{8}&\text{【推しの子】 16}&\text{集英社}&\text{38,852}\\ \hline
\text{9}&\text{アオアシ 38}&\text{小学館}&\text{38,486}\\ \hline
\text{10}&\text{呪術廻戦 28}&\text{集英社}&\text{37,149}\\ \hline
\end{array}
$$
👆完成です。でも 売上部数の数値は右寄せの方がいいですね。ここは最後に手動で
としておきましょう。
$$
\begin{array}{|l|l|l|r|} \hline
\text{順位}&\text{タイトル}&\text{出版社}&\text{推定売上部数}\\ \hline
\text{1}&\text{呪術廻戦 30}&\text{集英社}&\text{210,029}\\ \hline
\text{2}&\text{呪術廻戦 29}&\text{集英社}&\text{203,445}\\ \hline
\text{3}&\text{地縛少年 花子くん 23}&\text{スクウェア・エニックス}&\text{69,230}\\ \hline
\text{4}&\text{ダンダダン 18}&\text{集英社}&\text{68,847}\\ \hline
\text{5}&\text{キングダム 74}&\text{集英社}&\text{47,652}\\ \hline
\text{6}&\text{SAKAMOTO DAYS 20}&\text{集英社}&\text{46,049}\\ \hline
\text{7}&\text{ブルーロック 32}&\text{講談社}&\text{43,199}\\ \hline
\text{8}&\text{【推しの子】 16}&\text{集英社}&\text{38,852}\\ \hline
\text{9}&\text{アオアシ 38}&\text{小学館}&\text{38,486}\\ \hline
\text{10}&\text{呪術廻戦 28}&\text{集英社}&\text{37,149}\\ \hline
\end{array}
$$
👆 いい感じですね。
この 数値の列を rにするのは 数式内でやると長くなるので、貼り付け後に手作業で修正とすることをお勧めします。
縦線を消してもう少しクールな表に切り替えできるようにしたい & 名前付き関数として登録したい
上の表でもいいんですが、縦線があるとどうしても野暮ったいですよね。細やかな装飾は出来ないようですが、とりあえず線を消すだけでも
$$
\begin{array}{lllr}
\text{順位}&\text{タイトル}&\text{出版社}&\text{推定売上部数}\\ \hline
\text{1}&\text{呪術廻戦 30}&\text{集英社}&\text{210,029}\\ \hline
\text{2}&\text{呪術廻戦 29}&\text{集英社}&\text{203,445}\\ \hline
\text{3}&\text{地縛少年 花子くん 23}&\text{スクウェア・エニックス}&\text{69,230}\\ \hline
\text{4}&\text{ダンダダン 18}&\text{集英社}&\text{68,847}\\ \hline
\text{5}&\text{キングダム 74}&\text{集英社}&\text{47,652}\\ \hline
\text{6}&\text{SAKAMOTO DAYS 20}&\text{集英社}&\text{46,049}\\ \hline
\text{7}&\text{ブルーロック 32}&\text{講談社}&\text{43,199}\\ \hline
\text{8}&\text{【推しの子】 16}&\text{集英社}&\text{38,852}\\ \hline
\text{9}&\text{アオアシ 38}&\text{小学館}&\text{38,486}\\ \hline
\text{10}&\text{呪術廻戦 28}&\text{集英社}&\text{37,149}\\ \hline
\end{array}
$$
👆こんな感じでだいぶマシになります。(※数式の結果貼付け後にヘッダーの最後の lを手動で rとしています)
で、これを
こんな感じで 名前付き関数にしちゃいましょう。
第2引数を FALSE指定で 縦線と 一番上の横線を非表示とする note用表変換式
どんな式にすればよいか?
これはオマケなのと 長くなったんで、いきなり回答でいきましょう。
=LAMBDA(
array,vlmode,
ARRAYFORMULA(LET(
_n,CHAR(10),
c,COLUMNS(array),
_vl,IF(OR(vlmode="",vlmode=true),true,false),
header,"$$"&_n&"\begin{array}{"&REPT("|l",c)&"|} \hline"&_n,
header2,IF(_vl,header,REGEXREPLACE(header,"\||\\hline",)),
footer,"\end{array}"&_n&"$$",
x,SUBSTITUTE("\text{#}","#",array),
y,BYROW(x,LAMBDA(r,TEXTJOIN("&",true,r))),
z,TEXTJOIN("\\ \hline"&_n,false,y,""),
header2&z&footer
))
)(array,vlmode)
まず、名前付き関数化するにあたり 引数を
array (表の範囲)、vlmode(vartical Line Mode 縦線の指定) として LAMBDA関数を使います。
残念ながらGoogleスプレッドシートの名前付き関数は、第2引数を設定した場合、第1引数のみ指定(第2引数なし)はエラーとなってしまいます。
とりあえず、空白やtrue,false 以外の値を入れた場合でも動くように LET内で
として、第2引数が正しく true 指定、もしくは 空白の場合は true、それ以外は全て false としています。
この _vl と header を使って
このようにしています。
_vl が false、つまり縦線オフモードの場合は hederから | (パイプ)と \hline の文字を消去(空白に置換)としているのですが、| も \ も正規表現では特別な意味を持つメタ文字というやつなんで、「これはメタ文字じゃないよー」とエスケープ処理 する為に 頭に \をつけてるせいで複雑に見えますねw
最後に header2 とz とfooterを連結すればOK。
note用表変換数式を名前付き関数にする
LAMBDAの式が完成したら、この式を名前付き関数としましょう。
メニューの データ > 名前付き関数 で 「新しい関数を追加」として
このように入力して「次へ」
補足情報で
こんな感じで入力して「作成」を押せばOK
使ってみましょう!
設定した名前付き関数は 入力補助の対象になるんで、=TABLE と途中まで半角で関数名を入力すれば候補に出てきて
さらにこのように標準関数と同じように関数の説明も表示されます。
Googleスプレッドシートの表を noteに挿入できる表(Tex表記)に変換する関数が、GASなしで作成できました~。
note にどうしても表を入れたい時は便利かな
今回は他の方のnoteを参考に、noteに表を入れるやり方を学び、Googleスプレッドシートで GASを使わずに note用の表に変換する数式を作成してみました。
この方法で表をいれると、テキストとしてコピペできたり、検索でヒットしたりといったメリットがあります。
ただ、デザイン的な自由度は低めなんで 自分はどうしてもって時以外は使わないかも。
フォントサイズや余白の指定、あとセル内改行もできないっぽい・・・
$$
\begin{array}{|l|l|l|} \hline
\text{日付}&\text{掃除範囲}&\text{担当}\\ \hline
\text{1/13}&\text{トイレ}&\text{田中
佐藤}\\ \hline
\text{1/14}&\text{キッチン}&\text{山田
村上}\\ \hline
\text{1/15}&\text{お風呂}&\text{前田
三島}\\ \hline
\end{array}
$$
👆 2名の名前の間の改行が消されちゃう
でも、せっかくnoteも2年以上継続してるんで、しっかり機能を理解して活用していきたいと思いますw
次回はGoogleスプレッドシートの機能ネタをやろうかなと。