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

解決したかったこと

  • iOS(iPhone)のSafariでWebページのタイトルとURLを両方コピーしたいとき、かなり面倒
  • ページによってはタイトルがなかったり、選択し辛い場合もある

Bookmerkletでできそう

Bookmerkletとは

ブックマークレット (Bookmarklet) とは、ユーザーがウェブブラウザのブックマークなどから起動し、ウェブブラウザで簡単な処理を行う簡易的なプログラムのことである [注釈 1]。 携帯電話のウェブブラウザで足りない機能を補ったり、ウェブアプリケーションの処理を起動する為に使われることが多い。
ブックマークレット - Wikipedia

Webページをお気に入りに登録して、そこからWebページに飛びますよね?あのURLの部分、普通は

https://xxxx.yyy.zzz

ってなってると思いますが、そこを

javascript:alert("This is a bookmerklet!");

的な感じでjsのコードに書き換えることで、そのお気に入りボタンに特定の処理を仕込む事ができます。で、好きなタイミングでそのお気に入りをクリックすると仕込んでおいたjsを実行できます。

試してみた

で、本題ですが過去に

なる記事を投稿してまして、このBookmerkletをそのまま使えるんじゃないかと期待して、動作させてみたがうまく機能せず・・・。

原因

おお。。

解決策

どうやら、コピー対象を選択状態にしないといけないみたい。

完成したBookmerklet

  • iPhone8
  • Safari

で動作確認済みです。

var global = window;

global.COPY_TO_CLIPBOARD = global.COPY_TO_CLIPBOARD || {}

global.COPY_TO_CLIPBOARD.copyToClipboard = function ()
{
    // textarea作成
    var copyTextareaElement = document.createElement("textarea");
    copyTextareaElement.textContent = document.title + '\n' + document.URL;

    // bodyに追加
    var bodyElm = document.getElementsByTagName("body")[0];
    bodyElm.appendChild(copyTextareaElement);

    // 選択状態にする
    copyTextareaElement.contentEditable = true;       // iOS will only select text on non-form elements if contentEditable = true;
    copyTextareaElement.readOnly = false;             // iOS will not select in a read only form element
    copyTextareaElement.setSelectionRange(0, 999999); // iOS only selects "form" elements with SelectionRange

    // ClipboradへCopy実行
    var successful = document.execCommand('copy');
    // textarea削除
    bodyElm.removeChild(copyTextareaElement);
}

global.COPY_TO_CLIPBOARD.copyToClipboard();

圧縮版

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();

どうやって使うの?

iPhoneでBookmerkletを使うには、以下の手順が必要です。

  1. 適当なページを「お気に入りに追加」する。☆マークのやつ( https://www.google.co.jp/ とかでOK)
  2. SafariのURLバーをタップするとさっき追加したページがあるはずなので、長押して編集画面にする
  3. タイトルを「Copy」とかにして、URLに↑の「圧縮版」にまとめられているコードをまるっと貼り付けて保存する(これで準備完了です)

後は、好きなWebページで、URLバーをタップし、↑で作った「Copy」をタップしてください。
これだけで、

Webページのタイトル
https://sample.com

みたいな形式の文字列がコピーされているはずです。どこかにペーストしてみてください。楽になったー!