noteの記事をSubstackに貼ると引用や箇条書きが崩れる問題、ブックマーク1つで解決する無料ツールを作りました
どうもこんにちは。
アスカネットの飛鳥です。
最近Substackを始めたんですが、
始めたと言っても、noteの記事をSubstackに転載しているだけなのですが。
で、転載しているときに一つ、地味に困っていることがありまして。
それが、noteで書いた記事をSubstackにコピペすると、書式がところどころ崩れる問題です。
箇条書きが、からの箇条書きが挿入して、一つズレてしまう。
引用がただの蓋っとな文字になってしまう
とか、多分まだいくつか合ったとは思いますが、ところどころ崩れてしまって、
「あれ？ さっきまでちゃんと整っていたのに・・・。」
最初にこれを目にしたとき、ちょっと、いや、かなりがっかりしました。
それで一回ずつ手直しするんですが、これがまた、めちゃくちゃ時間がかかるんですよね。
記事1本につき、箇条書きをやり直して、引用していたはずなので、そこも崩れているかな？
他に崩れているところはないかな？と
（これは自分の特殊な事情ですが、スクリーンリーダーを使いながら崩れていないかその箇所を想像しながら修正するって結構手間と時間もかかりますが、疲れます）
気付いたら30分くらい平気で溶けていきます。
私は本業（マッサージ師）を持ちながら発信しているので、可処分時間は1日2時間あればいいほう。
そんな中で30分が「コピペの手直し」に消えるのは、けっこう、痛いんですよね。
ということで、なんとかしようと思って、自分用のツールを作りました。
今回は、それを記事の終わりで無料配布する、というお話です。
なぜ、noteからSubstackへのコピペで書式が崩れるのか？
技術的な話を少しだけします。
（興味のない方は、このセクションは読み飛ばしていただいてOKです）
ざっくり言うと、原因は Substackのエディタが、noteのHTMLを理解できない からです。
もう少し噛み砕いて説明すると――
noteの記事は、ブラウザで見るとちゃんと太字や箇条書きが付いていますよね。
あれは内部的に、HTMLという言語で
「ここは太字」
「ここは箇条書き」と書かれています。
ただ、noteのHTMLには、note独自の「クラス名」や「ラッパー（包み紙）」がたくさん付いていて。
コピペすると、その独自仕様も丸ごとクリップボードに乗ってしまいます。
そしてSubstackのエディタは、ProseMirror（プロウズミラー）という仕組みで動いていて、これが結構お行儀の良い性格をしています。
知らないクラス名や、見たことのないラッパーが付いていると、「これはなんだ？ 危ないから捨てよう」と判断して、まるごと無視してしまうんです。
その結果、太字や箇条書きの意味（タグ）も一緒にゴミ箱行きになり、平文だけが残る、という現象が起こります。
つまり、「noteが悪い」「Substackが悪い」というより、両者の方言がかみ合っていなくて通じない のが原因のようです。
既存の対処法を試してみたんですが・・・
ネットで検索すると、いくつか対処法が出てきます。
「Markdownに書き出してから貼り付ける」
「Obsidianに一度コピーしてから、HTMLとしてエクスポートして貼り付ける」
「専用のオンライン変換サービスを使う」
どれも一応動くんですが、正直、毎回やるには邪魔くさがりやな自分としては手間がかかって続かなくなるんですよね。
「記事を書く」というメインの作業の前後に、変換作業がもう一つ挟まる。
これが地味にしんどい。
それに、外部の変換サービスを使うのは、なんというか、自分の発信フローの主導権を少し人に預けるような居心地の悪さがありまして。
そのサービスがある日突然有料化したり、サービス終了したりしたら、また同じ問題が戻ってきますし。
ということで、自分の手元で完結する、シンプルなツールを作ろうと決めました。
ブックマーク1つで完結する仕組みを作りました
作ったのは「ブックマークレット」と呼ばれるものです。
知らない方に一言で説明すると、クリックすると小さなプログラムが動く、特殊なブックマーク みたいな感じです。
普通のブックマークは「ページを開く」だけですが、ブックマークレットは「今開いているページに、ちょっとした処理を加える」ことができます。
仕組みはとてもシンプルで――
noteの記事を開く
ブックマークバーの「note→Substackコピー」ボタンをクリック
「コピー完了！」と出たら、Substackのエディタで貼り付けるだけ
ボタンの裏側では、noteのHTMLから「note独自の方言」を取り除き、Substackが理解できる素直なHTMLに整え直してから、クリップボードに乗せ直しています。
つまり、Substackのエディタにとって「読みやすいHTML」を、ブックマーク1つで方言の翻訳ツールみたいな感じ、というのが今回のツールの正体です。
使い方：セットアップは3分で終わります
ここから実際の使い方を説明します。
パソコンが苦手な方でも、3分あれば終わる手順です。
ステップ１：配布ページを開く
下のリンクから、配布ページ（HTMLファイル）を開いてください。
▼ 配布ページ
ChromeかEdgeで開くのがおすすめです。
ステップ２：ブックマークバーを表示する
ブックマークバーが画面の上に出ていない方は、表示しておいてください。
Windows：`Ctrl + Shift + B`
Mac：`Cmd + Shift + B`
ブラウザの上部に、ブックマークが横並びで表示されるバーが出てきます。
ステップ３：黒いボタンをブックマークバーにドラッグ
配布ページの中央に、「📋 note → Substack コピー」と書かれた黒いボタンがあります。
このボタンを マウスでつかんで、ブックマークバーの上にスライドさせて落とす だけです。
「📋 note → Substack コピー」というブックマークが、バーに追加されたら準備完了です。
ここまでが初回のセットアップ。
2回目からは、上の手順は不要です。
普段の使い方：クリック→貼り付け、それだけ
セットアップが終わったら、毎回の操作はシンプルです。
noteで自分の記事を開く
ブックマークバーの「📋 note → Substack コピー」をクリック
「✅ コピー完了！」とポップアップが出る
Substackのエディタを開いて `Ctrl+V`（Mac: `Cmd+V`）で貼り付け
これだけで、箇条書き・引用などが崩れずに移行できます。
私の体感では、30分かかっていた手直し作業が、10秒で終わるようになりました。
数字にするとちょっと盛っているように聞こえますが、本当にこれくらい違います・・・。
できないこと・注意点
正直に書いておきます。
このツールにも、いくつかできないことがあります。
埋め込みツイートやYouTubeは移行できません
noteで貼った埋め込み（XのポストやYouTube動画）は、Substack側に持っていけません。
これらは別途、Substack側で貼り直してください。
画像はURL参照になります
画像はnoteのサーバーから読み込まれる形になるので、Substack側で再アップロードしたほうが安全です。
（noteの画像URLが将来変わると、Substack側の記事から画像が消える可能性があるため）
動作確認はChromeとEdgeのみ
Firefoxでも動くはずですが、動作保証はChrome系列のみとさせてください。
Safariは試せていません。
noteの仕様変更で動かなくなることもあります
noteがサイトの内部構造を大きく変えたら、ツールも作り直しが必要になります。
そのときはまた更新版を配布する予定です。
視覚障害のある私が、このツールを作って感じたこと
少し個人的な話をします。
私は視野の中心が見えにくくなる視覚障害を持っています。
そのため、画面の細かい書式を一つひとつ目視で確認するのは、晴眼者の方が想像する以上に体力を使う作業です。
「コピペしたあと、書式が崩れていないか情報を聞きながら確認する」
「箇条書きの階層がちゃんと反映されているか確認する」
「画像の位置がずれていないか確認する」
晴眼者の方には数秒で済むこの作業が、私にとっては毎回、ちょっとした集中力テストになります。
ところがこのツールを作ってからは、貼り付けた後の確認作業の8割が不要になりました。
これは時間の節約というより、脳内の力を本当に大事な作業（次の記事のアイデア出しとか）に回せるようになったという感覚です。
道具を作るって、こういう目に見えない疲弊を減らすためにあるんだなぁと、改めて思いました。
このツール、無料で配布します
ということで、このブックマークレットを、無料で配布します。
下のリンクから配布ページを開いて、ボタンをブックマークバーにドラッグするだけで使えます。
▼ 配布ページ
note→Substack1クリックコピペ
note→Substack間のコピペで毎回書式の手直しに時間を取られている方は、よかったら使ってみてください。
合わなかったら、ブックマークから消すだけなので、気軽に試してもらえると思います。
おわりに
私自身、まだSubstackを始めて数日のひよっこです。
これから一緒に試行錯誤していく仲間として、こういう小さな道具を共有していけたらうれしいなと思っています。
もしこのツールが役に立ったら、Substackで読者登録、このツール便利だよと広めてもらえると、とても励みになります。
▼ 飛鳥のSubstack
https://substack.com/@asukanet
「実際に使ってみたよ」
「こういう機能もほしい」
といった感想は、コメント欄やSNSで気軽にいただけたら、とてもうれしいです。
なにかすこしでも参考になれば、うれしいです。
「スキ」やSNSでのシェアも、とても励みになります。