Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
6
Help us understand the problem. What is going on with this article?
@xshoji

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

解決したかったこと

  • iOS(iPhone)のSafariでWebページのタイトルとURLを両方コピーしたいとき、かなり面倒
  • ページによってはタイトルがなかったり、選択し辛い場合もある
  • とにかくワンタップするだけでクリップボードへコピーされるようにしたい(重要)
    • => 自分で文字列を選択してコピーみたいなことはしたくない

※2021-03-27: 実装修正しました。

さっそく出来上がったもの(デモ)

demo.gif

次の章から、どう実現したかの流れを説明します。

やりたいことは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

で動作確認済みです。

(() => {

  /**
   * メイン処理
   */
  const main = () => {
    // textarea作成
    const textAreaElement = document.createElement("textarea");
    textAreaElement.textContent = getUrlInfo();

    // bodyに追加
    const bodyElement = document.getElementsByTagName("body")[0];
    bodyElement.appendChild(textAreaElement);
    textAreaElement.select();

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

    // ClipboardへCopy実行
    const isSuccessCopy = document.execCommand('copy');
    // textarea削除
    bodyElement.removeChild(textAreaElement);
    // Copyが成功したか出力
    console.log("Copy successful? = " + isSuccessCopy)
  };

  /**
   * URLとタイトル取得
   * @returns {string}
   */
  const getUrlInfo = () => {
    // コピー後のフォーマットに加工した文字列を返す
    return document.title + '\n' + document.URL;
  };

  main();
})()

圧縮版

javascript:(()=>{const e=()=>{const e=document.createElement("textarea");e.textContent=t();const n=document.getElementsByTagName("body")[0];n.appendChild(e),e.select(),e.contentEditable="true",e.readOnly=!1,e.setSelectionRange(0,999999);const o=document.execCommand("copy");n.removeChild(e),console.log("Copy successful? = "+o)},t=()=>document.title+"\n"+document.URL;e()})();

どうやって使うの?

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

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

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

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

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

6
Help us understand the problem. What is going on with this article?
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.
Sign Up
If you already have a Qiita account Login
6
Help us understand the problem. What is going on with this article?