タイトルとURLを色々なフォーマットでコピーできるブックマークレット

普段から愛用していて、あらゆる作業効率を地味にアップさせてくるリンク共有用のブックマークレットを紹介します。Wiki・チャット・チケット・資料の作成が捗ります!

ちなみに、ブックマークレットとはブラウザのブックマークに登録して使う、ちょっとしたJavaScriptコードのことです。

参考:

知ってそうで知らないブックマークレットの仕組みと使い方（と便利な11点まとめ） ｜ ライフハッカー［日本版］

Markdown形式

Bitbucket・GitHub・Qiita・Slack等、最も色々なシーンで使う形式です。

コード

javascript:prompt('Markdown','%5B'+document.title+'%5D%28'+location.href+'%29')()

出力サンプル:

[タイトルとURLを色々なフォーマットでコピーできるブックマークレット | デザインとWeb開発とその他諸々。 MEDIA-MASSAGE](http://media-massage.net/blog/linkbookmarklet/)

ブックマークレット:

Title+URL: Markdown

ChatWork形式

国内で人気の高いChatWorkへURLリンクを綺麗に貼れるブックマークレットです。選択中のテキストも引用されます。 ChatWorkの記法は独特ですぐ忘れてしまうので、ブックマークレット化すると楽です。ChatWorkに投稿すると下図のような表示になります。

コード

javascript:prompt('ChatWork','[info][title]'+document.title.replace(/([\[\]])/g,'\\$1')+'[/title]'+location.href+'\n'+window.getSelection()+'[/info]')();

出力サンプル:

[info][title]タイトルとURLを色々なフォーマットでコピーできるブックマークレット | デザインとWeb開発とその他諸々。 MEDIA-MASSAGE[/title]http://media-massage.net/blog/linkbookmarklet/
[/info]

ブックマークレット

Title+URL: ChatWork

Textile形式

Redmineを中心に、Bitbucketの一部やGitHubでも使うことができます。Markdownに比べるとマイナーですが、筆者はTextileの方が好きです。

コード

javascript:prompt('Textile','%22'+document.title.replace(/"/g, '')+'%22%3A'+location.href)()

出力サンプル:

"タイトルとURLを色々なフォーマットでコピーできるブックマークレット | デザインとWeb開発とその他諸々。 MEDIA-MASSAGE":http://media-massage.net/blog/linkbookmarklet/

ブックマークレット:

Title+URL: Textile

HTMLリンク形式(タイトル)

<a>タグでマークアップ済のテキストデータを出力します。

コード

javascript:prompt('HTML link','%3Ca%20href%3D%22'+location.href+'%22%3E'+document.title+'%3C%2Fa%3E')();

出力サンプル:

<a href="http://media-massage.net/blog/linkbookmarklet/">タイトルとURLを色々なフォーマットでコピーできるブックマークレット | デザインとWeb開発とその他諸々。 MEDIA-MASSAGE</a>

ブックマークレット

Title+URL: HTML

HTMLリンク形式(URL)

<a>タグでマークアップ済のテキストデータを出力します。タイトルではなくURLをそのまま使用し、title属性にページタイトルをセットします。

コード

javascript:prompt('HTML link','%3Ca%20href%3D%22'+location.href+'%22%20title%3D%22'+document.title+'%22%20%3E'+location.href+'%3C%2Fa%3E')();

出力サンプル:

<a href="http://media-massage.net/blog/linkbookmarklet/" title="タイトルとURLを色々なフォーマットでコピーできるブックマークレット | デザインとWeb開発とその他諸々。 MEDIA-MASSAGE">http://media-massage.net/blog/linkbookmarklet/</a>

ブックマークレット

Title+URL: HTML(URL)

プレーンテキスト形式

FacebookやTwitterの本文にしたり、紙の資料に使ったりと、何にでも使えるプレーンテキストのフォーマットです。

コード

javascript:prompt('Plain text',document.title+'%5Cn'+location.href+'%5Cn')();

出力サンプル:

タイトルとURLを色々なフォーマットでコピーできるブックマークレット | デザインとWeb開発とその他諸々。 MEDIA-MASSAGE
http://media-massage.net/blog/linkbookmarklet/

ブックマークレット

Title+URL: Plain

※投稿内容は私個人の意見であり、所属企業・部門見解を代表するものではありません。