プログラミング-rails昨年構築した動画サイトLovemouthをスマートフォン対応しました!lovemouth.netついでにいいねボタン、ツイートボタンも設置してみました。いうことで、今回はRailsによるスマートフォンページの対応方法についてまとめておきます。今回はjpmobileというRailsプラグインで対応しました。mobile-phonesコントローラーでUserAgentを見て振り分けるビューを決める等もできるけど、簡単に出来る方法でやりました。使い方はいたって簡単。「app/controllers/application_controller.rb」を以下のとおり編集。endこの設定によりスマートフォンからページを見た場合には、app/views/itemsの配下にある「xxxx_smart_phone.html.erb」という名前のファイルがViewとして表示されるようになります。2.スマートフォン用のViewを作成ということで、専用のViewを作ってみます。これでアクションTopが実行された場合にUserAgentが通常のPCであればtop.html.erbが、スマートフォンであればtop_smart_hone.html.erbが表示されます。viewportの設定ここまででスマートフォンへの振り分けは完了しました。実際にはView(HTMLやCSS)を対応させる必要があります。やることはいろいろあると思いますが、僕が初めに考えたことは画面サイズってデバイスごとに最適化する必要あるよね・・・?です。このような都合のいい方法が・・・あるんです。それがviewport。html(xxxx_smart_phone.html.erb)のヘッダ部分に以下のmetaタグを追加。content="width=device-width">ここで指定した「width="device-width"」はページの横幅をデバイスの横幅に合わせて設定します。その他height属性などいろいろ設定が可能。いうことで最低限の部分だけですが、こんな感じで対応してみましたとさ。はてなブログPro学んだ技術まとめるはずが、仙台のことや日常のことを綴っているブログ。(1)スポンサーリンクはてなブログをはじめよう!WorldWorldWorldさんは、はてなブログを使っています。ブログを報告する引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。