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

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

lovemouth.net

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

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

jpmobileの導入

今回はjpmobileというRailsプラグインで対応しました。
jpmobile - A Rails plugin for Japanese mobile-phones


コントローラーで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が表示されます。

viewportの設定

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

  • 画面サイズってデバイスごとに最適化する必要あるよね・・・?

です。

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


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

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

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


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