# クライアント側エンジンと Web 側エンジン

FormIt プラグインは、2 つの異なる JavaScript エンジンを使用します。

* HTML を表示するパネル(Web 側)
* クライアント側のパネル(FormIt)。FormIt とそのジオメトリ カーネルを呼び出します

これら 2 つの JavaScript エンジンは、異なるプロセスで動作します。

## **クライアント側(FormIt)と Web 側(HTML)**

FormIt は複数の JavaScript エンジンを同時に実行します。

* FormIt アプリケーションには独自の JavaScript エンジンがあります
* 各プラグイン ツールバーには独自の JavaScript エンジンがあります
* 各プラグイン パネルには独自の JavaScript エンジンがあります(Chromium)

プラグインでは、JavaScript がロードされる場所を指定できます。

![](/files/aRmzsaBvCEUXmd0sBuvV)

### クライアント側(FormIt)

[manifest.json](https://github.com/FormIt3D/FormItExamplePlugins/blob/master/HelloBlockAsync/v23_0/manifest.json#L8) を使用して、指定します。

```
    "Scripts": [
        "PLUGINLOCATION/blockFormItSide.js",
        "https://formit3d.github.io/FormItExamplePlugins/SharedPluginFiles/PluginUtils18_0.js"
    ]
```

### Web 側(HTML)

[index.html](https://github.com/FormIt3D/FormItExamplePlugins/blob/master/HelloBlockAsync/v23_0/index.html#L7) を使用して、指定します。

* Web 側スクリプトは、Web ページからロードされます。
* Web 側スクリプトは、複数の非同期の呼び出しを使用してクライアント側(FormIt)の JavaScript を呼び出すことができます。

## Web ベースのプラグインからクライアント側(FormIt)のコマンドを呼び出す 3 つのメソッド

### メソッド 1: FormItInterface.CallMethod

`CallMethod` は、FormIt 側で実行される関数名とその引数を取得します。このメソッドを渡された関数は、関数呼び出しの結果とともに呼び出されます。

```
    var args = {
        "w": 10,
        "l": 10,
        "h": 10
    }
    FormItInterface.CallMethod("CreateBlock", args, function(result)
    {
        // Result of the function call
    });
```

**長所:**

➕ `await` が不要です。

**短所:**

➖ 結果を取得するにはコールバックが必要ですが、そのタイミングを決めることができません。

➖ スクリプトは 2 つの異なる場所で定義されます。

➖ プラグイン ロジックを 2 つの異なるファイルに分割する必要があります。

### **メソッド 2: FormIt.CallJS**

\***FormIt 2022.1 以降でのみ使用可能です**

CallJS は、FormIt 側で呼び出される JavaScript 関数、および arguments.json オブジェクトを取得します。

```
var args =
{
    "w": 10,
    "l": 10,
    "h": 10
};
var result = await FormIt.CallJS("CreateBlock", args);
```

**長所:**

➕ 必要なときに結果を利用できます

**短所:**

➖ \*\*\*\* 非同期の呼び出しをすべて await で修飾する必要があります。これを忘れると正しく機能しません。

➖ \*\*\*\* `await` が原因で動作が遅くなる可能性があります。

### **メソッド 3 (async/await)**

```
const pt1 = await WSM.Geom.Point3d(0,0,0);
```

非同期の呼び出しで、Web 側が FormIt 側を呼び出します。この呼び出しは、あるプロセスで開始して別のプロセスに送られ、その結果が開始プロセスに戻されます。そのため、await が必要です。

既定では、組み込みの FormIt API のみを呼び出すことができます。

**長所:**

➕ 必要なときに結果を利用できます。

➕ manifest.json にスクリプトが定義されていなくても、すべてのコードを結合して、Web 側から実行される 1 つの JS ファイルにすることができます。

**短所:**

➖ \*\*\*\* 非同期の呼び出しをすべて `await` で修飾する必要があります。これを忘れると正しく機能しません。

➖ \*\*\*\* `await.` が原因で動作が遅くなる可能性があります。

### メソッド 4 (RegisterAsyncAPI)

\***FormIt 2023.0 以降でのみ使用可能です**

FormIt 側でユーザ定義関数を呼び出すには、関数を登録する必要があります。次に例を示します。

**クライアント側(FormIt)**

```
FormIt.RegisterAsyncAPI("HelloBlockAsync", "CreateBlock", "l, w, h");
// CreateBlock runs from FormIt.
HelloBlockAsync.CreateBlock = function(args)
{
    return { "Result" : "It Worked!!"};
}
```

**Web 側(HTML)**

```
var result = await HelloBlockAsync.CreateBlock(l, w, h);
```

例として、[HelloBlockAsync](https://github.com/FormIt3D/FormItExamplePlugins/tree/master/HelloBlockAsync/v23_0) を参照してください。

**長所:**

➕ 必要なときに結果を利用できます。

➕ manifest.json にスクリプトが定義されていなくても、すべてのコードを結合して、Web 側から実行される 1 つの JS ファイルにすることができます。

**短所:**

➖ \*\*\*\* 非同期の呼び出しをすべて await で修飾する必要があります。これを忘れると正しく機能しません。

➖ \*\*\*\* `await.` が原因で動作が遅くなる可能性があります。

##


---

# 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://windows.help.formit.autodesk.com/ja/plugins/how-to-develop-plugins/advanced-development/client-side-vs-web-side-engines.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.