概要
https://github.com/brianmcleer/rightclick-widget
右クリックウィジェットは、ArcGIS Experience Builderにコンテキストマップツールを追加します。マップ上で右クリックすると、設定可能なアクションのメニューが表示されます。ズーム、計測、座標のコピー、マーカーのプロット、テキストの配置、逆ジオコーディングなどの機能を利用できます。
エンドユーザーの操作
公開後、ユーザーはマップ上の任意の場所を右クリックしてコンテキストメニューを開けます。設定に応じて、次のアクションを利用できます。
ナビゲーション操作:
- 拡大/縮小:クリックした位置を中心にズームレベルを調整します
- ここを中心にする:クリックした地点が中心になるようマップを移動します
座標操作:
- 座標をコピー:設定された座標系を使用して、位置情報をクリップボードにコピーします
- 座標をプロット:番号付きの座標マーカーを配置します。スタイルや座標ラベルを設定できます
- マーカーをプロット:外観をカスタマイズできるシンプルなマーカーを配置します
グラフィックス操作:
- テキストを追加:フォントプロパティを設定できるカスタムテキストグラフィックスをマップ上に配置します
- すべてのグラフィックスを消去:配置したマーカーとテキストをすべて削除します(グラフィックスがある場合は件数を表示)
外部サービス:
- Google ストリートビューで開く:投影座標を使用して、Google ストリートビューで位置を開きます
- Pictometryで開く:投影座標を使用して、Pictometryの航空画像ビューアーで位置を開きます
計測ツール:
情報サービス:
ここは何?:次の方法で位置を特定します。
- 住所検索用に、設定済みのロケーターサービスを使って逆ジオコーディング
- 設定済みのArcGIS Feature Servicesに対するフィーチャレイヤー検索
- ジオコーディングとフィーチャレイヤー検索の両方の結果をポップアップに表示
コンテキストメニューは管理者の設定に応じて変わります。ツールは使用後、またはマップを操作すると自動的に閉じます。
計測ツール
計測機能の仕様は次のとおりです。
利用可能な単位
- 距離の計測:フィート、ヤード、マイル、メートル、キロメートル
- 面積の計測:平方フィート、平方ヤード、平方マイル、平方メートル、平方キロメートル、エーカー
単位の表示オプション
- 単位を1つだけ表示:選択した既定の単位で計測値を表示します
- 両方の単位を表示:主単位と換算後の単位を併記します(例:「150.00フィート(45.72メートル)」)
インターフェイス要素
- 距離計測ツールには閉じるボタンがあります
- 面積計測ツールには閉じるボタンがあります
- 既定の「新しい計測」ボタンは削除されています
座標とマーカーのプロット
このウィジェットでは、次の2種類のマーカーを配置できます。
座標マーカー:
- 1から順に番号を付けます
- ポップアップに表示する座標情報を設定できます
- 複数の座標系(マップのネイティブ座標系、WGS84、カスタムWKID)に対応
- 座標ラベルをマップ上に任意で表示できます
- マーカーのスタイル、色、アウトライン、配置を設定できます
- 緯度/経度の形式として十進度または度分秒に対応
シンプルなマーカー:
- 番号のない基本的なポイントマーカー
- スタイル、サイズ、色、アウトライン、回転、オフセットなど、外観を自由にカスタマイズできます
- 透明度を設定できます
テキストグラフィックス:
- クリックした位置に任意のテキストを配置
- フォントファミリー、サイズ、太さ、色を設定できます
- テキストのアウトライン(ハロー)と背景を任意で追加できます
- ブラウザーのセッション中は保持されます
開発者向け設定
マップウィジェットの選択
- アプリ内のマップウィジェットに右クリックウィジェットを接続します
- 選択したマップで右クリック機能を有効にします
有効にするアクション
各アクションは個別に切り替えられます。
- 拡大
- 縮小
- ここを中心にする
- 座標をコピー
- 座標をプロット
- マーカーをプロット
- テキストを追加
- Google ストリートビューで開く
- Pictometryで開く
- 距離を計測
- 面積を計測
- ここは何?
座標系の設定
コピーする座標の形式を設定できます。
- 現在のマップの座標系を使用
- WGS84(緯度/経度)を使用
座標プロットの設定
マーカーに関する幅広い設定:
- 座標系:マップのネイティブ座標系、WGS84、またはカスタムWKID
- 形式オプション:緯度/経度の十進度または度分秒
- マーカースタイル:円、四角形、十字、X、ひし形、三角形、ピン
- 外観のプロパティ:サイズ、色、アウトラインの色/幅、不透明度、回転角度
- 配置:正確に配置するためのX/Yオフセット調整
- テキストの設定:番号の文字サイズと色
- ラベル:オフセット、サイズ、色をカスタマイズできる座標ラベル(任意)
- ポップアップの内容:マーカーポップアップで座標を表示するか切り替え
シンプルなマーカーの設定
基本マーカーの個別スタイル設定:
- スタイルオプション:円、四角形、十字、X、ひし形、三角形、ピン
- 外観:サイズ、色、アウトラインのプロパティ、不透明度
- 配置:回転角度とX/Yオフセット
テキストの設定
テキストグラフィックスのフォントと表示設定:
- タイポグラフィ:フォントファミリー、サイズ、太さ(標準/太字)
- 色:テキストの色とアウトライン(ハロー)の色
- 効果:アウトラインのサイズ、背景色(任意)
- 背景:透明または色付きの背景オプション
逆ジオコーディングの設定
フィーチャーレイヤーの設定
「ここは何?」機能の詳細設定:
- レイヤー管理:カスタム名を付けてフィーチャーレイヤーを追加/削除
- フィールドの選択:各サービスから表示するフィールドを選択
- サービスとの連携:Feature ServiceのURLからフィールドを自動読み込み
- 表示オプション:フィールドのエイリアスとグループ化を設定
ポップアップの表示設定
情報ポップアップのカスタマイズオプション:
- レイアウト:ポップアップの幅と最大高さを設定
- コンテンツの整理:レイヤー名の表示/非表示、レイヤーごとにグループ化
- フィールドの表示:フィールドのエイリアスまたは元のフィールド名を使用
- スタイル:大きなコンテンツをスクロールできるレスポンシブデザイン
計測の設定
- 既定の単位:フィート、ヤード、マイル、メートル、キロメートルから選択
- 単位の表示:単位を1つだけ表示するか、換算値とともに2つ表示するかを選択
外部サービスのURL
- Pictometryとの連携:座標パラメーターを含むPictometryサービスのURLを設定
- ジオコーディングサービス:逆ジオコーディングサービスのエンドポイントを設定
ウィジェットの配置
このウィジェットはインターフェイス要素を表示せず、バックグラウンドで動作します。推奨設定:
- ウィジェットのサイズを0×0ピクセルに設定
- レイアウトの使用されていない隅に配置
- レイアウト設定で「最背面へ移動」を使用
- ウィジェットを表示したまま有効にする
- デスクトップ向けのみ推奨。タブレット/スマートフォンのビューアーには推奨されません
技術情報
- 単位のドロップダウンには、指定された利用可能な単位のみが表示されます
- 無効な単位の選択はブロックされ、既定の単位に戻ります
- コンソールログは警告とエラーのみに制限されています
- メモリ管理のためのクリーンアップ処理を備えています
- グラフィックスはブラウザーのセッション中は保持されますが、ページを再読み込みすると消去されます
- 座標投影では複数の空間参照系に対応しています
- フィールドのメタデータは設定済みのFeature Servicesから自動的に読み込まれます
変更履歴
2026/10/12: ウィジェットがアプリの言語(?locale=、言語切り替え、ArcGISプロフィールまたはブラウザーの設定)に従うようになりました。ヘルプガイドも含め、39言語に対応しています。
独自のカスタムウィジェットをお持ちですか? 同じ無料ツールのexb-i18n-kitを使えば、コマンドひとつで翻訳できます:localize。各フレーズがどのように補われるかをご紹介します。
- まずEsriの翻訳。Experience Builderのインストール環境にある翻訳を読み込みます。そのため、「Zoom to」のようなフレーズには、Esriのウィジェットと同じ表現が使われます。
- 標準用語。フィートやエーカーなどの単位名には、ブラウザーでも使われるものと同じUnicode CLDRのデータを使用します。
- 共有翻訳メモリ。 残りの翻訳には、オープンソース翻訳ツールLibreTranslateを使って構築した共有辞書と、ボスニア語、クロアチア語、セルビア語向けのHelsinki-NLPのOpus-MTモデルを使用します。GitHub上で無料で動作するため、APIキーもアカウントも必要ありません。
- 連携。 既定の設定やヘルプガイドのように、ウィジェットの翻訳ファイル外にハードコードされた英語も検出し、翻訳されるように連携します。
手作業で修正した内容は機械翻訳より優先され、上書きされることはありません。機械翻訳の箇所もあるため、不自然な表現に気づいたら、よりよい訳をこちらに返信してください。
2026/9/10:
右クリックメニューの上部にヘルプボタンを追加しました。クリックすると、検索可能な短いガイドが開きます。また、マップの下端または右端付近で右クリックしたときにメニューが画面外にはみ出す問題を修正しました。色とアイコンがアプリのテーマに従うようになりました。添付のzipをダウンロードするか、GitHubから入手してください。
2026/7/23: Experience Builder 1.21対応(v1.0.2)
EB Developer Edition 1.21(JS API 5.x)でウィジェットUIの一部に問題が発生していましたが、以下のとおりすべて修正しました。ウィジェットは1.20にも引き続き対応しています。
- 1.21で計測パネルのレイアウトを修正しました。ラベルと値が1行につながり(「Distance378.15 ft」)、パネルの余白がなくなって表示が切れていました。パネルのスタイルをEsri内部のクラス名に依存しないようにしたため、両方のバージョンで正しく表示され、今後EsriがDOMを変更しても影響を受けません。
- 1.21で「ここは何?」のポップアップのスタイルを修正しました。ポップアップがコンテンツをシャドウルート内に配置するようになったため、ページレベルのスタイルシートが適用されず、リスト行、「戻る」ボタン、「ズーム」ボタン、リンクのスタイルが反映されていませんでした。スタイルをポップアップのコンテンツに直接適用するようにしました。サイズ変更可能なポップアップも、1.21のシャドウDOM境界を越えて動作します。
- JS API 5.xに向けた内部の刷新:モジュール読み込みをグローバルAMD requireからExperience Builderのモジュールローダーに移行し、プロパティの監視をreactiveUtilsに移行しました。また、将来のリリースでEsriがgeometryEngineを削除した場合に備え、長さと面積の計算が新しいジオメトリ演算子に自動的にフォールバックするようにしました。
- 開発者向けの改善:ウィジェット用のtsconfig.jsonを追加し、1.21で複数の型パッケージの配置が変更された後にVisual StudioとVS Codeで表示されていたTypeScriptの誤検知を抑制しました。編集時のみの変更で、実行時への影響はありません。
2026/7/17:バグ修正:このウィジェットを含むすべてのExperience Builderアプリで、ポップアップのテキストを選択・コピーできなくなる不具合を、モバイルの長押し機能で導入されたリグレッションとして修正しました。iOSの長押しタッチコールアウトを抑制する設定が、ポップアップのDOMも含むMapViewコンテナー全体に適用されていました。ブラウザーではuser-selectが継承されるため、ポップアップにも抑制が適用されていました。現在は抑制の対象をマップキャンバスのみに限定したため、長押しの動作は変わらず、ポップアップのテキストを再び選択・コピーできるようになりました。既存のライブセッションも、マップを再マウントすることなくアップグレード時にクリーンアップされます。
2026/6/03:機能強化(1.20バージョンのみ)
- アコーディオンウィジェット内に配置された郵送ラベルまたは物件レポートを起動して開けるようにしました(アイデアとテストにご協力いただいた@KeyHunterさん、ありがとうございます)
- パッケージ構成を標準化しました。package.json、README.md、LICENSE(Apache 2.0)、.gitignore、.npmignoreを追加したため、clientフォルダーで標準の`npm install`を実行するだけで依存関係が自動的にインストールされます。依存関係ごとのインストールコマンドは不要です。
2026/5/21:機能強化(1.20バージョンのみ)
- 右クリックのオプションで郵送ラベルウィジェットを開き、送信前にバッファーを適用できるようにしました。
2026/5/12:機能強化(1.20バージョンのみ)
- 設定:XMLのインポート/エクスポート機能を追加し、設定をバックアップしたり、アプリ間で移行したりできるようにしました。
- 設定/ウィジェット:「ここには何がある?」機能を強化し、レイヤーをさらに掘り下げられるようにしました(動画を参照)。Webマップのデフォルト設定に対応し、設定にArcadeを埋め込むこともできます。
2026/5/7:1.20バージョンでGoogle ストリートビューが動作しない不具合を修正しました。
2026/3/26:1.20バージョンの問題を解決しました。1.19と1.20のバージョンをダウンロードできます。問題があれば、このブログ記事にコメントをお寄せください。
2026/3/25:重大な変更はありませんが、DE 1.20でいくつかの不具合が発生するため、調査が必要です。
2026/2/17:
- 右クリックで起動するオプションを追加しました:物件レポートウィジェット。
2026/2/10:
- 1.18バージョンを削除し、1.19バージョンのみを保守することにしました
- 選択リストから不要な計測単位(インチ、センチメートル)を削除しました
- 重複の原因となっていた、ラインのEsri既定の合計計測値を削除しました
- サイドバーを展開したときに隠れないよう、コンテキストメニューの配置を改善しました
2025/12/10(1.19バージョンのみ):
2025/12/03:
- 設定パネルの座標コピー機能で、Webメルカトルだけでなく、任意の座標系を使用できるようにしました。
- 1.19で追加した新機能です。1.18ではテストしていません。記事には、新機能のない元の1.18バージョンと、新機能を追加した1.19バージョンがあります。1.18でも下位互換性がある可能性はありますが、テストはしていません。
2025/07/23:
- 7/23/25にリリースされたDeveloper Edition 1.18でウィジェットをテストし、通常どおり動作することを確認しました。
2025/06/20:
- マーカーのスタイル設定を強化し、7種類の形状(円、正方形、十字、X、ひし形、三角形、ピン)を追加
- マーカーの回転、不透明度、X/Yオフセット位置を調整するコントロールを追加
- カスタムフォント、アウトライン、背景オプションを備えたテキストグラフィックス機能を追加
- WKID入力によるカスタム座標系に対応
- 座標形式のオプション(十進度、度分秒)を追加
- 座標マーカーとは別に、シンプルなマーカーをプロットする機能を追加
- フィーチャレイヤーの包括的なフィールド選択機能を追加し、フィールドを自動読み込みできるようにしました
- ポップアップ表示のカスタマイズオプション(幅、高さ、グループ化、フィールドエイリアス)を追加
- すべてクリアのオプションに、グラフィックスのリアルタイムカウントを追加
- 設定画面にマーカーのプレビュー機能を追加
- 座標ラベルの配置と書式設定を強化
- 座標マーカーとシンプルなマーカーに、個別のスタイル設定コントロールを追加
2025/06/13:
- 右クリック時にカスタムウィンドウに加えてブラウザー既定のウィンドウが表示されることがある不具合を修正
- 右クリックのオプションにPictometryを追加
- 「ここには何がある?」機能で検索対象となるフィーチャレイヤーを追加
概要
右クリックウィジェットでは、コンテキストメニューから、マップ上で実行する操作を設定できます。ズーム、単位を絞り込める計測、座標の取得、細かなスタイル設定が可能なマーカーやテキストの配置、フィーチャレイヤーと連携した逆ジオコーディングに対応しています。Developer Editionで設定でき、接続されたマップウィジェットに適用されます。
不具合や機能強化に関するご意見は、このブログ記事のコメント欄からお寄せください。