SVG Screenshotのいま

これは TeamJ Advent Calendar 2018 の18日目の記事です。昨日は ひらくPCバックnanoを買った - かなたのめも でした。

2年前にリリースしたSVG Screenshotのこれまでの取り組みと現状について。

当時はChrome拡張機能のみのリリースだったため、撮影したsvg形式のスクリーンショット画像は手元にダウンロードされていた。ダブルクリックで外部リンク入りのsvgファイルを満足にプレビューできるアプリはそう無く、ファイルアイコンをブラウザにD&Dして開くという不便さがあった。

そこで、撮影した画像を全部サーバーにuploadしてブラウザで一覧、プレビューできるウェブアプリを作った。Electronでプレビュー専用アプリを作ったこともあったがしっくりこなかった。全ての画像がクラウド上にあるいま、PWAとして復活させるのはアリかもしれない。

ここから暫くはウェブアプリの改善など細々したことをやっていた。撮影元ウェブサイトのURLのパス区切りで画像の検索範囲を絞り込めるやつは良い出来だとと思う。他人から共有されたSVG Screenshot画像を見ているときに、その撮影元のURLを使って、自分の手持ち画像群から関連するやつを検索することもできる。細かい工夫があった気がするのでいつか紹介したい。

ここまでは、「SVG Screenshot」という拡張機能ありきの作品として成長させてきた。しかしある時、スクリーンショットをsvgで撮るというアイデア自体がほかでも使えるのではないか？という考えに発展し、これをスクリーンショットの1つのジャンルとして勝手に捉えるようになった。ウェブサイトのスクリーンショットをpngで保存する代わりにsvgとして生成することで得られる恩恵を追求する試みを行って、さらに色々生まれつつある。

ヘッドレスブラウザで撮影する実験。Puppeteerを使っている。いまは手元のChromeを用いてrenderしているが、GAEで動かしておけばスマホからもサイトの任意領域のSVG Screenshotを撮れるようになるかもしれない。

GyazoでScrapboxページを撮影したpng画像から、画像をOCR (Cloud Vision API) を通して青色文字のpage linkを抽出し、その領域をリンク化したsvgを生成する実験。リポジトリは公開準備中。

ほかにも進行中のものが幾つかあるので、良いタイミングが来たらまた書きます。

明日は id:kanata_02 くんが書いてくれます。