Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

解決したかったこと

  • 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

  • iOS 11.26
  • 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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした