ArcGIS Arcade で手軽に多言語対応!Web マップの言語切り替えガイド – ポップアップ編 –

はじめに

ArcGIS Online では、ArcGIS Arcade (以下「Arcade」) を使用し、マップの閲覧者の言語環境に応じてフィーチャのポップアップやラベルの言語を切り替えて表示できます。前編のラベル編では、Arcade や使用する関数の概要をご説明したのち、ラベル言語を切り替える 3 つのステップをご紹介しました。

後編のポップアップ編では、複雑な場合分けやポップアップの書式設定など、より多くの機能を利用したポップアップ言語の切り替えについて詳しくご紹介します。

ぜひ ArcGIS Online にサイン インし、以下のマップを使用して実際に操作しながらお読みください。

使用データの詳細は前編のラベル編で紹介しています。Web マップの編集を開始する前にぜひご確認ください。

日本の活火山マップ_編集版

Arcade を使用して多言語対応の Web マップを作成

現在のポップアップは、属性データが表形式で表示されています。今回は、Arcade 式と書式設定を組み合わせて、以下のようなポップアップを作成します。

ステップ 1: Arcade を使用したポップアップ言語の切り替え

タイトル

ラベル編で作成した式を応用し、タイトルを構成します。作成手順は以下のとおりです。

  1. 設定ツールバーで [ポップアップ] をクリックし、[タイトル] をクリックします。
  2. すでに入力されている「{Name}」を削除し、右側の [{}] マークをクリックします。
  1. [フィールドの追加] パネルで、[式の追加] をクリックし、タイトルを「ポップアップ タイトル」に変更します。
  1. 以下の式を入力します。
    今回は、英語の山の名前の後ろにローマ字の日本語読みを表示するように設定しました。
var env = GetEnvironment(); 
var locale = env['locale']; // 現在のロケールを変数として格納

if (Left(Lower(locale), 2) == 'en') {
  return $feature.LABEL_EN + ' (' +$feature.Name+ ') '; // 英語の場合は LABEL_EN (英語のラベル) と Name (ローマ字の日本語読み) の値を返す
} else {
  return $feature.LABEL; // それ以外の場合は LABEL (日本語のラベル) の値を返す
}
  1. 式をテストし、問題がなければ [完了] をクリックします。

内容

現在のポップアップには、フィールド リストが表示されています。既存のフィールド リストを削除し、選択したフィーチャとロケールに合わせた動的な文章を表示するようにポップアップ用の Arcade 式を構成します。

また ArcGIS Online のポップアップでは追加した Arcade 式に対して、書式を設定できます。書式は式ごとに設定できるため、文章を以下のように 4 つに分け、それぞれ式を構成します。このうち、山の名前については「ポップアップ タイトル」式をそのまま利用し、それ以外の 3 つの部分について以下の手順でタイトルと式を構成します。

  1. [ポップアップ] ウィンドウの [フィールド リスト] 右側の [オプション] → [削除] をクリックし、フィールド リストを削除します。
  1. [コンテンツの追加] をクリックし、[テキスト] を追加します。
  1. 次に [オプション] セクションの [属性式] → [式の追加] をクリックし、テキストに含める Arcade 式の構成を開始します。
  1. 以下のようにタイトルと式を構成します。
  1. タイトル: 標高前文
var env = GetEnvironment(); 
var locale = env['locale']; // 現在のロケールを変数として格納

if (Left(Lower(locale), 2) == 'en') {
  return 'is '; // 英語の場合は 'is' を返す
} else {
  return 'は標高'; // それ以外の場合は 'は標高' を返す
}
  1. タイトル: 標高
var elevation = Round($feature.Volcanoes_elevation, 0) // 小数点以下を四捨五入
var elevationtext = Text(elevation, '###,###,###,###') // 3 桁ごとのカンマ区切りを追加

return elevationtext
  1. タイトル: 標高後文
var env = GetEnvironment(); 
var locale = env['locale']; // 現在のロケールを変数として格納

if (Left(Lower(locale), 2) == 'en') {
  return 'm above sea level.'; // 英語の場合は 'm above sea level.' を返す
} else {
  return 'm の活火山です。'; // それ以外の場合は 'm の活火山です。' を返す
}

ステップ 2: ポップアップの書式設定

ArcGIS Online のポップアップではそれぞれの式に対して異なる書式設定ができます。今回は以下の手順でポップアップに式を追加し、書式を設定します。

  1. [テキストの編集] → [フィールド リスト] から下のように式を追加するか、下の式をコピーし貼り付けます。
{expression/expr0} {expression/expr1} {expression/expr2} {expression/expr3} 
  1. パネル上部のツールバーを利用し、以下のようにそれぞれ書式を設定します。
  • {expression/expr0}
    • フォント サイズ 24
    • カラー #c2002d
    • ボールド
  • {expression/expr1}
    • フォント サイズ 12
  • {expression/expr2}
    • フォント サイズ 18
  • {expression/expr3} 
    • フォント サイズ 12
  1. 右下の [OK] をクリックし、ポップアップ テキストの編集を終了します。

Arcade 式と書式設定を組み合わせて、多言語対応のポップアップを作成しました。

ステップ 3: 複雑な場合分け (オプション)

1 と 0 のような該当するかどうかを示したフラグ形式のデータとブラウザーのロケールを組み合わせて、追加の情報を提供できます。

[日本百名山] フィールドでは日本百名山に登録されている活火山のフラグとして 1 が入力されています。これを利用し、以下の手順でポップアップに情報を追加します。

  1. [ポップアップ] ウィンドウの [コンテンツの追加] をクリックし、[テキスト] を追加します。
  2. [オプション] セクションの [属性式] → [式の追加] をクリックし、以下の Arcade 式を入力、またはコピーして貼り付けます。
var env = GetEnvironment(); 
var locale = env['locale']; // 現在のロケールを変数として格納

if (Left(Lower(locale), 2) == 'en' && $feature.famous == '1') {
  return 'It is one of the 100 most famous mountains in Japan.'; // 英語かつ [日本百名山] フィールドが 1 の場合
} else if (Left(Lower(locale), 2) == 'en' && IsEmpty($feature.famous)) {
  return '';
} else if (Left(Lower(locale), 2) != 'en' && $feature.famous == '1') {
  return '日本百名山にも登録されています。'; // 英語以外かつ [日本百名山] フィールドが 1 の場合 
} else {
  return '';
}
  1. タイトルを「日本百名山」に設定後、ステップ 2 と同様にポップアップ テキストに追加し、[OK] をクリックします。

ステップ 4: ロケールを切り替えて確認

それでは、ラベルが正しく設定されているかを確かめてみます。左側のコンテンツ ツールバーの [保存と開く] → [保存] をクリックしてマップを保存した後、URL の末尾に「?locale=en」を追加して、ブラウザーを再度読み込みます。

ロケール URL パラメーターを使用すると、ArcGIS アカウントやブラウザーの設定を変更せずにロケールを変更し、Arcade 式をテストできます。

まとめ

本ブログでは ArcGIS Online で Arcade を使用し、多言語対応の Web マップを作成する方法についてご紹介しました。今回作成した実際のマップは以下のリンクからご覧いただけます。

日本の活火山マップ_完成版
日本の活火山マップ_完成版 (locale=en)

皆さんも世界中の人に情報を届ける多言語対応の Web マップを ArcGIS Online で作成してみてください!

参考情報

フォローする