Rails製エロ動画サイトをスマートフォン対応

昨年構築した動画サイトLovemouthをスマートフォン対応しました！

ついでにいいねボタン、ツイートボタンも設置してみました。

ということで、今回はRailsによるスマートフォンページの対応方法についてまとめておきます。

コントローラーでUserAgentを見て振り分けるビューを決める等もできるけど、簡単に出来る方法でやりました。

使い方はいたって簡単。

1.application_controller.rbの設定
「app/controllers/application_controller.rb」を以下のとおり編集。

 class ApplicationController < ActionController::Base
    protect_from_forgery
    include Jpmobile::ViewSelector #ここを追加
 end

この設定によりスマートフォンからページを見た場合には、app/views/itemsの配下にある「xxxx_smart_phone.html.erb」という名前のファイルがViewとして表示されるようになります。

2.スマートフォン用のViewを作成
ということで、専用のViewを作ってみます。

$ cp top.html.erb top_smart_phone.html.erb

とりあえずこれでアクションTopが実行された場合にUserAgentが通常のPCであればtop.html.erbが、スマートフォンであればtop_smart_hone.html.erbが表示されます。

ここまででスマートフォンへの振り分けは完了しました。が、実際にはView（HTMLやCSS）を対応させる必要があります。
やることはいろいろあると思いますが、僕が初めに考えたことは

です。

このような都合のいい方法が・・・あるんです。

それがviewport。
html（xxxx_smart_phone.html.erb）のヘッダ部分に以下のmetaタグを追加。

<meta name="viewport" content="width=device-width">

ここで指定した「width="device-width"」はページの横幅をデバイスの横幅に合わせて設定します。
その他height属性などいろいろ設定が可能。

ということで最低限の部分だけですが、こんな感じで対応してみましたとさ。