4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Play or ScalaAdvent Calendar 2012

Day 5

Play! framework 2.0でのi18n関連

Posted at

すでにこっちに書いてしまったのでコピペ。面倒なので、整形してないです。
http://d.hatena.ne.jp/k4200/20121203/1354505611

 前提・環境

    Play 2.0.4
    英語・日本語の2か国語に対応
    英語がデフォルトの言語


メッセージカタログにメッセージを外出し
基本

以下の3ファイルを用意

    conf/messages.en → 英語のメッセージ
    conf/messages.ja → 日本語のメッセージ
    conf/messages → デフォルトのメッセージ

最初の2つは説明不要だと思うので、最後のに関して説明。
デフォルトのメッセージファイル

例えばviewの中で以下のような記述があり、

@Messages("index.welcome", user.name)

ユーザーの言語(これがどうやって定まるかは後述)が"ja"だとすると、messages.ja の以下の行が使われる。

#messages.ja
index.welcome={0}さん、ようこそ

仮に、この行がないと、messages の中の対応する行が使われる。

#messages
index.welcome=Welcome {0}!

実際の開発での流れ

ということで、自分なりの結論。

    messages にはデフォルトの言語の内容を入れておく(この場合は英語)
    messages.en はそれのコピーとかシンボリックリンクにしておく
    サブの言語(この場合、日本語)用のファイルは、messages の内容を翻訳

ちなみに、規模が大きくなって翻訳者とかが複数人絡むようになってくると、メッセージファイルをテキストのままで単純に管理するのは辛くなってくるので、翻訳者用のシステムとDBを用意して、そのDBからテキストファイルを出力するようにしたほうが良さそう。(Play じゃないけど、別プロジェクトではそうした)
画像
ファイルの配置

メッセージだけ多言語対応すればi18nが完了すると思っちゃだめで、画像内のテキストとかも対応する必要がある。

画像は以下の様な感じでフォルダ分けしておく。

    public/images/common → 言語関係なく使う画像(字のないアイコン、線、背景等)
    public/images/en → 英語用の画像
    public/images/ja → 日本語用の画像

viewからの参照

画像を表示する場合は、基本は後述するCSS(LESS)で対応した方が簡単だけど、view 内で直接 img タグを書きたい場合には以下のようにする。

@(param: some.Type)(implicit lang: Lang)
<!-- ↑先頭で implicit parameter として lang を受け取る -->

<img src="images/@lang.language/foo.png" />

CSS
プロジェクトの設定

Build.scala は以下のように。

    // どの less ファイルをコンパイルするか、みたいな設定
    def customLessEntryPoints(base: File): PathFinder = (
      (base / "app" / "assets" / "stylesheets" * ("*.less" -- "_*.less"))
    )

    // project 設定に、lessEntryPoints を追加。
    val main = PlayProject(appName, appVersion, appDependencies, mainLang = SCALA).settings(
      // Add your own project settings here
        lessEntryPoints <<= baseDirectory(customLessEntryPoints),
    )

これで準備完了。
LESS

LESS便利だね。lessファイルの配置に関して説明。

まずはapp/assets/stylesheets というディレクトリを作成し、その配下に以下のようにファイルを作成。

    en.less
    ja.less
    _common.less (サブディレクトリに入れてもよし)

en.less はこんな感じ。ja.lessも同様に作る。

@lang: en;
@import "_common.less";

_common.less はこんな感じ。

.logo {
	background: url("/images/@{lang}/logo.png");
}

これで、en.css は以下のように生成される。

.logo {
  background: url("/images/en/logo.png");
}

LESS便利だね。
LESSのハマりポイント

とにかくエラーメッセージが分かりにくい。

LESSの行末のセミコロンがなかったり(Scalaプログラマーがよくやる間違い)、urlのダブルクォートがなかったりすると意味不明のメッセージが出る。そのメッセージでググると、Play自体のバグだとか、ライブラリのバグだとか色々情報が出てくるけど、実際は簡単なミスだったりする。

ということで、いきなりがっつり書かず、まずは簡単なLESSファイルを書いてある程度仕組みに慣れてから、徐々にやってくと良さそう。

ちなみに、出たエラーはこんなの。

EcmaError: TypeError: Cannot call method "charAt" of undefined (less-1.3.0.js#352)

まとめ

Play 2.0の多言語対応は、基本的な機能は揃っているので、どんどん海外対応のアプリ・サービスを作るといいのでは。
4
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?