見出し画像

【個人開発】noteに表を、貼り付けられる拡張機能を Chrome Web Store に公開した話

まるしょー｜ITニュース分析配信

はじめに

note の記事に、行と列で整理した表を載せたい。きれいな罫線と背景で、一度で読者に伝わる形にしたい。
でもスプレッドシートを開いてキャプチャしたり、HTML の表をいじったりするのは、ちょっと面倒。

そんなときに、ツールバーのアイコンを一回クリックして、セルに文字を入れていけば、その場でプレビューができ、PNG 画像をコピーして note の記事にそのまま貼れる——そんな Chrome 拡張機能を Chrome Web Store で公開しました。

製品名は note 表インサーター（英語名: note Table Inserter）です。

v0.3の詳細記事

v0.4の詳細記事

作ったきっかけ

note の仕様は、基本が Markdown 形式です。ローカルのエディタ等で執筆した Markdown の記事を、note の編集画面に貼り付ければ見出しやリストなどはキレイな見た目に変わってくれます。

ところが、表だけはその流れに乗っていません。Markdown で書いた表を貼っても、他の要素のように表組みとしてキレイに扱われない。私自身、こういった壁に何度もぶつかりました。

ほかの人がどうしているかを調べてみると、TeX 表記のように記号で組み立てる方法なども分かったのですが、自分の執筆のリズムにはしっくりきませんでした。外部サービスやデザインツールに出ていく手もありますが、「note で書く文脈」から離れすぎる気もする。なら、自分が毎日触る前提で動くツールを自分で用意しよう——そう決めたのが出発点です。

なぜ Chrome 拡張機能にしたか

形式として Chrome 拡張機能にした理由は、執筆リズムに合わせたからです。

  • 私は note を 基本的にパソコンで執筆しており、作業のたびに Chrome を開いている

  • 表のために いちいち別アプリを起動するのは、地味なのに負担が大きい

ブラウザはもともと開いている。だったら ツールバーからワンクリックで出るポップアップに表編集を載せた方が、手が止まりません。

そこで取った形が、「ポップアップ内だけで表を組み、完成形を画像として note に渡す」です。

  • 閲覧中の Web ページの内容を読みにいく必要はない（activeTabも宣言していません）

  • 編集と Canvas 描画は 拡張のポップアップ内 で完結

  • ユーザーがボタンを押したときだけ、clipboardWrite権限で PNG をクリップボードへ書き込む

運用も説明もしやすい形に寄せています。

こんな人におすすめ

  • note で表形式に整理した内容— 一覧、スケジュール、要点のまとめなど —を載せたいクリエイター

  • スプレッドシートやスクショ切り取りに戻るのが億劫な方

  • 手元のブラウザだけで完結させたい方

画面イメージ

ポップアップは幅約 480px で、上から順に「表の編集」「テーマ」「プレビュー」「コピー」 と進められるレイアウトです。

メイン画面

表の編集

  • 列数: 1 列〜7 列（マイナス／プラスで変更）

  • 行: 「行を追加」で本文行を増やせます。「最終行を削除」で末尾を削除できますが、ヘッダー＋本文 1 行は必ず残るようになっています

  • セル: 1 行目はヘッダー、2 行目以降は本文。入力すると プレビューがリアルタイムで更新されます

行数「４」、列数「４」のプレビュー

テーマ

次の 4 種から選べます（プレビューとコピーする画像の見た目に反映）。

ライト（初期）
ダーク
グリーン
ブルー

日本語は Noto Sans JP 系 を Canvas 描画で指定し、読みやすさを意識しています。

プレビューとコピー

  • 表全体に 角丸、ヘッダーと本文で 背景色を分離、本文は 交互の行背景 で視認性を補います

  • 高解像度ディスプレイでは devicePixelRatio に合わせて描画解像度を上げ、ぼやけにくくしています

  • 「画像をクリップボードにコピー」 で PNG を書き込み、note の編集画面で Ctrl+V（Windows）／⌘+V（macOS） すれば画像として貼れます

  • 環境によってクリップボード API が使えない場合は、note-table.png のダウンロード に切り替わる想定で、ドラッグ＆ドロップで note に渡せます

主な機能

1. セルへの直接入力とライブプレビュー

表にしたい内容を、セルに入力・貼り付けながら見た目を整えられます。表そのものは Canvas に描画されるため、note 標準の表機能に依存せず、意図したレイアウトで画像化できます。

2. テーマ切り替え

記事のトーンに合わせて配色を選べます。落ち着いた見え方ならダーク、明るい記事ならグリーンやブルーといったように、用途に合わせて変えられます。

3. PNG のクリップボードコピー

ワンクリックでクリップボードへ。note では通常の画像貼り付けと同じ操作です。

4. 権限とプライバシーの前面押し出し

マニフェストで求めるのは clipboardWrite のみです。表の内容を開発者サーバーへ送る通常利用フローは想定していません（編集と画像生成はポップアップ内）。

使い方はシンプル

  1. Chrome Web Store から note 表インサーター をインストール

  2. ツールバーのアイコンでポップアップを開く

  3. 列・行を調整し、セルに載せたい文言を入力

  4. テーマを選んでプレビュー確認

  5. 「画像をクリップボードにコピー」

  6. note の記事編集画面でカーソルを置き、Ctrl+V／⌘+V

コピー後は、画面上に 短いステータスメッセージ がしばらく表示されます。

ステータスメッセージ

設計のこだわり

「ポップアップで完結」

表を組み立てる操作を、別タブや別アプリに逃がさないようにしました。記事執筆のフローにそのまま乗せやすいことが目的です。

画像として固定する意味

note 側のエディタ変更や、読者の端末幅の違いで表の崩れ方が変わる問題に、「画像として一度確定させる」 という答えを出しています。アクセシビリティの観点では、表に書いた重要な内容を 本文テキストでも補足する とより多くの読者に届きやすくなります（ストアの説明でも同様の注意を書いています）。

今後の方針

公開は一区切りであり、現行機能についてのご意見・改善要望を広く集めたい段階です。使ってみて困った点、「こうだったら続けて使う」といった具体があると、とても助かります。

ビジネスモデルは、無料で使える範囲に加え、一部を有料で制限解除するフリーミアムを想定しています。いつから・いくら・どこを境界にするかは、まだ決め切れていません。

制限解除の候補となる機能はいくつか頭にあり、そのうち ひとつは自分用にローカル環境でだけ試しているものがあります。内容の詳細は今回の記事では伏せます。ストアで公開するか、どういう形にするかも、いただいた声と相談しながら決めたいです。

上記以外の制限解除や付加機能は、これからいただく意見を材料に、優先順位をつけて少しずつ形にしていくつもりです。

技術スタック

  • Google Chrome 拡張機能（Manifest V3）

  • ポップアップ UI（HTML / CSS / JavaScript）

  • Canvas API による表の描画、`clipboardWrite` による PNG 出力

  • フォントは Google Fonts（Noto Sans JP 等） を利用（初回やキャッシュ状況によりネットワークに触れる場合があります）

こんな場面で活躍します

  • 週次・イベントの予定表や、項目を列に並べた一覧を、記事のデザインに合う配色で載せたい

  • 用語の対応表やチェック項目の表などを、スマホでも極端に崩れにくい形で見せたい

  • 行や列を増減しながら、プレビューで詰めてからそのまま画像にしたい

さいごに

「note で表を載せる」うちの、組み立て・プレビュー・画像として貼り付けまでを軽くしたつもりです。α 公開の段階のため、環境によってクリップボードまわりの挙動差はあり得ますが、フォールバックで PNG を取れるようにしてあります。

気になった方は、Chrome Web Store からインストールして試してみてください。現行機能に対する率直な感想や不具合報告も、ストアレビューやお問い合わせ先、本記事へコメントいただけると、次の改善やフリーミアム設計の判断材料になります。

note で表を使いたい皆さんの、ちょっとした執筆ストレスが減れば嬉しいです。

補足（第三者提供・非公式）

本拡張機能は 第三者が提供する Chrome 拡張であり、note 株式会社公式の製品ではありません。note へは、通常の画像貼り付けと同様の操作を想定しています。

いいなと思ったら応援しよう！