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

うっかり保存したnote下書きを探すブックマークレット【無料配布中】

    note生活を便利にしたい

    推しであるBTSバンタンの記事をnoteで書き始めてから、二年半。

    意外と長く続いているので、自分の環境を便利に整えるため少しずつChrome拡張機能を作っていましたが、拡張機能管理画面を開くのが面倒くさくなってきました。最近は、簡単なものはブックマークレットに移行しています。

    javascriptは昔触ってたので、AIに投げて、直してデバッグして……の壁打ちで作りました。便利な世の中になりましたね!
    今回は、作ったものを公開します。ご参考になれば幸いです。

    ブックマークレット用コード

    javascript:(async()=>{let ab=0,rs=[],ck=new Set(),lk=new Set();const d=document,ce=(t,s,c)=>{let e=d.createElement(t);if(s)e.style.cssText=s;if(c)e.innerHTML=c;return e},st=ce('div','position:fixed;top:20px;right:20px;z-index:99999;background:#2d2440;color:#fff;padding:16px;font:13px sans-serif;border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.4);width:260px'),msg=ce('div'),btnArea=ce('div','margin-top:10px;text-align:right;'),abBtn=ce('button','background:#9370db;color:#fff;border:none;padding:5px 10px;border-radius:4px;cursor:pointer','中断して結果を見る');abBtn.onclick=()=>{ab=1;abBtn.disabled=1;abBtn.style.background='#888';abBtn.textContent='中断処理中...';};btnArea.append(abBtn);st.append(msg,btnArea);d.body.append(st);const sm=t=>msg.innerHTML=t;let tEl=d.querySelector('p.shrink-0.text-sm.text-text-primary span');let tot=tEl?parseInt(tEl.textContent.replace(/,/g,''),10):0;const sty=ce('style','',%60img,iframe,svg,footer,header,aside,[data-testid="notes-page-layout-grid"]>div:first-child{display:none !important;}*{transition:none !important;animation:none !important;}%60);d.head.append(sty);try{let ph=0,smc=0;sm('自動スクロール開始...');while(!ab){window.scrollTo(0,d.body.scrollHeight);await new Promise(r=>setTimeout(r,250));let cds=d.querySelectorAll('div.min-w-0');for(let el of cds){if(ck.has(el))continue;ck.add(el);let a=el.querySelector('a[href*="/n/"], a[href*="/notes/"]');if(a){let k=(a.href.match(/\/(?:n|notes)\/([a-zA-Z0-9]+)/)||[])[1];if(k)lk.add(k);let h3=el.querySelector('h3');let tit=h3?h3.textContent.trim():a.textContent.replace(/[\r\n]+/g,'').trim();let txt=el.textContent;if(txt.includes('追加編集された未公開の下書き')&&txt.includes('公開中')){if(k&&!rs.find(x=>x.key===k))rs.push({key:k,t:tit||'タイトルなし',edit:%60https://note.com/notes/${k}/edit%60,pub:%60https://note.com/thracia776/n/${k}%60})}}}let pt=tot>0?%60${lk.size} / ${tot} 件 (${Math.floor((lk.size/tot)*100)}%)%60:%60約${lk.size}件%60;sm(%60スキャン中...<br>読込: ${pt}<br>発見: <span style="font-weight:bold;">${rs.length}</span> 件%60);let ch=d.documentElement.scrollHeight;if(ch===ph){smc++;if(smc>=5)break}else{smc=0;ph=ch}}sty.remove();st.remove();if(rs.length){let m=ce('div','position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:99999;background:#fff;color:#333;padding:20px;border-radius:8px;box-shadow:0 4px 24px rgba(0,0,0,.2);width:80%;max-width:600px;font:13px sans-serif;max-height:80vh;display:flex;flex-direction:column;',%60<h3 style="margin:0 0 15px;font-size:16px;color:#4b0082;">${ab?'中断':'完了'}:${rs.length}件発見</h3>%60);let lst=ce('div','flex:1;overflow-y:auto;border:1px solid #e6e6fa;padding:10px;margin-bottom:15px;border-radius:4px;background:#fdfbff;');rs.forEach(x=>{let row=ce('div','display:flex;justify-content:space-between;align-items:center;padding:8px;border-bottom:1px solid #f0e6fa;');let lnk=ce('span','font-weight:bold;font-size:13px;word-break:break-all;color:#4b0082;',x.t);let bGrp=ce('div','display:flex;gap:6px;flex-shrink:0;margin-left:10px;');let ob1=ce('button','background:#9370db;color:#fff;border:none;padding:4px 8px;border-radius:4px;cursor:pointer;font-size:11px;white-space:nowrap;','編集する');ob1.onclick=()=>window.open(x.edit,'_blank');let ob2=ce('button','background:#6a5acd;color:#fff;border:none;padding:4px 8px;border-radius:4px;cursor:pointer;font-size:11px;white-space:nowrap;','記事を開く');ob2.onclick=()=>window.open(x.pub,'_blank');bGrp.append(ob1,ob2);row.append(lnk,bGrp);lst.append(row);});let br=ce('div','display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;');let cb2=ce('button','background:#9370db;color:#fff;border:none;padding:8px 16px;border-radius:4px;cursor:pointer;','編集画面のURLをコピー');cb2.onclick=()=>{navigator.clipboard.writeText(rs.map(x=>x.edit).join('\n')).then(()=>{cb2.textContent='完了';setTimeout(()=>cb2.textContent='編集画面のURLをコピー',2000)})};let cb1=ce('button','background:#6a5acd;color:#fff;border:none;padding:8px 16px;border-radius:4px;cursor:pointer;','記事のURLをコピー');cb1.onclick=()=>{navigator.clipboard.writeText(rs.map(x=>x.pub).join('\n')).then(()=>{cb1.textContent='完了';setTimeout(()=>cb1.textContent='記事のURLをコピー',2000)})};let cl=ce('button','background:#000;color:#fff;border:none;padding:8px 16px;border-radius:4px;cursor:pointer;','閉じる');cl.onclick=()=>m.remove();br.append(cb2,cb1,cl);m.append(lst,br);d.body.append(m)}else{alert((ab?'中断':'完了')+'!該当なし')}}catch(e){sm('エラー: '+e.message);st.style.background='#b33030'}})();

    このブックマークレットで何ができるのか

    私のnote記事は下書き・公開併せて今1600本以上あるのですが、これだけあると振り返りがしづらくなってきます。

    中でも地味に面倒だったのが、
    「ちょっと更新しようと書き直したが、公開し忘れている」
    記事の存在でした。
    家事や仕事の合間に追記とかしてると、めっちゃ忘れるんですよ(*ノωノ)

    これは「自分の記事」一覧を見ればわかるので、ワンクリックですぐ確認できるようブックマークレットにしました。

    • 主な挙動

      • 「自分の記事」画面で起動すると自動スクロールが始まり、公開済みの記事を対象に検索します。

        • 公開済みなのに下書きがある(更新後の公開忘れ)記事があると、ピックアップし、最後にまとめて表示します。

        • 直接その記事を開いて修正する、もしくは該当する記事URLをコピーすることができます。

    使用例

    起動すると自動スクロールが始まり、画面に進捗が出ます。中断も可能です。

    画像
    この件数だと終わるのに5分くらいかかります

    終了すると、リストが出ます。別タブから直接編集画面へ行くこともできますし、多いならリストをコピーすることもできます。

    画像
    ぎゃー

    たまに、内容は更新してないんだけどうっかり編集ボタンを押しちゃって、下書きが出来てることがあります。
    以下みたいに、文字数が同じやつは大抵そのパターンです(*ノωノ)

    画像
    記事画面から「編集」を選んだ時出るやつ

    そういうのは、一回編集画面に入って、「閉じる>保存しない>下書きを破棄」で消せるので、数が多い場合は記事一覧から見た方が早いです。
    数が少ないとか心当たりがあるなら、直接編集画面へ。

    画像
    編集画面で「閉じる>保存しない>下書きを破棄」

    ブックマークレットとは

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

    • ブックマークとの違い

      • ブックマーク

        • 特定のページを開く

      • ブックマークレット

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

        • Chrome拡張機能より手軽

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

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

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

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

    4. 保存する

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

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

    カスタマイズ方法

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

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


    シリーズ記事

    関連記事

    この記事が参加している募集

     
     

    音色

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

    あなたへのおすすめ