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

daiizの自由帳

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

【SVG ScreenShot】スクリーンショット画像ファイルをURLとして使えるようになりました

作品 tech

SVGスクリーンショットに新機能を追加しました.変なタイトルですが最強な機能です. SVGスクリーンショットウェブアプリの,スクリーンショットコンテンツをプレビューする画面で利用できます.画面左下に「PNG画像をダウンロードする」ボタンを用意しましたのでこちらからご利用ください.

何ができるのか

スクリーンショットコンテンツをPNG画像としてダウンロードできます.ダウンロードされたファイルはただの画像ファイルですのでPCでもスマホであっても,普通の画像プレビューアプリで開くことができます.これまではSVGファイルをダウンロードしていたため,一般の画像ビューワでお手軽綺麗には閲覧できませんでした.

何が凄いのか

これだとただのPNG形式のスクリーンショット画像ですが,ここから簡単にSVG形式のスクリーンショットをプレビューできます. 実はダウンロードされた画像ファイルのファイル名には,SVGスクリーンショットのウェブアプリでコンテンツを特定するidが含まれています.つまりこの画像ファイルをウェブアプリの画面にドロップするだけで,コンテンツのプレビューページを開くことができます.このプレビューページでは従来通りのSVGコンテンツが表示されますので,スクリーンショットに埋め込まれたリンクをクリックできますし,撮影したページに移動することも可能です.

この機能を使えば「 https://svgscreenshot.appspot.com/c/5743114304094208」というURLを共有する代わりに,人気記事-5743114304094208.pngと名付けた画像を共有してもOK! ということです.もちろんコンテンツの公開範囲設定も可能です.

さらに

この仕組みの特長は,画像に付けられたファイル名(に含まれたid)を保持できてさえいれば,スクリーンショットコンテンツのURLをいつでも生成できるということです*1.これを利用して,Google DriveGoogle Photos との連携を実現しました.予めSVGスクリーンショットのChrome拡張機能をインストールしておけば,これらのサービスにアップロードしたスクリーンショットPNG画像をクリックして,SVGのプレビューページを開くことができます*2.普段使い慣れたサービスで画像を管理することができます.

f:id:daiiz:20160926022051p:plain
Google Drive のファイル一覧ページからコンテンツを検出

f:id:daiiz:20160926022121p:plain:w500
Google Photos の写真詳細ページからからコンテンツを検出

Slackも投稿した画像のファイル名を保持してくれるらしいので,近いうちに同様に対応する予定です.

関連リンク

*1:ファイル名が壊れた場合は再ダウンロードすればOKです

*2:この機能については後日詳細を書きます