これは
とある小さな商店街の
革命前夜の物語
にゃんコツ商店街の酒屋の娘
酒倉 雫(さかくら しずく)は途方に暮れていた。
商店会会長の父・哲夫(てつお)から
商店街活性化の一環として
サイト制作を丸投げされてしまったのだ。
「サイト制作なんて一度もしたことないんですけど!」
そんな迷える雫のもとに現れたのが
「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にて動作確認を行っています。
サイトを多言語化するっていうことは……。日本語のページは既にあるから、追加で各言語に翻訳したページを用意すればいいだけなんだよね?「商店街について」とか「神社の紹介」ページとか。
じゃあ聞くけど、サイトの上部に常に表示されているヘッダーメニューはどうするつもり?雫ちゃんの方法だと、英語のページを表示しててもヘッダーメニューは日本語表示のままになっちゃうよね。
たっ、確かに……。じゃあ、もうひとつ英語用のサイトを作ればいいのかな?
そういう方法もあるんだけどね。Drupalには優れた多言語機能が備わっていて、ひとつのサイト上で複数言語を取り扱えるようになっているんだよ。早速学んでみよう!
・Drupalで多言語サイトを作る方法ふたつ
・Drupalで多言語サイトを作成する主な流れ
Drupalで多言語サイトを作ろうと思ったときに、大きくふたつの方法がよく利用されます。
・(A) ひとつのサイト上で多言語展開する:ひとつのサイトで複数の言語を持つ方法です。Drupalが持つ多言語機能を利用することで行えます。ひとつのサイト、ひとつの管理画面でサイトの多言語化を行えるため、(B)の方法よりも低コストで実現できます。
・(B) マルチサイトで多言語展開する:Drupalは、ひとつのソースコードから複数のサイトを作ることができるマルチサイト(Multisite)1という機能を有しています。ソースコードはサイト間で同じものが利用されるので、似たようなサイトをたくさん複製したいときに使える手法です。つまり、今回のような多言語サイトでもよく使われます。各国の現地法人が自由にサイトを運用できるようにしつつ、サイトデザインや機能はある程度揃えたい、というニーズに合致します。
どちらの方法が適しているかは、具体的なプロジェクトの要件と運用上のニーズに依存します。小規模なプロジェクトでは(A)が便利かもしれませんが、大規模で複雑なプロジェクトでは(B)が適しているかもしれません。雫ちゃんたちの商店街サイトでは(A)が適していると判断し、本書では以降、(A) ひとつのサイト上で多言語展開する方法で解説していきます。
Drupalは、多言語サイトを構築するための多言語機能を提供しています。Drupalで多言語サイトを作るステップは3つあります。
1.多言語化に必要なモジュールを有効化する
2.サイトで使用する言語を追加する
3.サイトを翻訳する
Drupalの標準機能として提供されている多言語系のモジュールは、4つあります。
・Languageモジュール:サイト上で使用する言語を追加したり設定するためのモジュールです。ステップ2を行うために必要なモジュールです。
・Content Translationモジュール:サイト上の「コンテンツ」と呼ばれる情報を各言語に翻訳するためのモジュールです。ステップ3を行うために必要なモジュールです。
・Configuration Translationモジュール:サイト上の「構成」と呼ばれる情報を各言語に翻訳するためのモジュールです。ステップ3を行うために必要なモジュールです。
・Interface Translationモジュール:Drupalのテーマやモジュールが出力する固定文字列を各言語に翻訳するためのモジュールです。ステップ3を行うために必要なモジュールです。
多言語サイトは、Drupalの標準機能だけでも実現できますが、Drupalのコントリビュートモジュールを含めることで、機械翻訳や翻訳ワークフローなど便利な機能を追加することができます。6章でこのコントリビュートモジュールの含め方について詳細解説していますので、雫ちゃんと一緒にDrupalスキルのステップアップに挑戦してみてください。
日本語・英語の2言語に対応するサイトを作りたい場合、Drupalの管理画面から日本語と英語の言語を追加することで、Drupalがそれを認識してくれるようになります。詳しくは第2章「サイトに掲載する言語を追加しよう」で解説します。
Drupalは、サイトに表示されるあらゆる要素を翻訳できます。各要素によって翻訳する方法が異なり、主に3つの方法があります。
・コンテンツの翻訳:サイト訪問者に表示することを目的としたページやブロック、タクソノミータームなどの情報を翻訳できます。にゃんコツ商店街サイトで言うところの「商店街について」や「神社の紹介」コンテンツ、各店舗コンテンツなどが当てはまります。Content Translationモジュールを有効化することで行えるようになります。詳しくは第3章「コンテンツの翻訳」で解説します。
・構成の翻訳:サイト名やブロックのラベル、フィールドのラベルなどの情報を翻訳できます。ビューで表示する店舗一覧や、ブロックを翻訳する場合も、構成の翻訳が必要になります。Configuration Translationモジュールを有効化することで行えるようになります。詳しくは第4章「構成の翻訳」で解説します。
・ユーザーインターフェースの翻訳:Drupalのテーマやモジュールが出力する固定文字列を指します。Interface Translationモジュールを有効化することで、行えるようになります。詳しくは第5章「ユーザーインターフェースの翻訳」で解説します。
各ステップに対応するモジュールをまとめると、表1.1のようになります。
ステップ | 対象モジュール |
2 サイトで使用する言語を追加する | Language |
3 サイトを翻訳する - コンテンツの翻訳 | Content Translation |
3 サイトを翻訳する - 構成の翻訳 | Configuration Translation |
3 サイトを翻訳する - ユーザーインターフェースの翻訳 | Interface Translation |
Drupalの多言語機能をざっくり理解したところで、にゃんコツ商店街サイトではどんな多言語サイトにしたいのかをまとめてみよう。
項目 | 要件 |
サイトで提供する言語 | 日本語と英語の2言語 |
各言語のURL |
日本語の場合:/ 英語の場合 :/en/ |
言語の判別方法 | 言語ごとに設定したURLパスで判別することとする |
どこまで翻訳するか |
基本的に、訪問者が見るページに現れる日本語は、全て英語で表示させることとする ※今回、管理画面は翻訳対象から外す |
本書の2章から、にゃんコツ商店街を多言語化していく演習に進んでいきます。本書の前提として、既刊「酒屋の娘、Webサイト制作します」2の6章末の時点からスタートすることとします。つまり、サイト設定とコンテンツが追加されている状態です。そんな環境は手元にないよ、という方に向けて、ふたつの選択肢があります。
・「酒屋の娘、Webサイト制作します」の6章まで演習を進める:Drupalをゼロから学びたい方はこちらの方法がおすすめです。
・にゃんコツディストリビューションで6章末のプロファイルをインストールする:にゃんコツディストリビューションのインストール方法は「酒屋の娘、Webサイト制作します」内に解説があります。
これからやらないといけないことが具体的になったね!
それじゃあ、最後にエクササイズとして必要なモジュールをこの段階で有効化しておこう。
多言語サイトを作るために必要なモジュールを有効化していきます。
1.管理メニューの 機能拡張3 に移動します。
2.「Language」、「Content Translation」、「Configuration Translation」、「Interface Translation」というモジュールを探して、チェックが入っていないものにチェックを入れます。⼀番下までスクロールして インストール を押します。
これで対象のモジュールが有効化され、使⽤できる状態になりました。有効化した直後に「少なくともひとつ以上の言語を追加してください」などの警告メッセージが表示されますが、一旦気にしなくて大丈夫です。後続の章で実施する予定です。
Drupalで多言語サイトを作り始める前に知っておきたい情報として、Drupalで多言語サイトを作る手順と、Drupalで提供される多言語機能の解説を行いました。その上で、雫ちゃんたちのにゃんコツ商店街サイトで、どんな多言語サイトを作りたいかを具体的にまとめました。
結論から言えば、ぜひ英語版だけでも準備することをおすすめします。ブラウザーで翻訳機能が充実しているのにもう必要ないんじゃないと思われる方もおられると思いますが、英語版があるとないとでは大違いです。たとえば、あなたがエストニアに旅行に行ったとします。エストニア語がわからないとすると、たとえばレストランや美術館を探そうと思ったら、英語で検索するのではないかと思います。何か興味深いサイトに辿り着いたら、ブラウザーで翻訳機能を使うかも知れません。細かい情報は英語では出ていなくて、エストニア語で書かれていたとしても、たどり着きさえすれば、翻訳機能で知らない言語でもある程度の情報が得られるようになります。しかし、最初に検索などでたどり着くことができなければ、何も始まりません。
多くの外国人の方から見ると、日本語は全く理解できません。しかし、英語のページがあれば検索の対象となり、見つけてもらえるようになります。にゃんコツ商店街は店舗の集合体でもありますから、個々のお店を見つけていただけることは重要です。もちろん、何かのきっかけで外国人旅行者がにゃんコツ商店街を訪問し、気に入って、解説付きでリンクを張ってくださるかも知れません。しかし、初めて訪問したサイトが自分のわからない言葉で書かれていたら、大半は去ってしまうでしょう。自分の母国語で書かれていれば、多少訳が悪くても親近感を持つでしょう。英語で書かれているだけで、外国人であっても受け入れる気持ちがあることが伝わります。ぜひ挑戦して下さい。