目次

前回のあらすじ
プロローグ
はじめに
第1章 Drupalの多言語機能について
1.1 Drupalで多言語サイトを作る方法
1.2 Drupalで多言語サイトを作成する
1.3 にゃんコツ商店街サイトの多言語化要件
1.4 まとめ
第2章 サイトに掲載する言語を追加しよう
2.1 言語の管理と追加
2.2 言語スイッチャーブロックの配置
2.3 まとめ
第3章 コンテンツの翻訳
3.1 コンテンツの翻訳とは
3.2 コンテンツを翻訳するための設定
3.3 コンテンツを翻訳する
3.4 タクソノミータームの翻訳
3.5 メニューリンクの翻訳
3.6 まとめ
第4章 構成の翻訳
4.1 構成の翻訳とは
4.2 構成を翻訳するための機能
4.3 ビューの構成の翻訳
4.4 サイト名の翻訳
4.5 ブロックの翻訳
4.6 コンテンツフィールドの翻訳
4.7 言語に合うものだけを表示する
4.8 まとめ
第5章 ユーザーインターフェースの翻訳
5.1 ユーザーインターフェースの翻訳とは
5.2 未翻訳の文字列を翻訳する
5.3 翻訳をカスタマイズする
5.4 日本語翻訳の更新
5.5 翻訳のインポート
5.6 まとめ
第6章 多言語サイトをよりリッチに!機械翻訳の実現
6.1 Translation Management Toolモジュールの紹介
6.2 事前準備
6.3 TMGMTモジュールの基本概念と翻訳プロセス
6.4 翻訳してみよう
6.5 翻訳作業をもっと自動化する
6.6 まとめ
あとがき

前回のあらすじ

 これは

 とある小さな商店街の

 革命前夜の物語


 にゃんコツ商店街の酒屋の娘

 酒倉 雫(さかくら しずく)は途方に暮れていた。


 商店会会長の父・哲夫(てつお)から

 商店街活性化の一環として

 サイト制作を丸投げされてしまったのだ。


 「サイト制作なんて一度もしたことないんですけど!」


そんな迷える雫のもとに現れたのが

 「Drupal」エキスパートである、アザラシのまるちゃん先生であった。


 (なんでアザラシ?なんで人語を喋れるの?)

 という疑問はさておき、

 雫は幼馴染みの友ちゃんと共に、


 ・サイト企画のフローを通じて「Drupalで商店街サイトを制作する意義」

 ・Drupalの標準機能のみで実際に制作する方法

 ・Drupalの拡張機能でサイトを更にリッチに仕上げる方法


 などをまるちゃん先生から学び、

 商店街のサイトを、"自分達の手で"完成させたのであった。


 しかし、ひとまず完成したサイトには、改善の余地はまだまだ含まれている。

 よりよいサイト構築、にゃんコツ商店街の活性化を目指して、

 雫達の新たな挑戦が今はじまる……!!

プロローグ

雫、遊びにきたよ〜……って、あれ。浮かない顔してどうしたの?

うん……午前中ににゃんコツ神社に御神酒納品に行った後、外国のひとたちに、写真お願いされて。撮ってあげるとこまではできたんだ。でもその後も話しかけられたんだけど英語が聞き取れなくて、次の配達もあったし結局ソーリーソーリーで逃げちゃったんだよ……自分が不甲斐ない……。

まぁまぁ。言葉がわからないんだから仕方ないよ。はいこれ。お土産のタピオカミルクティーだよ。限定のピーチティーだって。雫ちゃん元気を出して!

まる茶のタピオカミルクティー本当においしくて大好き!しかも限定フレーバー!!有難う〜!

そういえば、さっきうまポンとまる茶に行くとき、日本観光ついでにオリビアさん会いにきたっていう人達をお店まで道案内してきたけど、同じ人達かな。

オリビアさんって確か、商店街にある「antique Portobello」っていう骨董店の女性店主の方だよね。

あの人達、オリビアさんのとこに行きたかったんだ。よかったぁ……ん?まるちゃん先生は英語話せるの?それってすごくない?本当に何者??

ふふふ……それはナイショ。で、にゃんコツ神社の馬場さんもアンケートで意見を寄せてくれてたし、道案内した人達も英語の案内があるといいなぁって言ってたんだよね。ということで雫ちゃん。にゃんコツ商店街サイトを多言語化してみない?

多言語化?英語とか、中国語とか?

神社や商店街のことを外国の言葉であらかじめサイトに掲載しておけば、外国からの観光客の人達にも安心して神社や商店街を散策してもらえると思うんだ。サイトの英語翻訳の監修はオリビアさんに協力をお願いしておいたから。少しずつやってみよう!

はじめに

 本書をお手に取っていただき、ありがとうございます。これは、Drupal入門書「酒屋の娘、Webサイト制作します」シリーズの第2作目です。サイト作成ツールの「Drupal」を使ってノーコードで多言語サイトを構築する方法を紹介します。本書の主人公の雫(しずく)ちゃんと一緒に、Webサイトの作り方を学んでいきましょう!

対象読者

 ・HTMLやCSSを触らずにサイトを作ってみたい、非エンジニアの方

 ・WordPressの経験はあるけど、他のCMSも勉強したい、Webサイト制作に携わっているエンジニアやディレクターの方

 ・DXの基盤となるようなCMSを検討したいDX担当や経営者の方

本書のゴール

 この本を一通り読むことで、次のことが成せるようになることを目指します。

 ・Drupalでの多言語機能について理解できるようになる

 ・Drupalで多言語サイトを作ることができるようになる

本書を読むにあたって必要な知識

 本書は、Drupalの基礎知識があるとより理解が深まります。まだDrupalを触ったことがない方、「タクソノミー」「ビュー」という用語の意味がわからない方は、既刊「酒屋の娘、Webサイト制作します」1を先にお読みいただくと、スムーズに理解できます。

 ですが、Web開発の知識は必要ありません。非エンジニアの方でも安心してお読みいただけるように工夫しています。

本書で提供する素材一式、ディストリビューション

 架空のにゃんコツ商店街サイトを作成する上で必要な画像やテキストは、次のサイトで提供しています。適宜ご活用ください。

 ・https://github.com/hmaruyama/nyankotsu-site-samples/

  ─ZIPダウンロードはこちら

  ─https://github.com/hmaruyama/nyankotsu-site-samples/archive/refs/heads/main.zip


 本書用に、Drupalのディストリビューションを作成して一般公開しています。このディストリビューションには、本書でDrupalでよく利用されるコントリビュートモジュールを使った便利な設定と、カスタマイズ性が高いコントリビュートテーマが組み込まれたプロファイルを用意しています。ぜひ学習にお役立てください。

 ・https://github.com/bkenro/nyankotsu

  ─ZIPダウンロードはこちら

  ─https://github.com/bkenro/nyankotsu/releases/download/v20240707/nyankotsu-latest.zip

ソフトウェアバージョンおよび動作環境

 本書は、執筆時点の最新版Drupal 10.3.xにて動作確認を行っています。

第1章 Drupalの多言語機能について

サイトを多言語化するっていうことは……。日本語のページは既にあるから、追加で各言語に翻訳したページを用意すればいいだけなんだよね?「商店街について」とか「神社の紹介」ページとか。

じゃあ聞くけど、サイトの上部に常に表示されているヘッダーメニューはどうするつもり?雫ちゃんの方法だと、英語のページを表示しててもヘッダーメニューは日本語表示のままになっちゃうよね。

たっ、確かに……。じゃあ、もうひとつ英語用のサイトを作ればいいのかな?

そういう方法もあるんだけどね。Drupalには優れた多言語機能が備わっていて、ひとつのサイト上で複数言語を取り扱えるようになっているんだよ。早速学んでみよう!

この章で学べること

 ・Drupalで多言語サイトを作る方法ふたつ

 ・Drupalで多言語サイトを作成する主な流れ

1.1 Drupalで多言語サイトを作る方法

 Drupalで多言語サイトを作ろうと思ったときに、大きくふたつの方法がよく利用されます。

 ・(A) ひとつのサイト上で多言語展開する:ひとつのサイトで複数の言語を持つ方法です。Drupalが持つ多言語機能を利用することで行えます。ひとつのサイト、ひとつの管理画面でサイトの多言語化を行えるため、(B)の方法よりも低コストで実現できます。

 ・(B) マルチサイトで多言語展開する:Drupalは、ひとつのソースコードから複数のサイトを作ることができるマルチサイト(Multisite)1という機能を有しています。ソースコードはサイト間で同じものが利用されるので、似たようなサイトをたくさん複製したいときに使える手法です。つまり、今回のような多言語サイトでもよく使われます。各国の現地法人が自由にサイトを運用できるようにしつつ、サイトデザインや機能はある程度揃えたい、というニーズに合致します。

 どちらの方法が適しているかは、具体的なプロジェクトの要件と運用上のニーズに依存します。小規模なプロジェクトでは(A)が便利かもしれませんが、大規模で複雑なプロジェクトでは(B)が適しているかもしれません。雫ちゃんたちの商店街サイトでは(A)が適していると判断し、本書では以降、(A) ひとつのサイト上で多言語展開する方法で解説していきます。

1.2 Drupalで多言語サイトを作成する

 Drupalは、多言語サイトを構築するための多言語機能を提供しています。Drupalで多言語サイトを作るステップは3つあります。

 1.多言語化に必要なモジュールを有効化する

 2.サイトで使用する言語を追加する

 3.サイトを翻訳する

ステップ1 多言語化に必要なモジュールを有効化する

 Drupalの標準機能として提供されている多言語系のモジュールは、4つあります。

 ・Languageモジュール:サイト上で使用する言語を追加したり設定するためのモジュールです。ステップ2を行うために必要なモジュールです。

 ・Content Translationモジュール:サイト上の「コンテンツ」と呼ばれる情報を各言語に翻訳するためのモジュールです。ステップ3を行うために必要なモジュールです。

 ・Configuration Translationモジュール:サイト上の「構成」と呼ばれる情報を各言語に翻訳するためのモジュールです。ステップ3を行うために必要なモジュールです。

 ・Interface Translationモジュール:Drupalのテーマやモジュールが出力する固定文字列を各言語に翻訳するためのモジュールです。ステップ3を行うために必要なモジュールです。


 多言語サイトは、Drupalの標準機能だけでも実現できますが、Drupalのコントリビュートモジュールを含めることで、機械翻訳や翻訳ワークフローなど便利な機能を追加することができます。6章でこのコントリビュートモジュールの含め方について詳細解説していますので、雫ちゃんと一緒にDrupalスキルのステップアップに挑戦してみてください。

ステップ2 サイトで使用する言語を追加する

 日本語・英語の2言語に対応するサイトを作りたい場合、Drupalの管理画面から日本語と英語の言語を追加することで、Drupalがそれを認識してくれるようになります。詳しくは第2章「サイトに掲載する言語を追加しよう」で解説します。

ステップ3 サイトを翻訳する

 Drupalは、サイトに表示されるあらゆる要素を翻訳できます。各要素によって翻訳する方法が異なり、主に3つの方法があります。

 ・コンテンツの翻訳:サイト訪問者に表示することを目的としたページやブロック、タクソノミータームなどの情報を翻訳できます。にゃんコツ商店街サイトで言うところの「商店街について」や「神社の紹介」コンテンツ、各店舗コンテンツなどが当てはまります。Content Translationモジュールを有効化することで行えるようになります。詳しくは第3章「コンテンツの翻訳」で解説します。

 ・構成の翻訳:サイト名やブロックのラベル、フィールドのラベルなどの情報を翻訳できます。ビューで表示する店舗一覧や、ブロックを翻訳する場合も、構成の翻訳が必要になります。Configuration Translationモジュールを有効化することで行えるようになります。詳しくは第4章「構成の翻訳」で解説します。

 ・ユーザーインターフェースの翻訳:Drupalのテーマやモジュールが出力する固定文字列を指します。Interface Translationモジュールを有効化することで、行えるようになります。詳しくは第5章「ユーザーインターフェースの翻訳」で解説します。

 各ステップに対応するモジュールをまとめると、表1.1のようになります。

表1.1: 各ステップに対応するモジュール
ステップ 対象モジュール
2 サイトで使用する言語を追加する Language
3 サイトを翻訳する - コンテンツの翻訳 Content Translation
3 サイトを翻訳する - 構成の翻訳 Configuration Translation
3 サイトを翻訳する - ユーザーインターフェースの翻訳 Interface Translation

1.3 にゃんコツ商店街サイトの多言語化要件

Drupalの多言語機能をざっくり理解したところで、にゃんコツ商店街サイトではどんな多言語サイトにしたいのかをまとめてみよう。

表1.2: にゃんコツ商店街サイトの多言語化要件
項目 要件
サイトで提供する言語 日本語と英語の2言語
各言語のURL 日本語の場合:/
英語の場合 :/en/
言語の判別方法 言語ごとに設定したURLパスで判別することとする
どこまで翻訳するか 基本的に、訪問者が見るページに現れる日本語は、全て英語で表示させることとする
※今回、管理画面は翻訳対象から外す

 本書の2章から、にゃんコツ商店街を多言語化していく演習に進んでいきます。本書の前提として、既刊「酒屋の娘、Webサイト制作します」2の6章末の時点からスタートすることとします。つまり、サイト設定とコンテンツが追加されている状態です。そんな環境は手元にないよ、という方に向けて、ふたつの選択肢があります。

 ・「酒屋の娘、Webサイト制作します」の6章まで演習を進める:Drupalをゼロから学びたい方はこちらの方法がおすすめです。

 ・にゃんコツディストリビューションで6章末のプロファイルをインストールする:にゃんコツディストリビューションのインストール方法は「酒屋の娘、Webサイト制作します」内に解説があります。

図1.1: にゃんコツディストリビューションで6章末のプロファイルをインストールする

これからやらないといけないことが具体的になったね!

それじゃあ、最後にエクササイズとして必要なモジュールをこの段階で有効化しておこう。

演習:モジュールの有効化

 多言語サイトを作るために必要なモジュールを有効化していきます。

 1.管理メニューの 機能拡張3 に移動します。

図1.2: 機能拡張ページに移動

 2.「Language」、「Content Translation」、「Configuration Translation」、「Interface Translation」というモジュールを探して、チェックが入っていないものにチェックを入れます。⼀番下までスクロールして インストール を押します。

図1.3: モジュールの有効化

 これで対象のモジュールが有効化され、使⽤できる状態になりました。有効化した直後に「少なくともひとつ以上の言語を追加してください」などの警告メッセージが表示されますが、一旦気にしなくて大丈夫です。後続の章で実施する予定です。

図1.4: モジュールを有効化した後の警告メッセージ

1.4 まとめ

 Drupalで多言語サイトを作り始める前に知っておきたい情報として、Drupalで多言語サイトを作る手順と、Drupalで提供される多言語機能の解説を行いました。その上で、雫ちゃんたちのにゃんコツ商店街サイトで、どんな多言語サイトを作りたいかを具体的にまとめました。

なぜWebサイトを多言語化するのか?

 結論から言えば、ぜひ英語版だけでも準備することをおすすめします。ブラウザーで翻訳機能が充実しているのにもう必要ないんじゃないと思われる方もおられると思いますが、英語版があるとないとでは大違いです。たとえば、あなたがエストニアに旅行に行ったとします。エストニア語がわからないとすると、たとえばレストランや美術館を探そうと思ったら、英語で検索するのではないかと思います。何か興味深いサイトに辿り着いたら、ブラウザーで翻訳機能を使うかも知れません。細かい情報は英語では出ていなくて、エストニア語で書かれていたとしても、たどり着きさえすれば、翻訳機能で知らない言語でもある程度の情報が得られるようになります。しかし、最初に検索などでたどり着くことができなければ、何も始まりません。

 多くの外国人の方から見ると、日本語は全く理解できません。しかし、英語のページがあれば検索の対象となり、見つけてもらえるようになります。にゃんコツ商店街は店舗の集合体でもありますから、個々のお店を見つけていただけることは重要です。もちろん、何かのきっかけで外国人旅行者がにゃんコツ商店街を訪問し、気に入って、解説付きでリンクを張ってくださるかも知れません。しかし、初めて訪問したサイトが自分のわからない言葉で書かれていたら、大半は去ってしまうでしょう。自分の母国語で書かれていれば、多少訳が悪くても親近感を持つでしょう。英語で書かれているだけで、外国人であっても受け入れる気持ちがあることが伝わります。ぜひ挑戦して下さい。

1. https://www.drupal.org/docs/getting-started/multisite-drupal

2. https://www.amazon.co.jp/dp/B0C5F3MVP4

3. URL: /admin/modules

試し読みはここまでです。
この続きは、製品版でお楽しみください。