Web サイトにマップやアプリを埋め込む方法のご紹介!

617
0
05-10-2020 10:45 PM

Web サイトにマップやアプリを埋め込む方法のご紹介!

ArcGIS Online や ArcGIS Enterprise の Web GIS で作成した Web マップやアプリは、埋め込みコードを利用するとブログや、コーポレートサイト、組織内部で利用される Web サイトなどで簡単に共有することができます。

本記事ではWeb マップと、Web アプリを ご利用中のWeb サイトなどに埋め込むための方法についてご紹介します。

方法はコードをコピーする方法とコードをWebサイトに直に記載する方法があり、それぞれ方法1、方法2として記述しております。

今回ご紹介する方法をまねて、Web GISの成果を周知してみてはいかがでしょうか。

 

方法1)Web マップの埋め込み

 

1. Web マップへアクセスし、[共有] ボタンを押下します。マップを保存してから共有する必要があります。

 

     

 

2. [共有] ウィンドウが開きます。 [すべての人に公開] にチェックすると、 同ウィンドウ内の [Web サイトに埋め込む] ボタンがアクティブになるので押下します。

 

 

3. [Web サイトに埋め込む] ウィンドウが開くのでレイアウトなどを設定します。 [完了] を押下する前に埋め込みコードHTML コードをコピーしておきます。

 

4. コピーした埋め込みコードをご利用されている Web サイトに挿入すると、 Web マップを埋め込むことができます。

 

 

複雑なコードに見えるかもしれませんが、特段新しいものはなく、YouTube などの動画コンテンツを埋め込む際にも活用される Iframe 要素の src パラメーターに埋め込み用の Web マップの URL が指定されているだけです。(レイアウト情報も URL のパラメーターとして含まれています。

 

 

方法2)Web アプリを埋め込み

Web AppBuilder を例に説明します。 

 

1. Web AppBuilder のアプリの URL を確認します。

 

 

2. Iframe の要素を下記のように記載します。上記で確認した URL の貼り付けや必要に応じてサイズの変更などを行ってください。

               <iframe width="500" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="アプリのURL"></iframe>

 

3. 記載したコードをご利用されている Web サイトに挿入します。

 

 

参考に

埋め込みコンテンツはパブリックにして、誰でも参照できるようにするのが一般的に行われますが、どうしても限られた人へと共有したいケースも出てくると思います。

そういったときは、以下の 2 点を考慮してみてください。

       ● Web GIS のユーザーによりアクセスを制御

                          ◦ アクセス時に Web GIS のユーザーログインを行いアクセスします。

       ● Web サイトでアクセスを制御

                          ◦ Web サイトにもアクセス権を制御するような仕組みがあれば、そのページ自体へのアクセスを制限します。

また、Web ページへの埋め込みの場合、利用するシステムによっては、埋め込みを許可するホストやドメインを登録する必要がある場合がありますので、管理者の方に事前に確認を取っていただくことをお勧めします。

なお、今回ステップの中で、使っているサンプル画像は、すべて CMS システム(コンテンツ マネジメント システム)に使ってみましたが、もちろんコードをそのまま HTML コードにお使いいただけます。

 

さいごに

このように Web ページや Web サイトへの埋め込みは、動画コンテンツと同じように簡単に設定できます。埋め込みを利用すると

       ●  情報公開の場所をまとめられる。(お客様への情報公開や社内への情報展開など。)

       ●  リンクなので、埋め込む先のサイトの情報量を圧迫しない。

       ●  顧客行動や業務の中で、自然とユーザーがデータを参照できるという仕組みを簡単に導入できる。

などなどのメリットがございます。

様々な Web マップや Web アプリを作成できる Web GIS ですが、組織内での活用を促進する上では、どのようにして目に触れる機会を増やしていくかがポイントとなります。その観点から、まずは参照できる環境を整えていくということで、普段から使い慣れたサイトで、すぐに参照できるようにすることも、効果的な方法の一つだと思います。(もちろん、Web GIS のポータルで、共有を図っていくことが可能です!)

 ご利用のシステムにもよりますが、昨今では埋め込みコンテンツを表示させるための設定がそもそも備わっているシステムは少なくはありませんので、 ぜひ作成した Web マップや Web アプリの有効性を高める施策のひとつとしてお試しください!

 

関連リンク

       ●  Embed your web map into your organization’s website

       ●  マップ、アプリ、グループの埋め込み

       ●  URLパラメーターを使用した埋め込みマップの変更

Version history
Revision #:
2 of 2
Last update:
2 weeks ago
Updated by: