【ITニュース解説】Upgrade Umbraco 13 to 16: Localization

2025年09月04日に「Dev.to」が公開したITニュース「Upgrade Umbraco 13 to 16: Localization」について初心者にもわかりやすいように丁寧に解説しています。

作成日: 更新日:

ITニュース概要

Umbraco 13から16への多言語対応アップグレードを解説。UIの多言語化ファイルはXMLからJavaScriptに変わり、マニフェストでの登録が必要となる。C#コードでの多言語サービスも分割され、それぞれの新しい対応方法が示されている。

出典: Upgrade Umbraco 13 to 16: Localization | Dev.to公開日:

ITニュース解説

Umbracoは、Webサイトのコンテンツ管理を行うためのシステム(CMS)の一つである。このシステムをUmbraco 13から16へバージョンアップする際、Webサイトや管理画面の多言語対応、すなわちローカライゼーションの仕組みにも変更があるため、その対応方法を理解することが非常に重要になる。本解説では、このUmbracoのバージョンアップにおけるローカライゼーションに関する変更点について、システムエンジニアを目指す初心者にも分かりやすく説明する。

まず、バックオフィス(管理画面)のローカライゼーションから見ていこう。Umbracoのバックオフィスとは、Webサイトのコンテンツ作成や設定を行う管理画面を指す。この管理画面自体を多言語化することで、異なる言語を話すユーザーがそれぞれの母国語で操作できるようになる。例えば、コンテンツタイプ(記事や製品などの情報の型)の名前や説明、プロパティ(コンテンツの個別の項目)の名前、あるいは管理画面内のメニューやポップアップメッセージなどが多言語化の対象となる。

Umbraco 13と16では、バックオフィスでのローカライゼーションの基本的な考え方は同じである。それぞれの言語に対応するファイルを用意し、そのファイル内で「キー」と呼ばれる識別子と、それに対応する多言語化された「値」(実際のテキスト)を定義する。このキーを管理画面の様々な場所で参照することで、適切な言語のテキストが表示される仕組みである。

しかし、Umbraco 13から16へのアップグレードで大きく変わるのは、この言語ファイルの形式登録方法である。Umbraco 13では、言語ファイルはXML(Extensible Markup Language)形式であった。XMLは情報を構造化して記述するためのマークアップ言語であり、例えばen.xmlといったファイル名で、特定のフォルダに配置するだけでUmbracoが自動的に読み込んでローカライゼーションに利用していた。

一方、Umbraco 16では、バックオフィスのほぼすべての要素が「拡張機能」(Extensions)という新しい仕組みで動作するように変更された。これに伴い、言語ファイルもJavaScript形式に変わった。JavaScriptはWebページに動きをつけるために使われるプログラミング言語である。Umbraco 16の言語ファイルは、例えばlocalization-en.jsのようなファイル名になり、JavaScriptのオブジェクト形式で記述されるようになった。

JavaScript形式になったことで、Umbraco 13のように特定のフォルダにファイルを置くだけでは自動的に読み込まれなくなった。代わりに、これらの言語ファイルは「Extension Manifest」(拡張機能マニフェスト)と呼ばれる設定ファイルに登録する必要がある。これは、umbraco-package.jsonというJSON(JavaScript Object Notation)形式のファイルに、その拡張機能のタイプ、エイリアス、名前、そして対応するJavaScriptファイルのパスなどを記述することで行われる。JSONもまた、データを構造化して表現するためによく使われる形式である。このマニフェストに各言語のファイルをlocalizationタイプとして明示的に登録することで、Umbraco 16がそれらを認識し、ローカライゼーションに利用できるようになる。既存のXML形式の言語ファイルをJavaScript形式に変換し、それをマニフェストに登録する作業が、アップグレードの大部分を占める。

ただし、バックオフィスのローカライゼーションにはもう一つ注意点がある。特に「プロパティの説明フィールド」がUmbraco 13とは異なる動作をする。Umbraco 13では、説明フィールドに直接ローカライゼーションキーを記述するだけで多言語化されたテキストが表示されたが、Umbraco 16ではキーを{キー名}のように中括弧で囲む必要がある。これは、Umbraco 16で説明フィールドの表示に特定の書式処理が導入されたためで、正しいフォーマットで記述しないと多言語化されない。

次に、バックエンド(C#コード)のローカライゼーションについて説明する。バックエンドとは、サーバー側で動作するアプリケーションロジックを指す。C#などのプログラミング言語で記述されたコードの中で、メールの内容、エラーメッセージ、システムのヘルスチェック結果など、ユーザーに表示するテキストを多言語化する必要がある場合、このバックエンドローカライゼーションが利用される。

Umbraco 16では、バックエンドのローカライゼーションに関する重要な変更点がある。それは、ILocalizationServiceというサービスが廃止されたことだ。このサービスは、コンテンツの言語管理とUmbracoの辞書管理という、性質の異なる複数の役割を担っていたため、責任が大きすぎた。Umbraco 16では、この機能がILanguageService(言語管理を担当)とIDictionaryService(Umbraco辞書管理を担当)の二つのサービスに明確に分割された。これにより、それぞれのサービスが単一の責任を持つようになり、より分かりやすく、保守しやすくなったと言える。

一方で、ILocalizeTextServiceというサービスは引き続き存在し、Umbraco 13と同じように機能する。このサービスは、バックエンドのC#コードからローカライゼーションキーを使ってテキストを読み込むためのものである。重要な点として、このILocalizeTextServiceが利用する言語ファイルは、バックオフィスのJavaScriptファイルではなく、引き続きXML形式のファイルである。つまり、バックオフィスとバックエンドで言語ファイルの形式が異なることを理解しておく必要がある。

最後に、Umbraco拡張機能でのローカライゼーションについて触れる。Umbraco 16では、独自の機能やUI要素を追加するための「拡張機能」の開発がより柔軟になった。これらの拡張機能の中でも、ローカライゼーションを利用する場面が多くある。例えば、拡張機能の定義ファイルであるマニフェストの中で、ダッシュボードのタイトルなど、ユーザーに表示されるテキストに直接ローカライゼーションキーを参照させることができる。これにより、拡張機能自体も多言語対応が可能となる。

また、カスタムのWebコンポーネントを作成する場合、特定の基本要素を継承するか、ヘルパー機能を組み込むことで、コンポーネント内でローカライゼーションを簡単に利用できる仕組みが提供される。これにより、コードから多言語テキストを取得して表示に利用したり、HTMLテンプレートの中で専用の要素を使用することでも、ローカライゼーションされたテキストを表示したりできる。

Umbraco 16でバックオフィスの言語ファイルがJavaScript形式になったことは、新しい可能性も生み出している。特に、ローカライゼーションに「引数」や「プレースホルダー」を利用できるようになった点は大きい。例えば、同じ「キー」を使って、表示する「項目数」に応じて「項目がありません」「1つの項目を表示中」「複数の項目を表示中」といったように、動的にテキストを変更する機能を実現できる。JavaScriptの関数としてローカライゼーションの値を定義することで、このような柔軟な表現が可能となる。

まとめると、Umbraco 13から16へのアップグレードにおけるローカライゼーション対応は、バックオフィスの言語ファイル形式がXMLからJavaScriptに、そして登録方法が自動読み込みからマニフェスト登録に変わる点が最も大きな変更点である。バックエンドのローカライゼーションサービスも再編されたが、言語ファイル形式はXMLのままだ。さらに、拡張機能でのローカライゼーションの利用方法が進化し、JavaScriptによる柔軟な表現が可能になった。これらの変更点を正しく理解し、対応することで、Umbraco 16ベースの多言語対応サイトをスムーズに構築・運用できるようになるだろう。

関連コンテンツ

【ITニュース解説】Upgrade Umbraco 13 to 16: Localization | いっしー@Webエンジニア