メインコンテンツへスキップ
見出し画像

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,'&quot;')+'" 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つの投稿画面からそれぞれ投稿する形になってます。

    使用例

    上の記事で使ってみた場合。

    画像
    「準備完了」を押すとタグが記憶される
    画像
    好きな方を選んで投稿
    画像
    「1. Xを開く」
    画像
    「2. Threadsを開く」

    ブックマークレットとは

    ウェブブラウザのブックマーク(お気に入り)に、簡易プログラム(JavaScriptのコード)を登録し、クリック一つでそのコードを実行させる仕組みです。

    • ブックマークとの違い

      • ブックマーク

        • 特定のページを開く

      • ブックマークレット

        • 今開いているページに対して、簡単な加工や変更を施す

        • Chrome拡張機能より手軽

    ブックマークレットの使い方

    1. 適当なページをブックマークに保存する

    2. ブックマークレットをコピーする

    3. ブックマークの「編集」から、名前とURLを書き換える

    4. 保存する

    画像
    Chromeの場合はURL欄の☆を押して登録
    画像
    ブックマークした情報を編集

    使う時は、指定された画面で保存したブックマークをクリックするだけ!

    カスタマイズ方法

    このブックマークレットを普段使っている生成AIにコピペして、「こう修正したい」「こうしたい」と相談してください。
    あとはAIと試行錯誤してみてね。便利なものができたら、是非公開してください!( *´艸`)

    ※自分の環境でしかテストしてないので、困ったらAIに相談するか教えてください( ;∀;)


    シリーズ記事

    関連記事


     
     

    音色

     
     
    2023/11末、電撃的にBTSにハマる。 歌、観劇、Excel、翻訳とデータ作成が好きな子育て世代のオタク。ENTJ。目標はバンタンエバンジェリスト! 動画の表示切れ見つけたら教えていただけると助かります~💦 リンク集🔗https://potofu.me/thracia776

    あなたへのおすすめ