🌊

Slackで綺麗にリンク（URL）を投稿するための方法と時短テクニック

2023/07/23に公開

Slack

tech

SlackでURLを共有する時、長いURL（リンク）をそのまま貼り付けると非常に見た目が悪い。

これを改善する1つの手段として、テキストをハイパーリンク化するという方法がある。

ハイパーリンク化は至って簡単。

リンクを設定したいテキストを選択して、リンクボタンを選択。その後表示されるポップアップにURLを入力すると実現できる。

ただし、この方法は非常に面倒くさい。そこで、もっと楽にハイパーリンクテキストを作る方法を紹介する。

1. Ctrl + Vで選択中テキストのリンクを貼り付ける

実は先ほどのリンクを設定したいテキストを選択した状態のときに、Ctrl + Vを押すことで、テキストのハイパーリンク化が実現できる。多くの場合、この方法さえ覚えておけば事足りるだろう。

2. リッチテキストを生成するブックマークレットを使用する

プログラマは怠惰なので、もっと楽をしたい。

つまり、リンクを貼り付けるテキストそのものも自動生成したい。

こちらのサイトで公開されているブックマークレットを利用すれば、今開いているタイトルにページのURLのリンクを付与した文字列をコピーできる。実際のブックマークレットは以下。

javascript:void(function(){let w=window.open(null,null,"height=60,width=500"),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(),c=d.getElementById("copy"),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()}())

ブックマークレットを実行すると、画像のようなポップアップウィンドウが表示される。Copyボタンを押すと、ハイパーリンク化したテキストがコピーされる。後はそれをSlackに貼り付けるだけだ。このような、装飾付きの文字のことを、リッチテキストと言うらしい。

※ブックマークレットとは何なのか、についてはこちらの記事が詳しい。

3. markdown形式のリンクテキストをショートカット一発でハイパーリンクに変換する

ブックマークレットを使うと、[ページタイトル](https://ページURL)といったmarkdown形式のリンクテキストを作って、クリップボードにコピーできる。ブックマークレットは以下の通り。

javascript:(function(){var f=document.title;var c=location.href;var e="["+f+"]("+c+")";var b=document.createElement("div");b.appendChild(document.createElement("pre")).textContent=e;var d=b.style;d.position="fixed";d.left="-100%";document.body.appendChild(b);document.getSelection().selectAllChildren(b);var a=document.execCommand("copy");document.body.removeChild(b)})();