読者です 読者をやめる 読者になる 読者になる

daiizの自由帳

フレンチフライ トリュフ塩仕立て

新機能 SVG ScreenShot Frame

作品 tech

Chrome拡張機能 SVG SreenShot に新機能「SVG ScreenShot Frame」がつきました.機能の詳細や活用例は以下のScrapboxページをご覧ください.

開発着手時からはやく使えるようにしたいと思いを込めていた機能だったので,リリースに漕ぎ着けて良かったです.これでようやく任意のウェブページに埋め込まれたSVGスクリーンショット画像中のリンクを踏めるようになりました.Slackにポストして自動展開された画像に対してもOKです.

https://i.gyazo.com/1d5ede5cd8f9704b8b89943337b08fbd.gif

実はこちら記事の冒頭のキャプチャ画像はSVGスクリーンショットなので,最新版の拡張機能が入っていれば,画像中のオレンジ色のリンクを踏んでページを開けます.とても便利です.

SVGスクリーンショットのコンテンツはHTMLの<svg>要素で実現しているため,拡大や縮小された状態での表示にも大変強いです.たとえサムネイル画像が縮小表示されていても,その上にオーバーレイされるSVGコンテンツはリンクの位置でクリックできます.拡大されていても同様です.この機能の開発当初は,サムネイル画像が縮小表示されていた場合は,<iframe>のような内包されたコンテンツをスクロールして見られるような描画をしていました.しかしこの手法だと不要なスクロールバーが出たり,ページ全体のスクロールを邪魔したりと不格好でした.そこで思い切って<svg>を縮小した状態で表示する方法を試したところ意外と成功し,懸念点であった箇所の何もかもが綺麗に表現できたという次第です.めでたしめでたし.

機能の全貌をScrapboxのページとして素早く書いたことで,ブログにはゆったりと開発ストーリーを書けました.これからもこのスタイルを維持していきたいですね.

以下の画像はサンプルスクリーンショットです.ご紹介した新機能によって画像中のリンクをクリックできるかお試しください.

https://svgscreenshot.appspot.com/c/c-5193951464128512.png

SVG ScreenShot とは