tag:crieit.net,2005:https://crieit.net/tags/bookmarklet/feed
「bookmarklet」の記事 - Crieit
Crieitでタグ「bookmarklet」に投稿された最近の記事
2024-02-08T01:35:45+09:00
https://crieit.net/tags/bookmarklet/feed
tag:crieit.net,2005:PublicArticle/18733
2024-02-08T01:34:00+09:00
2024-02-08T01:35:45+09:00
https://crieit.net/posts/URL-65c3b0f86a9e2
ブラウザのタイトルや URL をコピーするブックマークレット【スマホ＆阿部寛対応】
<p>ブラウザで表示しているページのタイトルと URL を一括でコピーしたり、 markdown などのマークアップ言語でフォーマットされたものを、クリップボードにコピーしたくなることは無いだろうか？</p>
<p>意外にも、主要なブラウザには表示ページのタイトル名すら簡単にコピーする方法がない。</p>
<p>いくつかのブラウザ拡張機能（アドオン）には、上述の機能を提供しているものがいくつもある。<br />
しかし、これだけのために拡張機能を入れるのもなんだかなと。<br />
場合によっては、ポリシー等様々な理由で拡張機能を入れることを制限されている場合もあるだろうし。</p>
<p>そこで、表示中ページのタイトルと URL を任意の種類にフォーマットしてクリップボードへコピーしてくれるブックマークレットを作ってみた。</p>
<p>ブックマークレットとした事により、拡張機能の使えないスマートフォンの Chrome や Safari といった、とても不便なブラウザでも利用できる。</p>
<h2 id="使い方"><a href="#%E4%BD%BF%E3%81%84%E6%96%B9">使い方</a></h2>
<p><a target="_blank" rel="nofollow noopener" href='javascript:(()=>{let e="FRAMESET"===top.document.body.tagName?top.frames[0].document:document,t=t=>e.getElementById(t),i=e.createElement("div"),l="modalBMId_key";i.innerHTML=%60<div id=${l}m style="position:fixed;width:100%;height:100%;top:0;text-align:center;background:rgba(0,0,0,.5);padding:16px 20px;z-index:999"><div style="display:inline-block;background:#fff"><div style="padding:8px"><div id=${l}b></div><div><label for=${l}i style="color:#000">copied:</label><input id=${l}i style="width:400px" readonly/></div></div></div></div>%60;let r=t(l+"m");r||(e.body.prepend(i.firstChild),Object.entries({TitleOnly:"<span>{</span><span>{</span>title<span>}</span><span>}</span>",Text:"<span>{</span><span>{</span>title<span>}</span><span>}</span>\n<span>{</span><span>{</span>url<span>}</span><span>}</span>",Markdown:String.raw%60[<span>{</span><span>{</span>title/\\/\\/(?=[\[\]])/\<span>}</span><span>}</span>](<span>{</span><span>{</span>url/\)/%2529<span>}</span><span>}</span>)%60,HTML:String.raw%60<a href="<span>{</span><span>{</span>url/&/&/"/"<span>}</span><span>}</span>"><span>{</span><span>{</span>title/</<<span>}</span><span>}</span></a>%60,Textile:String.raw%60"<span>{</span><span>{</span>title/&/&/"/"/\]/]<span>}</span><span>}</span>":<span>{</span><span>{</span>url/\]/%255D<span>}</span><span>}</span>%60,AsciiDoc:String.raw%60link:++<span>{</span><span>{</span>url<span>}</span><span>}</span>++[<span>{</span><span>{</span>title/\[/[/\]/]<span>}</span><span>}</span>]%60,Jira:String.raw%60[<span>{</span><span>{</span>title/&/&/\[/[/\]/]/\|/|<span>}</span><span>}</span>|<span>{</span><span>{</span>url/\[/%255B/\]/%255D/\|/%257C<span>}</span><span>}</span>]%60,LaTeX:String.raw%60\href<span>{</span><span>{</span>{url/\\/\backslash/(?=[&%$#_{}])/\<span>}</span><span>}</span>}<span>{</span><span>{</span>{title/\\/\backslash/(?=[&%$#_{}])/\<span>}</span><span>}</span>}%60}).map(([i,r])=>{let a=e.createElement("button");a.style.color="#000",a.textContent="copy - "+i,a.onclick=()=>{let i=r.replace(/<span>{</span><span>{</span>((title|url)(?:\/(.*?)\/(.*?))?(?:\/(.*?)\/(.*?))?(?:\/(.*?)\/(.*?))?(?:\/(.*?)\/(.*?))?)<span>}</span><span>}</span>/ig,function(t,i,l){let r="title"==l.toLowerCase()?e.title:location.href;for(let a=3;a<10;a+=2){let d=arguments[a];if(d&&"string"==typeof d)r=r.replace(RegExp(d,"g"),arguments[a+1]??"");else break}return r});navigator.clipboard.writeText(i),t(l+"i").value=i},t(l+"b").append(a)}),r=t(l+"m"),e.addEventListener("click",e=>{e.target==r&&r.remove()}))})();'>ブラウザのタイトルや URL をコピーするブックマークレット </a></p>
<p>上記のリンクを（Firefox なら右クリックから直接、 Edge や Chrome なら ブックマークバーに D&D する等の方法で）ブックマークとして保存し、任意のページで呼び出すと、下記のようなダイアログが表示される。<br />
お好きなボタンをクリックすれば、クリップボードにフォーマット済みのリンクが格納されるという算段だ。</p>
<p><a target="_blank" rel="nofollow noopener" href="https://aquasoftware.net/blog/wp-content/uploads/2024/01/copy-formatted-link-bookmarklet-01.png"><img src="https://aquasoftware.net/blog/wp-content/uploads/2024/01/copy-formatted-link-bookmarklet-01-1024x82.png" alt="" /></a></p>
<p>暗転したところをクリックすれば、ダイアログはクローズされる。</p>
<p>最低限のコードにするため、 CSS は表示中のページのものを使っており、開いたページによってダイアログのデザインが変わるのは仕様となっている。</p>
<p>Firefox, Chrome, Edge いずれでも動作することは確認している。<br />
Edge の場合ツールバーの「お気に入り☆」ボタンからではブックマークレットが動かないようなので、ブックマークバーから実行する必要があるようだ。（v121 現在）</p>
<p>もちろん、「阿部 寛のホームページ」にも対応している。<br />
このようにフレームセットを使っている場合は、最初のフレームにダイアログを表示させる形で、対応している。</p>
<p><a target="_blank" rel="nofollow noopener" href="https://aquasoftware.net/blog/wp-content/uploads/2024/01/copy-formatted-link-bookmarklet-02.png"><img src="https://aquasoftware.net/blog/wp-content/uploads/2024/01/copy-formatted-link-bookmarklet-02-1024x180.png" alt="" /></a></p>
<h2 id="カスタマイズ方法"><a href="#%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%E6%96%B9%E6%B3%95">カスタマイズ方法</a></h2>
<p>既定で markdown, textile, LaTeX などいくつかのテンプレートを用意している。</p>
<p>もし追加したいものがあれば、後述のソースコードの <code>Object.entries({</code>の後ろに、 JSON キーにボタンのタイトルを、 JSON 値に変換のテンプレートを指定したものを追加し、 各自 minify して使ってもらえれば OK だ。（ライセンスは CC-0）</p>
<p>ソースコード中に <code>%5B</code>, <code>%5D</code> などといった URL エンコードと解釈できてしまう部分があるため、ブックマークの編集画面の URL に直接貼り付ける場合は、 <code>%255B</code>, <code>%255D</code> などとエスケープしておこう。</p>
<p>なお、テンプレートの定義方法だが、 <code><span>{</span><span>{</span><span>}</span><span>}</span></code> で括った部分に <code>title</code> (ページタイトル) もしくは <code>url</code> と、 0～8 の偶数個の <code>/</code> を記述し、置換対象を表す正規表現と、置換後の文字列を交互に記述する。</p>
<p>例えば、</p>
<pre><code class="js">String.raw`<span>{</span><span>{</span>url/\[/%5B/\]/%5D/\|/%7C<span>}</span><span>}</span>`
</code></pre>
<p>なら、以下と等価となる。</p>
<pre><code class="js">url.replace(RegExp(String.raw`\[`, "g"), "%5B")
.replace(RegExp(String.raw`\]`, "g"), "%5D")
.replace(RegExp(String.raw`\|`, "g"), "%7C");
</code></pre>
<p>雑な説明だがわかって。</p>
<gist src="https://gist.github.com/advanceboy/a960ec38442165a7df93408d775b03eb.js"></gist>
advanceboy