Rails4でレスポンシブWebデザインを意識して書いてみた

最近、自分でプロダクト作るときは基本的にレスポンシブWebデザインを意識することが多い。
多いというか、頼まれたりしたものを作るときに要件の中にどうしても「スマホで綺麗に見れて使いやすいこと」というのが入りやすいのだ。あとはどう考えてもユーザーが一般的な普通の人で、パソコンよりスマホを見る機会の方が多いだろうというのがあって、レスポンシブWebデザインを外すことは出来ない。

で、今回RailsでレスポンシブWebデザインやってみた。ちょっと前まで作ってたやつとかでも少しやってたんだけど、幾つか試した結果として一番良さそうなのは例えば app/assets/stylesheets 以下に layouts とかディレクトリを作って desktop.css.scss とかって対象とするスクリーンサイズに合わせたスタイルシートを定義してやるやり方。

具体的にやっているやり方を書くと、以下のようなディレクトリ構成を作って各ファイルを配置する。

/application_root/app/assets/stylesheets
% tree
.
├── default.css.scss
└── layouts
    ├── desktop.css.scss
    └── smartphone.css.scss

application.css には以下のように定義する。

/*
 *= require default
 *= require_tree ./layouts/
 *= require_self
 */

default を最初に読み込まないと、 Assets Pipeline の読み込み順が不定なので困ることがあるかもしれない。

で layouts 以下の scss ファイルではメディアクエリを使って書き分けることにする。

/* desktop.css.scss */
@media screen and (min-width: 1024px) {
  /* some code */
}

前に @import を使う方法を試したんだけど、 Assets Pipeline の仕組み上デフォルトではプリコンパイルされないようになってしまって、めんどくさかったのでオススメはしない。( config/environments/production.rb を修正する必要があったと思う )

今はとりあえず、そんな感じでスタイルシートの切り分けをしている。まぁしないよりましかなって感じだと思う。そんなに難しくないし。