# インスペクター

{% hint style="info" %}
注意：インスペクタープラグインは、Eagle 4.0 Beta 17 以上のバージョンでのみサポートされます。
{% endhint %}

特定のファイル形式に対して、その形式専用の追加インスペクターツールを開発することができます。ユーザーがそのファイルを選択した際に、右側のインスペクターで直接そのプラグインを使用できるようになります。例えば、JPG/Rawファイル用のEXIF属性インスペクタープラグインを開発し、ユーザーがそのファイルを選択するたびに、「撮影時間、焦点距離、絞り、緯度経度」などの追加データを右側で簡単に確認できます。

インスペクタープラグインは、実際にはフォーマット拡張プラグインの変種であり、その定義方法は非常に似ています。インスペクタープラグインでは、`manifest.json`内で`main`属性を定義する必要はなく、`preview`属性を設定する必要があります。以下は例示コードです：

```json
{
    "preview": {}
}
```

`preview`内で、拡張したいファイルの拡張子を定義することができます。例えば、jpgとpng形式の追加プラグインを開発したい場合は、`"jpg,png": {}`と入力できます：

```json
{
    "preview": {
        "jpg,png": {}
    }
}
```

次に、以下のプロパティを設定します：

* `path`: プラグインのHTMLファイルのパス
* `height`: プラグインのデフォルトの高さ
* `multiSelect`: 複数選択時に表示するかどうか（特別な場合を除き、`false`に設定することをお勧めします）

```json
{
    "preview": {
        "jpg,png": {
            "inspector": {
                "path": "index.html",
                "height": 100,
                "multiSelect": false
            }
        }
    }
}
```

他の`manifest.json`フィールドを設定した後、最終的なコードは以下のようになります：

{% tabs %}
{% tab title="manifest.json" %}

```json
{
    "id": "cc41e899-5fc3-445c-a113-2d9573d6edcc",
    "version": "1.0.0",
    "platform": "all",
    "arch": "all",
    "name": "Inspector Plugin",
    "logo": "/logo.png",
    "keywords": [],
    "devTools": true,
    "preview": {
        "jpg,png": {
            "inspector": {
                "path": "index.html",
                "height": 100,
                "multiSelect": false
            }
        }
    }
}
```

{% endtab %}

{% tab title="index.html" %}

```html
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Inspector Plugin Example</title>
    <style>
        html {
            font-size: 11px;
            font-family: sans-serif;
            border-radius: 6px;
            overflow: hidden;
        }

        body {
            padding: 0;
            margin: 0;
            color: transparent;
        }

        /* 異なるテーマの色 */

        body[theme="LIGHT"],
        body[theme="LIGHTGRAY"] {
            color: black;
        }

        body[theme="GRAY"],
        body[theme="BLUE"],
        body[theme="PURPLE"],
        body[theme="DARK"] {
            color: white;
        }
    </style>
</head>

<body>
    Inspector Plugin Example
    <script>
        // プラグイン作成をリッスン
        eagle.onPluginCreate(async (plugin) => {

            // 現在のテーマを取得
            const theme = await eagle.app.theme;
            document.body.setAttribute('theme', theme);

            // 選択されたアイテムを取得
            const item = await eagle.item.getSelected();

            console.log(item);
            console.log(theme);
        });

        // テーマ変更をリッスン
        eagle.onThemeChanged((theme) => {
            document.body.setAttribute('theme', theme);
        });
    </script>
</body>

</html>
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
**完全な例示コード：**\
<https://github.com/eagle-app/eagle-plugin-examples/tree/main/Inspector>
{% endhint %}

### インスペクタープラグインのデバッグ方法

インスペクタープラグインのデバッグは簡単です。画面上のインスペクタープラグインを右クリックし、「開発者ツール」を選択することで、デバッグを開始できます。


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developer.eagle.cool/plugin-api/ja-jp/get-started/plugin-types/inspector.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
