多言語に対応したカスタムウィジェットの作成（ArcGIS Experience Builder）

こちらは、ArcGIS アドベントカレンダー 2024 の5 日目の記事です。他の記事もぜひご覧ください。

はじめに

これまで、ArcGIS Experience Builder (Developer Edition) を使用したカスタムウィジェットの作成方法として、「スターターウィジェットの作成」と「マップの座標を取得」、「表示レイヤーの切り替えウィジェット」、「カスタムウィジェットの開発を始めるのに役立つベースウィジェット」という記事をご紹介しました。

ArcGIS Experience Builder の標準ウィジェットでは、ArcGIS Online や ArcGIS Enterprise の言語設定に合わせた言語にてウィジェットの設定パネルおよびウィジェットパネルが表示されます。カスタムウィジェットにおいても同様に多言語対応したものを開発したいと思う方もいるかと思います。

そこで本記事では、ArcGIS Experience Builderで多言語に対応したカスタムウィジェットを作成する方法について、「カスタムウィジェットの開発を始めるのに役立つベースウィジェット」で紹介した、ベースウィジェットを用いて紹介します。

インストール

ArcGIS Experience Builder のインストールガイドを参照して、ArcGIS Experience Builder (Developer Edition) のダウンロードやインストール、設定を行います。

ステップ

ベースウィジェットの準備

以下のパスにベースウィジェットを配置します。

\client\your-extensions\widgets

ベースウィジェットはこちらからダウンロードできます。

Manifest ファイルの編集

コードエディター等で `base`フォルダーの `manifest.json` を開きます。

`manifest.json` の `translatedLocales` の配列に多言語化対応するロケールを追加します。
今回は日本語対応をするために、`ja` を追加します。また、`translatedLocales` の配列で先頭のロケールがデフォルトのロケールになります。

  "translatedLocales": [
    "en", 
    “ja”
  ],

設定パネルの編集

setting フォルダー内に ` translations` フォルダーを作成します。

`translations` フォルダー内に `default.ts` ファイルを作成します。
`default.ts` ファイルに記述した内容は、`manifest.json` でデフォルト設定のロケール、または、`manifest.json` に設定されていないロケールが ArcGIS Online または ArcGIS Enterprise に設定されている場合に表示されます。今回の場合は、`ja` 以外のロケールが設定された場合に `default.ts` の内容が表示されます。

`default.ts` ファイルを開き、以下のコードを記述します。
テキストを表示対象のキーとデフォルトで表示する文字列を記述します。

export default {
    sourceLabel: 'Source',
    selectMapWidgets: 'Select a map widget'
}

`setting.tsx` ファイルを開き、デフォルト設定の文字列を表示するために必要な以下の import 文を追記します。

/** @jsx jsx */
import { React, jsx } from "jimu-core";
import { AllWidgetSettingProps } from "jimu-for-builder";
import { MapWidgetSelector } from "jimu-ui/advanced/setting-components";
import { SettingSection, SettingRow } from 'jimu-ui/advanced/setting-components';
// 以下を追加
import {
    defaultMessages as jimuDefaultMessage
} from 'jimu-ui';
import defaultMessages from './translations/default';

`setting.tsx` ファイルに以下を記述して、`default.ts` の記述内容を読み込み、デフォルト設定の文字列を出力できるようにします。

export default class Setting extends React.PureComponent<AllWidgetSettingProps<any>, any> {
    // 以下を追記
allDefaultMessages = Object.assign({}, defaultMessages, jimuDefaultMessage);

`setting.tsx` ファイルにて多言語対象の属性に以下のような記述をして多言語化対応をします。今回は手順 6. にて記述した sourceLabel の属性を対象とします。

    render() {
        return <div className="widget-setting-base">
            <SettingSection className="map-selector-section"
            /** title 属性に対して多言語化対応を行うため以下に変更
title={"ソース"}
*/
    title={
        this.props.intl.formatMessage({
           id: 'sourceLabel',
           defaultMessage: this.allDefaultMessages.sourceLabel
       })}

ここまでの内容を確認します。手順 6 で設定された文字列が表示されたことが確認できます。

`translations` フォルダー内に `ja.js` ファイルを作成します。
この時のファイル名は、`manifest.json` にて設定した標準設定以外のロケールを名称にしてください。また、今回は `manifest.json` に `ja` のみファイルを作成しますが、複数のロケールを設定している場合は、その数だけ作成をします。

`ja.js` ファイルを開き、以下のコードを記述します。
`default.ts` で設定したキーと言語対応した文字列を記述します。

System.register([],(function (e) {return {execute: function () {e({
        sourceLabel: "ソース",
        selectMapWidgets: "マップ ウィジェットの選択"
})}}}));

ここまでの内容を確認します。手順 11. で設定した日本語の文字列が表示されることが確認できます。

ウィジェット画面、ウィジェット名の編集

`runtime` フォルダー内に ` translations` フォルダーを作成します。

`translations` フォルダー内に `default.ts` ファイルを作成します。
`default.ts` ファイルに記述した内容は、`manifest.json` でデフォルト設定のロケール、または、`manifest.json` に設定されていないロケールが ArcGIS Online または ArcGIS Enterprise に設定されている場合に表示されます。今回の場合は、`ja` 以外のロケールが設定された場合に `default.ts` の内容が表示されます。

`default.ts` ファイルを開き、以下のコードを記述します。
テキストを表示対象のキーとデフォルトで表示する文字列を記述します。

export default {
    description: 'Configured Web Map'
  }

`widget.tsx` ファイルを開き、デフォルト設定の文字列を表示するために必要な以下の import 文を追記します。

/** @jsx jsx */
import { React, AllWidgetProps, jsx } from "jimu-core";
import { JimuMapViewComponent, JimuMapView } from "jimu-arcgis";
// 以下を追加
import {
    defaultMessages as jimuDefaultMessage
} from 'jimu-ui';
import defaultMessages from './translations/default';

`widget.tsx` ファイルにて多言語対象の属性に以下のような記述をして多言語化対応をします。今回は手順 14. にて記述した description の属性を対象とします。

    render() {
        return (
～～中略～～
                <p>
                {/**
                 * 固定文字列に対して多言語化対応を行うため以下に変更
                 * 設定されている Web マップ
                 * */}
                    {
                        this.props.intl.formatMessage({
                            id: 'description',
                            defaultMessage: this.allDefaultMessages.discription
                        })
                    }
                </p>
                ～～中略～～
        );
    }

ここまでの内容を確認します。手順 14. にて記述した description に設定された文字列が表示されたことが確認できます。

`translations` フォルダー内に `ja.js` ファイルを作成します。
この時のファイル名は、`manifest.json` にて設定した標準設定以外のロケールを名称にしてください。また、今回は `manifest.json` に `ja` のみファイルを作成しますが、複数のロケールを設定している場合は、その数だけ作成をします。

`ja.js` ファイルを開き、以下のコードを記述します。
`_widgetLabel ` のキーと言語対応するウィジェット名、 `default.ts` で設定したキーと言語対応した文字列を記述します。

System.register([],(function (e) {return {execute: function () {e({
       _widgetLabel: "カスタム ベース ウィジェット",
       discription: "設定されている Web マップ"
})}}}));

`_widgetLabel`キーはウィジェット名称用に定義されている予約語です。これを設定することで、ウィジェットの表示名を多言語化することができます。

ここまでの内容を確認します。手順 18. で設定した日本語の文字列が表示されることが確認できます。

また、ウィジェットリストや設定パネルに表示されているウィジェットの名称も日本語化されていることが確認できます。

以上で、カスタムウィジェットを多言語化対応する説明になります。

まとめ

今回は、ArcGIS Experience Builder (Developer Edition) を使用して多言語化対応したカスタムウィジェット開発する方法をご紹介しました。グローバルに事業展開している企業などカスタムウィジェットを作成する場合に、柔軟に作成することができます。今回ご紹介した方法の他にもいくつか多言語化対応方法があるので、詳しくは ArcGIS 開発リソース集の i18n サポートをご確認ください。

多言語に対応したカスタムウィジェットの作成（ArcGIS Experience Builder）