概要
GitHub:
https://github.com/brianmcleer/time-machine-widget
Time Machineは、ArcGIS Experience Builder Developer Edition 1.19以降(1.21でテスト済み)向けのカスタムウィジェットです。マップに日付スライダーを1つ表示し、日付のあるすべてのレイヤーを連動させます。日付を選ぶと、その日に存在していたものがマップに表示されます。
時間対応サービスは必要ありません。ウィジェットが各レイヤーのフィールドを読み取り、日付フィールドを選んで、レイヤーに既に設定されているフィルターに追加する形でフィルターを適用します。フィーチャレイヤーはブラウザー内のレイヤービューでフィルターされます。日付付きサブレイヤーを持つマップイメージレイヤーは、定義式でフィルターされ、変更のたびに新しい画像を取得します。
1882年までさかのぼる併合の歴史を表示するために作成しました。年または10年ごとに1つのサブレイヤーを持つマップサービスにデータが格納されています。日付フィールドが1つある単一のフィーチャレイヤーでも動作します。
(スクリーンショットで失礼します。新しいEsri Communityでは動画ファイルを受け付けていません)
できること
- 「指定日」「期間」「比較」モード。比較モードでは、ドラッグできる仕切りを使って2つの日付を並べて表示します。
- 日、月、年単位、または詳細設定で指定した間隔ごとに進められます。速度調整、ループ、リセット、今日に加え、前の変化・次の変化を使って、何かが起きた日付に移動できます。
- スライダーの範囲はデータに基づいて決まります。オンになっているレイヤーの最古と最新の日付に合わせ、マップ上でレイヤーをオンまたはオフにすると範囲を再調整します。
- 年または月ごとのフィーチャ数を両軸に表示するアクティビティチャート。
- スライダーに連動するレイヤー、各レイヤーで使用する日付フィールド、レイヤーがスキップされた理由を表示するレイヤーリスト。
- プレゼンテーションモード:マップ上に大きな日付バナーを表示し、再生、チャプター、サムネイル付きチャプター一覧、スポットライト、マップ上への描画、白黒表示、読み上げ、メモと時計付きの発表者ウィンドウ、キーボードショートカット、キオスクリンク、速度ボタンを利用できます。チャプターごとにレイヤー、ベースマップ、場所、フライトまたはカット、フィーチャのポップアップ、表示時間を設定できます。バナーの色、フォント、ロゴはビルダーで設定します。
- 現在のビューから実行時に作成するストーリーチャプター、またはデータ内で最も活発な年から生成するチャプター。Webスライドショー、WebM動画、ビルダー用XMLにエクスポートできます。
- マップから読み込むレイヤーピッカー(グループレイヤーは見出しとして表示)、ピッカーで検出できないレイヤーのルール、年ごとのスナップショットをまとめる年セット、パフォーマンス、プレゼンテーション、ブランディングの各セクションを備えたビルダー設定。設定全体をXMLでインポートおよびエクスポートできます。
- ウィジェット内のヘルプガイド、初回起動時のヒント、キーボード操作、画面読み上げソフト向けのお知らせに対応しています。
必要条件
- Experience Builder Developer Edition 1.19以降、React 19。Maps SDK 5.xを使用する1.21でテスト済みです。
- サードパーティ製の依存関係はありません。すべてExperience Builderに含まれています。
インストール
- 最新のGitHubリリースからzipをダウンロードしてください(こちらにも添付しています)。
- 次のフォルダーをコピーします:
time-machineフォルダーを client\your-extensions\widgets\ に配置し、manifest.json が widgets\time-machine\ の直下にあることを確認してください。さらに1階層深く入れないでください。 - 次を実行します:
pnpm install(1.21以降)または npm install(1.20以前)を client フォルダーで実行し、クライアントを再起動してください。 - エクスペリエンスにTime Machineを追加し、操作対象のマップウィジェットを選択します。
zipに含まれるのはウィジェットのみです。リポジトリ内のVisual Studio用エディターシムは意図的に除外しています。これらのアンビエントモジュール宣言が、your-extensions フォルダー内の他のすべてのウィジェットに影響するためです。リポジトリをクローンする場合は、ビルド前にこれらのファイルを削除してください。対象ファイルはREADMEに記載されています。
既知の制限
- タイルレイヤーと画像は、年セット(子レイヤーが年ごとに命名されたグループレイヤー)を介してのみ操作できます。
- マップサービスは変更ごとに画像を1枚描画するため、サービスの応答が遅いと、再生中に表示される画像の枚数はステップ数より少なくなります。日付は一定のペースで進み、マップには表示可能な最新の日付が表示されます。
- クライアント側モードでは、レイヤーごとにビルダーで設定した上限までフィーチャを読み込みます(既定値は50,000件)。それを超えるレイヤーでは、範囲の計算にサーバー統計を使用します。
- 読み上げにはブラウザーの音声を使用するため、最初にページを1回クリックする必要があります。動画のエクスポート形式はWebMです。
フィードバック
GitHubでのIssueやプルリクエストを歓迎します。レイヤーがスキップされた場合や範囲が正しくない場合は、ウィジェットのレイヤーリストに理由が表示されます。また、ブラウザーコンソールには次で始まる行が表示されます:[time-machine] その後に詳細が記載されています。
変更履歴
2026年10月12日: ウィジェットがアプリの言語(?locale=、言語切り替え、ArcGISプロフィール、またはブラウザーの設定)に追従するようになりました。ヘルプガイドを含む39言語に対応しています。
- まずEsriの翻訳。 Experience Builderのインストール済み翻訳を読み込むため、「ズーム」のようなフレーズにはEsri純正ウィジェットと同じ表現が使われます。
- 標準用語。フィートやエーカーなどの単位名には、ブラウザーが使用するものと同じUnicode CLDRのデータを使用します。
- 共有翻訳メモリ。残りの翻訳には、オープンソース翻訳ツールLibreTranslateを使って作成した共有辞書と、ボスニア語、クロアチア語、セルビア語向けのHelsinki-NLPのOpus-MTモデルを使用します。GitHub上で無料で動作するため、APIキーやアカウントは必要ありません。
- 組み込み。ウィジェットの翻訳ファイル以外にハードコードされた英語(既定の設定やヘルプガイドなど)も検出し、翻訳されるように連携します。
人手で修正した内容は機械翻訳より優先され、上書きされることはありません。一部の翻訳は機械生成のため、不自然な箇所があれば、より適切な表現を返信でお知らせください。
2026年9月25日:1.0.0。GitHubで初公開。リリースzipも公開しました。