QiitaにはてなブックマークとPocketボタンを設置するためのスクリプトを作成してみた

Qiitaの記事にもはてなブックマークとPocketのボタンが欲しいですよね。
そこで、それらのボタンと同じ機能を持つリンクを生成するためのJavaScriptスクリプトを書きました。
Qiitaの記事編集画面で開発者用ツールを開き、以下のJavaScriptをコピペして実行して下さい。
実行すると結果がクリップボードにコピーされます。

const userId = Qiita.user.url_name
const itemId = window.location.href.split('/').splice(-2,1)[0]
const hatebuURL = `//b.hatena.ne.jp/add?mode=confirm&url=https://qiita.com/${userId}/items/${itemId}`
const pocketURL = `//getpocket.com/edit?url=https://qiita.com/${userId}/items/${itemId}`
const  htmlToElement = (html)=> {
  var template = document.createElement('template');
  html = html.trim(); // Never return a text node of whitespace as the result
  template.innerHTML = html;
  return template.content.firstChild;
}
const copyToClipboard = str => {
    if(!str || typeof(str) != "string") {
      return "";
    }
    //elmはtextareaノード
    var elm =htmlToElement("<textarea id=\"tmp_copy\" style=\"position:fixed;right:100vw;font-size:16px;\" readonly=\"readonly\">" + str + "</textarea>")
    //strを含んだtextareaをbodyタグの末尾に設置
    document.body.appendChild(elm);
    //select()でtextarea内の文字を選択
    elm.select();
    //rangeでtextarea内の文字を選択
    var range = document.createRange();
    range.selectNodeContents(elm);
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
    elm.setSelectionRange(0, 999999);
    //execCommandを実施
    document.execCommand("copy");
    //textareaを削除
    document.body.removeChild(elm);
  };

copyToClipboard(`## はてなブックマーク・Pocketはこちらから
[はてなブックマークに追加](${hatebuURL})
[Pocketに追加](${pocketURL})`)
alert('コピーしました。')

コピーされた内容をQiitaのエディターの一番下に貼り付けて下さい。
このようになります。

はてなブックマーク・Pocketはこちらから

はてなブックマークに追加
Pocketに追加

 最後に

いかがでしたか?
どなたかこのコードを元にしてChrome拡張を作って頂けると泣いて喜びます。
さて、今後はこのリンクを記事の一番下に掲載しておくことにします。ありがとうございました。

はてなブックマーク・Pocketはこちらから

はてなブックマークに追加
Pocketに追加

Originally published at qiita.com

アカネヤ@ネコチャ運営者

とくめいチャット「ネコチャ」運営者 | とくめいでチャットしたい方は https://necocha.me/gCosts8Q まで | 東大生エンジニアブロガー です。とくめいチャットを送ると喜んで返信します。

Crieitはβバージョンで開発中です。進捗は公式Twitterアカウントをフォローして確認してください。 興味がある方は是非記事の投稿もお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

関連記事

コメント