見出し画像

ArcGIS Dashboards 内にリストから選択したWebページを表示する方法

イドケード

はじめに

以前、東京都から公開されているオープンデータを活用して、「河川監視カメラダッシュボード」というWebアプリケーションを作成しました。

ArcGIS Online のノーコードビルダツールを使ったので、特に実装に手間はかけておらず、機能の勉強を兼ねて軽い気持ちで作ったアプリケーションでしたが、都庁様のオープンデータカタログサイトにも、データ活用事例として掲載頂いたりしており、時々閲覧頂いている方もおられる様です。ありがとうございます。

このダッシュボードの中で、リストから河川カメラの設置場所をクリックすると、そのカメラが撮影している映像が配信されているYoutubeライブのページがダッシュボード内に埋め込み表示される、という機能を実装しているのですが、この機能をどうやって実装するのか教えてほしい、というリクエストを頂戴したので、Noteに起こすことにしました。

この記事で解説すること・しないこと

Esri のSaaS型GIS「ArcGIS Online」で利用できる「ArcGIS Dashboards」で、ダッシュボード内に埋め込み表示するWebページを、リストを使って制御する仕組みと実装手順を（雑に）解説します。
ArcGIS Online には、ArcGIS Dashboards以外にも「ArcGIS Experience Builder」など、ノーコード型のWebアプリビルダツールがありますが、そちらでの手順は解説しません。というかExBの機能追いかけてなさすぎてついて行けていないから解説できないのが本音です。今どこまで出来るようになったんだろうか。

ちなみに、リストを使って制御というのはこういうことです。

真ん中上部の水色のリストをクリックすると、対応したカメラのYoutubeリンクが右下に開く

この他にも、（主に）ArcGIS Dashboardsを使って作ったコンテンツを、こちらのライブラリページにまとめています。良ければご覧ください。

用意するもの

  • 絞り込みに使う（リストに表示させる）項目が格納されたフィールドと、埋込みたいWebページのURLが格納されたフィールドを属性に持っているフィーチャサービス

これだけです。実際は、フィーチャサービスの手前で、同じ条件のCSVファイルを用意することが多いと思いますが、例えばArcGIS Online にすでにアップロードされているフィーチャサービスにあとからフィールドを追加して上げても大丈夫です。
たとえばこちらは、先述の河川監視カメラダッシュボードで使用しているフィーチャサービスの属性テーブルです。

ほとんど都庁オープンデータで公開されているCSVそのままです。成形せずにすぐ使えるオープンデータを公開できている官公庁って本当に凄いと思う。最近はどうか分かりませんが、数年前までは、「オープンデータ」と名乗っていても「機械判読可能なデータ（出来るとは言ってない）」みたいなデータが時々ありましたから。。。

実装手順

（先述のフィーチャサービスを用意するまでの手順は割愛します。）
今回は先述のフィーチャサービスを追加した「Webマップ」を作成してありますが、なくてもできます。

ArcGIS Dashboards上で設定を行うわけですが、手順はたった3ステップです。慣れれば数分仕事。打ち合わせ中にささっと作れちゃいます。

①　制御用の「リストエレメント」を追加する

１）［エレメントの追加］→［リスト］を選択
２）用意したフィーチャサービスを選ぶ
３）リストに表示したい項目のフィールドを設定する

②　Webページを表示する「埋め込みコンテンツ」エレメントを追加する

１）［エレメントの追加］→［埋め込みコンテンツ］を選択
２）［種類］を「フィーチャ」に変更
３）埋め込みたいURLを格納しているフィールドを指定
（これで、フィーチャの属性値を参照してWebページを表示します）

③　リストエレメントの「アクション」を設定する

１）リストエレメントの設定→［アクション］
２）フィルターの対象に②の埋め込みエレメントを追加

これだけです。データの用意さえできれば、それほど手間のかかる設定ではないんじゃないかな、と思います。

おまけ

今回の解説は、河川監視カメラ、というポイント型のジオメトリをもつフィーチャサービスで実装した例でしたが、ArcGIS Online のフィーチャサービスは、最近ジオメトリを持たない「テーブル」というタイプのフィーチャクラスを扱える様になったので、もしかしたら別に位置情報なくても行けるのでは、と思い、こんなCSVを作って試してみました。

中南米の国名と、それぞれの国のWikipedia記事ページのURLのカラムを持つCSV

途中は省略しますが、同じ手順で、ArcGIS Dashboardsへ埋め込んだものがこちらです。（試験的に作った画面なので、予告なしに削除するかもしれません）

シンプルなUIで、サクサクと動いてくれるので良い感じです。
もはやGISではない&他のツール使ったほうが便利な気もしますが、
Webページへのインデックスとして、使い道はありそうな気がしますね。

今回はここまで。
なにかNoteで紹介してほしいリクエストなどあればDMお待ちしてます！


この記事が気に入ったらサポートをしてみませんか？