こんにちは。inglowインターン生の鈴木です。

Railsの開発環境でBootstrapが使えたらとても便利ですよね！

今回はフロントエンドの時間短縮には欠かせないBootstrapをRailsに導入していきたいと思います。

自身で導入したときとても苦戦したので備忘録もかねて記述していきます。

注意

ここではBootstrap3について記述します。その他のバージョンでは導入方法が違う場合があります。

動作環境

windows10

Ruby2.4.5

Ruby on Rails 5.2.2.1

Bootstrap3

事前準備

今回はRailsを使用して制作していくので事前にインストールします。

gem install rails

と入力するだけです。

1 gem installedと表示されれば成功です。

gemをgemfileで管理している場合は、gemfile内の末尾に

gem ‘rails’

と入力した後、コンソールにて

bundle install

で完了です。

いざ、導入

ここからBootstrapを導入していきます。

プロジェクト作成

まず、Railsでの新規にプロジェクトを作成します。

rails new 〇〇

〇〇の部分に任意のプロジェクト名を入力し実行すると、カレントディレクトリにプロジェクトフォルダが作成されます。

作成したプロジェクト内にgemfileが作成されていることを確認してプロジェクト作成は完了です。

Bootstrap-sassの導入

プロジェクト内のgemfileをエディタで開き、末尾に

gem ‘bootstrap-sass’

gem ‘jquery-rails’

gem ‘jquery-ui-rails’

と追記した後

bundle install

を実行します。

Javascript,CSSの修正

任意のプロジェクト名\app\assetsのフォルダ内のjavascriptフォルダとstylesheetフォルダに、それぞれapplication.js , application.cssが格納されているのでそれぞれBootstrapが使えるように修正していきます。

まずapplication.jsをエディタで開き

//= require jquery
//= require bootstrap-sprockets

と追記します。

次に、application.cssをエディタで開き、

@import “bootstrap-sprokets”
@import “bootstrap”

と追記します。
これで導入の完了です。

まとめ

できたでしょうか？

はじめはBootstrap4を導入する予定でしたが、エラーにはまり仕方なくBootstrap3を導入しました…。

windowsは何かとトラブルが起きやすいですが根気よく対応するしかありませんね…。

▼次回3/22セミナー予約締切間近！

【SATORI×inglow共催】第５回名古屋マーケティングオートメーションセミナー〜国産MA認知度NO.1 SATORI＆Web広告〜

inglow inc.はWebプロモーションとマーケティングオートメーションを2軸とした名古屋本社のデジタルマーケティング専門会社です。一般的なWeb広告運用会社さんは広告運用に主軸をおきますが、当社はあくまでWebプロモーション。クライアントのソリューションに合わせて、Webライター、カメラマンを使い、オリジナルコンテンツを設計する。更にそこへの誘導導線も築き、ここから初めて運用検証、改善フェーズに入る。またマーケティングオートメーション領域では導入支援はもちろん、導入後、広告施策と合わせたキャンペーン設計までWebプロモーション×マーケティングオートメーションを一気通貫で行います。

プロモーションとしてのデジタルマーケティングに関するご相談はお気軽にお問い合わせください。