AEM開発者ブログ by YAMATO

アドビ社のデリバリーパートナー大和株式会社のAEM開発者ブログです。

AEMのページ言語によって日付フォーマットを変更する

i18n 開発 HTL

こんにちは！大和株式会社の蕪山です。

ウェブサイト作成において、多言語対応という課題はどんなクライアント様でも避けて通れない課題だと思います。AEMには、i18n、Live Copy / Language Copy、翻訳プロジェクトといったサイトの多言語対応をサポートしてくれる多数の機能があります。

しかし、細かなユースケースに沿った実装方法や、特に日本語に特化したような実例についてはなかなか情報が少ないのが実情です。。。そこで今回は、「ページの言語によって日付フォーマット変更する」ベストプラクティスを紹介したいと思います。

例えば、ページの作成日時出力する際に、日本語ページでは「2020年12月25日金曜日」、英語ページでは「Fri, 25 Dec 2020」のように出力したいというような場面に活用できます。

AEMバージョン

この記事の内容は、AEM6.3以降を対象としています。
（以下で紹介するHTLの日付フォーマット指定機能は、AEM6.3より導入されています。）

指定したフォーマットで日付を出力する

はじめに、日付フォーマットを用いて日付を出力する方法について紹介します。

HTLには、指定したフォーマットで日付を出力できる機能が用意されています。日付フォーマットはロケールに依存するため、ロケールを変更することにより出力される日付を翻訳することができます。

<p>${'EEEE, dd MMMM yyyy' @ format=currentPage.jcr:created, locale='en_US'}</p>
<p>${'EEEE, dd MMMM yyyy' @ format=currentPage.jcr:created, locale='ja_JP'}</p>
<p>${'EEEE, dd MMMM yyyy' @ format=currentPage.jcr:created, locale='zh_CN'}</p>

<!--
出力結果：
<p>Wednesday, 04 March 2020</p>
<p>水曜日, 04 3月 2020</p>
<p>星期三, 04 三月 2020</p>
-->

locale部分には、以下のように言語コードを指定することもできます。

<p>${'EEEE, dd MMMM yyyy' @ format=currentPage.jcr:created, locale='ja'}</p>

<!--
出力結果：
<p>水曜日, 04 3月 2020</p>
-->

さらに、日付をページの言語で出力したい場合は以下のように指定することができます。

<!-- ロケールを指定する -->
<p>${'EEEE, dd MMMM yyyy' @ format=currentPage.jcr:created, locale=currentPage.language.toString}</p>

<!-- 言語を指定する -->
<p>${'EEEE, dd MMMM yyyy' @ format=currentPage.jcr:created, locale=currentPage.language.language}</p>

以上のように、HTLには指定したフォーマットで日付を出力できる機能が用意されており、ロケールを変更することで日付の翻訳そのものは可能となります。しかし、下記のことはできません。

  • 区切り文字を変更する
  • 年月日の順番を変更する （例えば、英語では25.12.2020、日本語では2020/12/25としたい）
  • 日本語で、「25日」「2020年」のように表示する
    • EEEE→○曜日、MMMM→○月となりますが、ddd→○日にならず、0025のようにゼロ埋めされます。yyyyも→○年になりません。

i18nを使用してページの言語によって日付フォーマットを変更する

i18n（または、i18n翻訳）とは、簡単に言えば、AEM上で使用される様々なテキストの翻訳を管理できる辞書のような機能のことです。

例えば、英語の"All rights reserved."に対する翻訳としてフランス語辞書に"Tous droits réservés."と登録すると、英語ページでは"All rights reserved."、フランス語ページでは翻訳された"Tous droits réservés."が出力されます。

今回は、この機能を利用して、以下のように出力する方法を紹介します。

  • 日本語ページでは、「2020年3月4日水曜日」つまり、"yyyy年M月d日EE曜日" のフォーマットで日付を出力する
  • 英語ページでは、「Wed, 4 Mar 2020」つまり、"EEE, d MMM yyyy" のフォーマットで日付を出力する

手順の概要

日本語の辞書に「"dateFormat": "yyyy年M月d日EE曜日"」を登録し、英語の辞書に「"dateFormat": "EEE, d MMM yyyy"」を登録します。

手順

  1. AEM Translatorを開きます。
    http://[ホスト名]:[ポート]/libs/cq/i18n/translator.html
    （ローカルの場合は、http://localhost:4502/libs/cq/i18n/translator.html ）
  2. Dictionariesから設定を追加する辞書を選択します（例えば、/apps/wknd/i18n ）。ここで、表にENのカラムがまだ無い（英語の辞書が無い）ため、まずそれを追加します。 f:id:yamato_tech:20200309154716p:plain
  3. CRXDEを開きます。
    http://[ホスト名]:[ポート]/crx/de/index.jsp
    （ローカルの場合は、http://localhost:4502/crx/de/index.jsp ）
  4. /etc を選択し右クリック > 作成 > ノードを作成 を選択します。
  5. 名前にlanguagesと入力し、種類にはnt:unstructuredを選択します。OKをクリックし、ノードを作成します。
    f:id:yamato_tech:20200309155427p:plain
  6. 作成した/etc/languagesノードにプロパティを追加します。名前にlanguagesと入力、「複数」をクリックし、「追加」をクリックします。
  7. 「languagesを編集」ダイアログが立ち上がります。値には、他プロジェクトの辞書を含めて使用したいすべての言語と、enを追加します。OKをクリックし、変更を保存します。 f:id:yamato_tech:20200309155721p:plain
  8. /etc/languagesノードは下図のようになります。 f:id:yamato_tech:20200309160153p:plain
  9. AEM Translatorを開き、Dictionariesから辞書を選択します。表にENのカラムが追加されました。 f:id:yamato_tech:20200309160302p:plain
  10. 英語の辞書が準備できたので、日付フォーマットを追加していきます。「Add」をクリックし、以下のように追加し、OKをクリックします。
    • String: dateFormat
    • JA: yyyy年M月d日EE曜日
    • EN: EEE, d MMM yyyy f:id:yamato_tech:20200309160321p:plain
  11. 入力内容を確認し、「Save」をクリックします。これで、英語の辞書と日本語の辞書それぞれに日付フォーマットを登録することができました。
  12. HTL側で以下のように呼び出します。オプションにi18nを指定することで、'dateFormat'という文字列がページの言語に従って翻訳され、その日付フォーマットを用いて日付が出力されることになります。
<p>ページ作成日時： ${ 'dateFormat' @ format=currentPage.jcr:created,locale=currentPage.language.toString, i18n}</p>

ページの出力結果は下図のようになります。

日本語ページでの出力↓
f:id:yamato_tech:20200309185030p:plain

英語ページでの出力↓
f:id:yamato_tech:20200309185058p:plain

ページの言語によって日付フォーマット変更することができました！

まとめ

「ページの言語によって日付フォーマット変更する」ベストプラクティスとして、i18nを利用した実装方法を紹介しました。この実装方法のメリットとしては、以下のようなことが挙げられます。

  • 日付フォーマットの追加や変更がしやすい。また、i18n辞書の編集はGUIで操作可能なため、ディベロッパーでなくても編集可能。
  • HTLからフォーマット文字列を直接取得できるため、独自に取得のロジックやメソッドを用意する必要がない。
  • 同じ日付フォーマットを異なるコンポーネントで使い回すことができ、コンポーネントごとに設定を用意する必要がない。

便利なi18nの機能を活用して、スマートなAEM多言語化を目指していきましょう！

参考リンク

Using Translator to Manage Dictionaries
i18nの概要や詳細な設定方法はこちらで確認できます

HTL Block Statements
HTLの基本文法がまとめられています

HTML Template Language Specification
HTLのより詳細な情報をチェックできます、サンプルコードも豊富です