niki12260714の日記

フリーランスのITエンジニアの呟き。

配布のBootstrapテンプレートをRailsに導入する

世の中には親切な人が多いもので、格好いいBootstrapのテンプレートを配布している人がいます。
有料のものなんかサポートも付いていたりして、デザインセンスが壊滅的な人にはありがたい世の中です。
で、このテンプレートをRailに適用するにはどうしたらいいの? というお話です。
テンプレートをダウンロードしてくると、そのままサイトに使えるようにBootstrapのフォルダも入っていたりして、いやでもRailsのgemで入れてるから、これ要らないよねってなって、では、なにを適用するのか? って話になります。
全部が全部に対応するわけではないでしょうが、自分がハマったポイントを、後のメモとして残します。

【Bootstarapのバージョン確認】
適用するBootstrapのバージョンを確認します。
バージョンによって、gemを変更。
3ならbootstrap-sass、4ならbootstrapを導入。

【scssファイルをapp/assets/stylesheetsに配置、読み込み順を制御】
デフォルトのBootstrapに上書きする形でscssがあったので、それを「app/assets/stylesheets」以下に配置します。
で、これをrails -sすると、なんにもしてないと、Railsが配下にあるscssを順番関係なく全部コンパイルしてしまい、mixinが後に読まれて「そんな変数ないよ」と怒られたりします。
なので、application.cssを開いて、読み込み順を制御します。
「*= require_tree .」が、「このフォルダ以下を全部読み込み」という意味なので、ここを削ります。
代わりに、「*= require custom.css」のように、読み込みたいcssを、読み込みたい順番に上から記述していきます。

【その他、jsファイル、cssファイルをvendor/assetsに配置】
Bootstrap、JQuery以外の、適用テンプレート独自のjsファイル、cssファイルは、まとめてvendor/assets以下に配置します。
ここはアセットパイプラインがデフォルトで通されるところらしいです。
でも通らなかったら、以下を参照にapplication.rbに記述を追加、確認します。

masaqu.id

ここまでで、自分は適用できました。
以下、自分が一番ハマったポイント。

【モバイル画面のために、metaタグを記述する】
Chromeディベロッパーツールを使ってモバイルで見ても、画面の文字が大きくならない。
cssを見ると、画面サイズに応じてフォントサイズを変える記述があるのにおかしい。
なので、テンプレートに含まれていたサンプルページのソースコードを見て、自分の記述との差異を確認したら、以下が違ってました。

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

これを外してモバイルで見ると、文字が小さくなる。
入れると、狙った通りにフォントサイズが変わる。
このタグはモバイルを対象とするページでは必ず入れないといけなかったらしい。

getbootstrap.com

上記ページの「Mobile first」ってところです。
で、viewportってなんだろうと調べると、こちらが詳しかったです。

tech.nitoyon.com

これで適用終了です。

※gemでBootstrap入れてますけど、これを止めて、Railsフォルダに諸々一式置く方法もあります。
自分は試してないんですけど、vendor/assets以下に置いてコンパイル通せばいけるんじゃないかと予想。