# HTML パネルのプラグインを作成する

![](https://1042687263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fi2QoKYmxiErmbCIxIwlZ%2Fuploads%2Fgit-blob-3bb1de8a008afea600478f2e696fc65a3cf61d22%2FPANEL%20BASED%20PLUGIN.gif?alt=media)

HTML ページを表示するパネルベースのプラグインには、次の構造を持つ *manifest.json* ファイルがあります。

```
{
    "PluginName": "Hello Block!",
    "PluginType": "Panel",
    "PluginDescription": "Creates a panel with an HTML form that allows dimensional input for a 3D block which will get generated at the world origin.",
    "Scripts": [
        "PLUGINLOCATION/block.js"
    ],
    "Panel": "PLUGINLOCATION/hello_block.html",
    "PanelIcon": "PLUGINLOCATION/hello_block.png"
}               
```

[一般的な JSON プロパティ](https://windows.help.formit.autodesk.com/ja/plugins/how-to-develop-plugins/advanced-development/general-plugin-setup-in-the-manifest)に加えて、パネルベースのプラグインには、次の特殊な JSON プロパティが含まれています。

* 「Panel」は、このプラグインがパネルであること、およびパネルにロードする必要がある HTML ファイルの場所へのリンクを、FormIt に伝えます。
* HTML ファイルのヘッダには、適切な JavaScript ファイルおよびスタイル設定用の CSS ファイルへのリンクが必要です。
* HTML ファイルは、ブラウザの場合と同様に、FormIt パネルでレンダリングされます。
* [FormIt3D Organization](https://github.com/FormIt3D/) には、HTML インタフェースの例が数多く用意されています。
* 「PanelIcon」は、アプリケーションの右側のタブに表示されるこのプラグインのアイコンを定義します。未定義の場合は、FormIt によってプラグイン名の頭文字を使用したアイコンが自動で作成されます。

HTML、CSS、および JavaScript ファイルを設定したら、[ロードまたはインストール](https://windows.help.formit.autodesk.com/ja/plugins/advanced-development/setting-up-formit-for-development#load-vs.-install)して、HTML パネルのプラグインのテストを開始できます。