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のエディターの一番下に貼り付けて下さい。
このようになります。
いかがでしたか?
どなたかこのコードを元にしてChrome拡張を作って頂けると泣いて喜びます。
さて、今後はこのリンクを記事の一番下に掲載しておくことにします。ありがとうございました。
とくめいチャット「ネコチャ」運営者 | とくめいでチャットしたい方は https://necocha.me/gCosts8Q まで | 東大生エンジニアブロガー です。とくめいチャットを送ると喜んで返信します。
Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。
また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?
コメント