WebページのURLのHTMLタグやMarkdownタグをコピー不要のワンタップで取得するブックマークレットーいつもていねいに

このブログ「いつもていねいに」を書いている 小田やかた です。
プロフィールはこちら、Xのアカウントはこちらです。

こんなブックマークレットがあったらモブログがはかどるのに。いや、モブログだけでなくパソコンでのブログの執筆もはかどるのは間違いない。

そんなずっとほしかったブックマークレットがようやく手に入りました。

それは、今みているWebページのURLやタイトルをワンタップ（ワンクリック）でHTMLタグやMarkdownなどに変換してクリップボードに出力してくれるブックマークレットです。

以前の以下の記事で紹介したとおり、ブックマークレットを発動するとHTMLやMarkdownに変換してくれるものはありましたが、その出力されたコードを自分でコピーする必要がありました。

モブログには欠かせない！iPhoneでWebページURLのリンクタグを簡単に取得する方法私は、iPhoneでブログを書くことが多いのですが、面倒なのが人様のブログを紹介するときにURLをHTML形式に変換することです。パ...

今回紹介するブックマークレットは違います。コピーする必要はありません。

ただ、ワンタップ（ワンクリック）でブックマークレットを発動させるだけ。

1 ブックマークレットの概要
2 HTMLタグ用
3 Markdown用
4 Scrapbox用
5 タイトル+URL用
（おまけ） URL
6 おわりに

1 ブックマークレットの概要

今回、紹介するブックマークレットはコピーする必要がないのです。

ブックマークレットを発動したら、それだけでコードがクリップボードに出力されるため、あとは貼り付けたいところにペーストするだけ。

なんと、シンプルで楽なブックマークレットか。

実際の画面で紹介しましょう。

このページのHTMLタグを出力させたいとします。画面はiPhoneのSafariです。

Safariのアドレスバーをタップしてお気に入り（ブックマーク）を表示させ、後ほど紹介する登録済みのブックマークレットをタップします。

私はよく使うのでお気に入り（ブックマーク）の1番上に置いています。

次に HTMLタグを書きたいところでペーストすると、はい、このとおり、無事コードがペーストできました。楽ですよね。

ブログを書いていると、何かのWebページを紹介したいときがありますが、これを使えば、かなり楽にHTMLタグを書くことができます。

さらにすごいのが、このブックマークレットはiPhoneでもパソコンでも動くのです。（iPhoneのSafariとMacのSafariで動作確認）

iPhone用とパソコン用と別々にあると管理が面倒ですよね。お気に入りのスペースも余分にとります。これがあれば、どちらでも動くので楽です。

さて、このブックマークレットのコードですが、4パターン用意しました。

ただ、誤解していただきたくないのは、実は私はブックマークレットのコードは全く書けません。JavaScriptとかよくわかっていないのです。

次のサイトでiOSでも動くブックマークレットが紹介されており、これはURLとタイトルを出力するものだったので、これを元にHTMLタグやMarkdownを出力できるようにしただけです。

▶︎▶︎参考

iOS(iPhone)でWebページのタイトルとURLをワンタップでコピーするBookmarklet – Qiita

といってもJavaScriptを何もわかっていないので、他のサイトをいろいろ見ながら、元のコードをいろいろいじってみて、試行錯誤の末、完成したものです。完成しても、いまだにコードの意味がよくわかっていません。

で、完成したものはiOSだけ動くかと思いきや、MacのSafariでも試しにブックマークレットを発動させてみたら上手くいった、というだけです。

前置きが長くなりましたが、ではいきましょう。

2 HTMLタグ用

まずは、前述のWebページのURLのHTMLタグをクリップボードに出力するブックマークレットのコードは以下です。

ブックマークレットの登録の仕方は、簡単に言うと、適当なページをブラウザのお気に入りに登録し、その後、登録したブックマークの編集画面でURL欄にこれから紹介するコードを貼り付けるだけです。

javascript:var global=window;global.COPY_TO_CLIPBOARD=global.COPY_TO_CLIPBOARD||{};global.COPY_TO_CLIPBOARD.copyToClipboard=function(){var a=document.createElement("textarea");a.textContent='<a href="'+document.URL +'">'+document.title + '</a>';var b=document.getElementsByTagName("body")[0];b.appendChild(a);a.contentEditable=!0;a.readOnly=!1;a.setSelectionRange(0,999999);document.execCommand("copy");b.removeChild(a)};global.COPY_TO_CLIPBOARD.copyToClipboard();

このブックマークレットを発動すると以下の内容をクリップボードに出力します。（URLとタイトルは本ブログの記事です。）

<a href="https://teineini.net/201906-applewatch-gimon/">Apple Watchを購入する前に知りたかったささやかな疑問 | いつもていねいに</a>

3 Markdown用

次はMarkdownで出力するブックマークレットのコードは以下です。

javascript:var global=window;global.COPY_TO_CLIPBOARD=global.COPY_TO_CLIPBOARD||{};global.COPY_TO_CLIPBOARD.copyToClipboard=function(){var a=document.createElement("textarea");a.textContent=" ["+document.title+" ]("+document.URL+")";var b=document.getElementsByTagName("body")[0];b.appendChild(a);a.contentEditable=!0;a.readOnly=!1;a.setSelectionRange(0,999999);document.execCommand("copy");b.removeChild(a)};global.COPY_TO_CLIPBOARD.copyToClipboard();

このブックマークレットを発動すると以下の内容をクリップボードに主力します。

[Apple Watchを購入する前に知りたかったささやかな疑問 | いつもていねいに ](https://teineini.net/201906-applewatch-gimon/)

4 Scrapbox用

他にもScrapbox用のコードを出力するブックマークレットのコードも用意しました。

javascript:var global=window;global.COPY_TO_CLIPBOARD=global.COPY_TO_CLIPBOARD||{};global.COPY_TO_CLIPBOARD.copyToClipboard=function(){var a=document.createElement("textarea");a.textContent="["+document.title+" "+document.URL+"]";var b=document.getElementsByTagName("body")[0];b.appendChild(a);a.contentEditable=!0;a.readOnly=!1;a.setSelectionRange(0,999999);document.execCommand("copy");b.removeChild(a)};global.COPY_TO_CLIPBOARD.copyToClipboard();

このブックマークレットを発動すると以下の内容をクリップボードに出力します。

[Apple Watchを購入する前に知りたかったささやかな疑問 | いつもていねいに https://teineini.net/201906-applewatch-gimon/]

5 タイトル+URL用

最後に、前述の記事で紹介されていたタイトルとURLを出力するブックマークレットのコードは以下です。

javascript:var global=window;global.COPY_TO_CLIPBOARD=global.COPY_TO_CLIPBOARD||{};global.COPY_TO_CLIPBOARD.copyToClipboard=function(){var a=document.createElement("textarea");a.textContent=document.title+"\n"+document.URL;var b=document.getElementsByTagName("body")[0];b.appendChild(a);a.contentEditable=!0;a.readOnly=!1;a.setSelectionRange(0,999999);document.execCommand("copy");b.removeChild(a)};global.COPY_TO_CLIPBOARD.copyToClipboard();

このブックマークレットを発動すると以下の内容をクリップボードに出力します。

Apple Watchを購入する前に知りたかったささやかな疑問 | いつもていねいに https://teineini.net/201906-applewatch-gimon/

（おまけ） URL

おまけに、単純にURLのみを出力するブックマークレットのコードは以下です。

javascript:var global=window;global.COPY_TO_CLIPBOARD=global.COPY_TO_CLIPBOARD||{};global.COPY_TO_CLIPBOARD.copyToClipboard=function(){var a=document.createElement("textarea");a.textContent=document.URL;var b=document.getElementsByTagName("body")[0];b.appendChild(a);a.contentEditable=!0;a.readOnly=!1;a.setSelectionRange(0,999999);document.execCommand("copy");b.removeChild(a)};global.COPY_TO_CLIPBOARD.copyToClipboard();