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

daiizの自由帳

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

【日記】火曜日

日記

子供向けの紙芝居のページの下部に広告バナーが描かれている様子が唐突に思い浮かんできて,その雰囲気を想像していたら面白かった.

紙芝居を読み聞かせられているのが幼稚園くらいの子供だったとしたら,広告を広告と認識しない気がするので,良いシーンで派手な広告が入ってきたとしても特に邪魔だとは思わないのだろうか.

【日記】月曜日

日記

最近は日夜卒業論文と格闘しています.

計画的に進めてきたつもりではいたのですが,それでもまだまだ厳しいスケジュールです.もっと要領よく進められれば余裕があったのかもしれません.今はあまり振り返らないでそっとしておきたいですが,考えていることを少しだけ書いておきます.

個人的なプロジェクトでプログラムを書いているときは,試したいアイデアが出てきたらすぐに試してその場で感触を得る(成否という結果よりは,上手くいきそうか時間がかかりそうかを早めに把握したい)という流れが自分のなかで確立できているのですが,半年ほどやってきた研究ではまだこの流れが完璧には実行できていない気がします.心のどこかで身構えてしまって自由に色々試せていないというか,何か試すべきことが浮かんだときについつい一晩寝かせてしまい,これが積み重なって結果的に全体のスピード感が遅くなっているのだろうと思います.

新機能 SVG ScreenShot Scrap to Scrapbox

作品

以前にSVG ScreenShotの開発版に付けた機能「Scrap to Scrapbox」がChromeウェブストアに出品している製品版(v0.3.5+)にも搭載されました.この機能はScrapboxのbookmarkletから投稿するAPIを利用して作られています.

f:id:daiiz:20170110021448p:plain

Scrap to Scrapbox機能を使うためのキャプチャボタンは,拡張機能のオプションページで「Scrap to Scrapbox を有効にする 」メニューをONにしない限り表示されません.また,この機能でキャプチャしたSVGスクリーンショットコンテンツは通常の閲覧権限「自分のみ」ではなく,「リンクを知っている人全員」の設定になりますのでご注意ください.必要であればウェブアプリのコンテンツ画面で個別に変更できます.

Scrap to Scrapbox 機能についてもっと知る

新機能 SVG ScreenShot Frame

作品 tech

Chrome拡張機能 SVG SreenShot に新機能「SVG ScreenShot Frame」がつきました.機能の詳細や活用例は以下のScrapboxページをご覧ください.

開発着手時からはやく使えるようにしたいと思いを込めていた機能だったので,リリースに漕ぎ着けて良かったです.これでようやく任意のウェブページに埋め込まれたSVGスクリーンショット画像中のリンクを踏めるようになりました.Slackにポストして自動展開された画像に対してもOKです.

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

実はこちら記事の冒頭のキャプチャ画像はSVGスクリーンショットなので,最新版の拡張機能が入っていれば,画像中のオレンジ色のリンクを踏んでページを開けます.とても便利です.

SVGスクリーンショットのコンテンツはHTMLの<svg>要素で実現しているため,拡大や縮小された状態での表示にも大変強いです.たとえサムネイル画像が縮小表示されていても,その上にオーバーレイされるSVGコンテンツはリンクの位置でクリックできます.拡大されていても同様です.この機能の開発当初は,サムネイル画像が縮小表示されていた場合は,<iframe>のような内包されたコンテンツをスクロールして見られるような描画をしていました.しかしこの手法だと不要なスクロールバーが出たり,ページ全体のスクロールを邪魔したりと不格好でした.そこで思い切って<svg>を縮小した状態で表示する方法を試したところ意外と成功し,懸念点であった箇所の何もかもが綺麗に表現できたという次第です.めでたしめでたし.

機能の全貌をScrapboxのページとして素早く書いたことで,ブログにはゆったりと開発ストーリーを書けました.これからもこのスタイルを維持していきたいですね.

以下の画像はサンプルスクリーンショットです.ご紹介した新機能によって画像中のリンクをクリックできるかお試しください.

https://svgscreenshot.appspot.com/c/c-5193951464128512.png

SVG ScreenShot とは