こちらは、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
ベース ウィジェットはこちらからダウンロードできます。
"translatedLocales": [
"en",
“ja”
],
export default {
sourceLabel: 'Source',
selectMapWidgets: 'Select a map widget'
}
/** @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';
export default class Setting extends React.PureComponent<AllWidgetSettingProps<any>, any> {
// 以下を追記
allDefaultMessages = Object.assign({}, defaultMessages, jimuDefaultMessage);
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 で設定された文字列が表示されたことが確認できます。
System.register([],(function (e) {return {execute: function () {e({
sourceLabel: "ソース",
selectMapWidgets: "マップ ウィジェットの選択"
})}}}));
ここまでの内容を確認します。手順 11. で設定した日本語の文字列が表示されることが確認できます。
export default {
description: 'Configured Web Map'
}
/** @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';
render() {
return (
~~中略~~
<p>
{/**
* 固定文字列に対して多言語化対応を行うため以下に変更
* 設定されている Web マップ
* */}
{
this.props.intl.formatMessage({
id: 'description',
defaultMessage: this.allDefaultMessages.discription
})
}
</p>
~~中略~~
);
}
ここまでの内容を確認します。手順 14. にて記述した description に設定された文字列が表示されたことが確認できます。
System.register([],(function (e) {return {execute: function () {e({
_widgetLabel: "カスタム ベース ウィジェット",
discription: "設定されている Web マップ"
})}}}));
`_widgetLabel`キーはウィジェット名称用に定義されている予約語です。これを設定することで、ウィジェットの表示名を多言語化することができます。
ここまでの内容を確認します。手順 18. で設定した日本語の文字列が表示されることが確認できます。
また、ウィジェット リストや設定パネルに表示されているウィジェットの名称も日本語化されていることが確認できます。
以上で、カスタム ウィジェットを多言語化対応する説明になります。
今回は、ArcGIS Experience Builder (Developer Edition) を使用して多言語化対応したカスタム ウィジェット開発する方法をご紹介しました。グローバルに事業展開している企業などカスタム ウィジェットを作成する場合に、柔軟に作成することができます。今回ご紹介した方法の他にもいくつか多言語化対応方法があるので、詳しくは ArcGIS 開発リソース集の i18n サポートをご確認ください。
・ArcGIS Experience Builder (Developer Edition)
・開発リソース集(ArcGIS Experience Builder(Developer Edition))
・スターター ウィジェットの作成 (ArcGIS Experience Builder)