SVG形式でウェブページのスクリーンショットを撮るChrome拡張機能「SVG Screenshot」をより便利に使うためのウェブアプリを Google App Engine で公開しました．SVG Screenshotのコンセプトについては以下の記事をご覧ください．
この記事では
- ウェブアプリでできること
- Chrome拡張機能とウェブアプリの融合（撮影したファイルをウェブアプリにアップロードして保存する機能）
について，順に紹介します．
ウェブアプリでできること
スクリーンショットファイルを表示する
https://svgscreenshot.appspot.com/viewerにアクセスすると，これまで拡張機能に付属していたものと同様なビューワページが開きます．拡張機能で生成されたスクリーンショットSVGファイルを，中央の白い領域にドラッグ・アンド・ドロップすると内容を表示できます．
このページを使えば，拡張機能をインストールすることなく，友人から受け取ったSVGスクリーンショットファイルを閲覧することができます．
スクリーンショットファイルをクラウドに保存する
この機能を使ってアップロードしたファイルは，アップロードした本人だけが閲覧／削除できます． この機能はGoogleアカウントでログインした状態でご利用ください．ページ右上の「Googleアカウントでログインする」リンクからログインできます．
ログインが完了していると，さきほどのビューワページの右上に雲のアイコンボタンが現れます．このボタンをクリックすると，表示中のSVGスクリーンショットファイルがウェブ上に保存されます．
アップロードが完了すると，画面下部に完了のメッセージが表示されます．
アップロードしたファイルを閲覧／削除する
ビューワページの左上「ホーム」リンク，または，https://svgscreenshot.appspot.com/にアクセスすると，保存されたファイルが一覧表示されます．
スクリーンショットカードをクリックすると，ビューワページにファイルが表示されて閲覧できます．カードの右上に表示される☓ボタンを押すとファイルが削除されます．
Chrome拡張機能とウェブアプリの融合
本日リリースされた最新版の拡張機能では，上記で紹介したウェブアプリの機能を直接的に使用することができます．手順をご紹介します．
Chrome拡張機能「SVG Screenshot」をインストール
Chrome ウェブストアでの配布ページにアクセスして，最新版の拡張機能をインストールします．
スクリーンショットを撮影する
ウェブページ上で右クリックして表示される「SVGスクリーンショットを撮る」を押すと，撮影範囲を選択する灰色のボックスが現れます．
これを好きな場所に移動してダブルクリックすると撮影されます．
スクリーンショットをアップロードする
撮影が完了すると，プレビューページが開きます．このページでは従来の「Download SVG」機能に加えて，「Upload SVG」機能が利用できます．ページ右上でログイン状態であることを確認して，「Upload SVG（ログイン時のみ）」をクリックすると，スクリーンショットがウェブアプリに保存されます．
繰り返しになりますが，保存されたファイルのリストは https://svgscreenshot.appspot.comにて，どの端末からでも確認できます．
最後に
お知らせ
- ウェブアプリ「SVG Screenshot for Web」は現在ベータ版です．
- Google Chrome でのご利用を推奨しています．
- 現時点で，ユーザーお1人当たりがアップロードできるファイルの上限は4個です．ウェブアプリが軌道に乗り次第，上限値を増やしていく予定です．（上限の変更が生じた場合は，このブログでお知らせします．）
お願い
- パスワードが写ったスクリーンショットなど，アップロードすることが不適切と思われるファイルのアップロードはおやめください．
- スクリーンショットファイルのバックアップは必ずご用意ください．
リンク
どうぞご利用ください！