bootstrapのテンプレートを使って、開発のスピードを大幅アップ！

 

 

こんにちは！Masaです！

 

railsでウェブアプリケーションを開発していると、必ずぶつかる問題が「デザイン」です。

 

自分でゼロからHTML/CSSを書いていては、時間がいくらあっても足りません。

 

そこで、bootstrapのテンプレートが役に立つのです。

 

今回は、bootstrapのテンプレートをrailsのアプリに取り入れる方法を書きます。

 

 

 

前提

 

以下2点の条件で進めていきます。

• 作ったばかりのrailsアプリを想定。事前に何も実装されていない。
• 「Nevada Plus」というテンプレートを例として使用

 

「Nevada Plus」は無料のbootstrapテンプレートです。

 

css、js、fontのファイルで構成される一般的なテンプレートで、特殊な点は特にありません。

 

他のテンプレートであっても、同じように導入できるはずです。

 

 

テンプレートをダウンロードしよう

まずはテンプレートファイルのダウンロードからです。

 

こちらのページから、ダウンロードしてください

 

右側の「Tweet」というところからダウンロードしましょう。

 

ツイートしなくても、ダウンロードが開始されますので、ご安心を。

 

 

テンプレートの中身

ダウンロードしたファイルの中を開けると、以下のファイルが入っています。

• assets
• index.html
• LICENSE
• REAME.md

さらに、assetsの下には、

• css
• fonts
• images
• js

が入っていて、それぞれの下にファイルや画像があります。

 

「Nevada Plus」に限らず、多くのテンプレートがこういったファイル内容になっていると思います。

 

これらを自分のrailsアプリに導入していきましょう！

 

 

assets下のcssファイルをrailsアプリのassets/css下へ

まずはcssファイルです。

 

ダウンロードしたcssファイルを、railsアプリのassets/css下へ移動させます。

 

 

jsファイルも同様にassets/js下へ移動

jsファイルも同様です。

 

ダウンロードしたjsファイルを全て、railsアプリ内のassets/js下に配置します。

 

 

images下の画像をpublic/images下へ

images下の画像だけが、少し違います。

 

ダウンロードしたimagesの下にある全ての画像を、railsアプリのpublic/imagesの配下に置きましょう。

 

assets/images下ではダメな理由

こちらの記事を参考にさせていただきました。

 

Rails4ではbackground:url(“assets/hoge.png”)の書き方は動かない話

 

assets/images下に置くと、production環境で画像が表示されなくなってハマります。

 

詳しくは上記の記事を読んで欲しいのですが、どうやら、assets下のファイルはdigestされてファイル名が変わることで、参照できなくなるということのようです。

 

 

fontawesomeを読み込ませよう

残るはfontファイルです。

 

こちらの中身は「fontawesome」というやつです。

 

アイコンを文字として使用できるツールです。画像ではなく、文字として認識されるため、色や大きさを変えたりするのが容易になるという便利ツールです。

 

入れ方は非常に簡単。

 

gemfileに以下のコードを追加します。

 

次に、app/assets/stylesheet/application.cssに以下のコードを追記します。

 

これで、font awesomeが反映されるようになりました。

 

 

htmlとcssの画像の参照先を変更する

最後の手順です。

 

backgroundなどで使われている、画像の参照先をpublic/imagesに変更します。

 

テキストエディタの検索・置き換え機能を駆使して、サクッと書き換えてしまいましょう！

 

 

index.htmlのコードをコピペ＆編集して使う

ここまでで、テンプレートのファイルを反映させる準備が完了です。

 

index.htmlのコードをコピペすると、こちらのデモサイトと同じように表示されるようになっているはずです。

 

私が作ったのがこちらです。

 

本番環境でも、しっかり反映されています。

 

 

本当はvendor/assets下に入れるべきなんだけど…

実は、このやり方には改善の余地があります。

 

cssをapp/assets/stylesheetの下に配置していますが、これらは本来ならvendor/assets/stylesheetに置かれるべきです。

 

bootstrapのテンプレートは、サードパーティーが書いたものに他ならず、アセットパイプラインの原則上、本来はvendor配下にあるのが適切なのです。jsファイルも同様です。

 

ただ、今のところ読み込ませる方法がわからず…

 

application.cssでrequireするやり方もあるのですが、vendor配下にファイルを増やすたびに追記しなければならない点を考えると、スマートではない気がします。

 

とりあえず動くものを作ることが最優先なので、この問題は保留にして、先に進むことにしました。

 

 

まとめ

改善点はあるものの、ひとまずそれなりのデザインが活用できる状態にはなりました！

 

ウェブアプリケーションを作ることに興味があるけど、デザインは門外漢という人はぜひ活用してみてください！

 

それでは、今回は以上です！