対象読者

Railsでスマホ向けのサービスを開発しようとしている人

はじめに

現在のWebサイト/サービスは、スマートフォンでの閲覧が8割を超える水準になっています。

つまり、これからのWebサービス開発は、
スマホ向けのレイアウトから開発していくことが先決になります。
この記事では、スマホ向けのサービスの開発スタイルを紹介します。

Rails5では puma-dev を使っていきましょう

まず、開発サーバーをpowに変更します。
powとは設定が不要のRails&Rackサーバーであり、同一LANにあるスマホであれば、ローカルの開発環境 http://localhost:3000 にアクセスできるようになります。

上記を参考に、スマホからアクセスできることを確認してください。

自分のプロジェクトにguard-livereloadを導入します。

既存のプロジェクトに対し、上記の2から参考にしてください。
Guardのコンソールに「Browser connected.」と表示されたら、自分が見てるページのerbファイルを適当に変更します。保存すると、オートリロードを体感できるはずです。どうですか？

さて、スマホ側はpowでアクセスでき、PC側はlivereloadでオートリロードができました。
スマホでのオートリロードに移りたいところですが、ここではしません。
なぜなら、スマホではGoogleDeveloperToolを使用できないからです。

cssの確認・編集にデベロッパー・ツールを使いたいので、PC上でスマホ画面の開発をします。

PC上でスマホ画面の開発をする際、ブラウザの横幅を最小まで狭めます。
そうすることで、スマホ用のスタイルをオートリロードで確認しつつ、開発できます。

以上で、基本的な設定は終わりです。
大まかな流れとして、

rails s
↓
ブラウザ狭める
↓
css修正
↓
livereloadでスマホ用のレイアウトを快適に開発

最後に、スタイリングをスマホで確認するため、
application.html.erbのhead要素の中にviewportを追加します。
<meta name="viewport" content="width=device-width, initial-scale=1.0">

これを記述しないと、スマホで確認した時に、形崩れたレイアウトが表示されると思います。
スマホユーザー8割..しかし、残りの2割も見捨てられない！
という時は、PC向けのレイアウトを別に用意します。

レスポンスブであればコードの管理は楽ですが、PCならではの魅せ方もあるとおもうので
後々PCにも対応していくことが好ましいです。

今回は、Railsにおけるスマホ向けのサービスの開発スタイルを紹介しました。
スマホ用のcssのスタイリングに詰まった時に、デベロッパーツールで確認することができることが強みです。