インスペクター
この記事では、インスペクタープラグインの基本概念について説明します。
特定のファイル形式に対して、その形式専用の追加インスペクターツールを開発することができます。ユーザーがそのファイルを選択した際に、右側のインスペクターで直接そのプラグインを使用できるようになります。例えば、JPG/Rawファイル用のEXIF属性インスペクタープラグインを開発し、ユーザーがそのファイルを選択するたびに、「撮影時間、焦点距離、絞り、緯度経度」などの追加データを右側で簡単に確認できます。
インスペクタープラグインは、実際にはフォーマット拡張プラグインの変種であり、その定義方法は非常に似ています。インスペクタープラグインでは、manifest.json内でmain属性を定義する必要はなく、preview属性を設定する必要があります。以下は例示コードです:
{
"preview": {}
}preview内で、拡張したいファイルの拡張子を定義することができます。例えば、jpgとpng形式の追加プラグインを開発したい場合は、"jpg,png": {}と入力できます:
{
"preview": {
"jpg,png": {}
}
}次に、以下のプロパティを設定します:
path: プラグインのHTMLファイルのパスheight: プラグインのデフォルトの高さmultiSelect: 複数選択時に表示するかどうか(特別な場合を除き、falseに設定することをお勧めします)
{
"preview": {
"jpg,png": {
"inspector": {
"path": "index.html",
"height": 100,
"multiSelect": false
}
}
}
}他のmetadata.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
}
}
}
}<!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>インスペクタープラグインのデバッグ方法
インスペクタープラグインのデバッグは簡単です。画面上のインスペクタープラグインを右クリックし、「開発者ツール」を選択することで、デバッグを開始できます。
最終更新