はじめに

　本書は、SVG（Scalable Vector Graphics）とスクリーンショットについて、筆者が趣味で探究してきた内容をまとめたものです。SVGやスクリーンショットに興味がある、ブックマークとしてウェブページをまるごと保存したい、高解像度ディスプレイで撮られたスクリーンショット画像の実寸サイズの取得方法を知りたい方を対象としています。

　本書では、各章は基本的に独立しています。はじめに、本書で扱うSVG画像を読み書きできるようになるための、基礎的な説明をします。続いて、SVGとスクリーンショットを組み合わせた「SVG Screenshot」について、さらに、高解像度ディスプレイで撮ったスクリーンショットのウェブブラウザー上での扱いの工夫を解説します。最後に、「SVG Screenshot」をより発展させ、ウェブページのスクリーンショットをXMLで記述する「ScreenshotML」を提案し、その仕様と実装を示します。また、付録ではJavaScriptでPNG画像のバイナリを読む話、高解像度ディスプレイでのスクリーンショットの問題解決の際に行った、Chromiumのコードリーディングについてまとめています。

　ベクターイラストを作成するために広く普及しているSVGは、どれだけ拡縮して表示しても、ビットマップ画像と異なり、画質が損なわれません。1章では、この便利さを活かしたアイデアを紹介します。また、2章、4章では、技術として成熟している（いわゆる、枯れた技術）XMLやXSLTを利用することで、SVGとスクリーンショットでおもしろいことができるのではないか、という視点で探究しました。さらに3章では、デバイスの高解像度化に伴い直面した、スクリーンショットの表示に関する課題を掘り下げています。今後も高解像度化はより進んでいくと予想されるため、参考になることがあるかもしれません。

　今回探究を進めるなかで、仕様書やその実装、参考実装となる関連する既存のソフトウェアのコードから、数多くの学びを得ました。普段多く触れる二次情報だけでなく、巻末付録で紹介したような一次情報にも、目を向けるきっかけになれば幸いです。日常で自分の使うものを形にして改良していくと、次々とアイデアが湧いてきます。また、興味があることを深掘りするのは、楽しいことです。本書が、読者のそのようなきっかけになると、嬉しい限りです。

本書について

サンプルコード

　紙面の都合上、本書に登場するコード片は、一部省略されていることがあります。ソースコードの全容はhttps://github.com/TheTeamJ/svg-screenshot-bookまたは、記事中で別途示したGitHubリポジトリーにて公開していますので、必要に応じてご参照ください。

著者紹介

　daiiz. 京都生活4年目。関心トピックは、ウェブブラウザーや検索技術・検索UI、画像処理など。仕事では、FAQ検索システムHelpfeel¹を作っている。趣味でも、気の赴くままにアプリの開発や要素技術の研究を行っており、これらの成果をまとめた技術同人誌の執筆も手掛けている。夢はSVG芸人。

　Twitter: @daizplus / GitHub: @daiiz

サークル紹介

　TeamJ. 大学時代に、ある講義がきっかけで結成。日頃はScrapbox²上でプログラミングの知見や、創作アイデアの共有を行っている。現在、合同誌の制作を企画中。年に一度は皆で集まり、大きめの旅行をするのが楽しみ。最近の旅の思い出は、伊豆オレンヂセンターで飲んだウルトラ生ジュース。

　GitHub: @TheTeamJ

免責事項

　本書に記載されている内容は、情報の提供のみを目的としています。したがって、本書を参考にした開発や運用に際しては、必ずご自身の責任と判断のもと行ってください。これらの情報による開発や運用の結果について、著者はいかなる責任も負いません。

　本書で紹介している、著者が作成したデモサイトやアプリケーションは、運用費などの事情により予告なく変更、または終了する可能性があります。あらかじめご了承ください。

表記関係について

謝辞

　本書の底本を技術系同人誌頒布即売会「第二回技術書同人誌博覧会」に出展するにあたって、スケジュールの相談をはじめ、原稿のレビュー、居酒屋でのちょっとした会話をもとにして、「はじめに」の書き起こしを行ってくれたサークルメンバーのkanata（@hinanokanata）くんに感謝します。

　本書を商業版として執筆する機会をいただいた、インプレスR&D 山城様に感謝します。また、「さまざまなウェブページの断片的なスクリーンショットが、ネットワーク状に繋がっているイメージ」というぼんやりとした表現でのお願いにもかかわらず、見事な表紙イラストを描いてくださったデザイナーのひのふ（@pinopo_）様に感謝します。

目次