tag:crieit.net,2005:https://crieit.net/tags/pocket/feed
「pocket」の記事 - Crieit
Crieitでタグ「pocket」に投稿された最近の記事
2019-02-09T15:51:43+09:00
https://crieit.net/tags/pocket/feed
tag:crieit.net,2005:PublicArticle/14791
2019-02-09T15:50:38+09:00
2019-02-09T15:51:43+09:00
https://crieit.net/posts/Qiita-Pocket
QiitaにはてなブックマークとPocketボタンを設置するためのスクリプトを作成してみた
<p>Qiitaの記事にもはてなブックマークとPocketのボタンが欲しいですよね。<br />
そこで、それらのボタンと同じ機能を持つリンクを生成するためのJavaScriptスクリプトを書きました。<br />
Qiitaの記事編集画面で開発者用ツールを開き、以下のJavaScriptをコピペして実行して下さい。<br />
実行すると結果がクリップボードにコピーされます。</p>
<pre><code class="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('コピーしました。')
</code></pre>
<p>コピーされた内容をQiitaのエディターの一番下に貼り付けて下さい。<br />
このようになります。</p>
<h2 id="はてなブックマーク・Pocketはこちらから"><a href="#%E3%81%AF%E3%81%A6%E3%81%AA%E3%83%96%E3%83%83%E3%82%AF%E3%83%9E%E3%83%BC%E3%82%AF%E3%83%BBPocket%E3%81%AF%E3%81%93%E3%81%A1%E3%82%89%E3%81%8B%E3%82%89">はてなブックマーク・Pocketはこちらから</a></h2>
<p><a target="_blank" rel="nofollow noopener" href="//b.hatena.ne.jp/add?mode=confirm&url=https://qiita.com/ToshioAkaneya/items/44eb377f27f55e21e626">はてなブックマークに追加</a><br />
<a target="_blank" rel="nofollow noopener" href="//getpocket.com/edit?url=https://qiita.com/ToshioAkaneya/items/44eb377f27f55e21e626">Pocketに追加</a></p>
<h2 id=" 最後に"><a href="#%E3%80%80%E6%9C%80%E5%BE%8C%E3%81%AB"> 最後に</a></h2>
<p>いかがでしたか?<br />
どなたかこのコードを元にしてChrome拡張を作って頂けると泣いて喜びます。<br />
さて、今後はこのリンクを記事の一番下に掲載しておくことにします。ありがとうございました。</p>
<h2 id="はてなブックマーク・Pocketはこちらから"><a href="#%E3%81%AF%E3%81%A6%E3%81%AA%E3%83%96%E3%83%83%E3%82%AF%E3%83%9E%E3%83%BC%E3%82%AF%E3%83%BBPocket%E3%81%AF%E3%81%93%E3%81%A1%E3%82%89%E3%81%8B%E3%82%89">はてなブックマーク・Pocketはこちらから</a></h2>
<p><a target="_blank" rel="nofollow noopener" href="//b.hatena.ne.jp/add?mode=confirm&url=https://qiita.com/ToshioAkaneya/items/44eb377f27f55e21e626">はてなブックマークに追加</a><br />
<a target="_blank" rel="nofollow noopener" href="//getpocket.com/edit?url=https://qiita.com/ToshioAkaneya/items/44eb377f27f55e21e626">Pocketに追加</a></p>
アカネヤ@ネコチャ運営者