自宅でお小遣い稼ぎをしたい主婦がアプリリリースを目指すブログです。この広告は、90日以上更新していないブログに表示しています。2017-04-08サイトをスマホ対応にするこんにちは、マリンです。今回作ったサイト、最初からレスポンシブ対応にしていたつもりだったのですが、いざ本番で動かしてみたらスマホ対応にはなっていなかったようです。そこで今回、Railsでサイトをスマホ対応にする方法を勉強したので書き綴っておきます。variantsまず、今回はgemは使わずに実装しました。Variantsを使用します。Variantsとは、スマホ、タブレット、PCなどのブラウザごとに異なるテンプレートを使用したい場合に、その振り分けを簡単に実現できるようにするためのRailsの機能です。endendapplication_controller.erbに上記を記述します。Private内で振り分けるデバイスを指定します。メソッド名はなんでも大丈夫ですが、「なんの時にはどのvariant」ということは明示してあげてください。後述しますが、私はここで一度失敗しました。Viewsvariantごとに個別のテンプレートを用意します。テンプレートのファイル名には、variantで指定した:~を記述します。#指定のデバイスこのようにすることで、Railsが自動的にデバイスごとにテンプレートを振り分けて表示してくれます。前述しましたが、指定の仕方が甘くて一度失敗しました。endend最初はこれしか書いてませんでした。これだとPCの場合でもスマホのテンプレートが使用されてしまっていました。そこでこちらの記事を参考にさせていただき、きちんとcase~whenを使用してそれぞれ指定し、PCを入れないように記述するとうまくいきました。satolabo.0t0.jpまとめBootstrapのレスポンシブ対応=スマホ対応と勘違いしていたことがそもそもの間違いでした。このVariantの導入でかなり楽にできるようになったようですね。本来ならコンピュータには1~10まで全て指示しなければいけないんですよね。どこまでやってくれて、どこから自分でやらなければならないのか、それもきちんと把握する必要がありそうです。プラグインを学んでみる。»プロフィールid:song-of-life1352607アラサーで思い立ってプログラミングを始めた主婦が、自宅でお小遣い稼ぎをしたいがために自作アプリのリリースを目指すブログです。【Git】ブランチ間違えてコミットしてた!?月別アーカイブ参加グループプログラミングはてなブログをはじめよう!song-of-life1352607さんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。