関連記事のリンクを挿入するときに記事タイトルとURLを同時にコピペできるブックマークレット

ブログ書いてるときに外部リンクの挿入をサクッとしたいときってありますよね。たとえばこういうの。

株式会社LIG | 東京都台東区上野発のWeb制作会社、世界へ

これ、毎回手打ちでやるのめんどくさいので僕はJavaScriptで書いたブックマークレットをSafariに入れています。

ブックマークレットを活用して関連リンクをサクッと挿入しよう

まずやり方を説明します。そのあと僕が使っているブックマークレットをそのまま貼り付けておくので使いたい人いましたら使ってください。んでから最後に念のためブックマークレットを追加する方法も記載しています。


というわけでやり方です。関連リンクとして挿入したいページをSafariで開いてお気に入りボタンをクリック。


HTML LINKをクリック。


するとページ上部にHTML形式の文字列が表示されます。こいつをそのままコピー。


そして使っているエディタに貼り付け。


するとこんな感じで外部リンクをサクッと貼り付けることができます。MacでもiPad ProでもiPhoneでも動きます。

記事タイトルとURLを表示するブックマークレット

JavaScriptは以下です。トリプルクリックとかで全選択してコピーして使ってください。

javascript:(function()%7Bvar%20ele=document.createElement('textarea');ele.style.width='100%25';ele.value='%3Ca%20href=%22'+location.href+'%22%20target=%22_blank%22%20rel=%22nofollow%22%3E'+document.title+'%3C/a%3E';document.body.insertBefore(ele,document.body.firstChild);ele.focus();ele.select();ele.ondblclick=function()%7Bele.parentNode.removeChild(ele);%7D;ele.oncopy=function()%7BsetTimeout(function()%7Bele.parentNode.removeChild(ele);%7D,1);return%20true;%7D%7D)()

Safariにブックマークレットを登録する方法

僕は昔「Safariでブックマークレットを登録する方法がわからん!」って躓いた記憶があるのでiOSでブックマークレットを登録するやり方も書いておきます。


まず適当なページを開いてアクションボタンをタップしてブックマークに追加します。


ブックマークに追加。


「保存」をタップ。この時点でURLを変更できない仕様なので一旦お気に入りに追加してから編集しましょうというアプローチです。


今追加したブックマークを編集します。お気に入りボタンをタップ。


「編集」をタップ。


さっき追加したブックマークをタップ。


名前を任意のものに変更してURLをさっきのJavaScriptで上書き。以下にもう一度同じのを貼っておくのでコピペしてください。

javascript:(function()%7Bvar%20ele=document.createElement('textarea');ele.style.width='100%25';ele.value='%3Ca%20href=%22'+location.href+'%22%20target=%22_blank%22%20rel=%22nofollow%22%3E'+document.title+'%3C/a%3E';document.body.insertBefore(ele,document.body.firstChild);ele.focus();ele.select();ele.ondblclick=function()%7Bele.parentNode.removeChild(ele);%7D;ele.oncopy=function()%7BsetTimeout(function()%7Bele.parentNode.removeChild(ele);%7D,1);return%20true;%7D%7D)()

で、今後は関連リンクを挿入したいページでブックマークレットをタップすれば冒頭のようにコピペ一発で記事タイトルとURLを同時に挿入することができます。

以上です。お疲れ様でした。