方法

ArcGIS Online Web アプリケーションを Web サイトに埋め込む

Last Published: May 6, 2021

サマリー

ArcGIS Online で Web マップを共有すると、[Web サイトに埋め込む] オプションが有効になります。 このオプションは HTML コードのブロックを自動的に生成し、これをコピーして Web サイトに貼り付けることができます。これにより、マップを Web ページに直接表示することができるようになります。 このコード ブロックを変更すると、Web アプリケーション (Web マップではなく) を埋め込めるようになります。 このオプションは、ArcGIS Online でホストされる Web アプリケーション、Web AppBuilder アプリケーション、および Map Viewer を埋め込む際に便利です。

手順

Web サイトに Web アプリケーションを埋め込むと、さまざまな状況においてメリットがあります。

  • デフォルトで開いている凡例を含む Web ページをマップで表示する場合。[マップ ツール] Web アプリケーション テンプレートを Web マップで使用し、Web ページに埋め込むことができます。
  • World Routing Service など、埋め込みの認証情報を持つプレミアム サービスを含むマップを提供する場合。 たとえば、ルートは [ルート案内] Web アプリケーション テンプレートか Web AppBuilder の [ルート案内] ウィジェットを使用して見つけることができます。
  • 関連レコード機能を含むマップを表示する場合。Map Viewer を Web サイトに埋め込むことができます。

ArcGIS Online のホスト Web アプリケーション、Web AppBuilder アプリケーション、または Map Viewer を Web ページに埋め込む手順

  1. Web マップと Web アプリケーションを ArcGIS Online で作成し、Web アプリケーションの URL をコピーします。 これは、Web アプリケーションの [アイテムの詳細] ページの URL セクションでコピーするか、アプリケーションが開いている間に URL をコピーします。
注意: Map Viewer を埋め込む場合は、Map Viewer で開いたときの Web マップの URL をコピーします。
  1. アプリケーションの作成に使用した Web マップを開き、[共有] オプションに移動します。 [すべての人と共有 (パブリック)] オプションを有効にし、[Web サイトに埋め込む] をクリックします。 マップの埋め込みに必要なサイズを選択します。
     
  2. [Web サイトに埋め込む] オプションで生成したコード ブロックで、<iframe> タグの src 属性のコード ブロックの URL 部分 (src= と ></iframe> の間) を削除し、以下に示すように、Web アプリケーションの URL を二重引用符で囲んで貼り付けます。
<iframe width="500" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://arcgis.com/apps/Viewer/index.html?appid=1fa6b89a300c4e9ebf84613dd5c44b9f"></iframe>
これにより、Web ページで使用するコードが生成されるため、ArcGIS Online のホスト Web アプリケーション、Web AppBuilder アプリケーション、または Map Viewer を中に埋め込めるようになります。
  1. HTML コード ブロックを、Web サイトの構成にコピーして貼り付けます。

記事 ID: 000012322

新しい問題や一般的な問題に対する通知とソリューションの受け取り

新しい AI チャットボットから、要約された回答とビデオソリューションを入手してください。

Esri Support アプリのダウンロード

ArcGIS エキスパートのサポートを受ける

テクニカル サポートへのお問い合わせ

Esri Support アプリのダウンロード

ダウンロード オプションに移動