Skip to content

README.md

Latest commit

 

History

History
163 lines (125 loc) · 6.04 KB

README.md

File metadata and controls

163 lines (125 loc) · 6.04 KB

@d-zero/print

ウェブサイトのスクリーンショットを撮影するツールです。

  • Puppeteerを実行してページのスクリーンショットを撮影します
  • png、pdf、noteの3つの形式で出力できます
  • 複数のデバイスサイズでスクリーンショットを撮影可能（7種類のプリセット + カスタム設定）
  • レスポンシブデザインの検証に最適

CLI

npx @d-zero/print -f <listfile> [options]
npx @d-zero/print <url>... [options]

リストをファイルから読み込むか、URLを直接指定して実行します。

実行した結果は.printディレクトリに保存されます。

オプション

  • -v, --version: バージョンを表示
  • -f, --listfile <file>: URLリストを持つファイルのパス
  • <url>: 対象のURL（複数指定可能）
  • -t, --type <type>: 出力形式（デフォルト: png）
    • png: PNG画像（指定されたデバイスサイズで生成されます）
    • pdf: PDFファイル（ブラウザの印刷機能を使用、Print CSSが適用されます）
    • note: PNG画像のスクリーンショットに対してメモ欄付きのPDFファイルが生成されます
  • -d, --devices <devices>: デバイスプリセット（カンマ区切り、デフォルト: desktop-compact,mobile）
  • -T, --timeout <ms>: リクエストタイムアウト（ミリ秒、デフォルト: 30000）
  • -o, --open-disclosures: キャプチャ前にすべての<details>要素を開き、すべてのbutton[aria-expanded="false"]要素をクリックします
    • 新しい要素が見つからなくなるまで繰り返し処理（最大1000回、各イテレーション後500ms待機）
    • ネストされた要素や動的に生成される要素にも対応
    • 最大イテレーション数に達した場合はエラーで終了
  • --limit <number>: 並列実行数の上限（デフォルト: 10）
  • --interval <ms>: 並列実行間の間隔（デフォルト: なし）
    • 数値または"min-max"形式でランダム範囲を指定可能
  • --debug: デバッグモード（デフォルト: false）
  • --verbose: 詳細ログモード（デフォルト: false）

利用可能なデバイスプリセット

  • desktop: 1400px幅
  • tablet: 768px幅
  • mobile: 375px幅（2倍解像度）
  • desktop-hd: 1920px幅
  • desktop-compact: 1280px幅
  • mobile-large: 414px幅（3倍解像度）
  • mobile-small: 320px幅（2倍解像度）

使用例

# デフォルトデバイス（desktop-compact, mobile）
npx @d-zero/print https://example.com

# カスタムデバイス指定
npx @d-zero/print https://example.com --devices desktop,tablet,mobile

# PDF出力
npx @d-zero/print -f urls.txt --type pdf

# ファイルから読み込み + デバイス指定
npx @d-zero/print -f urls.txt --devices desktop,mobile

# disclosure要素を展開してキャプチャ
npx @d-zero/print https://example.com --open-disclosures
npx @d-zero/print https://example.com -o

URLリストのファイルフォーマット

https://example.com
https://example.com/a
https://example.com/b
ID:ABC https://example.com/c
ID:XYZ https://example.com/xyz/001
# コメント
# https://example.com/d

URLの手前に任意のIDを付与することで、出力ファイル名にIDが含まれます。ホワイトスペースで区切ることでIDとURLを分けることができます。 IDが指定されていない場合は、連番がIDとして使用されます。連番は1から始まり、3桁のゼロパディングされた数字として出力されます。空行を除いた行数が連番として使用されます。

#で始まる行はコメントとして無視されます。

ページフック

Frontmatterのhooksに配列としてスクリプトファイルのパスを渡すと、ページを開いた後（厳密にはPuppeteerのwaitUntil: 'networkidle0'のタイミング直後）にそれらのスクリプトを実行します。スクリプトは配列の順番通りに逐次実行されます。

---
hooks:
  - ./hook1.cjs
  - ./hook2.mjs
---

https://example.com
https://example.com/a
︙

フックスクリプトは、以下のようにエクスポートされた関数を持つモジュールとして定義します。

/**
 * @type {import('@d-zero/print').PageHook}
 */
export default async function (page, { name, width, resolution, log }) {
	// 非同期処理可能
	// page: PuppeteerのPageオブジェクト
	// name: サイズ名（'desktop' | 'mobile'）
	// width: ウィンドウ幅
	// resolution: 解像度
	// log: ロガー

	// ログイン処理の例
	log('login');
	await page.type('#username', 'user');
	await page.type('#password', 'pass');
	await page.click('button[type="submit"]');
	await page.waitForNavigation();
	log('login done');
}

例のように、ページにログインする処理をフックスクリプトに記述することで、ユーザー認証が必要なページのスクリーンショットを撮影することができます。

認証

Basic認証

Basic認証が必要なページの場合はURLにユーザー名とパスワードを含めます。

例: https://user:pass@example.com

ライブラリとしての使用

CLIだけでなく、プログラムからも使用できます。

import { print } from '@d-zero/print';
import type { PrintOptions, PrintType, PageHook } from '@d-zero/print';

await print(['https://example.com', 'https://example.com/about'], {
	type: 'png', // 出力形式: 'png' | 'pdf' | 'note'
	devices: {
		desktop: { width: 1400 },
		mobile: { width: 375, resolution: 2 },
	},
	timeout: 30000,
	interval: 1000, // または { min: 500, max: 1500 } でランダム間隔
	openDisclosures: true,
});

エクスポートされる型

  • PrintOptions: print関数のオプション型
  • PrintType: 出力形式（'png' | 'pdf' | 'note'）
  • PageHook: ページフック関数の型（@d-zero/puppeteer-page-scanから再エクスポート）