埋め込みウィジェット

埋め込みウィジェットを使用すると、カスタム機能を追加するための URL またはコードを使用して Web サイト コンテンツを埋め込むことができます。

例

このウィジェットを使用して、次のようなアプリの設計要件をサポートします。

• フィーチャの選択に基づいて Web サイトから追加情報を提供するという要件があるとします。 フィーチャ レイヤーには、埋め込みたい Web サイトへの URL を含んでいるフィールドが含まれ、ユーザーがマップ上のフィーチャを選択するかボタンをクリックすると、そのフィーチャについての詳細情報を確認できます。
• アプリにダッシュボードを埋め込み、ユーザーが Web エクスペリエンス URL の末尾に URL パラメーターを追加できるよう許可することで、ダッシュボードの現在の表示 (特定の領域のデータを表示するなど) を変更できます。
• HTML コードを使用してコンテンツ (Web サイトなど) を埋め込むか、サンプル (ポイントのクラスタリングなど) からコードをコピーします。

使用上の注意

次に、カスタム コードを使用して iframe を埋め込む方法の例を示します。

<iframe width="100%" height="600px" frameborder="0" scrolling="yes" marginheight="0" marginwidth="0" src="https://developers.arcgis.com/"></iframe></div>

注意:

埋め込みウィジェットで直接 PDF を表示する場合、セキュリティ上の理由から一部のブラウザーでは表示できないことがあります。

URL パラメーターを使用して動的 URL を作成するには、使用したい URL パラメーターでアプリを保存および再読み込みしてから、[URL 情報] ウィンドウで対応するキーを選択します。 埋め込みウィジェットは、実行時に、指定した URL 情報の名前を検索し、ホスト アプリの URL に追加された URL パラメーターと一致させ、対応する値を使用して URL を解決して、埋め込みアプリを表示します。

設定

埋め込みウィジェットには以下の設定が含まれます。

• [埋め込み方法] - URL またはコードで埋め込むかどうかを選択します。
  • [URL] - Web サイトを静的 URL で埋め込むか、または次のオプションを使用して動的 URL を作成します。

    注意:

    HTTPS URL のみがサポートされています。 セキュリティ上の理由から、埋め込みアプリは同一オリジン ポリシーの制限を受けます。 *.arcgis.com と *.esri.com 以外のドメインでは、sandbox 属性が自動的に追加されます。

    • [データ接続] - レイヤーをデータ ソースとして選択し (Web マップ、Web シーン、直接レイヤーまたは URL から追加)、[データ] ボタンをクリックして、URL を含む属性を選択するか、既存の URL にパラメーターとして追加します。 [ラベル] フィールドを使用すると、URL のコンテンツによってデータに入力されない場合に、ウィジェットに説明を表示できます。
    • [URL 情報] - ビルダーのアプリ URL に接尾辞として追加する URL パラメーターを取得します。 動的 URL を構成すると、埋め込みウィジェットから埋め込みアプリに URL パラメーターを渡せるので、ユーザーは実行時に URL パラメーターを Web エクスペリエンス URL に追加することができます。これにより、埋め込みアプリに表示されるものを制御できます。

      注意:

      埋め込みアプリでサポートされる URL パラメーターの詳細については、ArcGIS Dashboards や ArcGIS Web AppBuilder のドキュメントをご参照ください。

  • [コード] - エクスペリエンスにサード パーティのエレメントを埋め込むための独自のカスタム コードを追加します。 HTML、<style> タグの CSS、<script> タグの JavaScript がサポートされます。

    ヒント:

    パフォーマンス上の理由から課された 8 KB の上限を超過する複雑な HTML ページを埋め込む場合は、そのページを独自のサーバーに配置して、代わりに URL で埋め込みます。

    注意:

    コードで埋め込むと、allow-same-origin ディレクティブなしで sandbox 属性が自動的に追加されます。 これにより、埋め込みコンテンツが JavaScript を実行し、自分の Cookie やローカル ストレージ情報を読み込めるようになりますが、Experience Builder アプリの DOM、Cookie、ローカル ストレージなどにはアクセスできません。

• [自動更新] - カスタムの時間間隔 (分単位) を設定して、埋め込みウィジェットに埋め込まれたコンテンツを自動的に更新します。 設定できる最小値は 0.2 分 (12 秒) です。

動的 URL の構成

Web エクスペリエンスから埋め込みアプリに渡す URL パラメーターを取得するには、次の手順を実行します。

1. 埋め込みウィジェットを追加し、保存します。
2. ブラウザー ウィンドウのアドレス バーに、Web エクスペリエンス URL の URL パラメーターを追加し、Enter キーを押してページを再読み込みします。

   ヒント:

   ビルダーにはアプリの ID パラメーターがすでに含まれているため、疑問符ではなくアンパサンド (&state= など) を使用して URL パラメーターを追加します。

   ビルダーが URL パラメーターで再読み込みされると、[URL 情報] ボタンが動的 URL を構築するためのキーを表示します。

3. [埋め込み方法] URL 入力ボックスに、埋め込みたいアプリの URL を貼り付けます。
4. 埋め込み URL の末尾に、URL パラメーターを入力します (?state= など)。
5. [URL 情報] ボタンをクリックし、対応するキーを選択して動的 URL を完成させます。

   埋め込みダッシュボードの動的 URL の例を以下に示します。

   https://<your portal url>/apps/opsdashboard/index.html#/<id>?state={appURL.search.state}