Rails5に日本語を美しく表示できるBootstrapテーマ「Honoka」を導入! #rubybg

今回は、日本語を美しく表示できるBootstrapのテーマ「Honoka」をRails5に導入したいと思います。

Bootstrapとは

デザインに関するプリセット(事前定義)が集まったCSSフレームワークです。
Bootstrap以外にも有名なCSSフレームワークは、Foundation、Pure、Materialize等があります。

Bootstrap3からは、様々なデバイスのサイズにも最適化できるレスポンシブデザインにも対応しています。
HTMLのidやclassをタグに適用して、簡単にデザインを整えることが出来ます。

環境

Rails5.0.1

「Honoka」をダウンロード

最新版をダウンロードします。
今回は、「Honoka v3.3.7-a」の「bootstrap-honoka-3.3.7-a-dist.zip」をダウンロードしました。

ダウンロードしたフォルダを解凍するとこんなファイル群です。

Railsプロジェクトにコピー

fontsディレクトリはそのまま、Railsプロジェクトのassetsディレクトリにコピーするだけで大丈夫です。

コピー元 コピー先
css/bootstrap.min.css assets/stylesheets/bootstrap.min.css
js/bootstrap.min.js assets/javascripts/bootstrap.min.js
fonts assets/fonts

Bootstrapの読み込み

bootstrap.min.js を読み込むために、下記のファイルに追加します。

app/assets/javascripts/application.js

... 
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap.min <-追加します
//= require_tree .

bootstrap.min.css を読み込むために、下記のファイルに追加します。

app/assets/stylesheets/application.css

... 
 *
 *= require bootstrap.min <-追加します
 *= require_tree .
 *= require_self
 */

サーバを起動して確認

サーバを起動してフォントが変わっているか確認します。

bundle exec rails s  

Bootstrap導入前

Bootstrap導入後


フォントが変更されていることが確認できます。
完了です 🙂


Ruby on Rails が学べるオンライン講座

オンライン講座なら、好きな場所で好きな時間に学習できます。Ruby on Rails も学ぶことができるので、ぜひ、活用しましょう。

Udemy(ユーデミー)

オンライン動画学習サイトで、Ruby on Rails講座やRuby講座もあります。頻繁に講座のバーゲンセールスが実施されているので、価格をチェックしましょう!一度、購入した動画は繰り返し使えますので何度でも学習可!
世界最大級のオンライン学習サイトUdemy


CodeCamp(コードキャンプ)

現役のRubyエンジニアによる個別指導で、Webサイト制作を基礎から習得できます。無料体験レッスンが受講できるので、気軽に受講体験ができます。
Ruby と Ruby on Railsマスターコース


RailsにDotenvを導入!環境変数を管理しよう! #rubybg

DotenvというGemを導入すると、Gitのリポジトリには含めたくないパスワードや外部APIの情報を環境変数として扱えます。

https://github.com/bkeepers/dotenv

Dotenvで何ができる?

データベースの認証情報や外部サービスの資格情報等の、開発環境間で変更される可能性のあるものは、コードから環境変数に設定しておくとセキュリティ的にも良いとされています。

ただ、複数のプロジェクトが実行されている開発マシンやサーバーに環境変数を設定することは運用が大変です。
dotenvを導入すると .env のファイルからENVに環境変数をロードできるようになります。

The Twelve-Factor App
環境によって変わる情報を環境変数として保存することは、Webアプリケーションの開発において便利でスケールしやすい方法論として公開されている「The twelve-factor App」でも紹介されている方法です。

環境

Rails 5.0.1

インストール

Gemfileに下記を追加します。

$ gem 'dotenv-rails', require: 'dotenv/rails-now'

インストールします。

$ bundle install --path vendor/bundle --jobs=4

「–jobs=4」をオプションとして指定すると並列処理でインストールが行われるので高速です。

.evn を作成

.env ファイルを新規作成します。

$ vi .env

適当な環境変数を設定します。

HOGE="fuga"

コンソールを起動して、呼び出せるか確認してみましょう。

$ bundle exec rails c                                                                  [1] pry(main)> Dotenv.load
=> {"HOGE"=>"fuga"}
[2] pry(main)> puts ENV['HOGE']
fuga
=> nil

Dotenv.load を実行してからでないと、ENVで環境変数にはアクセスできないので、そこだけ注意です。
あとは、Gitの管理外になるように .gitignore.evn を追加すれば完了です。

これで、環境によって変わる設定を安全に取り扱うことができます。


AWS が学べるオンライン講座

オンライン講座なら、好きな場所で好きな時間に学習できます。AWS も学ぶことができるので、ぜひ、活用しましょう。

Udemy(ユーデミー)

オンライン動画学習サイトで、AWS講座もあります。頻繁に講座のバーゲンセールスが実施されているので、価格をチェックしましょう!購入した動画は繰り返し使えますので何度でも学習可!
世界最大級のオンライン学習サイトUdemy


RaiseTech(ライズテック)

RaiseTechは最速で「稼げる」エンジニアになるための、実践的なWebエンジニアリングスクール。AWSフルコース、AWS自動化コースとAWS講座が充実!
【RaiseTech】最速で稼げるプロになるエンジニアリングスクール


Ruby on Rails5にdevise(gem)でログイン機能を実装|Webサービスを開発しよう!STEP21 #Rails #devise

今回は、Rails5にログイン管理機能ができるGemのdeviseを実装したいと思います。

ログイン管理というと、ユーザー登録と、登録時のメール認証、各ページの認証処理といった機能です。

続きを読む

Ruby on Rails5.0.0.rc1のAction Cableを使ってチャットアプリを作ろう!#Rails #coedorb

Rails開発チームから、5月6日(現地時間)に、Rails5系の最初のリリース候補「Rails 5.0.0 rc1」がリリースされました。
今回は、「Action Cable」を利用して、チャットシステムを作る手順をメモしていきたいと思います。

続きを読む

AWS(EC2)へ自動デプロイ時に、Pumaを再起動しよう!

STEP18:AWS(EC2)へ自動デプロイ時に、Pumaを再起動しよう!#AWS

今回は、Amazon Linux(AWS)のEC2へ、Capistrano3で、自動デプロイ実行後に、Pumaを再起動するタスクを追加したいと思います。

続きを読む

Railsアプリケーションのトップ画面を作成しよう!

STEP17:Ruby on Railsアプリケーションのトップ画面を作成しよう!#Rails

今回は、ついに、Railsアプリケーションのトップ画面を作成していきたいと思います。
まだ、モデル(Model)は必要ないので、作り方は、Railsのgenerateコマンドを利用して、コントローラー(Controller)とビュー(View)の生成、ルーティングの設定を行います。

続きを読む

STEP12:GitHubに、新規リポジトリを作成してコミットしよう! #GitHub

前回までで、Railsプロジェクトの新規作成と、Gemfileの追加ができたので、今回は、GitHubにリポジトリを作成してコミットする所まで、行いたいと思います。

続きを読む

Rails開発で便利なGemを選ぼう!

STEP11:Ruby on RailsのWebサービス開発で便利なGemを選ぼう! #Rails

今回は、今後、開発する上で、開発の効率が上がると思われるGemを選んでインストールしてみたいと思います。
Rubyでは、様々な便利ライブラリが、Gemというライブラリの配布用標準フォーマットで提供されています。
rubygems.orgで、たくさんのGemを検索することができます。

続きを読む