この記事は はてなエンジニア Advent Calendar 2020 - Qiita の23日目の記事です。
昨日は id:Krouton さんの 30日でできる! OS自作入門 を読むために nasm_of_nask というコンパイラを作った話 - KRAZY感情STYLE でした。よかったですね。
コードでコピーするココピーです
今日はちょっと前に作ったブラウザ拡張、cocopy を紹介します。
しゅぴっと拡張を開いてコピーするフォーマットを選択できます。
このアニメーションはコピー機がブーンとスキャンする感じをイメージしています。
利用者が js を書いてフォーマットを追加できます。
コードからは URL、タイトル、選択中のテキスト、ページの HTML にアクセスできます。
- Markdown, Scrapbox HTML, はてな記法, Textile, Backlog など、さまざまな記法でリンクを張りたい
- Amazon 商品 URL をシンプルにして共有したい、あわよくば自分のアフィリエイトIDを埋めたい
- 選択範囲を引用しつつ元ページ情報へリンクしたい
- 今のページ内リンクの見出しをリンクテキストに含めてコピーしたい
などのユースケースがあります。
モチベーション
文章中に URL が入ってると読みにくくないですか。
短くて明快な URL ならいいんだけど、長かったり、いろんなパラメータが付いてると気になってしまう、なんならパラメータを読もうとしてしまう。
昔から、はてな記法には [http://~~:title]
というタイトルを取得してリンクしてくれる記法があって、めちゃめちゃ便利に使っていた。でも今は仕事でのコミュニケーションの場が Github や Scrapbox、その他ツールへ広がっていて、いい感じにリンクするためにはいろんな記法を書く必要がある。リンクをコピーするためのブラウザ拡張はいろいろあるけど、Markdown に限られていたり、テンプレート機能が提供されていてもエスケープが不十分であったり、いまいち希望を満たすものがない。
コロナ禍でテキストコミュニケーションが増えてきたこともあり、いい感じのリンクを楽チンに作りまくりたい。
満足できるツールがほしいなーと思っていたので作りました。
作ってみると意外といろんな使い道が見つかるもので
- コピーする内容が1行である必要もないので、ページ内リンクのある見出しだけ集めて目次を作ったり
- Cloud Storage や BigQuery コンソールページから
gs://{bucket}/{path}
や{project}.{dataset}.{table}
をシュッとコピーしたり - Kibana やら何かしら検索できるサービスでクエリを
querySelector('input[aria-label*="search"]').value
で引っ張ってリンクテキストに含めたり
ちまちましたコードを書いて日々の作業を改善するのが好きな人にはおすすめです。
使ってる技術
Preact + styled-components でもろもろ作っている。
Preact | Preact: Fast 3kb React alternative with the same ES6 API. Components & Virtual DOM.
なるべくしゅぴっと素早くポップアップを開きたいと思って興味本位で使ってみたけど速度の比較はしていない。
これは実装が小さい頃のビルドサイズの比較だけどだいぶ違いますね。今リリースしているバージョンでも popup はギリギリ 900KiB に収まっている。
# react options.js 2.63 MiB options [emitted] options popup.js 2.38 MiB popup [emitted] popup sandbox.js 12.4 KiB sandbox [emitted] sandbox # preact options.js 346 KiB options [emitted] options popup.js 63.5 KiB popup [emitted] popup sandbox.js 12.4 KiB sandbox [emitted] sandbox
はじめは jsxFactory
周りだけ設定して react を aliasしなくてもいけるんじゃないかと思ったけど、styled-components が普通に import しているのでダメだった
その他 eslint やテストツールとの噛み合わせは Preact 使う - pokutuna にメモしてある。そのうち別途エントリにしたい。
アイコン
かわいくないですか? いっしょうけんめい描きました。
以前 Mackerel で仕事のがんばり具合を見える化する - ポクポク で書いた鯖くんから大きな成長が見られるのではないでしょうか。
明日の担当は id:hitode909 さんです。たのしみですね。