# Unity Web ビルドの JavaScript インターフェース

> Learn about some useful functions you can use in the JavaScript interface.

Unity Web ビルドの JavaScript インターフェースは、ウェブアプリケーションの設定に使用できる便利な関数と変数を提供します。これらの関数は、JavaScript ライブラリコード (.jslib ファイル) で呼び出すことができます。

## エラー、警告、カスタムバナーの表示##display-error-warning-or-custom-banners

`unityShowBanner()` 関数を使用してメッセージバナーを表示するか、関数をオーバーライドして独自の目的でカスタマイズします。

| **パラメーター**                                                                                        | **説明**         |
| ------------------------------------------------------------------------------------------------- | -------------- |
| `msg`                                                                                             | 表示するメッセージ。     |
| `type`                                                                                            | 表示するメッセージのタイプ。 |
| 例:`type == error` を使用して、キャンバスの上に永久のエラーメッセージを表示します。`type == warning` を使用して、メッセージ上に黄色のハイライト色を表示します。 |                |

デフォルトの WebGL テンプレートの以下のコードは、エラーバナーと警告バナーの外観を設定します。カスタムテンプレートでは、この関数をオーバーライドして独自のバナータイプを作成したり、重要でない警告やエラーメッセージの表示方法をカスタマイズしたりできます。

```js
function unityShowBanner(msg, type) {
        var warningBanner = document.querySelector("#unity-warning");
        function updateBannerVisibility() {
          warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
        }
        var div = document.createElement('div');
        div.innerHTML = msg;
        warningBanner.appendChild(div);
        if (type == 'error') div.style = 'background: red; padding: 10px;';
        else {
          if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
          setTimeout(function() {
            warningBanner.removeChild(div);
            updateBannerVisibility();
          }, 5000);
        }
        updateBannerVisibility();
      }
```

この関数は .jslib ファイルで呼び出すことができます。以下のバナーは、エラーメッセージとして **The message you want to show** を永久に表示します。

```js
unityShowBanner('The message you want to show', 'error');
```

## WebGL コンテキスト属性の変更##change-webgl-context-attributes

WebGL コンテキストを初期化する作成属性をカスタマイズするには、`webglContextAttributes` を使用します。以下の属性のみ変更できます。

* `powerPreference`
* `premultipliedAlpha`
* `preserveDrawingBuffer`

これらのオプションは、WebGL レンダリング API を使用する場合にのみ適用できます。WebGPU レンダリング API を使用する場合、`webglContextAttributes` フィールドは無視されます。

これらの属性を変更するには、カスタム WebGL テンプレートの設定オブジェクトを変更します。 例:

```js
script.onload = () => {
  config['webglContextAttributes'] = {

    powerPreference: 'high-performance',
    premultipliedAlpha: false,
    preserveDrawingBuffer: true, 
  };
  createUnityInstance(canvas, config, (progress) => {
```

`powerPreference` 属性には以下のオプションがあります。

| **オプション**        | **説明**                                         |
| ---------------- | ---------------------------------------------- |
| default          | ユーザーエージェントにどの GPU 設定が最適かを判断させます。これはデフォルトの設定です。 |
| high-performance | 消費電力よりもレンダリングパフォーマンスを優先します。                    |
| low-power        | レンダリングパフォーマンスよりも省電力を優先します。                     |

各属性の詳細については、[HTMLCanvasElement: getContext()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext) に関する Mozilla のドキュメントを参照してください。

Unity WebGL グラフィックスについては、[WebGL グラフィックス](/engine/6000.0/manual/platform-specific/webgl/develop/graphics.md) を参照してください。

## プロジェクトによるストリーミングアセットの参照##direct-your-project-to-your-streaming-assets

ストリーミングアセットを別の CDN でホストする必要がある場合は、ストリーミングアセットがある完全な URL を指すように `createUnityInstance()` 設定オブジェクトの `streamingAssetsUrl` プロパティを調整できます。

```js
var buildUrl = "Build";
var config = {
  dataUrl: buildUrl + "/{{{ DATA_FILENAME }}}",
  frameworkUrl: buildUrl + "/{{{ FRAMEWORK_FILENAME }}}",
  codeUrl: buildUrl + "/{{{ CODE_FILENAME }}}",
#if MEMORY_FILENAME
  memoryUrl: buildUrl + "/{{{ MEMORY_FILENAME }}}",
#endif
#if SYMBOLS_FILENAME
  symbolsUrl: buildUrl + "/{{{ SYMBOLS_FILENAME }}}",
#endif
   streamingAssetsUrl: "https://mygameserver.com/StreamingAssets/",  // Add this line to override the default streaming assets location
  companyName: "{{{ COMPANY_NAME }}}",
  productName: "{{{ PRODUCT_NAME }}}",
  productVersion: "{{{ PRODUCT_VERSION }}}",
};
```

## ウェブページのキャッシュの制御##control-cache-of-web-pages

`cacheControl()` 関数を使用して、`UnityCache` にキャッシュする URL を制御します。この関数は URL をパラメーターとして受け取り、`must-revalidate`、`immutable`、または `no-store` のいずれかを返します。独自の目的でこの関数をオーバーライドすることもできます。

コード例と詳細は、[ウェブのキャッシュ動作](/engine/6000.0/manual/platform-specific/webgl/develop/caching.md) を参照してください。

## 追加リソース##additional-resources

* [Unity C# スクリプト関数を JavaScript から呼び出す](/engine/6000.0/manual/platform-specific/webgl/develop/interactingwithbrowserscripting/web-interacting-browser-unity-to-js.md)
* [ウェブのグラフィックス](/engine/6000.0/manual/platform-specific/webgl/develop/graphics.md)
* [ウェブのキャッシュ動作](/engine/6000.0/manual/platform-specific/webgl/develop/caching.md)