
note記事をAIが読みやすい形でコピーするブックマークレット【無料配布中】
【追記:2026/11/7】目次の見出し構造と出典内URL表示を修正し、その他微調整。
note生活を便利にしたい
推しであるBTSの記事をnoteで書き始めてから、二年半。
意外と長く続いているので、自分の環境を便利に整えるため少しずつChrome拡張機能を作っていましたが、拡張機能管理画面を開くのが面倒くさくなってきました。最近は、簡単なものはブックマークレットに移行しています。
javascriptは昔触ってたので、AIに投げて、直してデバッグして……の壁打ちで作りました。便利な世の中になりましたね!
今回は、作ったものを公開します。ご参考になれば幸いです。
ブックマークレット用コード
javascript:(function(){const U=location.href.split('?')[0],u=(location.pathname.match(/^\/([^\/]+)/)||['',''])[1],q=(s,p=document)=>p.querySelector(s),qa=(s,p=document)=>[...p.querySelectorAll(s)],b=q('.p-article__body,[data-name="body"],.o-noteContentText,article main,article');if(!b){alert('公開済みnote記事画面で実行してください。');return;}const h1=q('h1');let ttl=h1?h1.cloneNode(!0):null;if(ttl){qa('button,svg,[class*="like"],[class*="badge"],[class*="action"]',ttl).forEach(e=>e.remove());ttl=ttl.innerText.trim();}let bc=[];const topL=q('ol a[href="https://note.com"],ol a[href="/"]');if(topL&&topL.textContent.trim())bc.push(topL.textContent.trim());qa('a[href*="/topic/"]').forEach(a=>{const t=a.textContent.trim();if(t&&!bc.includes(t))bc.push(t);});let pMag=[];for(const el of qa('section,div')){const h=q('h2,h3,h4,[class*="heading"]',el),ht=h?h.textContent.trim():'';if(ht.includes('ピックアップ')||ht.includes('追加されているマガジン')){qa('a[href*="/m/m"]',el).forEach(a=>{const p=(a.getAttribute('href')||'').split('?')[0];if(p&&!pMag.includes(p))pMag.push(p);});if(pMag.length)break;}}const tags=new Set();qa('a[href*="/hashtag/"]').forEach(a=>{const hr=a.getAttribute('href');const m=hr.match(/\/hashtag\/([^\?]+)/);if(m){const t=decodeURIComponent(m[1]).trim();if(t&&!/^\d/.test(t))tags.add('#'+t);}});function cUrl(v){if(!v)return '';let m=v.match(/(?:youtube\.com\/(?:embed\/|watch\?v=)|youtu\.be\/)([a-zA-Z0-9_-]+)/);if(m)return 'https://youtu.be/'+m[1];m=v.match(/twitframe\.com\/show\?url=([^&]+)/);if(m)return decodeURIComponent(m[1]);let tw=v.match(/platform\.twitter\.com\/embed\/Tweet\.html\?.*?id=(\d+)/);if(tw)return 'https://x.com/i/status/'+tw[1];let f=v.match(/note\.com\/([^\/\?#]+)\/n\/([a-zA-Z0-9_-]+)/);if(f)return 'https://note.com/'+f[1]+'/n/'+f[2];let nt=v.match(/note\.com\/(?:embed\/notes\/|notes\/|n\/)([a-zA-Z0-9_-]+)/);if(nt)return u&&u!=='notes'&&u!=='n'?'https://note.com/'+u+'/n/'+nt[1]:'https://note.com/n/'+nt[1];return v.replace(/&theme=auto.*/,'');}function pIn(n){if(n.nodeType===3)return n.textContent.replace(/[\u200B-\u200D\uFEFF]/g,'');if(n.nodeType!==1)return '';const t=n.tagName.toLowerCase();if(t==='ruby'){const rb=q('rb',n)||n.firstChild,rt=q('rt',n);return '|'+(rb?rb.textContent:'')+'《'+(rt?rt.textContent:'')+'》';}if(t==='a'){const hr=n.getAttribute('href'),tx=[...n.childNodes].map(pIn).join('');return (hr&&tx.trim())?('['+tx+']('+cUrl(hr)+')'):tx;}if(t==='br')return '\n';return [...n.childNodes].map(pIn).join('');}function pList(n,d){const isOl=n.tagName.toLowerCase()==='ol',ind=' '.repeat(d);let s='',idx=1;qa(':scope > li',n).forEach(li=>{const pref=ind+(isOl?(idx++)+'. ': '- '),pad=' '.repeat(pref.length);let inT='',sub='';li.childNodes.forEach(c=>(c.nodeType===1&&/^(ul|ol)$/i.test(c.tagName))?sub+=pList(c,d+1):inT+=pIn(c));const lines=inT.trim().split('\n');if(lines[0]){s+=pref+lines[0]+'\n';for(let k=1;k<lines.length;k++)s+=(lines[k].trim()?pad+lines[k].trim():'')+'\n';}if(sub)s+=sub;});return s;}const cln=b.cloneNode(!0);qa('h1,footer,aside,[class*="tagList"],[class*="tags"],[class*="Tag"],[class*="hashtag"],.o-noteContentToc,[data-component="TableOfContents"],.p-articleToc',cln).forEach(e=>e.remove());qa('a[href*="/hashtag/"],a[href*="/contest/"]',cln).forEach(a=>{const ul=a.closest('ul,ol,nav');if(ul)ul.remove();else{const p=a.parentElement;if(p&&p!==cln&&p.innerText.trim()===a.innerText.trim())p.remove();else a.remove();}});const hasH2=!!cln.querySelector('h2');function pEl(n){if(n.nodeType===3)return n.textContent.replace(/[\u200B-\u200D\uFEFF]/g,'');if(n.nodeType!==1)return '';const t=n.tagName.toLowerCase(),cls=(n.className||'').toString().toLowerCase();if(t==='hr')return '\n\n---\n\n';if(cls.includes('embed')||cls.includes('linkcard')||n.getAttribute('data-frame-src')||(t==='figure'&&!q('blockquote',n)&&q('a[href]',n))){const a=q('a[href*="/n/"],a[href^="http"]',n),ifr=q('iframe',n),raw=(ifr?(ifr.getAttribute('src')||ifr.getAttribute('data-src')):'')||(a?a.getAttribute('href'):'')||n.getAttribute('data-frame-src');if(raw&&!q('img',n))return '\n\n'+cUrl(raw)+'\n\n';}if(/^h[2-6]$/.test(t)||cls.includes('heading')){const ht=n.textContent.replace(/[\u200B-\u200D\uFEFF]/g,'').trim();if(!ht||ht.includes('参加している募集')||ht==='目次'||ht==='[目次]')return '';const isSub=t==='h4'||t==='h5'||t==='h6'||cls.includes('sub')||(t==='h3'&&hasH2);return '\n\n'+(isSub?'### ':'## ')+ht+'\n\n';}if(t==='figure'||t==='blockquote'||cls.includes('quote')){const bq=q('blockquote',n)||n,cap=q('figcaption',n);if(t==='blockquote'||cls.includes('quote')||q('blockquote',n)){let bqText='';(bq===n?n:bq).childNodes.forEach(c=>{if(c.nodeType===3)bqText+=c.textContent;else if(c.nodeType===1){const cg=c.tagName.toLowerCase();if(cg==='br')bqText+='\n';else if(cg==='p'||cg==='div')bqText+='\n'+pIn(c)+'\n';else bqText+=pIn(c);}});const lines=bqText.trim().split('\n').filter(l=>l.trim());if(lines.length){let res='\n\n'+lines.map(l=>'> '+l.trim()).join('\n');if(cap&&cap.textContent.trim())res+='\n>> '+pIn(cap).trim();return res+'\n\n';}}const aC=q('a[href^="http"]',n);if(aC&&!q('img',n))return '\n\n'+cUrl(aC.getAttribute('href'))+'\n\n';const img=q('img',n),txt=cap?cap.textContent.trim():(img?(img.getAttribute('alt')||''):''),src=img?(img.getAttribute('src')||img.getAttribute('data-src')):'';return src?'\n\n\n\n':'';}if(t==='ul'||t==='ol')return '\n'+pList(n,0)+'\n';if(t==='pre')return '\n\n```\n'+n.innerText.trim()+'\n```\n\n';if(t==='p'||t==='div'){let pt=pIn(n).trim(),a=q('a',n);if(!pt)return '';if(/^\d+$/.test(pt))return '\n\nスキ'+pt+'\n\n';if(a&&a.getAttribute('href')&&pt===a.textContent.trim())return '\n\n'+cUrl(a.getAttribute('href'))+'\n\n';if(cls.includes('sub')||cls.includes('heading-3'))return '\n\n### '+pt+'\n\n';if(n.children.length===0||[...n.children].every(c=>/^(span|b|strong|em|a|br)$/i.test(c.tagName)))return '\n\n'+pt+'\n\n';}return [...n.childNodes].map(pEl).join('');}const cmts=[];qa('time[datetime]').forEach(t=>{const cnt=t.closest('.min-w-0.flex-1')||t.closest('[id^="note-comment-"]');if(!cnt)return;const uL=q('a[href^="https://note.com/"],a[href^="/"]',cnt),uN=uL?(uL.getAttribute('aria-label')||uL.innerText.trim()):'',p=q('p.text-base.lg\\:block,p.text-text-primary',cnt);if(p){const txt=p.innerText.trim();if(txt&&!cmts.some(c=>c.includes(txt)))cmts.push('- '+(uN?uN+': ':'')+txt.replace(/\n+/g,' '));}});let out=U+'\n\n';if(ttl)out+='# '+ttl+'\n\n';let bodyMd=pEl(cln);bodyMd=bodyMd.replace(/(?:^|\n)(?:[1-9]\d*[\.\s、].*?\n+){3,}/g,'\n\n');const hList=[...bodyMd.matchAll(/^(#{2,3})\s+(.+)$/gm)];let fToc='';if(hList.length>0){fToc='## 目次\n\n';hList.forEach(m=>{const lvl=m[1],title=m[2].trim();if(title!=='目次'&&!title.includes('参加している募集')&&!title.includes('自動翻訳')&&!title.includes('英語と韓国語')){fToc+=(lvl==='###'?' - ':'- ')+title+'\n';}});fToc+='\n';}if(fToc)out+=fToc;bodyMd=bodyMd.replace(/^\s*>\s*$\n?/gm,'');bodyMd=bodyMd.replace(/(?:^|\n)[,\d\s]+件.*(?=\n|$)/g,'');out=(out+bodyMd).replace(/\n{3,}/g,'\n\n').trim();['## この記事が参加している募集'].forEach(w=>{const p=out.indexOf(w);if(p!==-1)out=out.substring(0,p).trim();});if(tags.size)out+='\n\n'+[...tags].map(t=>'- '+t).join('\n');if(bc.length)out+='\n\n'+bc.join('>');if(pMag.length)out+='\n\nピックアップされています\n'+pMag.join('\n');if(cmts.length)out+='\n\n### コメント\n\n'+cmts.join('\n');const d=document.createElement('div');d.textContent='markdown形式でコピーしました';d.style.cssText='position:fixed;top:24px;left:50%;transform:translateX(-50%);background:rgba(20,20,20,.88);color:#fff;padding:12px 24px;border-radius:8px;font-size:14px;font-weight:600;z-index:999999;transition:opacity .25s;';document.body.appendChild(d);setTimeout(()=>{d.style.opacity='0';setTimeout(()=>d.remove(),250);},1000);navigator.clipboard.writeText(out);})();変更履歴
2026/10/16:note記事のIDを省略していたのを修正。リストの入れ子・階層に対応。コピー後のアラートは勝手に消えるように変更。
2026/11/07:目次の見出し構造と出典内URL表示を修正し、その他微調整。
このブックマークレットで何ができるのか
公開済みnote記事を、markdown形式でクリップボードにコピーします。
生成AIに、記事の内容だけでなく論理構成も含めて提示するために使っています。
(普通に記事をコピペすると論理構成が見えず、「見出しがわかりづらい」とかいらないことを言うので)
主な挙動
公開されているnote記事が対象です。
タイトルから、ハッシュタグ・マガジン・パンくずリンク・コメントまでを拾います。
自分の記事の場合、「自動翻訳」に関する表示も拾います。
画像やリンクはURLで記述されます。
目次やコメントの折りたたまれている部分は省略します。
下書きに対して使う場合は一回保存して、Preview画面で使ってください。
ここにある要素は大体は対応しています。
使用例

読み手さん用の裏技
長すぎる記事をこれでコピって、生成AIに「要約して」「三行でお願い」って言うとか、「ちょっとここの意味がわからない」って質問するとか……ゲホゴホ
ブックマークレットとは
ウェブブラウザのブックマーク(お気に入り)に、簡易プログラム(JavaScriptのコード)を登録し、クリック一つでそのコードを実行させる仕組みです。
ブックマークとの違い
ブックマーク
特定のページを開く
ブックマークレット
今開いているページに対して、簡単な加工や変更を施す
Chrome拡張機能より手軽
ブックマークレットの使い方
適当なページをブックマークに保存する
ブックマークレットをコピーする
ブックマークの「編集」から、名前とURLを書き換える
保存する


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