Edited at

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

Qiitaの記事にもはてなブックマークとPocketのボタンが欲しいですよね。

そこで、それらのボタンと同じ機能を持つリンクを生成するためのJavaScriptスクリプトを書きました。

Qiitaの記事編集画面で開発者用ツールを開き、以下のJavaScriptをコピペして実行して下さい。

実行すると結果がクリップボードにコピーされます。

Chromeコンソールバージョン


snippet.js

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;
}
copy(`## はてなブックマーク・Pocketはこちらから
[はてなブックマークに追加](
${hatebuURL})
[Pocketに追加](
${pocketURL})`)
alert('コピーしました。')

全ブラウザ対応バージョン


snippet.js

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拡張を作って頂けると泣いて喜びます。

さて、今後はこのリンクを記事の一番下に掲載しておくことにします。ありがとうございました。


終わりに

Ruby on RailsとVueで作成したプログラミングスクールのレビューサイトを運営しています。良ければご覧ください。https://school-report.com/