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
33
Help us understand the problem. What is going on with this article?
@xshoji

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

やりたいこと

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

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

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

やったこと

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

(() => {

  /**
   * メイン処理
   */
  const main = () => {
    // Clipboardにコピーするやりかたを真似た
    const textAreaElement = document.createElement("textarea");
    textAreaElement.textContent = getUrlInfo();

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

    const isSuccessCopy = document.execCommand('copy');
    bodyElement.removeChild(textAreaElement);
    console.log("Copy successful? = " + isSuccessCopy)
  };

  /**
   * URLとタイトル取得
   * @returns {string}
   */
  const getUrlInfo = () => {
    let title = document.title;
    // 各フォーマット向けにエスケープしたい文字列を定義して置換
    const replacedStrings = {
      ':': '',
      '\\[': '',
      '\\]': '',
      '\\|': ''
    };
    for (let key in replacedStrings) {
      title = title.replace(new RegExp(key, 'g'), replacedStrings[key]);
    }

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

  main();
})()

このコードの

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

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

作ったBookmarklet

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

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

です。

Normal

フォーマット

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

コード

javascript:(()=>{const e=()=>{const e=document.createElement("textarea");e.textContent=t();const n=document.getElementsByTagName("body")[0];n.appendChild(e),e.select();const o=document.execCommand("copy");n.removeChild(e),console.log("Copy successful? = "+o)},t=()=>{let e=document.title;const t={":":"","\\[":"","\\]":"","\\|":""};for(let n in t)e=e.replace(new RegExp(n,"g"),t[n]);return e+"\n"+document.URL+"\n"};e()})();

Markdown(引用形式)

フォーマット

> ページタイトル  
> http://example.com  
return '> ' + title + '  \n' + '> ' + document.URL + '  \n';

コード

javascript:(()=>{const e=()=>{const e=document.createElement("textarea");e.textContent=t();const n=document.getElementsByTagName("body")[0];n.appendChild(e),e.select();const o=document.execCommand("copy");n.removeChild(e),console.log("Copy successful? = "+o)},t=()=>{let e=document.title;const t={":":"","\\[":"","\\]":"","\\|":""};for(let n in t)e=e.replace(new RegExp(n,"g"),t[n]);return"> "+e+"  \n> "+document.URL+"  \n"};e()})();

Markdown(リンク形式)

フォーマット

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

コード

javascript:(()=>{const e=()=>{const e=document.createElement("textarea");e.textContent=t();const n=document.getElementsByTagName("body")[0];n.appendChild(e),e.select();const o=document.execCommand("copy");n.removeChild(e),console.log("Copy successful? = "+o)},t=()=>{let e=document.title;const t={":":"","\\[":"","\\]":"","\\|":""};for(let n in t)e=e.replace(new RegExp(n,"g"),t[n]);return"- ["+e+"]("+document.URL+")\n"};e()})();

Redmine

フォーマット

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

コード

javascript:(()=>{const e=()=>{const e=document.createElement("textarea");e.textContent=t();const n=document.getElementsByTagName("body")[0];n.appendChild(e),e.select();const o=document.execCommand("copy");n.removeChild(e),console.log("Copy successful? = "+o)},t=()=>{let e=document.title;const t={":":"","\\[":"","\\]":"","\\|":""};for(let n in t)e=e.replace(new RegExp(n,"g"),t[n]);return'"'+e+'":'+document.URL+"\n"};e()})();

Backlog

フォーマット

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

コード

javascript:(()=>{const e=()=>{const e=document.createElement("textarea");e.textContent=t();const n=document.getElementsByTagName("body")[0];n.appendChild(e),e.select();const o=document.execCommand("copy");n.removeChild(e),console.log("Copy successful? = "+o)},t=()=>{let e=document.title;const t={":":"","\\[":"","\\]":"","\\|":""};for(let n in t)e=e.replace(new RegExp(n,"g"),t[n]);return"[["+e+":"+document.URL+"]]\n"};e()})();

DocComment

フォーマット

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

コード

javascript:(()=>{const e=()=>{const e=document.createElement("textarea");e.textContent=t();const n=document.getElementsByTagName("body")[0];n.appendChild(e),e.select();const o=document.execCommand("copy");n.removeChild(e),console.log("Copy successful? = "+o)},t=()=>{let e=document.title;const t={":":"","\\[":"","\\]":"","\\|":""};for(let n in t)e=e.replace(new RegExp(n,"g"),t[n]);return"# @see "+e+" "+document.URL+"\n"};e()})();
33
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
33
Help us understand the problem. What is going on with this article?