mottox2 blog

技術同人誌『探求 SVGとスクリーンショット』がいい意味で変態な本だった

book

thumbnail

12月14日に開催された『技術同人誌博覧会』で手に入れた『探求 SVGとスクリーンショット』を読みました。タイトルの時点で『おっ?』となるようなものですが、めちゃくちゃ深い一冊でした。
なお、JSとフロントエンドをそれなりに程度いじっている人向けの内容でした。

探求 SVGとスクリーンショット

第1章 簡単なSVG画像をつくる

第1章はこの本唯一の初心者向けの内容です。いわゆる普通のSVGを説明した後に、ラスタ画像・リンクの埋め込み方、モノクロ化の方法などSVG Screenshotにつながる使い方の説明をしています。
言われればなるほど…となるのですが、初めて見た使い方で驚きました。

第2章 SVG Screenshot開発機

作者の開発しているSVG Screenshotについて説明しています。SVGに付与するメタ情報の取得方法、Pupperteerを使ったスクリーンショットを撮る方法などかなりテクニカルな話が読めます。
SVGはXMLをベースにしているので、それを活かしメタ情報(リンクや元URL)を付与する考えでした。その中でも画像やリンクの情報を保持し続けるなど実用性の高い形になっていて、非常に面白いものでした。

第3章 高解像度ディスプレイで撮ったスクリーンショットを適切なサイズで表示する

端末ごとの画面密度の違いを吸収するための話です。なんとこの本ではこのテーマだけで1章を割り当てています。
画面密度を考慮して表示する方法と、画面密度を算出する方法を、作者がどのようにして探っていったかがわかる内容になっています。すごく泥臭い感じですが、臨場感があって好きです。

第4章 ScreenshotMLの提案

筆者が提案しているScreenshotML(Screenshot Markup Language)について説明しています。
スクリーンショットに付随する情報をXMLで表現することで、見た目と情報の分離を行い拡張性の高い仕様を実現しようとしています。説明中でXMLにスタイルを指定するXSLやスキーマを記述するXSDなどに触れており、読者でも独自のXML拡張言語が作れるようになっています。
独自仕様を決めるときは仕様の決めが難しいと思ってるんですが、しっかり仕様を固めていて作者の強さを感じる内容でした。

付録

『PNG画像のバイナリから解像度を読み取る』、『Blinkでの画像のNaturalSize導出過程を追う』など非常にマニアックな付録です。SVGの本を読んでいてバイナリを読み始めたときはびっくりしました。

感想

SVGスクリーンショットというと、ベクターでスクリーンショットを保存するのと思いきや、ラスター画像とメタ情報を同居させる方法。ラスター画像のメタ情報より手軽に扱えるので面白い考え方だと思います。
作者はスクショなどのキャプチャを保存・共有するGyazoというサービスを提供する会社に所属しているようで、仕事と趣味が近そうで非常に楽しそうです。この本自体も同社の運営するScrapboxで執筆したらしいです。すごい(けど、意味がわからない)

私はNode.jsでXMLを作る仕事をしているのですが、仕事にも活きる内容が書いてあったので大満足です。SVGやXMLに興味のある方に読んでもらいたい同人誌でした。

dev

ウェブ技術で縦書きを含む画像を生成したい

ここ最近、Web技術を利用した画像生成に興味があります。本記事では、日本語における表現の一種である縦書きに焦点を当て、Web技術を使った縦書きを含む画像生成方法についての調査をまとめました。 > 現

blog

Netlify Formsで問い合わせフォームを作ったら簡単だった

追記(2022/12/29): 問い合わせに対応する窓口をTwitterに統一したいので、フォームページは削除しました。 当ブログは静的サイトホスティングサービスのNetlifyでホスティングされ

netlify
dev

翻訳でHacktoberfestに参加しました

毎年10月に開催されるHacktoberfestに参加しました。このイベントはOSSへの貢献を行い、期間中に規定数(4つ)の貢献を行った人に特典がプレゼントされるものになっています。 自分はドキュメ

Copyright © 2023 @mottox2 All Rights Reserved.