CakePHP2.1で英語と日本語の二言語対応サイトを作る(前編)

LINEで送る
Pocket

最低限の要素で2言語対応のサイトを実際にCakePHP2.1で作る方法を紹介します。
完成イメージは以下のサイト
九寨溝国家級名勝区の紹介
上記サイトをブラウザの言語を切り替えながら表示してみると、英語モードでは英語、日本語モードでは日本語で表示されることがわかります。
ブラウザの設定を切り替える方法はこちら
ブラウザの設定を切り替える

やる事

  • ・文字は直接書き込まず、特殊関数「__()」を使って書く
  • ・翻訳ターゲットをcakeシェルにて翻訳ファイルに出力
  • ・翻訳ファイルを翻訳する
  • ・URLが言語毎に区別できるようにする(※)
  • ・ブラウザの言語と逆のURLにアクセスした場合の補正
  • ・解析ツール(adsenseタグ)の読み分け
  • ・botからのアクセスへの考慮(いいねボタンとか)
  • ・長文コンテンツは翻訳ファイルを使わずに、別viewとして管理
 ここで再び「九寨溝国家級名勝区」のサイトを見てください。
サブドメインによって日本語と英語を切り分けているのがわかります。

 


 

文字は直接書き込まず、特殊関数「__()」を使って書く

通常viewに書き込む文字は直接書き込まず、下記のように記述します。

<?= __('type message here in english.') ?>

例:通常の書き方(app/View/Jiuzhaigou/index.ctp)

<ul>
    <li><?= $this->Html->link('Rizegou Valley', '/jiuzhaigou/rizegou')?>
    <li><?= $this->Html->link('Zezhawagou Valley', '/jiuzhaigou/zezhawagou')?>
   <li><?= $this->Html->link('Shuzhenggou Valley', '/jiuzhaigou/shuzhenggou')?>
</ul>

例:多言語対応の書き方

<ul>
    <li><?= $this->Html->link(__('Rizegou Valley'), '/jiuzhaigou/rizegou')?>
    <li><?= $this->Html->link(__('Zezhawagou Valley'), '/jiuzhaigou/zezhawagou')?>
   <li><?= $this->Html->link(__('Shuzhenggou Valley'), '/jiuzhaigou/shuzhenggou')?>
</ul>

この段階では上記は両方ともレンダー後に同じhtmlになります。

レンダー後

<ul>
    <li><a href="/jiuzhaigou/rizegou">Rizegou Valley</a>
    <li><a href="/jiuzhaigou/zezhawagou">Zezhawagou Valley</a>
   <li><a href="/jiuzhaigou/shuzhenggou">Shuzhenggou Valley</a>
</ul>

 

翻訳ターゲットをcakeシェルにて翻訳ファイルに出力

コンソールからソースのrootに移動して cake i18n コマンドを実行

$ cd {project root}/app
$ Console/cake i18n
Welcome to CakePHP v2.1.2 Console
-------------------------------------------------------
App : app
Path: C:\xampp\jiuzhai\trunk\app\
-------------------------------------------------------
I18n Shell
-------------------------------------------------------
[E]xtract POT file from sources
[I]nitialize i18n database table
[H]elp
[Q]uit
What would you like to do? (E/I/H/Q)
> E            <--------------------------------------------type E and Enter
What is the path you would like to extract?
[Q]uit [D]one
[C:\xampp\jiuzhai\trunk\app\] > <---------------------------type Enter

What is the path you would like to extract?
[Q]uit [D]one
[D] > <-----------------------------------------------------type Enter

What is the path you would like to output?
[Q]uit
[C:\xampp\jiuzhai\trunk\app\Locale] > <---------------------type Enter

Would you like to merge all domains strings into the default.pot file? (y/n)
[n] > <-----------------------------------------------------type Enter

Processing ..............

Error: default.pot already exists in this location. Overwrite? [Y]es, [N]o, [A]ll (y/n/a)
[y] > <-----------------------------------------------------type Enter

Error: cake.pot already exists in this location. Overwrite? [Y]es, [N]o, [A]ll (y/n/a)
[y] > <-----------------------------------------------------type Enter

Error: cake_dev.pot already exists in this location. Overwrite? [Y]es, [N]o, [A]ll (y/n/a)
[y] > <-----------------------------------------------------type Enter

[E]xtract POT file from sources
[I]nitialize i18n database table
[H]elp
[Q]uit
What would you like to do? (E/I/H/Q)
> Q <-------------------------------------------------------type Q and Enter

上記により以下に翻訳ファイルが生成されます。

app/Locale/cake.pot
app/Locale/cake_dev.pot
app/Locale/defalut.pot

 

翻訳ファイルを翻訳する

翻訳ファイルのエディタ(Poedit)を入手してください。

「app/Locale/default.pot」ファイルをPoeditで開いてください。

原文を順に選択していき、対訳の日本語を記述して以下の場所に保存してください。

app/Locale/jpn/LC_MESSAGES/default.po

たったこれだけで日本語と英語に対応したサイトができます。

まずは、先ほどの「ブラウザの設定を切り替える」で英語と日本語を切り替えながら表示を確認してみてください。

各設定に従って表示が変わる事が分かると思います。

それでは今回はこのへんで。

次回は「URLが言語毎に区別できるようにする」から。

LINEで送る
Pocket

ブラウザの言語設定を変更する

LINEで送る
Pocket

ブラウザの言語設定の入れ替え方

最近では国際化に対応したサイトも多く、同じURLでもアクセスする条件によって表示される言語が変わったりする事があります。
言語を変える条件としては、ユーザーベースで選択する場合もありますが、大抵は地域やブラウザの言語設定にしたがって自動的に変えていたりします。
実際にブラウザの言語設定をかえて表示される内容の変化を見てみましょう。

下記サイトは日本語と英語の2言語に対応したサイトです。

http://jiuzhaivalley.com/(2言語対応サイト例)

言語設定を変えながら表示が変わるのを確かめてみてください。

【Chrome】

     ・右上のツールボタンをクリック
     ・「設定」
     ・「詳細設定を表示」のリンクをクリックしてさらにメニューを表示
     ・「言語」欄の「言語とスペルチェックの設定」
     ・「日本語」「英語」「英語(アメリカ合衆国)」をドラッグして移動。上に優先する言語を設定

【Firefox】

     ・「ツール」
     ・「オプション」
     ・「コンテンツ」タブ
     ・「言語」欄の「言語設定」
     ・「上へ」と「下へ」ボタンで「日本語」「英語」「英語/米国」の順序を入れ替える

【Internet Explorer】

     ・「ツール」
     ・「インターネットオプション」
     ・「全般」タブ
     ・「言語」
     ・「上へ」と「下へ」ボタンで「日本語」「英語」「英語/米国」の順序を入れ替える
     ※「英語」が無い場合は「追加」で追加する
LINEで送る
Pocket

サイトの国際化に向けての考慮点

LINEで送る
Pocket

はじめに

サイトの国際化に向けて考えなければならない事は多数あります。
まず、どの言語に対応するか?を決め、その後どこまで対応するかを決めましょう。
※言語毎に特性がたくさんあるため初めは日本語、英語のみで十分と思います。

i18nとは?

よく「i18n」と言われますが、これは国際化の事で、「internationalization」を略した物です。
「i」と「n」の間に18文字あるわけですね。

国際化において考慮する事
以下に国際化をする際に予め頭に入れておく必要が有ることを上げます。

【システム化の問題】

1.どの言語に対応するか?
2.文字コード(絵文字とか)
3.数字のフォーマット
4.日付のフォーマット(カレンダー自体が違う事もある)
5.現地通貨やレート
6.複数形の考慮
7.住所フォーマット(住所、郵便番号)
8.電話番号(国番号表示有無)
9.文字入りの画像
10.レイアウト崩れへの考慮(css, folding)
・文字幅が違う
・右書き、左書き、横書き、縦書き??
11.言語切替の方式
・アクセス地域?
・ブラウザ環境?
・会員に選択式?
12.タイムゾーン
・年齢が上がるタイミングが違う
・時限式イベントのタイミング

【運用的問題】

13.文化の問題
・宗教的タブー
・文化的タブー

14.法律の問題
・成人の定義
・個人情報取り扱いポリシーの違い
・コンテンツ監査

LINEで送る
Pocket