詩と創作・思索のひろば

ドキドキギュンギュンダイアリーです!!!

Fork me on GitHub

SlackやGoogle Docsにページへのリンクを共有するなら圧倒的にcocopyが楽

Scrapbox のような Wiki 的なツールでは URL にページ名が入ることが多く、URL を見るだけでどんな内容なのか想像がついてよい一方で、こういう URL を Slack や Google Docs のような別の場所に共有するとパーセントエンコーディングされた URL になってしまい意味がわからなくなる。日本語を書いていることだけが分かる状態。

f:id:motemen:20220217190426p:plain
マルチバイトしかないと本当にわからないね

Slack がアクセスできない URL だと、プレビューも展開してくれないしね。かといってデコードした状態の URL を貼っても、変なところで途切れたりする。

f:id:motemen:20220217190239p:plain
・(中黒)でリンクが途切れている

文字は難しい……。URL の解釈はものによって異なってくるのもまた困る。これはプレーンな文字列を渡しているのでこういう困難が出てくるのであって、最近はクリップボードでリッチなコンテンツを受け渡しすることができるので、これを使ってみればいいのではないか。Slack のような最近のアプリは、Google Docs や GitHub などのウェブアプリも含めて画像やリンクの貼り付けにフツーに対応している。

Chrome からページの情報をコピーする拡張として cocopy というものがある。これに最近リッチテキストをコピーできる機能がベータとして追加されたのでこれを使ってみる。この拡張については以下の記事を参照してください。

js を書いて URL やページの内容を加工してコピーできる Chrome 拡張ココピーのご紹介 - ぽ靴な缶

機能を追加したのはこの Pull Request だ。おれの PR だ!

cocopy は JavaScript を書くことで、ページの情報からコピーするデータを生成できる。リッチテキストをコピーさせるにはこういう感じのを書く(インタフェースは変わるかもとのこと):

(page) => {
  return {
    html: render('<a href="{{&url}}">{{title}}</a>', page),
    text: page.title,
  };
}

これで現在のページタイトルをリンクテキストに、ページの URL を指すようなリンクを生成できる。これならリンクも途切れない!

実装には Clipboard.write() を使っていて、これに MIME タイプとともに Blob を与える。text/html と HTML 片を与えるとリンクなどのリッチテキストを生成できるらしい。text/plain のバージョンも一緒にセットしておかないと Slack では貼り付けできないのでそちらも一緒に生成するようにしている。

ちなみに以下のような設定にすればリッチリンクとして取り回ししつつ、プレーンテキストしか受け付けないエディタ(iA Writer など)では Markdown で貼り付けることができてさらに便利。ただ GitHub など、ものによってはリッチコンテンツとプレーンテキストを混ぜて使っているようで、これが意図通りに動かないこともある。その場合は Shift+Cmd+V などしてプレーンテキストを貼り付けるとよろしい。

(page) => {
  return {
    html: render('<a href="{{&url}}">{{title}}</a>', page),
    text: render('[{{&title}}]({{&url}})', page),
  };
}

はてなで一緒に働きませんか?