iOS(iPhone)에서 웹페이지의 제목과 URL을 원탭으로 복사하기 Bookmarklet

해결하고 싶은 일

iOS (iPhone)의 Safari에서 웹 페이지의 제목과 URL을 모두 복사하고 싶을 때 상당히 번거롭습니다

페이지에 따라 제목이 없거나 선택하기 힘들 수 있습니다

어쨌든 한 번의 탭만으로 클립 보드에 복사하고 싶습니다 (중요)

=> 직접 문자열을 선택하고 복사하는 것을 원하지 않습니다

※2021-03-27: 실장 수정했습니다.
※2022-02-21: 기사 갱신했습니다(원래의 기사의 코드와 공통화할 수 있었으므로 이쪽의 기사의 코드는 불필요하게 되었습니다)

바로 완성된 것(데모)

다음 장에서는 어떻게 실현했는지의 흐름을 설명합니다.

내가하고 싶은 것은 Bookmerklet에서 할 수 있습니다.

Bookmerklet이란?

북마크렛(Bookmarklet)은 사용자가 웹브라우저의 북마크 등에서 기동하여 웹브라우저에서 간단한 처리를 하는 간이적인 프로그램이다 [주석 1]. 휴대전화의 웹브라우저로 부족한 기능을 보충하거나, 웹 어플리케이션의 처리를 기동하기 위해서 사용되는 경우가 많다.
북마크렛 - Wikipedia

웹페이지를 즐겨찾기에 등록하고 거기에서 웹페이지로 날아가요? 그 URL 부분, 보통은

https://xxxx.yyy.zzz

그렇다고 생각하지만,

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

적인 느낌으로 js의 코드로 다시 쓰는 것으로, 그 즐겨찾기 버튼에 특정의 처리를 넣을 수가 있습니다. 그래서 원하는 시간에 즐겨 찾기를 클릭하면 넣어 놓은 js를 실행할 수 있습니다.

시도해 보았습니다.

그래서 주제이지만 과거에

웹페이지 제목과 URL을 한 번의 클릭으로 복사하기 Bookmarklet - Qiita

되는 기사를 투고하고 있어서, 이 Bookmerklet를 그대로 사용할 수 있지 않을까 기대하고, 동작시켜 보았지만 잘 기능하지 않고···.

2022-02-21: ↑ 기사의 코드 그대로도 iOS에서 작동하게 되었습니다. 그대로 사용하십시오. (이 기사의 다음 내용은 비망록적으로 감히 남겨 둡니다만, 사용할 필요는 없습니다)

원인

iOS, Android에서는 클립보드에 복사하는 버튼을 설치할 수 없다…

[iOS] 자바 스크립트를 사용하여 클립 보드에 액세스하는 것은 불가능합니다 ... 그렇다면 어떻게해야합니까?

오. .

해결책

Copy to clipboard using Javascript in iOS - Stack Overflow

Cool Javascript Copy to Clipboard Crossbrowser

분명히 복사 대상을 선택 상태로 설정해야합니다.

완성된 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을 사용하려면 다음 단계가 필요합니다.

적당한 페이지를 「즐겨찾기에 추가」한다. ☆ 마크의 녀석 (htps //w w. 오, ぇ. 이. jp/ 어딘가에서 OK)

Safari의 URL 바를 탭하면 조금 더 추가 한 페이지가 있어야하므로 길게 눌러 편집 화면으로 만듭니다.

제목을 "Copy"로 지정하고 URL에 ↑의 "압축 버전"에 포함 된 코드를 완전히 붙여 넣고 저장하십시오 (이것으로 준비됨)

나중에 좋아하는 웹페이지에서 URL 바를 탭하고 ↑로 만든 'Copy'를 탭합니다.
이것만으로,

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

같은 형식의 문자열이 복사되어 있어야합니다. 어딘가에 붙여보세요. 편해졌어!