…刊書きます！ #技書博— だいず (@daizplus) 2021年12月20日 ちなみに技書博2にも参加させていただき、このときは、SVGスクリーンショットの開発記を販売しました。 展示中から懇親会まで、会場は終始とても過ごしやすい雰囲気でした。一般参加のお客さんとじっくり話すこともできて、かつてない充実した一日だったことを今でも覚えています。今回も楽しみです。 原稿はまだ何もなく、印刷所も決まっていませんが、今回も紙の本を作りたいと思っています。応援よろしくお願いします。

技術書典10のオンラインマーケット開催期間もあと2日。いまさらですが紹介です。サークル「TeamJ」から2点を販売しています。よろしければぜひお買い求めください！！ うち1冊『探究 SVGとスクリーンショット』は一昨年の冬に技書博2で頒布したものと同じですのでご注意ください。 最新作品『写真を点描画ふうに変換するツールをつくる』については以下のブログ記事から雰囲気を掴めると思います。

…2年前にリリースしたSVG Screenshotのこれまでの取り組みと現状について。 当時はChrome拡張機能のみのリリースだったため、撮影したsvg形式のスクリーンショット画像は手元にダウンロードされていた。ダブルクリックで外部リンク入りのsvgファイルを満足にプレビューできるアプリはそう無く、ファイルアイコンをブラウザにD&Dして開くという不便さがあった。 そこで、撮影した画像を全部サーバーにuploadしてブラウザで一覧、プレビューできるウェブアプリを作った。Elec…

レポートを一個残しているが夏休みに突入した．早速，今夏の一個目の成果がでた． MacBook ProのRetinaディスプレイなどの高解像度ディスプレイで，最新バージョンのDynamicGazo（SVGScreenshotの実験版）使ってスクリーンショットを撮ったとき，プレビューページで画質を損ねることなく綺麗に表示できるようになった． Before After ここではあまり伝わらないかもしれないけれど，実際にアプリで見てみると綺麗．

SVG ScreenShotに新機能「関連キャプチャ」を搭載しました．以前にお知らせした「SVG ScreenShot Frame」機能に続いてこちらも思い入れのある機能で，リリースが待ち遠しいものでした．昨日から全ユーザーを対象に使えるようになっています． 主役となるスクリーンショットアイテムの個別プレビューページにアクセスすると，スクショ画像内のリンクがクリック可能なキャプチャ画像が表示されます．そしてその下には，撮影されたオリジナルサイトのURLと，主役キャプチャ画像に…

…と様子が異なるため，SVG ScreenShot を撮影するためのメニューが出てこない．これだと論文のAbstractを撮れなくて不便だった． ということで，ブラウザツールバーの拡張機能アイコンをクリックして現れるポップアップウィンドウに撮影ボタンを設置した．「SVGスクリーンショットを撮る」というボタンを押すと，普段通りの撮影範囲を選択するための枠が表示される． PDFプレビュー中に限らず（通常のウェブサイトであっても）この撮影方法が使えます．右クリックメニューが上手くいか…

以前にSVG ScreenShotの開発版に付けた機能「Scrap to Scrapbox」がChromeウェブストアに出品している製品版（v0.3.5+）にも搭載されました．この機能はScrapboxのbookmarkletから投稿するAPIを利用して作られています． Scrap to Scrapbox機能を使うためのキャプチャボタンは，拡張機能のオプションページで「Scrap to Scrapbox を有効にする 」メニューをONにしない限り表示されません．また，この機能…

…hrome拡張機能 SVG SreenShot に新機能「SVG ScreenShot Frame」がつきました．機能の詳細や活用例は以下のScrapboxページをご覧ください． 開発着手時からはやく使えるようにしたいと思いを込めていた機能だったので，リリースに漕ぎ着けて良かったです．これでようやく任意のウェブページに埋め込まれたSVGスクリーンショット画像中のリンクを踏めるようになりました．Slackにポストして自動展開された画像に対してもOKです． 実はこちら記事の冒頭の…

これについて，あれからまた少し進化して，オプションページで複数のScrapboxのボックス名を登録できるようになった．スクリーンショット撮影時にボックス名を選択できる便利機能． オプションページでの設定の様子 スクリーンショット撮影時にボックスを選んでいる様子 「Capture」ボタンを押すとScrapboxページが作成される

…利だったので，これをSVG ScreenShot 開発版から呼び出せるようにした．SVG ScreenShot Chrome拡張機能のオプションページで Scrapbox のプロジェクトid（ボックスid）を登録しておくだけで使える． 普段通り，ウェブページ上でスクリーンショットを撮りたい部分を指定して撮影するだけでOK．撮影時には「Capture」ボタンではなくて「Scrap」ボタンを押すことでScrap to Scrapbox機能が使える．このボタンは従来の「Captur…

…分で作って使っているSVG ScreenShotにおいて，スクショ範囲のリンク位置などを描画するSVGは等倍で取得できるが，その背景に表示するスクショ画像のサイズが大きくなってしまう問題で困っていた．具体的な状況としては，本来はこうなって欲しいシーンで， 下の2つの画像を左上を基準に重ねたような，スケールがズレたものが得られてしまう． これだと背景画像が大きくて，リンク位置がずれてしまっている． このように対処して解決した． https://github.com/daiz71…

…スクリーンショット「SVG ScreenShot」に関して， リリース記事にはじまり，Chrome ウェブストアへの出品やウェブアプリの公開などの記事を一箇所にまとめたプロジェクトサイトをオープンしました．関連ブログ記事の集約とともに，Chrome拡張機能やウェブアプリへのリンクや，簡単な使い方や使用例を掲載しました． https://svgscreenshot.appspot.com/welcome さらに，GyaPC::Asia Tokyo 2016 でLTをさせて頂いた…

久しぶりに SVG ScreenShot のキャプチャに関係する機能を改良した．（変更 1件，追加機能 1件） 撮影方法の変更 長方形の領域をドラッグしてキャプチャ範囲を決定するところまでは変更なし．最後のアクションとして撮影するために，これまでは長方形領域をダブルクリックしていたけれど，指が疲れたり，何らかの拍子に長方形がズレたり，分かりにくかったりと，色々あったので変更した．来週くらいにリリース予定のバージョンからは，領域の左上に緑色の「✔ Capture」ボタンが表示さ…

はてなブログ5周年ありがとうキャンペーンお題第1弾「はてなブロガーに5つの質問」 1. はてなブログを始めたきっかけは何ですか？ ある日突然，日記を付け始めようと思い，折角なので紙ではなくインターネット上にログを残していこうということでブログサービスを探していた．ちょうどGitHubとかにも入門している最中でMarkdownの便利さに感動していたところ，はてなブログがMarkdown記法に対応しているということで，迷わずはてなブログに登録した． 2.ブログ名の由来を教えて！ …

…含めた様々な要素や，SVGスクリーンショットの埋め込みに対応する予定です． 物事を説明するとき，このようにブログ記事として書くこともできますが，動画やスライドショーを使うともっと伝わりやすくなる気がします．今日紹介した「リアルタイムスライド」サービスは，動画共有サービスとブログの中間を目指して作り込んでいきたいと思っています． 発表で言い忘れてたこと あとで詳しく言うとか行って言い忘れてた．Firebaseの無料プランだと同時接続は100クライアントまでしかできないんです— …

SVGスクリーンショットに新機能を追加しました．変なタイトルですが最強な機能です． SVGスクリーンショットウェブアプリの，スクリーンショットコンテンツをプレビューする画面で利用できます．画面左下に「PNG画像をダウンロードする」ボタンを用意しましたのでこちらからご利用ください． 何ができるのか スクリーンショットコンテンツをPNG画像としてダウンロードできます．ダウンロードされたファイルはただの画像ファイルですのでPCでもスマホであっても，普通の画像プレビューアプリで開くこ…

…週のリリースです． SVG Screenshot ついに，アプリのアイコンが決定しました！ 高校の頃からの友人で，美術センス抜群のまれ (@maremarecosmo)さんに描いて頂きました． ちなみに，僕のプロフィールアイコンもまれさんが描いてくれたものです． これを機にChrome拡張機能v0.1.3をリリースしました． SVG Screenshot - Chrome Web Store アイコンの変更に加えて， 選択した文字列をスクリーンショットに保持する 保持された文…

…書くコーナーです． SVG Screenshot for Web 自分が撮影したスクリーンショットの一覧画面で絞り込み検索が可能になりました． SVG Screenshot ウェブアプリについてはこちらの記事をご覧ください． SVG Screenshot (beta) Chrome Apps Launcher （Chrome拡張機能） ▲ アプリを一覧表示した様子 ▲ 接頭辞:を用いてパッケージ化されていないアプリのみを検索した様子 公式のChrome アプリランチャーが廃止…

SVG形式でウェブページのスクリーンショットを撮るChrome拡張機能「SVG Screenshot」をより便利に使うためのウェブアプリを Google App Engine で公開しました．SVG Screenshotのコンセプトについては以下の記事をご覧ください． この記事では ウェブアプリでできること Chrome拡張機能とウェブアプリの融合（撮影したファイルをウェブアプリにアップロードして保存する機能） について，順に紹介します． ウェブアプリでできること スクリーン…

SVG形式でウェブページのスクリーンショットを撮るChrome拡張機能「SVG Screenshot」をアップデートしました．SVG Screenshotについては以下の記事をご覧ください． 追加された機能 範囲選択ボックスの消去機能 選択ボックスの右上に表示される「☓」ボタンを押すと消去されます． 最新版を入手 ChromeやVivaldiを使用している方は，拡張機能の最新版をChromeウェブストアから入手できます．すでにインストールされている場合は自動で最新版に更新され…

SVG形式でウェブページのスクリーンショットを撮るChrome拡張機能「SVG Screenshot」のデスクトップクライアントをElectronで作っている． いまはGitHubのプライベートリポジトリで管理しながら作っていて，もう少し動作が安定してきたら一般公開にする予定． SVGファイルをダブルクリックするとアプリが起動して，ウェブページを撮ったものを閲覧できる．SVGなのでリンク部分をクリックすることができて，クリックすると普段使っているブラウザにウェブページが表示さ…

…ンショットを撮影してSVG形式で保存するChrome拡張機能「SVG Screenshot」の最新版をChromeウェブストアで公開しました． SVG Screenshotについては下記記事をご覧ください: SVG ScreenshotをChromeウェブストアで公開しました - ShikousakuGo リンクもまるごとキャプチャしてSVGで出力するChromeスクリーンショット拡張をつくりました - ShikousakuGo 今回のアップデートでは，撮ったスクリーンショッ…

…ンショットを撮影してSVG形式で保存するChrome拡張機能「SVG Screenshot」を，Chromeウェブストアに出品しました． 以下のストアページからインストールしてご利用いただけます． chrome.google.com 機能の詳細や使用方法については下記の記事をご覧ください．今後も開発を継続していきますので，もしも最新の機能が搭載されたバージョンをすばやく使用したい場合は，GitHubのリポジトリをクローンしてお試しください． 今後 拡張機能にも保存したスクリー…

…ーンショットを撮ってSVG形式でダウンロードできるChrome拡張機能をつくりました．SVGで出力しているため，普通のPNGやJPGと比べると，以下のような少しだけ高度なことができます． スクリーンショットを撮ったページのURLを<svg>のdata属性として保持できる スクリーンショットの範囲内のリンクをそのまま残すことができる． ページ中の<a>の位置に，外部ページヘのリンクを持つ<rect>を挿入しています．クリックするとリンク先のページが開きます． ブラウザで通常リン…