Craft CMSを使用した多言語サイト制作のはじめの一歩

公開

Craft CMSには多言語対応機能があるとのことで、少し試してみました。公式ドキュメント「Guide: Setting Up a Localized Site | Craft 3 Documentation」を参考にしました。

試すにあたり、Pro版の試用が可能となるcraftdemoという文字を含むURLを設定したのですが(詳細は「How Craft License Enforcement Works | Support | Craft CMS」をご覧ください)、Pricingを再度確認すると「Multi-site Multi-lingual」機能はSolo版でも使えるようですね。

管理画面での設定

さて、多言語サイトを制作するにはまず「サイト」を追加します。今回はデフォルトで用意されたサイトを日本語版サイトとし、英語版サイトを新たに追加します。パスの最初に/enを付けると英語版サイトとなるように、ベースURLを@web/en/と設定します。
画面キャプチャ:管理画面のサイトの設定

次に入力フィールドを設定します。テストなのでハンドルをtest_textとした複数行入力が可能なテキストフィールドを用意しました。この時、翻訳方法を「各サイトに対して翻訳」を設定します。日本語の入力フィールドと英語の入力フィールド2つ用意する、といったことは必要ありません。
画面キャプチャ:管理画面のフィールドの設定

次にセクションの設定です。ハンドルがsitehome、タイプがSingleの「サイトホーム」セクションを制作しました。入力タイプの設定で、先程作成したテキストフィールドを配置します。
画面キャプチャ:管理画面のセクションの設定

テンプレートの制作

セクションの設定でテンプレートは日本語版・英語版ともindex.twigを表示するよう設定しましたので、テンプレートを作っていきます。

まずはベースの制作です。最終的にどういうテンプレート構成にするかは現時点では判断しかねるので、ひとまず練習も兼ねて日本語版・英語版でベーステンプレートを分けてみました。

以下は日本語版の_base_ja.twigです。今回はまだサイトホームしか作っていないのですが、英語版へのリンクに/en{{ craft.app.request.url }}を設定することで英語版の同一コンテンツページに遷移できるかなと考えています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% if title is defined %}{{ title }} | {% endif %}CraftCMS デモ</title>
</head>
<body>
    <header>
        <div><a href="/en{{ craft.app.request.url }}" lang="en">English</a></div>
    </header>

{% block mainContent %}
    {% endblock %}
</body>
</html>

次に英語版の_base_en.twigです。html要素のlang属性とタイトルが違います。日本語ページへのリンクも設定します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% if title is defined %}{{ title }} | {% endif %}CraftCMS Demo</title>
</head>
<body>
    <header>
        <div><a href="{{ craft.app.request.url|replace('/en', '') }}" lang="ja">日本語</a></div>
    </header>

    {% block mainContent %}
    {% endblock %}
</body>
</html>

次にサイトホームのテンプレートindex.twigです。日本語版・英語版ともこのテンプレートでまかないます。extendscraft.app.languageを使うことにより、表示する言語に応じたベーステンプレートが読み込まれるようにしました。

{% extends '_base_' ~ craft.app.language %}

{% block mainContent %}
    {% set entry = craft.entries.section('sitehome').one() %}
    <h1>{{ entry.test_text }}</h1>
{% endblock %}

コンテンツの入力

最後にコンテンツの入力を行います。セクションの追加で設定した「サイトホーム」にテキストを入力します。編集画面が開いたらまずは日本語を入力します。「こんにちは、世界!」とでも入れて保存しておきましょう。
画面キャプチャ:管理画面のコンテンツの入力(日本語版)

次に英語版の入力です。英語版を入力するには「サイトホーム」というタイトルの右にあるドロップダウンメニューをクリックし、英語版のサイト(今回は「CraftCMS Demo English」というサイト名に設定してあります)を選択します。そして、日本語版と同じテキストフィールドに「Hello World!!」と入力して保存します。
画面キャプチャ:管理画面のコンテンツの入力(英語版)

同一の編集画面で設定を行ったサイト(言語)分の入力ができるのが良いですね。

コンテンツの表示

ではいよいよコンテンツの表示です。まずは日本語版から。https://craftdemo.***.anothersky.pw/にアクセスすると、「こんにちは、世界!」が表示されました。
画面キャプチャ:管理画面のコンテンツ入力画面(日本語版)

次に英語版です。意図した表示になるでしょうか。https://craftdemo.***.anothersky.pw/en/にアクセスしてみます。おっ、「Hello World!!」と表示されました!
画面キャプチャ:管理画面のコンテンツ入力画面(英語版)

ちなみに、編集中にライブプレビューを押した時も、現在選択しているサイト(言語)に応じたプレビューが表示されます。
画面キャプチャ:管理画面のコンテンツの入力時にプレビューをした画面(英語版)

まとめ

Craft CMSを使うと標準機能で容易に多言語対応ができそうですね。今回は簡単な実験でしたが、今後も研究を続けてみたいと考えています。