
note記事を複数SNSにまとめ投稿するためのブックマークレット【無料配布中】
note生活を便利にしたい
推しであるBTSの記事をnoteで書き始めてから、二年半。
意外と長く続いているので、自分の環境を便利に整えるため少しずつChrome拡張機能を作っていましたが、拡張機能管理画面を開くのが面倒くさくなってきました。最近は、簡単なものはブックマークレットに移行しています。
javascriptは昔触ってたので、AIに投げて、直してデバッグして……の壁打ちで作りました。便利な世の中になりましたね!
今回は、作ったものを公開します。ご参考になれば幸いです。
ブックマークレット用コード
javascript:(function(){const old=document.getElementById('sns-share-modal');if(old)old.remove();const t=(document.querySelector('meta[property="og:title"]')?.content||document.title).replace(/|note.*$/,'').trim(),u=(document.querySelector('link[rel="canonical"]')?.href||location.href).split('?')[0]+'?sub_rt=share_pw';const savedTags=localStorage.getItem('sns_share_custom_tags')??'#BTS #방탄소년단';const m=document.createElement('div');m.id='sns-share-modal';m.style='position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:999999;display:flex;align-items:center;justify-content:center;font-family:sans-serif;';const b=document.createElement('div');b.style='background:#fff;padding:20px;border-radius:8px;width:90%;max-width:500px;box-shadow:0 4px 12px rgba(0,0,0,0.15);';b.innerHTML='<div style="font-size:14px;color:#333;margin-bottom:6px;">投稿コメントを入力(省略可):</div><textarea id="sns-comment-box" rows="4" style="width:100%;box-sizing:border-box;padding:8px;font-size:14px;border:1px solid #ccc;border-radius:4px;resize:vertical;margin-bottom:12px;"></textarea><div style="font-size:14px;color:#333;margin-bottom:6px;">タグ(編集・追加・省略可):</div><input id="sns-tags-box" type="text" value="'+savedTags.replace(/"/g,'"')+'" style="width:100%;box-sizing:border-box;padding:8px;font-size:14px;border:1px solid #ccc;border-radius:4px;"><div id="sns-btn-area" style="margin-top:16px;display:flex;justify-content:flex-end;gap:8px;"><button id="sns-confirm-btn" style="padding:6px 14px;background:#24292f;color:#fff;border:none;border-radius:4px;cursor:pointer;">準備完了</button><button id="sns-cancel-btn" style="padding:6px 14px;background:#eee;border:none;border-radius:4px;cursor:pointer;">閉じる</button></div>';m.appendChild(b);document.body.appendChild(m);const tx=document.getElementById('sns-comment-box');const tg=document.getElementById('sns-tags-box');tx.focus();document.getElementById('sns-cancel-btn').onclick=()=>m.remove();document.getElementById('sns-confirm-btn').onclick=()=>{const c=tx.value.trim();const customTags=tg.value.trim();localStorage.setItem('sns_share_custom_tags',customTags);const parts=[c,t,customTags,u].filter(Boolean);const p=parts.join('\n');const xu='https://twitter.com/intent/tweet?text='+encodeURIComponent(p);const tu='https://www.threads.net/intent/post?text='+encodeURIComponent(p);const ba=document.getElementById('sns-btn-area');ba.innerHTML='<a href="'+xu+'" target="_blank" rel="noopener noreferrer" style="display:inline-block;padding:8px 16px;background:#000;color:#fff;text-decoration:none;border-radius:4px;font-size:13px;">1. Xを開く</a><a href="'+tu+'" target="_blank" rel="noopener noreferrer" style="display:inline-block;padding:8px 16px;background:#101010;color:#fff;text-decoration:none;border-radius:4px;font-size:13px;">2. Threadsを開く</a><button id="sns-close-btn" style="padding:6px 12px;background:#eee;border:none;border-radius:4px;cursor:pointer;">閉じる</button>';document.getElementById('sns-close-btn').onclick=()=>m.remove();};})();このブックマークレットで何ができるのか
公開済みnote記事を、同じ文面でXとThreadsに投稿します。
元々は、Xに投稿する時に毎回「自分のメンションを消して、推し活用のタグをつける」のが面倒で作りました。
実験用にThreadsへの分岐をつけています。私そっちは読む専門だけど。
主な挙動
公開されているnote記事が対象です。
投稿コメントとタグを設定できます(省略してもOK)。
タグの初期値は「#BTS #방탄소년단」ですが、変更したら記憶されます。
自分がログインしているXまたはThreadsに投稿できます。
「完了」を押せば終了です。
同時投稿すると、プラットフォームごとの文字数制限や使いたいタグの修正ができなかったので、1つの投稿画面からそれぞれ投稿する形になってます。
使用例
上の記事で使ってみた場合。




ブックマークレットとは
ウェブブラウザのブックマーク(お気に入り)に、簡易プログラム(JavaScriptのコード)を登録し、クリック一つでそのコードを実行させる仕組みです。
ブックマークとの違い
ブックマーク
特定のページを開く
ブックマークレット
今開いているページに対して、簡単な加工や変更を施す
Chrome拡張機能より手軽
ブックマークレットの使い方
適当なページをブックマークに保存する
ブックマークレットをコピーする
ブックマークの「編集」から、名前とURLを書き換える
保存する


使う時は、指定された画面で保存したブックマークをクリックするだけ!
カスタマイズ方法
このブックマークレットを普段使っている生成AIにコピペして、「こう修正したい」「こうしたい」と相談してください。
あとはAIと試行錯誤してみてね。便利なものができたら、是非公開してください!( *´艸`)
※自分の環境でしかテストしてないので、困ったらAIに相談するか教えてください( ;∀;)