SVG Screenshot

背景・概要

SNSの普及により，ウェブページの共有手段としてスクリーンショット画像が用いられる機会が増えてきた．これらのキャプチャ画像は，撮影元のページのURLなどの基本情報が紐付けられていないことが多いため，画像を受け取った人がオリジナルサイトにアクセスすることは困難である．

ウェブサイトのスクリーンショットはPNGやJPEGなどの画像形式で撮影されることが一般的であるが，これらのキャプチャ画像は，撮影範囲内に含まれているハイパーリンクをクリックしてページ遷移することはできない．SVGスクリーンショットは，これが可能である．キャプチャ画像内のハイパーリンクをクリックできれば，リンクを辿ってより詳細な情報にいち早くアクセスできる．

ウェブサイトの好きな部分をリンクも含めてまるごとキャプチャできるSVG ScreenShotは，ウェブサイトの特性を最大限に活かしたスクリーンショット画像形式であると言える．

目的

いま見ているウェブページの一部分をすぐに共有する．

キャプチャ画像を介したウェブページの共有を快適に行う．

キャプチャ範囲に含まれるハイパーリンクを保持したSVG画像形式のスクリーンショットコンテンツを作成する．

開発内容

Chrome拡張機能

表示中のウェブサイトの任意範囲を選択して，スクリーンショットを撮影する．このスクリーンショット (SVGスクリーンショット) はSVG形式で生成されるため，図1のようにキャプチャ画像に加えて埋め込まれたリンク情報も保持される．

スクリーンショットを撮影してSVG ScreenShotのウェブアプリにアップロードする．アップロード後に，SVGスクリーンショットが埋め込まれたScrapboxページを新規作成するオプション機能も持つ．(SVG ScreenShot Scrap to Scrapbox 機能)

ウェブサイトに埋め込まれたSVGスクリーンショットのPNG形式のサムネイルを見つけ次第，SVGスクリーンショットコンテンツをオーバーレイ表示する．(SVG ScreenShot Frame 機能)

https://gyazo.com/1a8cd0d778b7d9eec72bda0ff6ad52de

図1. SVGスクリーンショットコンテンツの仕組み

ウェブアプリ

撮影されたスクリーンショットを管理する．

アイテム管理ページ (要ログイン) では，これまでに撮影したスクリーンショットの一覧，スクリーンショットのプレビューや詳細情報閲覧，共有用のURLの取得などが行える．

スクリーンショットプレビューページでは，キャプチャ画像内のリンクのクリックが可能なSVGスクリーンショットに加えて，撮影元ページのURLやタイトルを閲覧できる．また，閲覧中のキャプチャ画像に関連しそうなアイテム（閲覧ユーザーの手持ちのアイテム）が提案されてリストアップされる．(関連キャプチャを提示する機能)

使用方法

以下では，SVG ScreenShotへのログイン及びChrome拡張機能がインストール済みであることを想定している．

SVGスクリーンショットを撮影する

1. 撮影したいページ上で右クリックする．

2. メニューリストから，「SVGスクリーンショットを撮る」をクリックして選択する．

3. 撮影範囲を指定するためのボックスが表示されるので，これを目的の位置へドラッグして移動する．ボックスの大きさの変更も行えるので，必要に応じて調節する．

4. ボックスの左上「Capture」ボタンをクリックして撮影する．スクリーンショットが撮影されて，ウェブページに自動でアップロードされる．一連の処理が完了すると，ブラウザツールバーのSVG ScreenShot拡張機能アイコンが https://gyazo.com/b58475111c8bdd4155cf01febdec256e → https://gyazo.com/3fe35fdd513ffe274f99052314763b9b のように変化する．

撮影したスクリーンショットをプレビューする

1. ウェブアプリにアクセスして，スクリーンショットの一覧を表示する．

2. プレビューしたいアイテムをクリックする．

https://i.gyazo.com/08c933278313fc0b4a27ed3b0924c219.gif

3. プレビューに関するメニュー「スクリーンショットを開く」, 「ウェブサイトを開く」, 「画像のURLをコピー」がプルダウン表示されるので，目的のアクションを選択する．「スクリーンショットを開く」をクリックすると，プレビューページが開く．

SVGスクリーンショットを共有する

1. 「撮影したスクリーンショットをプレビューする」のステップ3で，「スクリーンショットを開く」をクリックしてプレビューページを開く．

2. ウェブブラウザのアドレスバーに表示されているURLをコピーして共有する．

SVGスクリーンショットを自分のウェブサイトに埋め込む

詳細とサンプル

1. 「撮影したスクリーンショットをプレビューする」のステップ3で，「画像のURLをコピー」をクリックしてPNG形式のサムネイル画像のURLをコピーする

2. サムネイル画像をHTMLタグ <img src=''> を用いてウェブサイトに埋め込む．拡張機能は，埋め込まれたSVGスクリーンショットのサムネイルを見つけ次第，SVGコンテンツをロードして表示する．拡張機能がインストールされていない環境ではサムネイル画像のまま表示される．

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

関連するスクリーンショット画像を探す

1. 「撮影したスクリーンショットをプレビューする」のステップ3で，「スクリーンショットを開く」をクリックしてプレビューページを開く．

2. プレビュー画面の下部に，撮影されたオリジナルサイトのURLと，プレビュー中のメインのスクリーンショットに関連しそうなアイテム (閲覧ユーザーの手持ちのアイテム内から絞り込まれたアイテム) が提案されてリストアップされる．

3. 関連の度合いは，撮影元のページURLの影響範囲を選択して調節可能．例えば，メインのスクリーンショットが http://daiiz.hatenablog.com/entry/2016/11/29/235600 で撮影されていた場合，関連キャプチャの絞り込み検索は以下のアニメーションのようになる．

https://gyazo.com/07f81dd2a59070197fa0e6257a0de3fb

公開情報

プロジェクトサイト

https://svgscreenshot.appspot.com/welcome

Chrome拡張機能

Chrome ウェブストアにて配布中．

https://chrome.google.com/webstore/detail/svg-screenshot/fdjeimdcjbkbddhedpppgjnhfkjdkpcc

ウェブアプリ

最新版のウェブブラウザ Chrome, Firefox, Safari でご利用ください．

https://svgscreenshot.appspot.com/

ソースコード

Chrome拡張機能