LoginSignup
15

More than 5 years have passed since last update.

RailsにbootstrapをGemを使用せず追加(しかもhonokaで)

Last updated at Posted at 2016-04-03

ゴール

  • Bootstrap CDNを使用しない
  • honokaを使用する
  • 綺麗な日本語が見られる

使用環境

  • RubyMine
  • Ruby 2.1.6.p366
  • Rails 4.2.6
  • Bootstrap (currently v3.3.6)
  • Honoka v3.3.6-a
  • 7zip (tar.gz系の解凍ができれば何でも良い)

準備

Bootstrap (currently v3.3.6)

Bootstrap (currently v3.3.6)
2.PNG
2-2.PNG

Honoka v3.3.6-a

Honoka v3.3.6-a
3.PNG
3-5.PNG

実装

今回、app\assets以下でも問題はないと思いますが、
今回ファイルの配置は、vendor\assets以下にします。

bootstrap-sass-3.3.6の各種ファイルを移動させます
1. bootstrap-sass-3.3.6.tar.gzを解凍
2. bootstrap-sass-3.3.6\assets\javascripts\以下のファイルをvendor\assets\javascriptsへ移動
4.PNG
3. bootstrap-sass-3.3.6\assets\stylesheets\以下のファイルをvendor\assets\stylesheetsへ移動
5.PNG
4. Honoka-3.3.6-a\scss\以下ファイルをvendor\assets\stylesheetsへ移動
6.PNG
5. ファイル名が紛らわしいのでvendor\assets\stylesheets\bootstrap.scssからvendor\assets\stylesheets_honoka.scssへリネーム
以下がファイル移動後の構成
8.PNG
6.app\assets\javascript\application.jsに、
【//= require bootstrap.min】と【//= require bootstrap-sprockets】の追加

app\assets\javascript\application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require bootstrap.min
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .
  1. app\assets\stylesheetsの【application.css】を【application.scss】にリネーム。(他でscssを使用するため統一する。正確にはもっと正しい理由があるのでしょうけれど)
  2. app\assets\stylesheets\application.scssに【*= require _honoka】を追加
app\assets\stylesheets\application.scss
 *= require _honoka
 *= require_tree .
 *= require_self

以上で作業終了

差の確認

Before
9.PNG

After
10.PNG

所感

簡単なようで、躓きました。意外と記事が少ない。
基本だからこそ少ないのでしょうが、基本を知りたい自分からすればこういう記事がほしいです。
ということで、同じような方がいた時のためにと思いメモを残します。

honokaだけでなく他のskinでも同様に実施すれば導入できます。
他には、同じ方法でUmiNicoも導入できます。

BGM(脱線)

仕事やプログラミング中はBGMが大切です。
自分が一番リラックスできることが最高のコードを生み出すと信じています。
そこで、コーンでィング中のおすすめサウンドを紹介します。
記事を書きながら再生しています

  • METAL GEAR SOLID V ORIGINAL SOUNDTRACK
  • METAL GEAR SOLID 5 ORIGINAL SOUNDTRACK "The Lost Tapes"
  • 交響詩篇エウレカセブン -ポケットが虹でいっぱい- MUSIC COLLECTION
  • APPLESEED ORIGINAL SOUNDTRACK - COMPLETE EDITION

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15