noteの壁、壊しました。音声ユーザーが自作したChrome拡張
埋め込みを入れる。
音声を入れる。
画像を入れる。
noteで記事を書くとき、この3つの操作にいつも詰まっていた。
カーソルを合わせられない。入口にたどり着けない。
頑張ればできる、ではない。そもそも到達できない。
だから、Chrome拡張を自作した。
以前、こんな記事を書きました。
音声だけで操作すると、noteにもこんな壁がある！共同マガジン脱退をVoiceOverでやってみる
これは何とか操作は自力でできました。
しかし、今回はどうがんばっても無理でした。
😤 noteのエディターでつまずいた
今回つまずいたのは、noteのWeb版エディターです。
ショートカットも試しました。でも、時間がかかる以前に、そもそも挿入ポイントにカーソルを合わせられないことがありました。
特につらいのが、埋め込み・音声・画像。記事の体験を作る大事な部分ほど、そこで詰まる。
たとえばYouTubeの埋め込み。
「+ボタンを探す → メニューを開く → 埋め込みを選ぶ → URLを入力」
ボタンにはたどり着ける。でも、意図した位置に挿入できない。極端な話、最初か最後にしか入れられない。
ここで詰まるだけで、制作のスピードも気持ちも削られます。
💡 発想を変えた
公式エディターを作り変えるのではなく、公式エディターの上に、薄い補助レイヤを足す。
そのために作ったのが、自作Chrome拡張の Note Editor Helper です。
狙ったのは、派手な機能ではありません。
いまカーソルがある位置。そこを起点に、必要な挿入を最短で通す。
埋め込み、音声、画像。私が一番困っていた「挿入」を助けることだけに集中しました。
この拡張を使うと:
「Alt+↓で段落移動 → Alt+Iで挿入位置を設定 → +ボタンから埋め込み」
意図した位置に、確実に挿入できる。
🛠️ 拡張の特徴
この拡張でできることは、シンプルです。
ショートカットキー一覧:
| キー | 動作 |
|------|------|
| Alt + T | 目次を開く（見出し一覧にジャンプ） |
| Alt + ↑ | 前のブロックへ移動 |
| Alt + ↓ | 次のブロックへ移動 |
| Alt + I | 現在位置を挿入ポイントに設定 |
| Alt + / | ヘルプを表示 |
音声読み上げ対応:
移動するたびに「3/10 見出し: 発想を変えた」のように現在位置を読み上げ
目次を開くと、見出しだけを一覧表示
操作結果をすべて音声で通知
noteのエディターは ProseMirror というリッチテキストエディタを使っています。この拡張は、その上に「キーボードだけで段落を移動できる層」を追加しています。
🤖 コーディングAIに作らせた
今回使ったのは、コーディングに特化したAI。いわゆる「バイブコーディング」という手法です。
バイブコーディングについては、以前の記事で詳しく書いています。
コードが書けなくても大丈夫。AIと4行プロンプトで作る「点字学習ゲーム」
バイブコーディングとは、コードを自分で書かずに、AIに「こういうものが欲しい」と伝えて作らせる方法。プログラミングの知識がなくても、困りごとと理想を言葉にできれば、動くものが手に入る。
コードが書けなくても、検証とフィードバックができれば、自分専用のツールが作れる時代です。
📝 AIに渡した要件定義
以下が、実際にコーディングAIに渡したプロンプトです。このままコピーして渡せば、同じ拡張が作れます。
【1. 概要】
note.com のエディター（editor.note.com および note.com）で動作するChrome拡張を作成してください。
目的は、スクリーンリーダー（音声読み上げソフト）を使うユーザーが、キーボードだけでエディター内を移動し、任意の位置に挿入ポイントを設定できるようにすることです。
【2. 対象環境】
- Chrome拡張（Manifest V3）
- 動作サイト: editor.note.com/* および note.com/*
- noteのエディターは ProseMirror を使用しています
【3. 機能要件】
3-1. ブロック移動機能
- Alt + ↓: 次のブロック（段落、見出し、区切り線、画像など）へ移動
- Alt + ↑: 前のブロックへ移動
- 移動時、現在位置を「3/10 見出し: タイトル名」のように読み上げ
- 最初または最後のブロックに達したら、その旨を読み上げ
3-2. 目次機能
- Alt + T: 見出し（h2）の一覧をダイアログで表示
- ↑↓キーで選択、Enterで該当見出しへ移動
- Iキーで選択中の見出しの後に挿入位置を設定
- Escでダイアログを閉じる
- 選択中の見出しを読み上げ
3-3. 挿入位置設定機能
- Alt + I: 現在のブロックの末尾を挿入ポイントとして設定
- 設定後、「挿入位置を設定: ○○ の後」と読み上げ
- ProseMirrorがカーソル位置を認識できるよう、マウスイベントのシミュレートを行う
3-4. ヘルプ機能
- Alt + /: ショートカットキー一覧をalertで表示
【4. アクセシビリティ要件】
- すべての操作結果を aria-live="assertive" で読み上げ
- ダイアログには role="dialog" と aria-label を設定
- リストボックスには role="listbox" と aria-selected を設定
- フォーカス管理を適切に行い、ダイアログを閉じたらエディターにフォーカスを戻す
【5. セキュリティ要件】
- 外部サーバーへの通信は一切行わない
- ユーザーの入力内容や記事データを収集・送信しない
- localStorage や cookies へのアクセスは行わない
- DOM操作は note.com ドメイン内のみに限定（manifest.jsonのmatchesで制限）
- Content Security Policy を遵守
- eval() や new Function() は使用しない
- innerHTMLへのユーザー入力の代入は行わない（XSS対策）
- 外部ライブラリは読み込まない（依存関係を持たない）
【6. ファイル構成】
- manifest.json: 拡張の設定ファイル
- content.js: メインの処理（キーボードイベント、DOM操作、読み上げ）
- styles.css: 読み上げ用要素の非表示スタイル
【7. manifest.json の要件】
- manifest_version: 3
- content_scripts で note.com と editor.note.com にマッチ
- permissions は最小限（特別な権限は不要）
- アイコンは48pxと128pxを用意
【8. 実装上の注意】
- ProseMirrorエディターは .ProseMirror クラスで取得
- ブロック要素は h2, p, hr, figure をセレクタで取得
- カーソル移動は Selection API と Range API を使用
- ProseMirrorにカーソル位置を認識させるため、mousedown/mouseup イベントをシミュレート
- 目次ダイアログが開いているときは、他のショートカットを無効化📦 拡張の構成ファイル
Chrome拡張は3つのファイルで構成されます。
| ファイル | 役割 |
|----------|------|
| manifest.json | 拡張の名前、バージョン、動作するサイト、読み込むファイルを指定 |
| content.js | キーボード操作を受け取り、エディター内を移動する処理 |
| styles.css | 読み上げ用の非表示要素のスタイル |
これらを同じフォルダに入れて、Chromeに読み込ませます。
📥 Chromeにインポートする方法
この拡張はChrome Web Storeに公開していません。「デベロッパーモード」で手動インストールします。
手順:
3つのファイルを同じフォルダに入れる
Chromeで `chrome://extensions` を開く
画面右上の「デベロッパーモード」をオンにする
「パッケージ化されていない拡張機能を読み込む」をクリック
ファイルが入ったフォルダを選択
完了。noteのエディターを開くと自動で有効になる
注意:
デスクトップ版Chrome限定です
Chromeを更新すると、まれに拡張が無効になることがあります（再度有効化すればOK）
🎁 配布について
もし同じ悩みがあって、試してみたい方がいれば、拡張ファイルの提供も考えています。コメントで意思表示をいただければ、受け渡し方法を案内します。
※デスクトップ版Chrome限定。環境差で動かない場合もあります。動作保証はできませんが、同じ壁にぶつかっている方の助けになれば。
