noteとSubstackの記事をほぼ崩さずにコピペできる拡張を作りました
note↔︎substackでの記事生成を楽にするChrome拡張
こんにちは。ほったりたです
Substackとnoteを両方やっていると、
記事を書く際に、一度は
これコピーしたいよね
という考えをしたことがあるかと思います
実際、
僕がいつもお世話になっている
しものんさんのSubstackでもお悩みとして上がっていました
なので、ちょっと作ってみました。無料でツールも配布します
※SubStackに直接ファイルを貼れなかったのでnoteでファイル自体は配布しています）
※しものんさんのSubstackはこちら⇩
この拡張でできること
※最後のnoteからXの記事へのコピペは僕がXをそこまでやっておらず
サブスク会員ではないため、実際にしものんさんに試していただき、
本ツールでnoteの記事をコピーし、Xでペーストすることはできたそうです。
ただし、Substackの記事をコピーすると体裁が崩れているのを確認いただきました。
実際のツール
拡張機能を有効にすると、Substackとnoteの画面でボタンが出てきます。
ボタンは画面の 右はじ（上下の中央あたり） に縦に並びます。
投稿ボタンなどと重なって邪魔なときは、
いちばん上の 「ツールを隠す」 で畳めます
（畳んだあとは「コピー補助」と出るので、押せば元に戻ります）。
コピーの向きによる「きれいさ」の違い
このツールは note と Substack の間でコピーできますが、
向きによって仕上がりの精度が変わります。
note → Substack：比較的きれいにコピーできます。 note 側は装飾がシンプルなので、Substack が素直に受け取れます。
Substack → note：このツールがいちばん作り込んだ方向です。Substack はテキスト装飾がかなり多く、note 側がそのまま受け取れないため、内部で特殊な処理（テキストと画像を分けて順番に流し込む等）をして再現しています。動きますが、仕上がりは必ず目視で確認し、崩れた所だけ手直ししてください。
X（旧Twitter）について
先ほども書きましたが、このツールは X には正式には対応していません
（note ⇔ Substack 専用）。
参考情報として：
note → X：note ページで拡張のコピー機能を使ってコピーし、それを X に普通に貼り付ければコピーできたという報告はあります。
X からのコピー：動作確認ができていないため、未検証です。
ここから導入方法です
準備するもの
Google Chrome
配布する note-substack-copytool.zip
（Substackで直接ファイルを貼れなかったのでnote記事でダウンロードを願いします）
ステップ1：拡張機能を Chrome に入れる
最初の1回だけ必要な作業です。
① note-substack-copytool.zip を、
好きな場所に展開する（書類やデスクトップなど、どこでもいいです）
② Chrome で chrome://extensions を開く
（以下のように URL のところに入力すると良いです）
③ 画面右上の 「デベロッパーモード」 をオンにする
④ 左上に出てくる 「パッケージ化されていない拡張機能を読み込む」 をクリック
⑤ 展開した note-substack-copytool フォルダ
（manifest.json が入っているフォルダ）を選ぶ
⑥ 拡張一覧に 「note ⇔ Substack コピー」 が表示されれば完了
ファイル更新がある場合
今後、僕がこの仕組みを拡張した場合
ファイルをダウンロードし、このフォルダを上書きすると良いです
（詳しくはまたその時になったら更新の仕方を書きます）
chrome://extensions でこの拡張の 「再読み込み」 を押し、
開いていた note / Substack のタブも忘れずに再読み込みしてください。
これをしないと古いまま動きます。
ステップ2：Substack の記事を note へコピーする（画像込み）
Substack で書いた記事を note へコピーするケース。
まずは動画です（テキストでの説明は動画の後にあります）
2-1. Substack 側でコピーする
① Substack の記事ページを開く（記事を書く編集画面でも、公開済みの記事ページでもOK）
② 画面右はじのボタンから 「noteへコピー（画像込み）」 を押す
③ 右はじに 「キュー作成完了（テキスト◯ / 画像◯）」 と表示されれば成功
2-2. note 側で流し込む
④ note の編集画面を開く（新規記事でも、書きかけの記事でもOK）
⑤ 本文エリアをクリックして、カーソルを置く（ここを忘れると「本文エリアをクリックしてから押してください」と注意が出ます）
⑥ 画面右はじの 「順番に流し込む」 を押す
⑦ テキストと画像が、上から順番に流し込まれていきます
2-3. 仕上がりを確認する
⑧ 上から読み直して、崩れているところだけ手で直す（画像の位置、見出しのレベル、空行のあきぐあい などをチェック）
2-4. URLを調整する
YoutubeのリンクやThreads、Substackのリンクは一度URLテキストとして変換されてしまうため調整が必要です
URLにカーソルを合わせてEnterキーを押せばカード形式になります
これでコピー完了です。
ステップ3：note の記事を Substack へコピーする
逆向き、note の記事を Substack へコピーするケースです。
まずは動画です（テキストでの説明は動画の後にあります）
こっちの方が簡単です
① note の公開記事ページを開く
② 画面右はじの 「Substackへコピー」 を押す
③ Substack の編集画面を開き、本文エリアをクリックしてカーソルを置く
④ 画面右はじの 「ここに貼り付け」 を押す
⑤ 仕上がりを確認し、崩れた箇所を手で直す
うまくいかないとき
注意点
個人利用専用の補助ツールです。
自分が編集権限を持つ記事で使ってください。自動で流し込んだあとは、
必ず目で仕上がりを確認してください。
エディタの仕様上、まれに改行や画像の位置がずれます。記事の中の
X（旧Twitter）・YouTube・Substack記事 などの埋め込みは、
いったん URL に変換して渡します。
多くは note 側で自動的に埋め込みに復元されますが、
復元されない場合は URL リンクのまま残ります。独自ドメインで運用している Substack の
編集画面には対応していません
（substack.com / *.substack.com のみ）。note / Substack 側のページ構造が変わると、
ボタンが出なくなることがあります。
そのときは拡張の更新版が必要です。
免責事項
このツールは 無保証 で提供されます。
動作の正確性・完全性は保証しません。このツールの使用、または使用できないことによって生じたいかなる損害（記事の崩れ、内容の欠落や消失、公開上のトラブル等）についても、作者は一切の責任を負いません。自己責任でご利用ください。
note / Substack 側の仕様変更により、
予告なく動作しなくなることがあります。流し込み・貼り付けの結果は、
公開前に必ずご自身で確認してください。note / Substack 各サービスの利用規約は、
利用者ご自身の責任で遵守してください。
さいごに
まずはnoteとSubstackで作ってみました。
今後拡張も含めて行なっていく予定です。
Xについては現時点で僕自身が検証できないので、
後々Xのサブスク登録して追加で開発しようとは思っています。
本記事がお役に立ちましたら、ほったりたやはっきんぐパパについても応援いただけると嬉しいです
ほったりたのSubstackはこちら⇩
はっきんぐパパのnoteはこちら⇩
https://note.com/hackingpapa