# インスペクター

{% 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 %}

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

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