LoginSignup
37

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

Last updated at Posted 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';

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

使い方

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

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

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

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

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

フォーマット

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

Markdown(引用形式)

フォーマット

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

// コピー後のフォーマットに加工した文字列を返す の次の行を以下に置き換えて使ってください。

return '> ' + title + '  \n> ' + url + '  \n';

Markdown(リンク形式)

フォーマット

- [ページタイトル](http://example.com)

// コピー後のフォーマットに加工した文字列を返す の次の行を以下に置き換えて使ってください。

return '- [' + title + '](' + url + ')\n';

Redmine

フォーマット

"タイトル":http://example.com

// コピー後のフォーマットに加工した文字列を返す の次の行を以下に置き換えて使ってください。

return '"' + title + '":' + url + '\n';

Backlog

フォーマット

[[タイトル:http://example.com]]

// コピー後のフォーマットに加工した文字列を返す の次の行を以下に置き換えて使ってください。

return '[[' + title + ':' + url + ']]\n';

DocComment

フォーマット

# @see タイトル http://example.com

// コピー後のフォーマットに加工した文字列を返す の次の行を以下に置き換えて使ってください。

return '# @see ' + title + ' ' + url + '\n';

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
37