iPhoneで Grafanaの グラフを 参照できる アプリ Grafanizerを 作ってます。 詳しくは こちらへ。

Hugoで一部ページを多言語対応させ閲覧時に自動的に切り替える

Jan 31, 2017  
#hugo #env

はじめに

このサイトで採用している Hugo で多言語対応をさせてみましたので、その記録を残しておこうと思います。

少し前から Grafanizer というiPhone用のアプリを作っているのですが、思ってたより外国の方から使ってもらえています（継続して使ってもらえてるかは別の話ですが...）。画面も英語だしただのビューワーなので日本人以外でも当然使えるわけです。

公開してみて、利用状況や プロダクトページ の表示数から外国の方からも結構使ってもらえるということがわかったわけですが、 プロダクトページ を見てる外国人の数と利用している外国人の数に開きがあるような感じがします。これは何故？と考える間もなく思いついたのが英語の説明ページがないということでした。

これまでプロダクトの 紹介ページ は日本語オンリーだした。初めてのアプリなのでどれだけ使ってもらえるかも分からなかったし、そもそも作るのが面倒ということもありまして。

でも、これは英語ページも作らなきゃいけないぞって気になりまして、前から見かけていた Hugo での多言語対応にようやく踏み切りました。
実際、アプリの紹介ページを開いたときに、中国語とか韓国語が出てきたら日本人でもやっぱり少し引きますもんね。同じCJK仲間だって言っても。

でも、全てを多言語対応させるのは英語が非堪能な僕にはかなりハードルが高いので、Grafanaizer の プロダクトページ だけを対応させてみました。

方針

方針というほど大げさなものではないのですが、以下のような動きを予定します。

  • 基本的に今までのコンテンツは今まで通りのURLで見れる
  • Grafanizerのページだけ多言語対応
  • Grafanizerのページは日本語と英語のページを用意
  • 日本語と英語ページの切り替わりは自動とせずにページ先頭に切り替えのリンクを追加
  • 英語のページは表記を全て英語にして違和感が無いようにする

ちなみに、タイトルでは「自動的に切り替える」としていますが、実際には自動的に切り替えてません。が、自動的に切り替える方法については記載してありますので、自動切り替えを採用しない方法と合わせて興味があれば見てみてください。

設定

設定についてはあまり調整するところはありません。最低限としては config.toml に DefaultContentLanguage = "ja" を追加するだけです。

もしDescription等に日本語を使っていれば、 追加で下記のように設定します。

[Languages]
[Languages.ja]
[Languages.en]
description = "日本人以外向けのDescription"

基本的にこれだけで大丈夫でした。

コンテンツ

コンテンツについても簡単です。

例えば、日本語でかかれている hogehoge.md という既存のコンテンツに英語のコンテンツを追加したいということであれば、まず既存のコンテンツを hogehoge.ja.md としたうえで、同じファイルを英語用に hogehoge.en.md とコピーします。 コピーした後は hogehoge.en.md の内容を英語の内容に変えるだけです。あとは英語ページと日本語ページの切り替え用のリンクを忘れずに追加しておきましょう。

もし、コンテンツファイルが一つで言語の指定がない場合は、先程 DefaultContentLanguage で指定した言語のコンテンツとなります。

言語の自動切換え

ここはおまけです。というのも、Googleでは 自動切り替えを推奨していません 。

基本的には自動的に切換えずに、別言語へのリンクを作成したほうが良さそうです。僕も自動切り替えが出来るのかどうかコードを書いて検証しただけで、最終的には採用していません。

ここでは、どうしてもという場合に対応する方法を記載しておきます。

まず、 Hugo は設定で DefaultContentLanguage に指定した言語をこれまでどおりのパス http://example.com/post/hogehoge/ で構築します。そして、多言語化されているコンテンツについては、ファイル名についている言語を加えて http://example.com/en/post/hogehoge/ のように構築します。

ですので、現在閲覧中のブラウザで指定してある言語と表示させるパスを合わせてあげれば良いわけです。

ここでは、Javascriptを使って切り替えてみたいと思います。

<script>
if (location.pathname.toLowerCase() == "/post/hogehoge/".toLowerCase()) { // 1
  var language // 2
  if (window.navigator.languages) {
    language = window.navigator.languages[0];
  } else {
    language = window.navigator.userLanguage ||
               window.navigator.language ||
               window.navigator.browserLanguage
  }
  if (language.substr(0,2) != "ja") { // 3
    location.href = location.href.replace(location.pathname, "/en" + location.pathname)
  }
}
</script>

今回は多言語化させるページは一つだったので、

  1. ターゲットのページかどうかを判断
  2. 以降でブラウザの表示言語を取得
  3. 言語が ja 以外は頭に /en を付けたリンク先に転送

という処理にしてみました。

まとめ

ページのコンテンツだけを英語にするということであればMarkdownでの内容を英語にすれば良いのですが、 Hugo の多言語対応を使えばサイト全体の表示を多言語対応にすることができます。また、この多言語対応であればリスト表示時にも複数言語の記事が並ぶことなく表示できます。

今回は一部のページだけを2カ国語対応にしてみましたが、全体を多言語対応それも複数言語対応にするとなるとリンクの指定などが結構面倒になりそうです。そちらの方法については、 Hugoのマニュアル を見てください。

門戸を広げておくというのは新しいユーザーを獲得するチャンスも広がるということなんですが、あんなつたない英語ではどこまで表現できてるか微妙ですな...