タイトルとURLを色々なフォーマットでコピーできるブックマークレット
- ブログ
- Markdown
- ChatWork
- Textile
- JavaScript
- HTML
- ドキュメンテーション
- 約1500字
普段から愛用していて、あらゆる作業効率を地味にアップさせてくるリンク共有用のブックマークレットを紹介します。Wiki・チャット・チケット・資料の作成が捗ります!
ちなみに、ブックマークレットとはブラウザのブックマークに登録して使う、ちょっとしたJavaScriptコードのことです。
参考:
知ってそうで知らないブックマークレットの仕組みと使い方（と便利な11点まとめ） ｜ ライフハッカー［日本版］
目次
Markdown形式
Bitbucket・GitHub・Qiita・Slack等、最も色々なシーンで使う形式です。
出力サンプル
[タイトルとURLを色々なフォーマットでコピーできるブックマークレット | デザインとWeb開発とその他諸々。 MEDIA-MASSAGE](http://media-massage.net/blog/linkbookmarklet/)
ブックマークレット
コード
javascript:prompt('Markdown','%5B'+document.title+'%5D%28'+location.href+'%29')()
ChatWork形式
国内で人気の高いChatWorkへURLリンクを綺麗に貼れるブックマークレットです。選択中のテキストも引用されます。 ChatWorkの記法は独特ですぐ忘れてしまうので、ブックマークレット化すると楽です。ChatWorkに投稿すると下図のような表示になります。
出力サンプル
[info][title]タイトルとURLを色々なフォーマットでコピーできるブックマークレット | デザインとWeb開発とその他諸々。 MEDIA-MASSAGE[/title]http://media-massage.net/blog/linkbookmarklet/
[/info]
ブックマークレット
コード
javascript:prompt('ChatWork','[info][title]'+document.title.replace(/([\[\]])/g,'\\$1')+'[/title]'+location.href+'\n'+window.getSelection()+'[/info]')();
Textile形式
Redmineを中心に、Bitbucketの一部やGitHubでも使うことができます。Markdownに比べるとマイナーです。
出力サンプル
"タイトルとURLを色々なフォーマットでコピーできるブックマークレット | デザインとWeb開発とその他諸々。 MEDIA-MASSAGE":http://media-massage.net/blog/linkbookmarklet/
ブックマークレット
コード
javascript:prompt('Textile','%22'+document.title.replace(/"/g, '')+'%22%3A'+location.href)()
HTMLリンク形式(タイトル)
<a>タグでマークアップ済のテキストデータを出力します。
出力サンプル
<a href="http://media-massage.net/blog/linkbookmarklet/">タイトルとURLを色々なフォーマットでコピーできるブックマークレット | デザインとWeb開発とその他諸々。 MEDIA-MASSAGE</a>
ブックマークレット
コード
javascript:prompt('HTML link','%3Ca%20href%3D%22'+location.href+'%22%3E'+document.title+'%3C%2Fa%3E')();
HTMLリンク形式(URL)
<a>タグでマークアップ済のテキストデータを出力します。タイトルではなくURLをそのまま使用し、title属性にページタイトルをセットします。
出力サンプル
<a href="http://media-massage.net/blog/linkbookmarklet/" title="タイトルとURLを色々なフォーマットでコピーできるブックマークレット | デザインとWeb開発とその他諸々。 MEDIA-MASSAGE">http://media-massage.net/blog/linkbookmarklet/</a>
ブックマークレット
コード
javascript:prompt('HTML link','%3Ca%20href%3D%22'+location.href+'%22%20title%3D%22'+document.title+'%22%20%3E'+location.href+'%3C%2Fa%3E')();
プレーンテキスト形式
FacebookやTwitterの本文にしたり、紙の資料に使ったりと、何にでも使えるプレーンテキストのフォーマットです。
出力サンプル
タイトルとURLを色々なフォーマットでコピーできるブックマークレット | デザインとWeb開発とその他諸々。 MEDIA-MASSAGE
http://media-massage.net/blog/linkbookmarklet/
ブックマークレット
コード
javascript:prompt('Plain text',document.title+'%5Cn'+location.href+'%5Cn')();
リッチテキスト形式
リッチテキスト対応のエディタへペーストするとそのままハイパーリンクとして使えるフォーマットです。Azure DevOpsのワークアイテムなどにも貼れます。
出力サンプル
タイトルとURLを色々なフォーマットでコピーできるブックマークレット | デザインとWeb開発とその他諸々。 MEDIA-MASSAGE
ブックマークレット
コード
下記をminifyしたもの。Bookmarklet to copy current page title as a rich-text formatted linkからforkして作成。
| javascript:void(function() { | |
| let w = window.open(null, null, "height=60,width=500"); | |
| let d = w.document; | |
| d.open(); | |
| d.write(`<body style="padding:10px 15px;margin:0;display:flex;flex-flow:row nowrap;align-items:center"> | |
| <a id="a" style="flex-grow:1" target="_blank"></a> | |
| <button id="copy" style="width:100px;height:30px;margin-left:10px;cursor:pointer">Copy</button> | |
| </body>`); | |
| d.title = "Copy as rich-text"; | |
| let u = window.location.toString(); | |
| let c = d.getElementById("copy"); | |
| let a = d.getElementById("a"); | |
| a.innerHTML = window.document.title; | |
| a.href = u; | |
| function copyToClip(doc, html, text) { | |
| function listener(e) { | |
| e.clipboardData.setData("text/html", html); | |
| e.clipboardData.setData("text/plain", text || html); | |
| e.preventDefault(); | |
| } | |
| doc.addEventListener("copy", listener); | |
| doc.execCommand("copy"); | |
| doc.removeEventListener("copy", listener); | |
| }; | |
| c.onclick = function() { | |
| copyToClip(d, a.outerHTML, u); | |
| w.close(); | |
| }; | |
| d.close(); | |
| c.focus(); | |
| })() |
※投稿内容は私個人の意見であり、所属企業・部門見解を代表するものではありません。
