assets の使用

出典：ArcGIS Experience Builder - Guide - Use assets

assets の使用に関する一般的なガイドライン

ウィジェットでは、画像や動画などのアセットを使用する必要があります。以下では、ArcGIS Experience Builder ウィジェットで assets を使用する方法について説明します。

一般的に、assets を使用する方法は 2 つあります。

• assets のインライン化
• assets を動的にロードする

インライン assets

画像などの小さな assets の場合、ネットワークパフォーマンスへの悪影響が限定的であるため、この方法は妥当な方法です。assets をインライン化するには、次のように assets をrequire() します。

const smallImage = require('./small-image.png')
<img style={{width: '200px', height: '200px'}} src={smallImage}/>

.svg ファイルの場合、インラインで SVG DOM としてレンダリングしたい場合は、assets/icons フォルダにファイルを置き、次のように require() します。

const svg = require('./assets/icons/mysvg.svg')
<Icon icon={svg} color="red" width="200px" height="200px"/>

ダイナミックに読み込む

動画や大きな画像の場合、ネットワークのパフォーマンスに悪影響を与える可能性があるため、インラインではなくダイナミックにアセットをロードするのが妥当な方法です。

アセットを動的にロードするには、2つの方法があります。アセットがランタイムで使用される場合は、ファイルを runtime/assets フォルダに配置します。それ以外の場合は、assets をsetting/assets フォルダに配置します。そうすれば、次のようにアセットを使用することができます。

<img style={{width: '200px', height: '200px'}} src={`${props.context.folderUrl}dist/runtime/assets/large-image.jpg`}/>
or
<Icon icon={`${props.context.folderUrl}dist/runtime/assets/mysvg.svg`} color="red" width="200px" height="200px"/>

後者（上図）は、.svg ファイルを SVG DOM としてレンダリングします。

アセットの使用方法やその他の詳細については，use-assets サンプル ウィジェットを参照してください。