nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

ウィジェットの多言語サポート

RiccardoKlinger2

<\/HEAD>

前回の投稿で、Web Appbuilder用に独自のウィジェットを作成する方法<\/A>を紹介しましたが、今回はウィジェットでの多言語対応のオプションについて説明したいと思います。<\/P>

NLS<\/H4>これまでのウィジェットの文字列は、現時点ではSetting.htmlとWidget.htmlファイルにほぼハードコーディングされています。ブラウザやポータル内で設定された言語に応じてこれらの文字列を置き換えたい場合は、文字列にラベルを付けて文字列ライブラリを作成する必要があります。これはSetting.htmlとWidget.htmlのウィジェット構造内の異なる場所で行われます。<\/P>Setting.html<\/H4>settingフォルダにはnlsというフォルダがあります。その中にサポートしたい各言語用のフォルダを作成し、デフォルトでウィジェットの設定に使用される文字列を含む初期のstrings.jsファイルを作成します。strings.jsファイルは実際のデフォルト文字列と、単一言語（この例では「de」のみサポート）をサポートしているかどうかの指標で構成されています:<\/P>define<\/SPAN>(<\/SPAN>{<\/SPAN>   root:<\/SPAN> (<\/SPAN>{<\/SPAN>     ZoomSetCheckboxText:<\/SPAN> "ズームレベルを表示"<\/SPAN>,<\/SPAN>     ScaleSetCheckboxText:<\/SPAN> "スケールを表示"<\/SPAN>,<\/SPAN>        configText:<\/SPAN> "設定:"<\/SPAN>   }<\/SPAN>)<\/SPAN>,<\/SPAN>   "de"<\/SPAN>:<\/SPAN> 1<\/SPAN>,<\/SPAN>   "es"<\/SPAN>:<\/SPAN> 0<\/SPAN> }<\/SPAN>)<\/SPAN>;<\/SPAN>‍‍‍‍‍‍‍‍‍‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN><\/span><\code></pre >変数「ZoomSetCheckboxText」と「ScaleSetCheckboxText」を使い、それらの変数に基本的な文字列を定義していることにお気づきかもしれません。これらの文字列は変数が使われている場所で使用されるべきです。変数はSetting.htmlファイル内に配置します。表記法が少し変わっていて少し奇妙に見えるかもしれません: <pre class = "lia-code-sample line-numbers language-none"><code>  <<\span >div><\span >     <<\span >div class="title"<\span class = "punctuation token" >><\span >${nls.configText}<\span class = "token tag"></div><\span >     <<\span >div class="row"<\span class = "punctuation token" >><\span >       <<\span >input type="checkbox"<\ span class = "attr-name token" >id="ZoomSetCheckbox"><\ span class= " punctuation-token ">><\ span ></input><\ span >       < span attr-name-token style-attr language-css-token style-attr language-css-token style-attr language-css-token style-attr language-css-token style-attr language-css-token style-attr language-css-token style-attr language-css-token style-attr language-css-token style-attr language-css-token style-attr language-css-token style-attr language-css-token style-attr language-css-token style-attr language-css-token style-attr language-css-token style-attr language-css-token style-attr language-css-token style-attr language-css-token style-attr language-css-token style-attr language-css-token style-attr language-css-token style-attr language-css-token style-attr language-css-token style-attr language-css-token style-attr language-css-token style-attr language-css-token style-attr language-css-token style-attr language-css-token style-attr language-css-token style-attr language-css-token style- attr-name -token -style - attr -language - css -token -style - attr -language - css -token -style - attr -language - css -token -style - attr -language - css -token -style - attr -language - css -token -style - attr -language - css -token -style - attr -language - css -token -style - attr -language - css -token -style - attr ... (truncated due to length) class="punctuation token">, });‍‍‍‍‍‍‍‍‍‍親フォルダーのデフォルト strings.js ファイルと比較して、文字列インジケーターの使用法が異なることに注意してください。The Widget.html

ウィジェット自体は同様に動作します。Widget フォルダー内に、サポートしたい言語に関するサブフォルダーを持つ nls フォルダーを作成します。サポートされている言語のリストはここで確認できます：

Native Language Support

再度、元のファイルで使用されている文字列を "${nls.xyz}" スキーマで置き換えます：

<div class="ZoomLeveLInfo">

タグ付けされた投稿をもっと見る

Knowhow

Technologie

There are no comments yet

会話に参加する

サインインしたメンバーは投稿、更新のフォローなどができます。初めてですか？無料アカウントを登録してください。

クイックリンク

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.