更新日: 2014年9月18日
Rails

Railsで同一URLで多言語化していたページを言語毎にURLを分ける

一昨日公開した英和・和英・英英辞典 Imagict ですが、最初の公開時のトップページは、同一の1つのURL（http://imagict.com/）で二ヶ国語対応（日本語/英語）をしていました。簡単に言うと、訪問して頂いたユーザーの HTTP_ACCEPT_LANGUAGE などで判別して、表示する言語を自動で日本語 or 英語に振り分けていました。

ところが… ここでちょっと問題発生。

【お知らせ】英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください！

画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました

Facebook のシェア投稿や検索エンジンのインデックスで問題発生

問題1つ目。http://imagict.com/ の URL を Facebook にシェア投稿しようとすると、シェアされる URL から Facebook が自動でタイトルやテキストを取得する際に、英語優先で取得されます。これは困りました。

問題2つ目。1つの URL で多言語対応（今回のケースでは、日本語と英語に対応）していると、検索エンジン（Google）に英語でインデックスされるようです。やはりここでも英語優先。

以上のように、ウェブサービスを取り巻く環境でちょっと問題が発生しました。本来は、同一URLで多言語対応するのは、ユーザーのことだけを考えると別に良いかとも思うのですけどね。

Lang-8 なんかは、トップページは1つのURLで沢山の言語に対応しています。ブラウザの言語設定を変えると、その言語で表示されます。検索エンジンには英語でインデックスされているようです。

私の場合、立ち上げたばかりのサービスですので、検索エンジンや Facebook からの流入も大切にしていきたい。なので、http://imagict.com/ を日本語用のトップページ、http://imagict.com/en/ を英語用のトップページに固定することにしました。

利用していた翻訳ファイル config/locales/views/home/en.yml, ja.yml には一切手を加えずに、/ を日本語トップページ、/en/ を英語トップページに分割しました。以下、そのやり方です。Rails で I18n を利用している場合の例です。

— 環境 —
rails (4.1.1)
i18n (0.6.9)

英語トップページ用の home#index_en アクションを追加

元々の root_path 用のアクション index の I18n.locale を :ja（日本語）に固定します。そして、英語トップページ用のアクション index_en を追加。

app/controllers/home_controller.rb

class HomeController < ApplicationController
  # ...

  def index
    I18n.locale = :ja
    #...
  end

  def index_en
    index
    I18n.locale = :en
    render :action => "index"
  end

  # ...
end

class HomeController < ApplicationController

# ...

def index

I18n.locale = :ja

#...

end

def index_en

index

I18n.locale = :en

render :action => "index"

end

# ...

end

index_en では index をそのまま呼んで、I18n.locale を :en（英語）で上書きして固定。テンプレートはそのまま index のものを流用します。

ルーティング設定

英語トップページ用のルーティングを追加。/en/ に home#index_en を対応させる。

config/routes.rb

Railsapp::Application.routes.draw do
  root 'home#index'
  get '/en', to: 'home#index_en'

  #...
end

Railsapp::Application.routes.draw do

root 'home#index'

get '/en', to: 'home#index_en'

#...

end

サインアウト時のリダイレクト先を locale で変更

英語ロケールのログイン済みユーザーが、ログアウト時に日本語のトップページにリダイレクトされるとちょっと面食らうかと思いますので、ログアウト時のリダイレクト先を設定。Devise を利用している場合の例ですが、after_sign_out_path_for メソッドをオーバーライドします。

app/controllers/application_controller.rb

class ApplicationController < ActionController::Base
  # ...

  def after_sign_out_path_for(resource)
    if I18n.locale == :ja
      root_path
    else
      en_path
    end
  end

  # ...
end

class ApplicationController < ActionController::Base

# ...

def after_sign_out_path_for(resource)

if I18n.locale == :ja

root_path

else

en_path

end

# ...

end

locale が日本語のユーザーは / にリダイレクト、locale が日本語以外のユーザーは /en/ にリダイレクトさせるようにしました。

/, /en/ に言語選択メニューを表示

/（日本語トップページ), /en/（英語トップページ）のそれぞれの言語のトップページの任意の箇所に、言語選択メニューを表示させる。私は、application.html.erb でヘッダー下あたりに追加。

views/layouts/application.html.erb

<% if controller.controller_name == 'home' && controller.action_name == 'index' %>
  <div class="top-language-menu">
    Japanese Top | <%= link_to "English Top", "/en/" %>
  </div>
<% elsif controller.controller_name == 'home' && controller.action_name == 'index_en' %>
  <div class="top-language-menu">
    <%= link_to "Japanese Top", "/" %> | English Top
  </div>
<% end %>

<% if controller.controller_name == 'home' && controller.action_name == 'index' %>

Japanese Top | <%= link_to "English Top", "/en/" %>

</div>

<% elsif controller.controller_name == 'home' && controller.action_name == 'index_en' %>

<%= link_to "Japanese Top", "/" %> | English Top

</div>

<% end %>

これで、日本語トップページと英語トップページを分割することができました。今まで日本語でばかりのWEB作成で、本格的な多言語対応は初めて試みたので、色々つまづきがあります。これから多言語化の対応をしたり、多言語ウェブアプリケーションの開発に取り組まれる方は、注意してくださいね。

– 参考リンク –
多地域、多言語のサイト – ウェブマスターツールヘルプ

パーフェクト Ruby on Rails は、最近読んだ Rails 本の中では一番役に立った本です。Chef や Capistrano など Rails と共によく使用される技術にも触れてあります。Ruby on Rails 4 アプリケーションプログラミングは、入門的な内容で Rails の機能全体を網羅されています。

パーフェクト Ruby on Rails

Ruby on Rails 4 アプリケーションプログラミング