---
name: html-to-png
description: playwright-cli を使って、HTML ファイルを PNG 画像として保存します。
argument-hint: "入力する HTML ファイルのパス"
---

# HTML から PNG へのスクリーンショット保存スキル

このスキルは、`playwright-cli` を使ってページ全体のスクリーンショットを撮影し、HTML ファイルを PNG 画像に変換します。

## 実行手順 (Windows の場合)

1.  **引数の確認**:
    -   引数として入力 HTML ファイルのパスが指定されているか確認します。
    -   引数がない場合は、ユーザーに入力 HTML ファイルのパスを指定するように促します。

2.  **パスの決定**:
    -   入力 HTML ファイルの絶対パスを確認します。
    -   ファイルの URL（例：Windows の場合は `file:///C:/path/to/file.html`、Unix の場合は `file:///path/to/file.html`）を作成します。バックスラッシュ（`\`）はすべてスラッシュ（`/`）に置き換えてください。
    -   出力する PNG ファイルのパスを決めます。出力ファイルは、入力 HTML ファイルと同じフォルダの中に、拡張子を `.html` から `.png` に変更して保存する必要があります。

3.  **PowerShell 用の1行コマンドテンプレート**

    ```powershell
    $env:PLAYWRIGHT_MCP_ALLOW_UNRESTRICTED_FILE_ACCESS="1"; npx.cmd --no playwright-cli -s=workflow open "<input_path>"; npx.cmd --no playwright-cli -s=workflow screenshot --full-page --filename="<output_path>"; npx.cmd --no playwright-cli -s=workflow close
    ```

4.  **出力の確認**:
    -   出力先のパスに PNG 画像が正常に作成されているか確認します。

## もう一つの実行手順

1.  **引数の確認**:
    -   引数として入力 HTML ファイルのパスが指定されているか確認します。
    -   引数がない場合は、ユーザーに入力 HTML ファイルのパスを指定するように促します。

2.  **パスの決定**:
    -   入力 HTML ファイルの絶対パスを確認します。
    -   ファイルの URL（例：Windows の場合は `file:///C:/path/to/file.html`、Unix の場合は `file:///path/to/file.html`）を作成します。バックスラッシュ（`\`）はすべてスラッシュ（`/`）に置き換えてください。
    -   出力する PNG ファイルのパスを決めます。出力ファイルは、入力 HTML ファイルと同じフォルダの中に、拡張子を `.html` から `.png` に変更して保存する必要があります。

3.  **環境変数の設定**:
    -   Playwright でローカルファイルを開くには、シェルセッションで環境変数 `PLAYWRIGHT_MCP_ALLOW_UNRESTRICTED_FILE_ACCESS` を `1` に設定します。
        -   Windows の場合 (PowerShell):

            ```powershell
            $env:PLAYWRIGHT_MCP_ALLOW_UNRESTRICTED_FILE_ACCESS="1"
            ```

        -   Linux/macOS の場合 (Bash/zsh):

            ```bash
            export PLAYWRIGHT_MCP_ALLOW_UNRESTRICTED_FILE_ACCESS="1"
            ```

4.  **playwright-cli コマンドの実行**:
    -   同じセッション／環境で、以下のコマンドを順番に実行します。
        -   **ファイルを開く**:

            ```bash
            npx --no playwright-cli open "file:///<full_path>"
            ```

        -   **ページ全体のスクリーンショットを撮影する**:

            ```bash
            npx --no playwright-cli screenshot --full-page --filename="<output_path>"
            ```

        -   **ブラウザを閉じる**:

            ```bash
            npx --no playwright-cli close
            ```

5.  **出力の確認**:
    -   出力先のパスに PNG 画像が正常に作成されているか確認します。
