Electron / 中級 / 読了目安:15分
Notion:Electron アプリは書式付きテキストをどうコピーする?
REA で、Notion の報告にあるコピー経路をレンダラーから IPC、システムのクリップボードまで追跡。その調査方法を自分の Electron アプリに応用します。
このページの内容
テキストと HTML のデータ、プロセス境界、クリップボードへの書き込みを、ソースの根拠で結ぶ図。
必要なものREA、調査可能な Electron アプリ、その app.asar または展開済み JavaScript。ネイティブエンジンは不要です。
01. アプリ全体ではなく渡すデータから始める
太字のコピーは一つの操作に見えます。しかし Electron では、エディター、ページに公開するブリッジ、OS へ書き込む権限を持つプロセスが、別々のコードかもしれません。それらをつなぐのが今回の調査です。
公式の Notion 調査は Desktop 7.6.1 を対象としています。報告の経路では、テキストと HTML がクリップボード API と IPC の受信処理を通ります。グラフだけでは全経路を解決できず、ラッパーのコードを直接読んで不足するつながりを補いました。本記事はその方法を応用するもので、Notion の動作を新たに記録したものではありません。
REA で /absolute/path/app.asar を調べ、書式付きテキストのコピーだけを追跡してください。レンダラーの呼び出し、プリロードのブリッジ、IPC チャネル、受信ハンドラー、最終的なクリップボード書き込みを探します。各つながりのファイルとソース範囲を示し、動的な関係や欠けた関係は未解決と記してください。アプリは実行しないでください。02. 配布物の入口を見つける
アプリファイルのコピーで作業します。macOS の Electron パッケージでは app.asar は Contents/Resources にあることが多く、Windows・Linux では通常 resources フォルダーを使います。すべて同じ構成と思わず、パスを確認してください。
app.asar.unpacked が付属する場合は、アーカイブの隣に置きます。解析失敗、スキップされたファイル、検出したメインエントリーを確認してから全体図を判断してください。不完全な一覧では、必要な受信処理を見落とすことがあります。
npx -y [email protected] analyze-javascript-application "/absolute/path/app.asar" --json > app-analysis.json03. レンダラーからメインへの境界を越える
解析が返した contextBridge、clipboard、ipcRenderer.invoke の参照周辺を、実際のソースで確認するよう依頼します。ブリッジは汎用関数を公開し、チャネル名を変数で渡すことがあります。ラッパーのソースにあっても、グラフでチャネルの文字列を検索すると何も出ない場合があります。
元の Notion 報告では、パッケージ内の API オブジェクトを読み、notion:clipboard:write チャネルを特定してから、受信処理と Electron の clipboard.write を結び付けました。自分の版の対応する名前を記録し、別の版へ過去のオフセットを流用しないでください。
- レンダラー:どのイベントがコピーするデータを作るか?
- プリロード:どの公開 API が転送し、チャネルをどう渡すか?
- メインプロセス:どのハンドラーが受信し、送信元をどう確認するか?
- 書き込み先:どのテキスト・HTML・独自フィールドがクリップボード API に届くか?
04. 一つの書式機能をテストする
使い捨ての文書に、1語だけ太字の短文を作ってコピーします。書式付きエディターとプレーンテキストエディターへ貼り付け、両方の出力を記録してください。リンク、改行、非 ASCII 文字でも繰り返します。これにより、書式が保たれたか、プレーンテキストへフォールバックしたかを区別できます。
ソース上の経路が一致しても、OS がすべての形式を受け付けた証拠にはなりません。元の調査では別途キャッシュされたウェブモジュールも使っており、同じ版のデスクトップでコピー操作を記録したわけではありません。自分の報告でも区別してください。
確認した動作に基づき、自分のアプリ用にコピーするデータを作る小さな関数を書いてください。プレーンテキストと HTML を分け、太字、リンク、改行、Unicode のテストを追加します。説明できていない独自クリップボード形式を列挙し、Notion との完全互換は主張しないでください。05. 追跡がラッパーで止まったら
ラッパーの定義と呼び出し箇所を一緒に確認します。実行時にチャネル名を組み立てる場合は、固定文字列を作り上げず式を記録してください。ネイティブアドオンが書き込むなら、JavaScript の解析はその境界で終わります。
完成するのは、各段階の根拠を備えた短い経路と、実際に行った書式テストです。これだけでも、エディター全体を再現したと装うことなく、役立つコピー機能を再実装できます。
コマンドは REA 6.4.0 で確認済みです。対象固有の結果は、ファイルとプロバイダーに依存します。 元の資料と対象範囲を読む →