【個人開発】note 表インサーター v0.4 — Markdown 表を貼り付けて、書式込みの画像に【アップデート】
はじめに
Chrome Web Store で公開している note 表インサーターを、v0.4 に更新しました。
初版公開時からの流れはそのままです。ポップアップで表を組み、プレビューを見ながら PNG をコピーして note に貼る——ところまでの骨格は変わりません。v0.3 では 行・列のドラッグ並べ替え と テーマ選択の配置整理 を入れました。v0.4 では、その先の「表を作る前段階」の手間を減らすため、Markdown 形式の表を貼り付けて取り込む機能を強化しています。
GitHub や生成 AI、他の Markdown エディタからコピーした パイプ表 を、セルへ一つずつ転記し直す必要がなくなります。さらに、セル内の 太字・斜体・取り消し線・インラインコード・リンク といった記法も、プレビューと PNG 画像に反映されます。
v0.4 で強化したこと
拡張が求める権限は引き続き `clipboardWrite` のみです。
なぜ Markdown 表の取り込みを入れたか
最近は特に生成AIを利用して記事を執筆している人は多いと思います。ただ、生成AIが作成する記事はMarkdown形式が大半で、作成された記事の中には、Markdownの表が記載されていることが多々あるかと思います。
これまでは、そうした表を note 表インサーターへ載せるには、セルを一つずつコピー＆ペーストする必要がありました。列数が増えるほど、転記ミスや手間が積み上がります。
v0.4 では 「表の骨格をまとめて持ち込み、見た目はテーマ付きの画像として note に渡す」 という流れを一本化しました。取り込み後もセルは `textarea` のままなので、文言の微調整や行・列の並べ替えは従来どおりできます。
使い方
ツールバーのアイコンからポップアップを開く
「Markdown 表を貼り付け」 を展開する
テキストエリアに Markdown 表を貼り付ける
「取り込み」 をクリックする
プレビューで見た目を確認し、必要ならテーマを切り替える
「画像をクリップボードにコピー」 → note の編集画面で Ctrl+V／⌘+V
貼り付けだけでは表は上書きされません。誤操作を防ぐため、取り込みはボタン実行です。
貼り付け例
次のような GFM 形式の表を、そのまま貼り付けできます。
| プラン | 月額 | 備考 |
| --- | --- | --- |
| 無料 | **¥0** | 基本機能 |
| Pro | ~~¥980~~ **¥780** | 期間限定 |
| 法人 | `要問合せ` | [詳細](https://example.com) |取り込み後は、1 行目がヘッダー、2 行目以降が本文行として表グリッドに展開されます。`| --- | --- |` のような 区切り行 は自動でスキップされます。
表の前後に説明文が混ざっていても、先頭から見つかった連続した表行だけを読み取ります。空行に達するか、`|` を含まない行が現れた時点でブロックが終わります。
セル内の書式（v0.4 の要点）
取り込み時に記法を剥がすのではなく、セル文字列として保持し、プレビューと PNG で解釈して描画します。
テーマ（ライト／ダーク／グリーン／ブルー）を切り替えると、書式を含めた見た目もテーマに沿って変わります。プレビューと「画像をクリップボードにコピー」の結果は 同一の描画処理 です。
取り込み後も、これまでの操作はそのまま
Markdown から表の骨格を持ち込んだあとも、次の操作は v0.3 と同様に使えます。
各セルの 手編集（取り込み後に Markdown 記法を含んだまま編集してもプレビューに反映）
行・列のドラッグ並べ替え（行ハンドル／列ハンドルから操作）
列数・行数の増減（1〜7 列、ヘッダー＋本文最低 1 行）
4 種テーマでの配色切り替え
「下書きは Markdown、公開用の見た目は note 表インサーターで画像化」という使い分けもしやすくなっています。
知っておいてほしい制約
v0.4 の Markdown 対応は、実用的なサブセットです。完全な CommonMark / GFM 準拠ではありません。
先頭の表ブロックのみ取り込み（2 つ目以降の表は無視）
列数は最大 7。超える場合は先頭 7 列に切り詰め、ステータスで通知
ヘッダーだけ（本文行なし）の表は取り込み 失敗。既存の表データは上書きされない
セル内の エスケープパイプ `|` は未サポート（列がずれることがある）
セル内 画像、colspan / rowspan、HTML 表は対象外
リンクは 表示テキストのみ描画。PNG 上で URL をクリックすることはできない
取り込みに失敗した場合は、画面上部付近の ステータスメッセージ に理由が短く表示されます。
アップデートの入手方法
Chrome は通常、ストア経由で拡張を自動更新します。すぐ試したい場合は、*`*chrome://extensions` で開発者モードを開き、「更新」**から手動更新できることもあります（表示は Chrome の版により多少異なります）。
設計の方針は変わらない
ポップアップ内で編集と画像生成が完結する（閲覧中タブの内容を読みにいく前提ではない）
表を画像として一度確定し、note 側の表まわりの制約に頼らずレイアウトを載せる
アクセシビリティの観点では、重要な内容は本文テキストでも補足するとより多くの読者に届きやすい
さいごに
v0.4 は、「表の元データはすでに Markdown にある」 という執筆の現場を想定した更新です。転記の手間を減らしつつ、書式付きの比較表をテーマに合わせた画像として note に載せる——その一連の流れを、ポップアップ内で完結できるようにしました。
すでに v0.3 の並べ替え機能を使ってくださっている方にも、Markdown から入る入口が増えたことで、表づくり全体が前より速く感じられるはずです。
不具合や「こうできると続けて使う」といった具体的な声は、Chrome Web Store のレビューやお問い合わせ先、本記事へコメントいただけると、次の改善の判断材料になります。
note で表を使いたい皆さんの、ちょっとした執筆ストレスが減れば嬉しいです。
補足（第三者提供・非公式）
本拡張機能は 第三者が提供する Chrome 拡張であり、note 株式会社公式の製品ではありません。note へは、通常の画像貼り付けと同様の操作を想定しています。