昨年構築した動画サイトLovemouthをスマートフォン対応しました!
ついでにいいねボタン、ツイートボタンも設置してみました。
ということで、今回は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属性などいろいろ設定が可能。
ということで最低限の部分だけですが、こんな感じで対応してみましたとさ。