Ruby、Ruby on Rails5 初心者の入門書に最適!おすすめ本と勉強方法(2019年度) #Rails #Ruby

Ruby、Ruby on Rails 5 初心者の入門書に最適!おすすめ本と勉強方法(2019年度) #Rails #Ruby

こんにちは、かなです。

nayamu
  • Ruby や Rails の初心者向けで、どんな本がおすすめなのか知りたい
  • おすすめの勉強方法があれば教えてほしい

こういった質問に答えます。
これから、 Ruby on Rails を始めてみたい人や初心者向けの記事です。

本記事のテーマ

  • Ruby 初心者向けのおすすめ入門書
  • Ruby on Rails 初心者向けのおすすめ入門書
  • Ruby on Rails 初心者向けおすすめの勉強方法

この記事を書いている、私の Ruby on Rails 歴

新入社員のときは、 PHP をよく使っていました。2014年頃から、Ruby on Rails の勉強を少しずつ始めて、2015年6月の転職を機に PHP エンジニアから Rails エンジニアになりました。転職したときは、とても嬉しかったのを覚えています(^o^)。
今は毎日、Ruby や Rails を使っています。

続きを読む

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マスターコース


Ruby on Rails5 で devise と OmniAuth を活用して Facebook 認証を実装しよう! #rails #facebook

Facebook認証を利用して、Ruby on Rails5 アプリケーションにログインできるようにしたい思います。

devise + OmniAuth というGemを利用してFacebook認証を実装します。

Deviseとは

https://github.com/plataformatec/devise

Deviseは、Railsでログイン管理を簡単に行える便利なGemです。
新規登録時に認証メールを送信したり、ログイン・ログアウト機能も簡単に実装できます。

OmniAuthとは

OmniAuthは、簡単にWebアプリケーションのマルチプロバイダ認証を実装することができるGemです。
FacebookやTwitter等のSNS認証を実装する際に利用すると便利です。
それぞれに、Gemが公開されているので、今回は、Facebook用のGemをインストールをして実装していきたいと思います。

環境

Ruby on Rails 5.0.1

Facebookアプリケーションの作成

Facebook Developers でアプリケーションを作成します。

「製品を追加」を選択して、「Facebookログイン」の「スタート」ボタンをクリックします。

ひとまず、設定する箇所は「有効なOAuthリダイレクトURL」です。
認証するアプリケーションのURLを設定します。
「変更を保存」をクリックします。

Deviseのインストール

次に、Deviseのインストールと設定を行っていきます。

Gemfileに下記を追加します。

gem 'devise'

bundleインストールを行ないます。

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

deviseのファイルを生成します。

$ bundle exec rails g devise:install
Running via Spring preloader in process 39790
      create  config/initializers/devise.rb
      create  config/locales/devise.en.yml
===============================================================================

Some setup you must do manually if you haven't yet:

  1. Ensure you have defined default url options in your environments files. Here
     is an example of default_url_options appropriate for a development environment
     in config/environments/development.rb:

       config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }

     In production, :host should be set to the actual host of your application.

  2. Ensure you have defined root_url to *something* in your config/routes.rb.
     For example:

       root to: "home#index"

  3. Ensure you have flash messages in app/views/layouts/application.html.erb.
     For example:

       <p class="notice"><%= notice %></p>
       <p class="alert"><%= alert %></p>

  4. You can copy Devise views (for customization) to your app by running:

       rails g devise:views

===============================================================================

こんな出力がされればOKです。

Deviseで出力されるメッセージを日本語化します。

英語版のymlファイルを、日本語版としてコピーします。

$ cp -p config/locales/devise.en.yml config/locales/devise.ja.yml

中のメッセージを日本語に置き換えます。

Userモデルを生成します。

$ bundle exec rails g devise user
Running via Spring preloader in process 13886
      invoke  active_record
      create    db/migrate/20170304210629_devise_create_users.rb
      create    app/models/user.rb
      invoke    rspec
      create      spec/models/user_spec.rb
      invoke      factory_girl
      create        spec/factories/users.rb
      insert    app/models/user.rb
       route  devise_for :users

マイグレーションの実行

$ bundle exec rake db:migrate

ログイン画面を表示します。

http://localhost:3000/users/sign_up

メールでのログイン認証画面が表示されればOKです。

認証機能の実装

Gemfileに追記します。

gem 'omniauth'
gem 'omniauth-facebook'

インストールします。

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

Userモデルに、カラムを追加します。

app/models/user.rb

bundle exec rails g migration AddColumnsToUsers uid:string provider:string

マイグレーションの実行

$ bundle exec rake db:migrate

Deviseの設定

Facebookアプリケーションの アプリIDapp secret を追記します。

config/initializers/devise.rb

Devise.setup do |config|
  ## 省略
  config.omniauth :facebook, ENV['APP_ID'], ENV['APP_SECRET']
end

Gitでソース管理したいので、直接 アプリIDapp secret を記載することは避けて、環境変数から呼び出せるようにします。

.evnに環境変数を設定

DotenvというGemを利用して環境変数を読み込んでいるのですが、導入手順はこちらで紹介しています。
RailsにDotenvを導入!環境変数を管理しよう!

Facebookアプリケーションの「設定->ベーシック」に記載されている、 アプリIDapp secret を、 .env に設定します。

APP_ID="xxxxxxxxxxxxxxxx"
APP_SECRET="xxxxxxxxxxxxxxxxxxxxxxxxxxx"

:omniauthable を追記します。

app/models/user.rb

class User < ApplicationRecord
  # Include default devise modules. Others available are:
  # :confirmable, :lockable, :timeoutable and :omniauthable
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :trackable, :validatable, :omniauthable
end

Userモデルにメソッドを追加します。

Userモデルに認証時に、ユーザ情報を検索するメソッドを追加します。

app//models/user.rb

class User < ApplicationRecord
  # Include default devise modules. Others available are:
  # :confirmable, :lockable, :timeoutable and :omniauthable
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :trackable, :validatable, :omniauthable

  def self.find_for_oauth(auth)
    user = User.where(uid: auth.uid, provider: auth.provider).first

    unless user
      user = User.create(
        uid:      auth.uid,
        provider: auth.provider,
        email:    User.dummy_email(auth),
        password: Devise.friendly_token[0, 20]
      )
    end

    user
  end

  private

  def self.dummy_email(auth)
    "#{auth.uid}-#{auth.provider}@example.com"
  end
end

コールバック処理を実装

ディレクトリを作成します。

mkdir app/controllers/users

コールバックの処理を実装します。

app/controllers/users/omniauth_callbacks_controller.rb

class Users::OmniauthCallbacksController < Devise::OmniauthCallbacksController
  def facebook
    callback_from :facebook
  end

  private

  def callback_from(provider)
    provider = provider.to_s

    @user = User.find_for_oauth(request.env['omniauth.auth'])

    if @user.persisted?
      flash[:notice] = I18n.t('devise.omniauth_callbacks.success', kind: provider.capitalize)
      sign_in_and_redirect @user, event: :authentication
    else
      session["devise.#{provider}_data"] = request.env['omniauth.auth']
      redirect_to new_user_registration_url
    end
  end
end

ルーティングの設定

config/routes.rb

Rails.application.routes.draw do
  # コールバック用URL
  devise_for :users, controllers: { omniauth_callbacks: 'users/omniauth_callbacks' }

 # ログアウト用
  devise_scope :user do
    delete :sign_out, to: 'devise/sessions#destroy', as: :destroy_user_session
  end
end

ログイン画面を表示

http://localhost:3000/users/sign_up

「Sign in with Facebook」というリンクが表示されていたらOKです。

他のviewに記載したい場合は、下記をviewに記述します。

user_omniauth_authorize_path(:facebook)

URLを読み込めません:このURLのドメインはアプリノドメインに含まれていません。
このURLを読み込むには、アプリ設定のアプリドメインにすべてのドメインとサブドメインを追記してください。

リンクをクリックして、このようなメッセージが表示されたらFacebookアプリケーションの設定「有効なOAuthリダイレクトURI」が設定できているか見直してみてください。

「http://localhost:3000」を追加しておくとローカルでも認証が行えます。

最後に、私はヘッダーに、ログイン/ログアウトのURLを実装しました。

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Bgclub</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
  <div>
    <% if user_signed_in? %>
        <%= link_to 'Sign out', destroy_user_session_path, method: :delete %>
    <% else %>
        <%= link_to 'Sign in', user_facebook_omniauth_authorize_path %>
    <% end %>
  </div>
    <%= yield %>
  </body>
</html>

以上で、Facebook認証の実装は完了とします。
今回は、Devise+OmniAuthでユーザ認証を実装する手順を参考にさせていただきました。
ありがとうございました!


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 / Ruby on Rails ビギナーズ勉強会

Ruby/Railsビギナーズ勉強会 第14回160626開催まとめ #rubybg #Rails

6月26日(日)にコワーキングスペース茅場町Co-EdoにてRuby / Ruby on Rails ビギナーズ勉強会 第14回を開催しました。

毎月、RubyやRuby on Rails・Sinatraを勉強するために開催しています!
最初にセッションを希望されている4,5名の方が登壇して、講演を行い、その後でもくもく(自主)勉強会を開催しています。

今回の開催内容をまとめました!

続きを読む

Ruby on Rails初心者におすすめの書籍本まとめ[2016年版]#Rails #Ruby

Ruby on Rails初心者におすすめの書籍本まとめ[2016年版] #Rails #Ruby

2014年11月から、Ruby/Ruby on Railsビギナーズ勉強会を開催していて、活動の中で僕自身もたくさんの書籍を読んで学んできました)^o^(

こらから始める初心者から中級者の手前ぐらいまでのRubyとRuby on Railsの書籍をピックアップしたいと思います。

続きを読む

Ruby / Rails ビギナーズ勉強会 第13回 #coedorb 160522 開催まとめ!

Ruby / Ruby on Rails ビギナーズ勉強会 第13回160522開催まとめ #rubybg #Rails

5月22日(日)にコワーキングスペース茅場町Co-EdoにてRuby / Ruby on Rails ビギナーズ勉強会 第13回を開催しました。

毎月、RubyやRuby on Rails・Sinatraを勉強するために開催しています!
最初にセッションを希望されている4,5名の方が登壇して、講演を行い、その後でもくもく(自主)勉強会を開催しています。

今回の開催内容をまとめました!

続きを読む