#daiizメモ

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

技術ネタはてブ数が多いごはん情報

スポンサーリンク

SVG ScreenShot 開発版に Scrap to Scrapbox 機能を付けた

先日公開されたScrapboxのBookmarklet機能(URLパラメータbodyにページのコンテンツを渡すと,Scrapboxに新規ページを作成してくれるもの)が大変便利だったので,これをSVG ScreenShot 開発版から呼び出せるようにした.SVG ScreenShot Chrome拡張機能のオプションページで Scrapbox のプロジェクトid(ボックスid)を登録しておくだけで使える.

f:id:daiiz:20161222142621p:plain

普段通り,ウェブページ上でスクリーンショットを撮りたい部分を指定して撮影するだけでOK.撮影時には「Capture」ボタンではなくて「Scrap」ボタンを押すことでScrap to Scrapbox機能が使える.このボタンは従来の「Capture」と全く同じ動作(スクショを撮ってSVG ScreenShotのウェブアプリにアップロードする動作)をした後,Scrapbox の Bookmarklet で指定されていたURLにアクセスしてScrapboxのボックス内にページを生成する.Scrapbox上にページを作るために,下記の情報をURLパラメータに乗せて送信する.

  • ウェブページのタイトル
    • これをScrapboxページのタイトルにする
  • ウェブページのURL
  • SVG ScreenShot コンテンツのサムネイルのURL
    • https://svgscreenshot.appspot.com/c/x/****.png のようなやつ
    • このURLをScrapboxの画像記法 [] で挿入する

ページの閲覧者がSVG ScreenShot 拡張機能をインストールしている場合,Scrapboxページ内のSVG ScreenShotコンテンツのサムネイル画像をホバーすると,スクショ元のページのリンクを含んだSVGがオーバレイされる.これによりスクリーンショット内のリンクを踏んでその先のページにアクセスすることもできる.

https://i.gyazo.com/e82799b82501052ed6d84e01c6c5e087.gif

撮影してからページが作成されるまでの様子はこんな感じです.

https://i.gyazo.com/841927ab73a2b32f7ad580d296d1000d.gif

https://i.gyazo.com/30d080b08fcb35aba67c73bbcd5236c5.gif

Scrapboxのページ一覧にはこのように表示される.
f:id:daiiz:20161222150015p:plain

詳細はまた書きます.

関連記事