More than 1 year has passed since last update.

WebページのタイトルとURLをワンクリックでコピーするBookmarklet

Last updated at 2023-06-12Posted at 2016-10-14

やりたいこと

タイトル+URLをリンクの形式でコピーしたい。
各サービスでフォーマットがバラバラなのでいちいち覚えたくない。
あと、Ctrl+Cもめんどくさいので、bookmarkletを押すだけでClipboardにコピーしたい。

※2017-09-01: 実装、タイトル、説明内容を見直して修正しました。
※2021-03-27: 実装修正しました
※2022-02-21: Twitterのページで動作しない問題に対応しました
※2023-06-12: execCommandが非推奨なため、Clipboard APIで実装しなおしました

参考にさせてもらったページ

やったこと

こんな感じにしました。以下がベースとなるコードです。

javascript:(() => {
  
  /* メイン処理 */    
  const main = () => {
    navigator.clipboard.writeText(getTitleAndUrlText());
  };
  
  /* URLとタイトル取得 */
  const getTitleAndUrlText = () => {
    let url = document.URL;
    let title = document.title;
    title = replaceStrings(title);    
    
    /* コピー後のフォーマットに加工した文字列を返す */
    return title + '\n' + url + '\n';
  };
  
  /* 各フォーマット向けにエスケープしたい文字列があればそれを定義して置換 */
  const replaceStrings = (text) => {
    const replacedStrings = {
      '(': '（',
      ')': '）',
      '[': '［',
      ']': '］',
    };
    for (let key in replacedStrings) {
      text = text.replaceAll(key, replacedStrings[key]);
    }
    return text;
  };

  main();
})()

このコードの

    // コピー後のフォーマットに加工した文字列を返す
    return title + '\n' + url + '\n';

の部分を各サービスやマークアップ言語などのフォーマットに変更することで、ワンクリックでそのフォーマットの文字列をクリップボードにコピーできます。

使い方

適当なページ（例えばGoogleとかでも良いです）のBookmarkを作る
そのBookmarkを編集し、URLの部分に上の「コード」をそのままコピペする。タイトルは分かりやすいように、「copyTitleUrl」とかつけておくと良いかもです。
タイトルとURLをコピーしたいURLをブラウザでひらき、２．で作ったBookmerkletを実行する

これで、先程の開いていたページのタイトルとURLがコピーされます。

いろんなフォーマットでコピーしたい

各サービスやマークアップ言語のリンク形式の表現で、タイトルとURLをクリップボードにコピーするBookmarkletがほしい場合、↑のコードの「 // コピー後のフォーマットに加工した文字列を返す 」で返してる文字列を加工するといろんなフォーマットに対応できます。
いくつか使われそうなフォーマットの例を載せてきました。

Normal（↑で示してるコードをそのまま使うとこれになります。）

フォーマット

ページタイトル
http://example.com