【自動化ツール講座 #2】noteで表作成を秒速化するChrome拡張機能を公開！CSV → LaTeXだからテキスト修正が超簡単

毎度、rorosukeです。
noteで記事を書いていると、表を入れたくなる場面 ありませんか？

比較表、価格表、一覧表など、文章だけでは伝わりにくい内容を整理したいとき、表があるとかなり便利です。ところがnoteは全体として使いやすい一方で、表の作成まわりは少し弱い と感じます。

そこで今回は、CSVを選択するだけで表に変換できるGoogle Chrome拡張機能 を作りました。

先日、CSV形式のデータを、note用の表組みコードへ変換するWebアプリを公開しました。それがこちらです。

このWebアプリを使えば、CSVデータを、note上で表として表示できるLaTeXコードへ変換できます。表をよく使う人には、かなり便利なツールでした。

ただし、実際に使うには次の手順が必要でした。

1. 変換ページを開く

2. CSVデータを貼り付ける

3. 生成されたLaTeXコードをnoteへ貼り付ける

できること自体は便利なのですが、記事作成中に毎回この手順を挟むのは、やや手間です。

そこで今回、同じ機能を Google Chrome拡張機能版 として公開しました。

これを使えば、

1. note上のCSVデータを選択する

2. 拡張機能をクリックしてスタイルを選ぶ

これだけで、表組みコードへ変換できます。記事を書きながら、その場でサッと表を挿入できるようになりました。

このツールでできること

従来、noteで表を作るには、LaTeXコードを手打ちするか、別のツールで変換してから貼り付けるかのどちらかでした。

本ツールはそのフローを短縮します。note編集画面上のCSVテキストを選択した状態で拡張機能を起動するだけで、表のコードが自動挿入されます。コードを意識する必要はありません。

CSVテキスト

表に変換

$$
\begin{array}{|c|c|c|c|c|}
\\[-1.15em]\hline
\textbf{\textsf{\small{商品名}}} & \textbf{\textsf{\small{価格（税抜）}}} & \textbf{\textsf{\small{割引率}}} & \textbf{\textsf{\small{在庫数}}} & \textbf{\textsf{\small{評価}}} \\ \hline
\textbf{\textsf{\small{ノートPC A}}} & \textsf{\small{98000}} & \textsf{\small{10引き}} & \textsf{\small{15}} & \textsf{\small{★★★★☆}} \\ \hline
\textbf{\textsf{\small{タブレット B}}} & \textsf{\small{45000}} & \textsf{\small{5引き}} & \textsf{\small{32}} & \textsf{\small{★★★☆☆}} \\ \hline
\textbf{\textsf{\small{スマートフォン C}}} & \textsf{\small{78000}} & \textsf{\small{なし}} & \textsf{\small{8}} & \textsf{\small{★★★★★}} \\ \hline
\textbf{\textsf{\small{ワイヤレスイヤホン D}}} & \textsf{\small{12000}} & \textsf{\small{20引き}} & \textsf{\small{50}} & \textsf{\small{★★★☆☆}} \\ \hline
\textbf{\textsf{\small{スマートウォッチ E}}} & \textsf{\small{35000}} & \textsf{\small{15引き}} & \textsf{\small{0}} & \textsf{\small{★★★★☆}} \\ \hline
\end{array}
$$

インストール方法

次のChromeウェブストアの専用ページからインストールできます。

右上の「Chromeに追加」ボタンをクリックします。

「拡張機能を追加」を押します。

機能拡張ページに追加されていればインストール成功です。

インストール後、ツールバーにアイコンを固定しておくと便利です。「詳細」→「ツールバーに固定する」をオンにしてください。

使い方

この機能拡張を使って、テキストを表組するには次のようにします。

ステップ1：CSVテキストを選択

note編集画面に、CSVテキストを用意します。そして、全体を選択状態にします。

ステップ2：拡張機能アイコンをクリック

ツールバーの拡張機能アイコンをクリックすると、スタイル選択のポップアップが表示されます。「罫線すべてあり」などのスタイルを選択して

ステップ3：スタイルを選んで完了

スタイルを選ぶと、選択していたCSVテキストが即座にLaTeX表組みコードに置き換わり、表のプレビューが表示されます。

このまま記事を公開すると、所定の位置に表が表示されます。

$$
\begin{array}{|c|c|c|} \hline
\textsf{\small{商品名}} & \textsf{\small{価格}} & \textsf{\small{在庫}} \\ \hline
\textsf{\small{ノートPC}} & \textsf{\small{98000}} & \textsf{\small{15}} \\ \hline
\textsf{\small{タブレット}} & \textsf{\small{45000}} & \textsf{\small{32}} \\ \hline
\end{array}
$$

変換できる形式とスタイルオプション

本ツールは次の形式に対応しています。

CSV（カンマ区切り）
最も一般的な形式です。Excelやスプレッドシートからコピーしたデータがそのまま使えます。

LaTeX→CSV逆変換
すでにLaTeXコードで書いた表を選択している場合には、CSV形式に変換されます。

スタイルオプション

罫線：罫線すべてあり／罫線横のみ／罫線縦のみ／罫線枠のみ／罫線なし、の5種類から選べます。
次は、上が「罫線横のみ」、下が「罫線枠のみ」を指定した例です。

$$
\begin{array}{ccc} \hline
\textsf{\small{商品名}} & \textsf{\small{価格}} & \textsf{\small{在庫}} \\ \hline
\textsf{\small{ノートPC}} & \textsf{\small{98000}} & \textsf{\small{15}} \\ \hline
\textsf{\small{タブレット}} & \textsf{\small{45000}} & \textsf{\small{32}} \\ \hline
\end{array}
$$

$$
\begin{array}{|c c c|} \hline
\textsf{\small{商品名}} & \textsf{\small{価格}} & \textsf{\small{在庫}} \\
\textsf{\small{ノートPC}} & \textsf{\small{98000}} & \textsf{\small{15}} \\
\textsf{\small{タブレット}} & \textsf{\small{45000}} & \textsf{\small{32}} \\ \hline
\end{array}
$$

文字サイズ：普通／小／極小　の3種類です。列数が多い横長の表には「小」や「極小」が見やすくなります。次は極小表示です。

$$
\begin{array}{|c|c|c|} \hline
\textsf{\tiny{商品名}} & \textsf{\tiny{価格}} & \textsf{\tiny{在庫}} \\ \hline
\textsf{\tiny{ノートPC}} & \textsf{\tiny{98000}} & \textsf{\tiny{15}} \\ \hline
\textsf{\tiny{タブレット}} & \textsf{\tiny{45000}} & \textsf{\tiny{32}} \\ \hline
\end{array}
$$

1行目を太字：ヘッダー行を太字にします。
1列目を太字：項目列を太字にします。
次は両方指定したものです。

$$
\begin{array}{|c|c|c|} \hline
\textbf{\textsf{\small{商品名}}} & \textbf{\textsf{\small{価格}}} & \textbf{\textsf{\small{在庫}}} \\ \hline
\textbf{\textsf{\small{ノートPC}}} & \textsf{\small{98000}} & \textsf{\small{15}} \\ \hline
\textbf{\textsf{\small{タブレット}}} & \textsf{\small{45000}} & \textsf{\small{32}} \\ \hline
\end{array}
$$

その他の機能

セル内改行：セル内のテキストを ;;（セミコロン✕2） で区切ると、1つのセル内で改行できます。長い説明文をセルに収めたいときに使えます。
次は「ノート;;PC」「タブ;;レット」と指定して変換して例です。

$$
\begin{array}{|c|c|c|} \hline
\textsf{\small{商品名}} & \textsf{\small{価格}} & \textsf{\small{在庫}} \\ \hline
\begin{array}{c}\textsf{\small{ノート}} \\ \textsf{\small{PC}}\end{array} & \textsf{\small{98000}} & \textsf{\small{15}} \\ \hline
\begin{array}{c}\textsf{\small{タブ}} \\ \textsf{\small{レット}}\end{array} & \textsf{\small{45000}} & \textsf{\small{32}} \\ \hline
\end{array}
$$

Ctrl+Z で元に戻せます：変換後にやり直したい場合、通常の取り消し操作でCSVテキストに戻せます。

ショートカットキー：Alt+Shift+L で拡張機能を起動できます。

表の列揃えを変更するには

本ツールで生成する表は、デフォルトですべての列が中央揃えになっています。

これはLaTeXの \begin{array} 環境の列指定が c（center）になっているためです。生成されたコードを見ると、次のような部分があります。

\begin{array}{|c|c|c|} \hline

この c の部分が揃え方の指定です。列ごとに次の3種類から選べます。

$$
\begin{array}{cc} \hline
\textsf{\small{指定文字}} & \textsf{\small{揃え方}} \\ \hline
\textsf{\small{c}} & \textsf{\small{中央揃え（デフォルト）}} \\ \hline
\textsf{\small{l}} & \textsf{\small{左揃え}} \\ \hline
\textsf{\small{r}} & \textsf{\small{右揃え}} \\ \hline
\end{array}
$$

たとえば3列の表で「1列目を左揃え、2列目を中央揃え、3列目を右揃え」にしたい場合は、次のように書き換えます。

\begin{array}{|l|c|r|} \hline

実際の運用では、テキスト系の列は左揃え、数値系の列は右揃えにすると読みやすくなります。本ツールで生成したコードをnoteのエディタに貼り付けた後、この部分だけ手作業で書き換えてください。

使用できるページと権限について

本ツールは note.com および editor.note.com の編集画面のみで動作します。他のページではアイコンをクリックしても変換は実行されません。

免責について

本ツールの利用によって生じた損害・不利益について、筆者は責任を負いかねます。ご利用は自己責任でお願いいたします。またnoteおよびChrome APIの仕様変更により、動作しなくなる場合があることをご承知ください。

まとめ：バージョンアップ予告

そもそも、note上で選択している部分だけを対象にJavaスクリプトで変換できるのかなと思って始めてみましたが、意外と実現できるものですね。

もしかすると、選択直後「テキストを選択してください」と表示され、変換できないことがあるかもしれません。そのときには、再度選択し直して試してみてください。

それにしても、拡張機能にしてみたところ、すぐ呼び出して使えるので、やっぱり便利ですね。本記事も表だらけになってしまいました（笑）。

ちなみに、バージョンアップの予定があります。
内容としては、Excelデータのコピペで使えるようにするためのtab区切りデータへの対応、マークダウン形式のデータへの対応です。また、エスケープ文字への対応をしておきたいと考えています。

それから、上の罫線が出ない問題について、今回まだ未対応です。なぜかというと、対応していなくても罫線が出る場合と出ない場合があるようだからです。どうするべきか考え中です。

以上！

📎 深掘り解説：noteで表を作る4つの方法

本筋とは外れますが、noteで表を掲載する方法はいくつかあります。整理しておきます。

① LaTeX表組み

本ツールで作成するタイプです。テキストとして埋め込まれるため文字コピーが可能ですが、スマホでは横に長い表がスクロール表示になります。

② Excelの表を画像として貼り付ける

ExcelでCtrl+Cでコピーして、noteの編集画面でCtrl+Vで貼り付けると、表が画像として挿入されます。手軽さはNo.1ですが、テキストデータではないため文字コピーや検索には対応しません。表を更新するたびに再貼り付けが必要です。

③ スクリーンショットを画像として貼る

Excelやスプレッドシートをスクリーンショットしてnoteにアップロードします。②と同様に画像扱いになります。

④ Googleスプレッドシートの共有リンクを貼る

スプレッドシートを「リンクを知っている人に閲覧権限を付与」した状態で共有リンクをnoteに貼る方法です。リアルタイムで内容を更新できる点が他と大きく異なります。ただし外部リンクとして表示されるため、記事内にインラインで表示されるわけではありません。

4方式の比較

$$
\begin{array}{|c|c|c|c|c|} \hline
\textsf{\small{方法}} & \textsf{\small{テキストか}} & \textsf{\small{スマホ表示}} & \textsf{\small{更新のしやすさ}} & \textsf{\small{難易度}} \\ \hline
\textsf{\small{LaTeX表組み}} & \textsf{\small{✅}} & \textsf{\small{△ 横スクロール}} & \textsf{\small{要コード編集}} & \textsf{\small{中}} \\ \hline
\textsf{\small{Excel→画像貼付}} & \textsf{\small{❌ 画像}} & \textsf{\small{✅}} & \textsf{\small{再貼り付けが必要}} & \textsf{\small{低}} \\ \hline
\textsf{\small{スクリーンショット}} & \textsf{\small{❌ 画像}} & \textsf{\small{✅}} & \textsf{\small{再撮影が必要}} & \textsf{\small{低}} \\ \hline
\textsf{\small{スプレッドシート共有}} & \textsf{\small{△ 外部リンク}} & \textsf{\small{✅}} & \textsf{\small{✅ リアルタイム}} & \textsf{\small{中}} \\ \hline
\end{array}
$$

どれがいいかは一長一短です。
用途に応じて使い分けしているというのが実情です。

📎 そもそもLaTeXとは何か？

LaTeXは1970年代にDonald Knuthが開発した組版システムです。
もともとは学術論文や書籍の印刷用に作られたものです。
数式や表の記述に特化した記法を持ち、研究者やエンジニアの世界で標準的に使われてきました。

noteでLaTeXが使えるのは、LaTeXのエンジン本体ではなく、KaTeXというJavaScriptライブラリが記法だけを借用してブラウザ上で描画しているためです。$$ で囲んだ中にLaTeX記法を書くだけで表や数式が表示されます。

テキストとして記事に埋め込まれるため、読者が文字をコピーできる点、検索エンジンにも内容が伝わりやすい点がメリットです。

📎 なぜnoteのLaTeX表はスマホで横スクロールになるのか？

LaTeXの表の欠点として、横に長くなると横スクロールさせないと見えないことがあります。特に、スマホのような横が狭い画面だと、表がすぐ画面からはみ出してしまうので、レスポンシブ対応のHTMLページなどと比較すると、見やすさの点で劣ります。

したがって、中には「スマホで横スクロールになるのは困る。レスポンシブに対応できないの？」と疑問を持つ方もいるかもしれません。

しかし、結論から言うと構造的に不可能です。
理由は次のとおりです。

HTMLの表であれば、CSSで次のような指定ができます。

table { width: 100%; }
td { word-break: break-word; }

これにより、画面幅に応じて列幅が自動調整されます。

一方、noteのLaTeX表はKaTeXというJavaScriptライブラリがレンダリングしています。KaTeXはLaTeXの組版ルールに従い、各セルの幅と位置をピクセル単位で計算してSVGやHTMLとして出力します。この時点でレイアウトが固定されており、ブラウザのビューポート幅を認識しません。

さらに、noteのユーザー側からはKaTeXが生成したHTMLに対してCSSを当てる手段がないため、外側から制御することも不可能です。

つまり「LaTeXの表がスマホで横スクロールになる」のはnoteのバグでも本ツールの問題でもなく、KaTeXの設計仕様です。

対処の方法

横スクロールを完全に解消する方法はありませんが、次の工夫で問題を多少緩和することができます。

文字サイズを「小」または「極小」にする：
本ツールのスタイルオプションで文字サイズを小さくすると、表全体が縮小されてスマホでも収まりやすくなります。

列数を減らす：
スマホでの閲覧を意識するなら、最初から列数を絞った表設計にするのが最も確実です。

画像として貼る：
横に長い表は割り切って画像化するのも選択肢のひとつです。Excelやスプレッドシートで作成してスクリーンショットを貼れば、スマホでもピンチズームで見られます。

項目内改行を利用する：
本ツールでは ;; を指定することで、項目内での改行に対応しています。長い項目については、これを使って1行の文字数を減らしてみてください。

まとめると、「テキストとして埋め込みたい表はLaTeXで、横に長くなる表は画像で」という使い分けが、現時点での現実的な運用かと思われます。

✨ アップデートが届きました

もしよろしければ、続報をひとつご紹介します。

この記事で予告していたバージョンアップ、無事リリースできました。

TSV・Markdown対応、特殊文字の自動エスケープ、Excel連携など、かなり大きく育ちました。

気になる方はこちらもどうぞ。