SVG Screenshot

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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