note表チェンジャー：１クリックで表が作れるツール

noteに表を作る方法はご存じですか？KaTexという形式（LaTex）を使用しています。これが結構面倒ですよね。

そこで、１クリックするだけで表を作成してくれる便利なツールを作成しました。

使い方

下のようにカンマ区切り（,）で表を作成します。

項目,数量,価格
りんご,5個,¥500
みかん,8個,¥640
バナナ,3本,¥450
合計,16個,¥1590

作成した表の範囲を指定します。

ブックマークレット（表変換）をクリックします。

ダイアログが表示され、クリップボードに表形式のデータが格納されました。あとは、表を挿入したい位置に貼り付けるだけでOKです。
貼り付けると…

このように、KaTex形式に変換されています。このまま保存して閉じると…

$$
\begin{array}{|l|l|l|} \hline \text{項目} & \text{数量} & \text{価格} \\ \hline \text{りんご} & \text{5} & \text{¥500} \\ \hline \text{みかん} & \text{8} & \text{¥640} \\ \hline \text{バナナ} & \text{3} & \text{¥450} \\ \hline \text{合計} & \text{16} & \text{¥1590} \\ \hline \end{array}
$$

noteに表形式で表示されていることがわかります。
簡単ですね。

表変換ツールの作り方は簡単！

それでは、この便利な表変換ツールの作り方をご紹介します。

必要な環境

対応OS

• Windows PC

• Mac

• ※スマートフォン、タブレットは非対応

対応ブラウザ

• Google Chrome（推奨）

• Safari（Mac）

• Microsoft Edge

• Firefox

事前準備：ブックマークレットを作成する

1. ブックマークバーの表示

Macの場合

• Safari：`Command + Shift + B`

• Chrome：`Command + Shift + B`

Windowsの場合

• Chrome：`Ctrl + Shift + B`

• Edge：`Ctrl + Shift + B`

2. ブックマークレットの作成

1. ブックマークバーの何もない部分で右クリック（Macは2本指でクリック）

2. 「ページを追加…」を選択

3. ブックマークの設定

1. 名前：「表変換」（お好みの名前に変更可能）

2. 後述のコードをコピーしてURLに貼り付け

保存して完成です。
つまりは、通常のブックマークのURLの中にJavascriptというプログラムコードを書き込むだけなんです。簡単ですね。

肝心のプログラムコードは記事を購入した人だけの特典ですので、興味があったらご購入下さいね。

表が作れるのは、とっても便利ですよ。

作れる表のサンプル

ここにあげたのはあくまでも一例です。作れる表は無限にありますので。

科目,月曜,火曜,水曜,木曜,金曜
1時間目,数学,国語,英語,理科,社会
2時間目,国語,理科,数学,英語,数学
3時間目,理科,英語,社会,国語,美術
4時間目,社会,体育,音楽,数学,英語

このように入力してから「表変換ツール」を使うと

$$
\begin{array}{|l|l|l|l|l|l|} \hline \text{科目} & \text{月曜} & \text{火曜} & \text{水曜} & \text{木曜} & \text{金曜} \\ \hline \text{1時間目} & \text{数学} & \text{国語} & \text{英語} & \text{理科} & \text{社会} \\ \hline \text{2時間目} & \text{国語} & \text{理科} & \text{数学} & \text{英語} & \text{数学} \\ \hline \text{3時間目} & \text{理科} & \text{英語} & \text{社会} & \text{国語} & \text{美術} \\ \hline \text{4時間目} & \text{社会} & \text{体育} & \text{音楽} & \text{数学} & \text{英語} \\ \hline \end{array}
$$

こうなります。

機能,製品A,製品B,製品C
価格,¥980,¥1200,¥1500
容量,500ml,700ml,1000ml
評価,4.2,4.5,4.1
在庫,12,8,15

上のように入力すると

$$
\begin{array}{|l|l|l|l|} \hline \text{機能} & \text{製品A} & \text{製品B} & \text{製品C} \\ \hline \text{価格} & \text{¥980} & \text{¥1200} & \text{¥1500} \\ \hline \text{容量} & \text{500ml} & \text{700ml} & \text{1000ml} \\ \hline \text{評価} & \text{4.2} & \text{4.5} & \text{4.1} \\ \hline \text{在庫} & \text{12} & \text{8} & \text{15} \\ \hline \end{array}
$$

こうなります。他にも

$$
\begin{array}{|l|l|l|l|} \hline \text{食事} & \text{量} & \text{カロリー} & \text{タンパク質} \\ \hline \text{朝食} & \text{1食} & \text{460} & \text{15} \\ \hline \text{昼食} & \text{1食} & \text{650} & \text{22} \\ \hline \text{夕食} & \text{1食} & \text{580} & \text{20} \\ \hline \text{間食} & \text{適量} & \text{200} & \text{5} \\ \hline \end{array}
$$

こんなのや

$$
\begin{array}{|l|l|l|l|l|} \hline \text{名前} & \text{数学} & \text{英語} & \text{国語} & \text{平均} \\ \hline \text{山田} & \text{85} & \text{92} & \text{78} & \text{85} \\ \hline \text{鈴木} & \text{92} & \text{88} & \text{85} & \text{88} \\ \hline \text{佐藤} & \text{78} & \text{95} & \text{92} & \text{88} \\ \hline \text{田中} & \text{88} & \text{82} & \text{90} & \text{87} \\ \hline \end{array}
$$

こういう表とか

$$
\begin{array}{|l|l|l|l|} \hline \text{タスク} & \text{担当者} & \text{期限} & \text{進捗} \\ \hline \text{企画} & \text{田中} & \text{6/1} & \text{100} \\ \hline \text{設計} & \text{鈴木} & \text{6/15} & \text{80} \\ \hline \text{開発} & \text{佐藤} & \text{7/1} & \text{45} \\ \hline \text{テスト} & \text{山田} & \text{7/15} & \text{20} \\ \hline \end{array}
$$

$$
\begin{array}{|l|l|l|l|} \hline \text{項目} & \text{予算} & \text{実績} & \text{差異} \\ \hline \text{広告} & \text{50000} & \text{48000} & \text{2000} \\ \hline \text{材料} & \text{30000} & \text{32000} & \text{-2000} \\ \hline \text{人件費} & \text{80000} & \text{79000} & \text{1000} \\ \hline \text{経費} & \text{20000} & \text{18000} & \text{2000} \\ \hline \end{array}
$$

$$
\begin{array}{|l|l|l|l|} \hline \text{時間} & \text{内容} & \text{場所} & \text{担当} \\ \hline \text{10:00} & \text{開会式} & \text{ホール} & \text{山田} \\ \hline \text{11:00} & \text{講演会} & \text{会議室A} & \text{鈴木} \\ \hline \text{13:00} & \text{昼食会} & \text{食堂} & \text{田中} \\ \hline \text{15:00} & \text{分科会} & \text{会議室B} & \text{佐藤} \\ \hline \end{array}
$$

あなたの作りたい表がこんなに簡単に作成できるようになります。
便利さが伝わりましたでしょうか。

注意点としては、CSV形式を意識した設計ですので「,」カンマを列の区切りとして認識します。そのため、「1,980」のように数字をカンマ区切りでは使うと列が分かれてしまいます。カンマは表の中に使えませんので、必要な時は表を作成してから書き加えるなどしてご対応ください。

👇サイトマップも作るツールがあります。

👇購入するか悩んでいるならこちらにご相談ください。

さあ、ここから下のプログラムコードを手に入れて、快適な表変換ツールをゲットしてnote作成に役立ててください。