JPEGの品質は「85がよい」と、耳にしたことはありませんか？
そもそも、JPEGの「品質」という数値が何を意味しているのか、深く考えたことはあるでしょうか。

JPEGは1992年に誕生し、30年以上たっています。
今でも写真やウェブ画像など、私たちの身の回りで広く使われている画像フォーマットです。
しかし、JPEGの圧縮の仕組みや「品質」の意味について、詳しく知っているでしょうか。

JPEGは、人間の視覚特性や画像の特徴、情報を効率的に表現するためのさまざまな符号化技術を、うまい具合に組み合わせてデータを削減します。
その裏側には、長年にわたる研究と工夫が積み重ねられており、とてもおもしろい仕組みになっています。

本書では、なるべく予備知識がなくても理解できるように、JPEGの仕組みを解説します。

普段何気なく使っているJPEG画像の舞台裏を、一緒にのぞいてみましょう。
きっと、これまでとは違った視点で画像を見られるようになるはずです。
目次

第1章 色を視るしくみ

• 光の正体
• 光を色と認識するまで
  　- 桿体細胞の役割
  　- 錐体細胞の役割
• 色の正体
  　- 光を視る場合
  　- 物体を視る場合
• カメラのしくみ
  　- 標本化
  　- 量子化
  　- イメージセンサー

第2章 JPEGファイルフォーマット

• JPEGの誕生
• JPEGの規格
  　- JPEGコア規格（ISO/IEC 10918-1）
  　- JPEG File Interchange Format（ISO/IEC 10918-5）
  　- Exchangeable Image File Format
• JPEGのデータ構造
  　- Start Of Image
  　- Application segment
  　- Define Quantization Table
  　- Define Huffman Table
  　- Start Of Frame
  　- Start Of Scan
  　- End Of Image

第3章 JPEGの圧縮アルゴリズム

• 画像圧縮の考え方
  　- 色の変化を省略
  　- 細かい情報を省略
  　- データを圧縮
• 圧縮処理の流れ
• 色空間変換
  　- 色空間の視覚的効果
• ダウンサンプリング
  　- クロマサブサンプリング方式
  　- 視覚的影響
• ブロック分割
• レベルシフト
• 離散コサイン変換
  　- 画像の周波数表現
  　- 2次元DCT
  　- 逆DCT
• 量子化
  　- 量子化テーブル
  　- デコーダーの品質
  　- ブロックノイズ
  　- モスキートノイズ
• エントロピー符号化
  　- DC 成分の符号化
  　- AC 成分の符号化
• 全体の計算過程
  　- 符号化過程
  　- 復号化過程

付録A JPEG以外のフォーマット

• JPEG 2000
• JPEG XR
• JPEG XT
• JPEG XL
• JPEG XS
• TIFF（Tagged Image File Format）
• GIF（Graphics Interchange Format）
• PNG（Portable Network Graphics）
• BMP（Microsoft Windows Bitmap Image）
• WebP
• RAW
• SVG（Scalable Vector Graphics）

付録B 色空間

• sRGB
• Adobe RGB
• Display P3
• CMYK
• HSV / HSB
• HSL
• YCbCr

付録C 画質評価

• 平均二乗誤差
• ピーク信号対雑音比

Web E2Eテスト・スクレイピングツールのPlaywrightの解説本第2弾は、Playwrightとユニットテストの棲み分けと、前著で解説したロケーターを用いてより実践的なテストの書き方を解説する実践書です。
前半はテストの考え方を解説してます。ユニットテストとE2Eテストの比較をしたうえで、効率的なテスト方法を解説します。
後半はテストを書くうえでよくある認証周り、メール、位置情報やカメラといったさまざま状況下での書きかと、設定関係の解説をしています。
目次

第1章　テストの考えかた

• テスト手法
  　- ユニットテスト（単体テスト）
  　- インテグレーションテスト（結合テスト）
  　- E2Eテスト
• テストピラミッド
• テスト戦略
• テストケースの構造化パターン
  　- ユニットテストとArrange-Act-Assert
  　- E2EテストとGiven-When-Then

第2章　テストテクニック

• テストジェネレーターでテストコードを作ってみよう
  　- ウェブブラウザを操作するコードの作成
  　- 画面を検証するコードの作成
  　- できたテストコードでテスト
• プロジェクトを使いさまざまな環境でテスト
• ロケーターを使い変更に強いテストを作成
• 共通のコードをフィクスチャで管理
  　- フィクスチャを作成
  　- 既存のtest()を拡張
  　- テストを実行
• クッキーを共有して認証のテスト
  　- セッション情報を保存
  　- プロジェクト依存関係でセッションデータのやり取り
• 視覚的なテスト
  　- ビジュアルリグレッションテスト
  　- スナップショットテスト
  　- スナップショットの作成・更新
  　- スナップショットの保存先
• イベントの監視
  　- リクエスト
  　- レスポンス
  　- 新しいタブやウィンドウ
  　- ダイアログ
  　- ファイルダウンロード
• ネットワークハンドリング
  　- リクエストの変更
  　- レスポンスの変更
  　- リクエストのブロック
• メールのテスト
• 位置情報のテスト
• カメラやマイクのテスト
  　- フェイクに使う動画や音声の準備
  　- Chromeにフェイクファイルを設定
• 並列実行
  　- 直列で実行
  　- 並列実行に耐えられるテストコードを作る

第3章　CIでもPlaywright

• Playwrightが対応するCIサービス
• GitHub ActionsでPlaywright
  　- ネイティブ環境でテスト
  　- Docker環境でテスト
  　- Docker Compose環境でテスト
• CI環境でのテスト状況を保存

第4章　Playwrightの設定

• Playwrightの設定方法
  　- 環境によって設定を使い分ける
• 基本オプション
  　- テスト全体のタイムアウト
  　- 各テストのタイムアウト
  　- アサーションのタイムアウト
  　- リトライ回数
  　- テストの並列実行
  　- テスト状況の記録
  　- スナップショット保存先
• テストプロジェクト
  　- 複数のプロジェクトを設定
  　- プロジェクトごとにテストファイルをフィルタリング
  　- プロジェクトの依存関係
• ウェブブラウザの設定
  　- デバイスの設定
  　- ベースURL
  　- カラースキーム
  　- ビューポート
  　- デバイススケールファクター
  　- 通信状態
  　- ロケール
  　- タイムゾーン

Web E2Eテスト・スクレイピングツールのPlaywrightの解説本第1弾は、Playwrightをはじめてさわる方がロケーターというブラウザを自由自在に操るAPIを駆使し、簡単なE2Eテストが書けるようになるまでの基本的な使い方の解説をする入門書です。
Playwrightを使ううえで最重要である、ロケーターを中心に解説をしています。
ロケーターが理解できるようになると、ウェブサイトの操作を自在に行えるようになります。
また操作後の要素を検証するマッチャーも解説しており、PlaywrightでE2Eテストがひととおり書けるようになります。
目次

第1章　ウェブブラウザを自動操作する技術

• なぜウェブブラウザを自動操作するのか
• ウェブブラウザの種類
• ウェブブラウザを操作するツール
• ウェブサイトから見たフルブラウザとヘッドレスブラウザの違い

第2章　Playwrightのインストール

• ネイティブ環境で使用する場合
  　- インストール時に作成されるファイル
• Docker環境で使用する場合
• Playwrightのアップデート
• 実行テスト

第3章　Playwright API

• Playwrightの始め方
  　- ウェブブラウザを起動
  　- ページを作成
  　- ページを移動
  　- ページ内の要素に対して処理
  　- ウェブブラウザを閉じる
• レスポンス
  　- すべてのヘッダー情報を取得する
  　- 特定のヘッダー情報を取得する
  　- HTTPステータスを取得する
  　- HTML全文を取得する
• Locator
  　- ロールで探す
  　- テキストで探す
  　- ラベルで探す
  　- プレースホルダーで探す
  　- 画像の代替テキストで探す
  　- 補足情報で探す
  　- テストIDで探す
  　- CSSまたはXPathで探す
  　- 楽にLocatorを生成する
• Locator演算子
  　- メソッドチェーン
  　- 2つのLocatorのうち両方に一致
  　- 2つのLocatorのうち片方に一致
• 複数ある要素の選択
  　- 任意の位置にある要素を選択する
  　- 指定のテキストを含むフィルタリング
  　- 指定のテキストを含まないフィルタリング
  　- 子孫要素に別のLocatorを含むフィルタリング
  　- 子孫要素に別のLocatorを含まないフィルタリング
• 要素内の中身を取得
  　- HTMLを取得する
  　- テキストを取得する
• スクリーンショット
  　- Locatorで選択した要素のスクリーンショット
  　- ビューポート内のスクリーンショット
  　- ページ全体のスクリーンショット
• マウスの操作
  　- マウスクリックを行う
• キーボードの操作
  　- キー入力を行う
• フォーム要素への操作
  　- テキストフォームに入力されているテキストの取得
  　- テキストフォームへテキストの入力
  　- テキストフォームのテキストを削除
  　- チェックボックス・ラジオボタンをオンにする
  　- チェックボックスをオフにする
  　- セレクトボックスを選択する
  　- ファイルをアップロードする
• ダイアログ
• クッキー
  　- クッキーを取得する
  　- クッキーを削除する
  　- クッキーを追加する

第4章　Playwright E2Eテスト

• テストの始め方
  　- テストの実行
  　- UIモードでデバッグを行う
  　- トレースビューアーでデバッグを行う
  　- テストするウェブブラウザを変更する
• アサーション
  　- ステータスコードが正常であることを確かめる
  　- ページURLを確かめる
  　- ページタイトルを確かめる
  　- 要素のテキストを確かめる
  　- 要素が表示されていることを確かめる
  　- 要素が表示されていないことを確かめる
  　- 要素に属性があることを確かめる
  　- 要素にIDが定義されていることを確かめる
  　- 要素にクラスが定義されていることを確かめる
  　- DOMのノード数を確かめる
  　- フォームのValueを確かめる
  　- セレクトボックスのValueを確かめる
  　- チェックボックス・ラジオボタンがオンになっていることを確かめる
  　- 要素の有効(enabled)であることを確かめる
  　- 要素の無効(disabled)であることを確かめる
  　- 要素が編集可能(editable)であることを確かめる
  　- スナップショットテスト
  　- アサーションを否定する
• テスト前処理、後処理を行う
  　- テストケースごとに前処理、後処理を行う
  　- テストファイルごとに前処理、後処理を行う
  　- プロジェクトごとに前処理、後処理を行う
  　- 全テストで前処理、後処理を行う
  　- 前処理、後処理の実行順番
• クッキーやlocalStorageを共有する
  　- クッキーやlocalStorageを保存する
  　- 保存したクッキーやlocalStorageを使用する