個人のWebサイトを多言語化する

最初の実装ではHTML１枚とCSS１枚とそこに必要な画像が数枚あるだけの、最 も基本的なWebページの構成だった。こういうシンプルさを大切にしたかった。 仕事ではVue(Nuxtで使用)、Reactを使用しているが、常々本当にそれが必要な のかと考えていた。それらは不必要に複雑にしているように見える。複雑なUI を実装する上では必要だろうし、それは理解できる。ただシンプルなページに までそれらを取り込むのは、複雑性を増しデバッグを難しくなり、デザイナー やコーダーの参入を妨げる原因になる。またHTMLとは言えない状態であるため パースが難しく、外部からの処理を行いにくくなる。あくまでWebページはシ ンプルに保つべきだ。VueやReactは自分たちのやり方を押し付けてくる。フレー ムワークとはそういうものだが今回の私にはそれは必要なかった。ただし複数 のページを構成したかったのでシンプルな共通化の機構は必要だった。それに 最も適していたのはPHPだった。PHPをテンプレートエンジンとして使い、静的 ファイルとしてHTMLを出力できればそれでよかった。そこでinclude機構には PHPを使うことにした。もともとPHPはそういう目的で実装されている。当然こ の手の処理はPHPの十八番だ。この機構を用いてファイルを分割整理した。

翻訳のための記法をHTMLに書きたくなかった。HTMLをテキストエディタで開い たときの見栄えが悪くなるからだ。HTMLを書くときに翻訳の記法まで書いてし まうと、きっと翻訳用の記法だらけになる。そこでレンダリングしたHTMLを読 み込み、そこからPOTファイルを作成することにした。POTファイルはPOファイ ルを作るための元にするファイルだ。

多言語化のツールとしては古くから使われているgettextを使うことにした。 過去に作られた資産で生き残っているものはそれなりに理由があるものだ。

gettextは次のような手順で多言語化する。

1. POTファイルを生成する。
2. POTファイルからPOファイルを作成する。
3. POファイルを翻訳する。
4. msgfmtコマンドでPOファイルからMOファイルを生成する。
5. MOファイルを適切なディレクトリに配置する。

最終的にはMOファイルだけあればよいのだが、 MOファイルを作るためにPOファイルが必要で、 POファイルはPOTファイルを元に作成する。

POTファイルはこのような内容のテキストファイルだ。

msgid ""
msgstr ""
"Content-Type: text/plain; charset=UTF-8\n"
"Language-Team: English\n"
"Language: en\n"
"Plural-Forms: nplurals=1; plural=0;\n"
"Last-Translator: symdon\n"
"PO-Revision-Date: 2021-08-13 04:42+0900\n"

msgid "My name is symdon."
msgstr "My name is symdon."

msgid "How are you today?"
msgstr "How are you today?"

このファイルを元にしてPOファイルを作る。

一番最初のmsgidとmsgstrはヘッダーとしての役割を持っておりメタ情報を記述する。

それ以降はmsgidとmsgstrが羅列されている。 msgidはメッセージIDでよくある構成としてこのメッセージIDは英語の原文が使われる。 msgstrはその上にあるmsgidの翻訳した文章を記述するところだ。

このファイルをHTMLから生成したい。

主に翻訳したいところはWebページで表示される文章だ。それ以外のところは翻訳される必要がない。 例えばspanタグでくくられている文章は翻訳したい。 しかしscriptタグやmetaタグでくくられているような文字列は別に翻訳の必要はないはずだ。 そこで表示部分の文章をどのように抽出するかを考える。