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

やりたいこと

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

※2017-09-01:実装、タイトル、説明内容を見直して修正しました。

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

やったこと

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


var global = window;

global.COPY_TO_CLIPBOARD = global.COPY_TO_CLIPBOARD || {}

// URLの情報を取得する
global.COPY_TO_CLIPBOARD.getUrlInfo = function () {
    var title = document.title;
    // 各フォーマット向けにエスケープしたい文字列を定義して置換
    var replacedStrings = {
      ':': ':',
      '\\[': '[',
      '\\]': ']'
    };
    for (var key in replacedStrings) {
        title = title.replace(new RegExp(key, 'g'), replacedStrings[key]);
    }
    // 各サービスのLink形式のフォーマットにした文字列を返す
    return title + '\n' + document.URL;
};

// 文字列を取得するFunctionの結果をクリップボードにコピーする
global.COPY_TO_CLIPBOARD.copyToClipboard = function() {
    // Clipboardにコピーするやりかたを真似た
    var copyFrom = document.createElement("textarea");
    copyFrom.textContent = this.getUrlInfo();

    var bodyElm = document.getElementsByTagName("body")[0];
    bodyElm.appendChild(copyFrom);
    copyFrom.select();

    var retVal = document.execCommand('copy');
    bodyElm.removeChild(copyFrom);
    return retVal;
};

global.COPY_TO_CLIPBOARD.copyToClipboard();

このコードの

    // 各サービスのLink形式のフォーマットにした文字列を返す
    return title + '\n' + document.URL;

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

作ったBookmarklet

各サービスやマークアップ言語のリンク形式の表現で、タイトルとURLをクリップボードにコピーするBookmarkletを作ってみました。
使い方は

  1. 適当なページ(例えばGoogleとかでも良いです)のBookmarkを作る
  2. そのBookmarkを編集し、URLの部分に以下の「コード」をそのままコピペする。タイトルは分かりやすいように、「Markdown形式でコピー」とかつけておくと良いかもです。

です。

Normal

フォーマット

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

コード

javascript:var global=window;global.COPY_TO_CLIPBOARD=global.COPY_TO_CLIPBOARD||{};global.COPY_TO_CLIPBOARD.getUrlInfo=function(){var a=new String(document.title);a.allReplace=function(a){var b=this,c;for(c in a)b=b.replace(new RegExp(c,"g"),a[c]);return b}.bind(a);return a.allReplace({":":"\uff1a","\\[":"\uff3b","\\]":"\uff3d"})+"\n"+document.URL};
global.COPY_TO_CLIPBOARD.copyToClipboard=function(){var a=document.createElement("textarea");a.textContent=this.getUrlInfo();var d=document.getElementsByTagName("body")[0];d.appendChild(a);a.select();var b=document.execCommand("copy");d.removeChild(a);return b};global.COPY_TO_CLIPBOARD.copyToClipboard();

Markdown

フォーマット

 - [ページタイトル](http://example.com)
    return ' - [' + title + '](' + document.URL + ')';

コード

javascript:var global=window;global.COPY_TO_CLIPBOARD=global.COPY_TO_CLIPBOARD||{};global.COPY_TO_CLIPBOARD.getUrlInfo=function(){var a=new String(document.title);a.allReplace=function(a){var b=this,c;for(c in a)b=b.replace(new RegExp(c,"g"),a[c]);return b}.bind(a);return" - ["+a.allReplace({":":"\uff1a","\\[":"\uff3b","\\]":"\uff3d"})+"]("+document.URL+")"};
global.COPY_TO_CLIPBOARD.copyToClipboard=function(){var a=document.createElement("textarea");a.textContent=this.getUrlInfo();var d=document.getElementsByTagName("body")[0];d.appendChild(a);a.select();var b=document.execCommand("copy");d.removeChild(a);return b};global.COPY_TO_CLIPBOARD.copyToClipboard();

Redmine

フォーマット

"タイトル":http://example.com
    return '"' + title + '":' + document.URL;

コード

javascript:var global=window;global.COPY_TO_CLIPBOARD=global.COPY_TO_CLIPBOARD||{};global.COPY_TO_CLIPBOARD.getUrlInfo=function(){var a=new String(document.title);a.allReplace=function(a){var b=this,c;for(c in a)b=b.replace(new RegExp(c,"g"),a[c]);return b}.bind(a);return'"'+a.allReplace({":":"\uff1a","\\[":"\uff3b","\\]":"\uff3d"})+'":'+document.URL};
global.COPY_TO_CLIPBOARD.copyToClipboard=function(){var a=document.createElement("textarea");a.textContent=this.getUrlInfo();var d=document.getElementsByTagName("body")[0];d.appendChild(a);a.select();var b=document.execCommand("copy");d.removeChild(a);return b};global.COPY_TO_CLIPBOARD.copyToClipboard();

Backlog

フォーマット

[[タイトル:http://example.com]]
    return '[[' + title + ':' + document.URL + ']]';

コード

javascript:var global=window;global.COPY_TO_CLIPBOARD=global.COPY_TO_CLIPBOARD||{};global.COPY_TO_CLIPBOARD.getUrlInfo=function(){var a=new String(document.title);a.allReplace=function(a){var b=this,c;for(c in a)b=b.replace(new RegExp(c,"g"),a[c]);return b}.bind(a);return"[["+a.allReplace({":":"\uff1a","\\[":"\uff3b","\\]":"\uff3d"})+":"+document.URL+"]]"};global.COPY_TO_CLIPBOARD.copyToClipboard=function(){var a=document.createElement("textarea");a.textContent=this.getUrlInfo();var d=document.getElementsByTagName("body")[0];d.appendChild(a);a.select();var b=document.execCommand("copy");d.removeChild(a);return b};global.COPY_TO_CLIPBOARD.copyToClipboard();

DocComment

フォーマット

# @see タイトル http://example.com
    return "# @see " + title + " " + document.URL;

コード

javascript:var global=window;global.COPY_TO_CLIPBOARD=global.COPY_TO_CLIPBOARD||{};global.COPY_TO_CLIPBOARD.getUrlInfo=function(){var a=new String(document.title);a.allReplace=function(a){var b=this,c;for(c in a)b=b.replace(new RegExp(c,"g"),a[c]);return b}.bind(a);return"# @see "+a.allReplace({":":"\uff1a","\\[":"\uff3b","\\]":"\uff3d"})+" "+document.URL};global.COPY_TO_CLIPBOARD.copyToClipboard=function(){var a=document.createElement("textarea");a.textContent=this.getUrlInfo();var d=document.getElementsByTagName("body")[0];d.appendChild(a);a.select();var b=document.execCommand("copy");d.removeChild(a);return b};global.COPY_TO_CLIPBOARD.copyToClipboard();