グロースエンジニアのブログ

Ruby on Rails エンジニアです!開発に当たって勉強したことをまとめていこうと思います!

webpack2 : チュートリアルをやってみた!

最近よく聞く webpack !

いろんなプロジェクトで使われてて裏でいい感じに動いていて勉強しないとと思って数ヶ月...やりました!

バージョンが 2 になってたみたいで、チュートリアルやったら動かなくて困った...

とりあえず以下を参考に動くところまでは持っていった!

 

webpack.js.org

で、初心者なのでここからどうしよう...と思って見つけたのがこのチュートリアル!なのでこれをやってみました!

Getting Started with webpack 2 – Thinking in Code

今の状態としては、webpack の Getting Started をやって終わっている状態です!

- webpackのバージョンは 2.3.2

yarnを使う

これも聞いたことがある!パッケージマネージャらしい!

Yarn is a package manager for your code.

yarnpkg.com

以下を実行すると yarn が使えるようになるっぽい。

brew install yarn
yarn add --dev webpack webpack-dev-server@2

 

基本的には記事通りにやって行けば大丈夫だと思うけど、動かなかったところをメモしていく!

webpack-dev-server

これも当たり前なんかな?普通にターミナルに入力して動かなくて、以下のコマンドでインストール後に動いた。

npm install -g webpack-dev-server

 

extract-text-webpack-plugin

記事内では beta 版が使われているようだったけど、今は大丈夫っぽい!

npm install --save-dev extract-text-webpack-plugin

github.com

まとめ

とりあえず動くようになったけど、実際にコード書いていかないと分からないな(笑)

これからいじっていく予定!

【Rails5】devise でログイン後ページをユーザー意図に合わせて変更する

前回の記事でログイン後ページのリダイレクトを設定しました。

ログアウトした状態でログイン後の特定ページにいった場合、ログインページに遷移し、ログインするとその設定したページにリダイレクトされます。

しかし、その場合ユーザーとしてはログインするとそのログイン後の特定ページにリダイレクトされたいと思います。

今回はその機能を実装していきます。

ログイン前のページを保存する

以下のページで解説がありますので、そのとおりに実装していきます。

How To: Redirect back to current page after sign in, sign out, sign up, update · plataformatec/devise Wiki · GitHub

まず app/controllers/application_controller.rb に以下を追記します。

class ApplicationController < ActionController::Base
before_action :store_current_location, unless: :devise_controller?
before_action :authenticate_user!

...

private

def store_current_location
store_location_for(:user, request.url)
end
end

これでログイン前のページが保存されます。

ログイン後のリダイレクトを修正

次に以下のようにしてログイン後のリダイレクトを先ほどの保存したログイン前ページを使うように修正します。

  def after_sign_in_path_for(resource)
stored_location_for(resource) || mypage_root_path
end

ログイン不要ページを除く

この設定でほぼOKなんですが、ログインが不要なページからログインページに遷移した場合もこの機能が働きます。

例えば、トップからログインページに遷移した場合、ログイン後はトップに戻ります。しかし、ここではログイン後のトップ(上記例では mypage_root_path)に遷移させたいと思います。

なので、その設定を行います。なお、ここではログイン不要のページ(トップページ)を home_controller で設定しているとします。

class ApplicationController < ActionController::Base
before_action :store_current_location, unless: :devise_or_home_controller?
before_action :authenticate_user!

...

private

...

def devise_or_home_controller?
devise_controller? || controller_name == 'home'
end
end

これで home_controller は保存されなくなり、意図通り mypage_root_path に遷移します。 controller_name == 'home' の部分はもう少しやりようがある気がしてますが、ひとまず、これで動きます。

それ以外でいい方法があれば教えてください!

ということで今回はここまで。

 

devise 関連記事はこちら

【Rails5】devise でログイン機能を実装する

【Rails5】devise を日本語化する

【Rails5】devise でログイン後、ログアウト後のページを設定する

【Rails5】gem omniauth-google-oauth2 のrspecテストではまった

ログインテストを書いていてハマったのでメモ。

以下を参考にテストを書いていた。

Integration Testing · omniauth/omniauth Wiki · GitHub

Rails + Devise + OmniAuth で Facebook/Twitter の OAuth 認証を RSpec + Capybara でインテグレーションテスト(RequestSpec) | EasyRamble

How to Test Drive OmniAuth Google OAuth2 for your Rails App — Jesse Spevack

 

なるほど!なるほど!と思いながら真似してやっていたが、上手く行かず...

rspec 内に binding.pry を仕込んで中を見てみると上手く設定できてないみたいで、デフォルトのパラメータが返ってくる。

[3] pry(#<Users::OmniauthCallbacksController>)> request.env['omniauth.auth']
=> {"provider"=>"default",
"uid"=>"1234",
"info"=>{"name"=>"Example User"}}

omniauth-google-oauth2 を使っている場合は google_oauth2

原因は mock を作るときに以下のように google を設定していたこと。

OmniAuth.config.mock_auth[:google]

これを google_oauth2 に修正したら上手くいきました!

OmniAuth.config.mock_auth[:google_oauth2]

mock を使ったテスト自体ほとんど書いたことがなかったので、これを解決するのにハマってしまった...

【Rails5】devise でログイン後、ログアウト後のページを設定する

ユーザーがログインした後、ログアウトした後のページへの遷移をデフォルトのものから変更したいと思います。

以下のページの項目を読むと after_sign_in_path_for と after_sign_out_path_for をオーバーライドしてねってあるので、その通りやっていきます。

GitHub - plataformatec/devise: Flexible authentication solution for Rails with Warden.

application_controller.rb に追記

以下のように after_sign_in_path_for にログイン後のページ、 after_sign_out_path_for にログアウト後のページを設定するとリダイレクトしてくれます。

class ApplicationController < ActionController::Base
before_action :authenticate_user!

def after_sign_in_path_for(resource)
mypage_root_path # ログイン後に遷移するpathを設定
end

def after_sign_out_path_for(resource)
new_user_session_path # ログアウト後に遷移するpathを設定
end
end

思ったよりサクッといけました!

 

devise 関連記事はこちら

【Rails5】devise でログイン機能を実装する

【Rails5】devise を日本語化する

【Rails5】devise でログイン後ページをユーザー意図に合わせて変更する

【Rails5】devise を日本語化する

前回はログイン機能の実装を行いましたが、今回はこれを日本語化していきたいと思います。

デフォルトのロケールを設定する

deviseのページに方法が書いてあるので、これどおりにやっていきます。

I18n · plataformatec/devise Wiki · GitHub

config/application.rb にデフォルトのロケールを設定します。

config.i18n.default_locale = :ja

デフォルトで何か設定されている場合は修正してください。

 日本語化ファイルを設定する

config/locales/devise.ja.yml というファイルを作成し、上記ページにある日本語翻訳ファイルをコピペします。 

# Additional translations at https://github.com/plataformatec/devise/wiki/I18n

ja:
  devise:
    confirmations:
      confirmed: 'アカウントを登録しました。'
      send_instructions: 'アカウントの有効化について数分以内にメールでご連絡します。'
      send_paranoid_instructions: "あなたのメールアドレスが登録済みの場合、本人確認用のメールが数分以内に送信されます。"
    failure:
      already_authenticated: 'すでにログインしています。'
      inactive: 'アカウントが有効化されていません。メールに記載された手順にしたがって、アカウントを有効化してください。'
      invalid: "%{authentication_keys} もしくはパスワードが不正です。"
      locked: 'あなたのアカウントは凍結されています。'
      last_attempt: 'あなたのアカウントが凍結される前に、複数回の操作がおこなわれています。'
      not_found_in_database: "%{authentication_keys} もしくはパスワードが不正です。"
      timeout: 'セッションがタイムアウトしました。もう一度ログインしてください。'
      unauthenticated: 'アカウント登録もしくはログインしてください。'
      unconfirmed: 'メールアドレスの本人確認が必要です。'
    mailer:
      confirmation_instructions:
        subject: 'アカウントの有効化について'
      reset_password_instructions:
        subject: 'パスワードの再設定について'
      unlock_instructions:
        subject: 'アカウントの凍結解除について'
      password_change:
        subject: 'パスワードの変更について'
    omniauth_callbacks:
      failure: "%{kind} アカウントによる認証に失敗しました。理由:(%{reason})"
      success: "%{kind} アカウントによる認証に成功しました。"
    passwords:
      no_token: "このページにはアクセスできません。パスワード再設定メールのリンクからアクセスされた場合には、URL をご確認ください。"
      send_instructions: 'パスワードの再設定について数分以内にメールでご連絡いたします。'
      send_paranoid_instructions: "あなたのメールアドレスが登録済みの場合、パスワード再設定用のメールが数分以内に送信されます。"
      updated: 'パスワードが正しく変更されました。'
      updated_not_active: 'パスワードが正しく変更されました。'
    registrations:
      destroyed: 'アカウントを削除しました。またのご利用をお待ちしております。'
      signed_up: 'アカウント登録が完了しました。'
      signed_up_but_inactive: 'ログインするためには、アカウントを有効化してください。'
      signed_up_but_locked: 'アカウントが凍結されているためログインできません。'
      signed_up_but_unconfirmed: '本人確認用のメールを送信しました。メール内のリンクからアカウントを有効化させてください。'
      update_needs_confirmation: 'アカウント情報を変更しました。変更されたメールアドレスの本人確認のため、本人確認用メールより確認処理をおこなってください。'
      updated: 'アカウント情報を変更しました。'
    sessions:
      signed_in: 'ログインしました。'
      signed_out: 'ログアウトしました。'
      already_signed_out: '既にログアウト済みです。'
    unlocks:
      send_instructions: 'アカウントの凍結解除方法を数分以内にメールでご連絡します。'
      send_paranoid_instructions: 'アカウントが見つかった場合、アカウントの凍結解除方法を数分以内にメールでご連絡します。'
      unlocked: 'アカウントを凍結解除しました。'
  errors:
    messages:
      already_confirmed: 'は既に登録済みです。ログインしてください。'
      confirmation_period_expired: "の期限が切れました。%{period} までに確認する必要があります。 新しくリクエストしてください。"
      expired: 'の有効期限が切れました。新しくリクエストしてください。'
      not_found: 'は見つかりませんでした。'
      not_locked: 'は凍結されていません。'
      not_saved:
        one: "エラーが発生したため %{resource} は保存されませんでした:"
        other: "%{count} 件のエラーが発生したため %{resource} は保存されませんでした:"

これで devise に関連する表示は日本語化できました。

モデルも日本語化する

ついでと言っては何ですが、フォームなどに表示される項目も日本語化していきたいと思います。

Email や Password といった表示はモデルの属性によるものなので、 config/locales/models.ja.yml などのファイルを作成し、以下を追記します。

ja:
  activerecord:
    attributes:
      user:
        email: メールアドレス
        password: パスワード
        password_confirmation: 確認用パスワード
remember_me: 次回から自動的にログイン

これでフォームに表示される項目も日本語化できます。

それ以外の日本語化

それ以外の箇所は直接viewにかかれているようなので、それを修正すればいいかと。必要に応じて I18n 化する感じです。

例えば app/views/devise/sessions/new.html.erb がログインフォームなので、このファイルを開いて日本語に書き換えます。

<h2>ログイン</h2>
<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
<div class="field">
<%= f.label :email %><br />
<%= f.email_field :email, autofocus: true %>
</div>

<div class="field">
<%= f.label :password %><br />
<%= f.password_field :password, autocomplete: "off" %>
</div>

<% if devise_mapping.rememberable? -%>
<div class="field">
<%= f.check_box :remember_me %>
<%= f.label :remember_me %>
</div>
<% end -%>

<div class="actions">
<%= f.submit "ログイン" %>
</div>
<% end %>

<%= render "devise/shared/links" %>

 一番最後にある devise/shared/links はフォームの最下部にあるリンクを作成している viewなので、これも必要に合わせて修正してください。

 

以上、 devise の日本語化でした!

 

devise 関連記事はこちら

【Rails5】devise でログイン機能を実装する

【Rails5】devise でログイン後、ログアウト後のページを設定する

【Rails5】devise でログイン後ページをユーザー意図に合わせて変更する

 

Rails アプリを複数(2つ以上)立ち上げる方法

最近マイクロサービスというものを調べる機会があって、記事などを読んでいた。

で、気になったのが「ローカルでどうやって開発するの?」でした。

開発者なら当たり前なのかもしれませんが、こういう機会があって初めて課題に気づき調べて分かることだったのでメモしておきます。

ポートを指定して rails s!

そんなことできたんだな...

通常の `rails s` だと 3000 でアプリが立ち上がる。

複数立ち上げたいときは `rails s -p 4000` とか、`-p ポート番号` って指定してあげればOK!

たとえば上記で rails アプリを立ち上げて、 http://localhost:4000/ にアクセスすれば起動してる。

なるほどな〜とwww

今後の開発

せっかくの機会なので、マイクロサービス周りを調べつつ、テスト的に何か作れればと思っている。

まだまだどういうときに必要で、どういった技術的なものや知識が必要になるのか分かっていないので徐々にやっていくつもりです!

【Rails5】devise でログイン機能を実装する

devise を使ってログイン機能を実装してきます。

2016年7月30日時点で Rails5 対応しているのかちょっとわからなかったのですが、実装できたのでメモしておきます。

その他、devise 関連記事を書いているので参考にどうぞ。

【Rails5】devise を日本語化する

【Rails5】devise でログイン後、ログアウト後のページを設定する

【Rails5】devise でログイン後ページをユーザー意図に合わせて変更する

devise をインストール

Gemfile に以下を追加して、ターミナルから bundle install を実行します。

gem 'devise'

次にターミナルから rails generate devise:install を実行するとインストール手順が表示されます。

➜  app git:(master) rails generate devise:install
Running via Spring preloader in process 33841
      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:
     <%= notice %>
     <%= alert %>

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

       rails g devise:views

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

この手順通りにやっていきます。

1. 開発環境でのメール設定

config/environments/development.rb ファイル内に以下を追記します。

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

2. route を追加

config/routes.rb に root to: 'home#index' を追加します。

3. ログイン関連の flash メッセージの表示

app/views/layouts/application.html.erb に flash メッセージ用のタグを追加

<%= notice %>
<%= alert %>

4. ログイン関係の view を作成

ターミナルから以下を実行することでログイン関連のviewのベースを作成します。

➜  app git:(master) rails g devise:views
Running via Spring preloader in process 34244
      invoke  Devise::Generators::SharedViewsGenerator
      create    app/views/devise/shared
      create    app/views/devise/shared/_links.html.erb
      invoke  form_for
      create    app/views/devise/confirmations
      create    app/views/devise/confirmations/new.html.erb
      create    app/views/devise/passwords
      create    app/views/devise/passwords/edit.html.erb
      create    app/views/devise/passwords/new.html.erb
      create    app/views/devise/registrations
      create    app/views/devise/registrations/edit.html.erb
      create    app/views/devise/registrations/new.html.erb
      create    app/views/devise/sessions
      create    app/views/devise/sessions/new.html.erb
      create    app/views/devise/unlocks
      create    app/views/devise/unlocks/new.html.erb
      invoke  erb
      create    app/views/devise/mailer
      create    app/views/devise/mailer/confirmation_instructions.html.erb
      create    app/views/devise/mailer/password_change.html.erb
      create    app/views/devise/mailer/reset_password_instructions.html.erb
      create    app/views/devise/mailer/unlock_instructions.html.erb

ログインユーザー用のUserモデルの作成

ターミナルから rails g devise User を実行し、ログインしたユーザーを登録するモデルを作成します。

ログイン後のページを作る

テスト用に以下のようなログイン後のページを作成します。

# app/controllers/mypages_controller.rb
class MypagesController < ApplicationController
  before_action :authenticate_user!

  def show
  end
end


# app/views/mypages/show.html.erb
mypage#show


# config/routes.rb
Rails.application.routes.draw do
  devise_for :users
  root to: 'home#index'

  resource :mypage
end

サーバーを再起動し、http://localhost:3000/mypage にアクセスするとログインページが表示されると思います。

これは、 before_action :authenticate_user! がログインしているかをチェックしており、していなければログインページにリダイレクトされます。

ログイン、ログアウトのリンクを追加する

ログインしていない状態で、ログインが必要なページに直接アクセスするとログインフォームにリダイレクトされます。

ただ、ログインフォームへのリンクとログアウトするリンクが必要となります。

そのためのリンクが以下です。

<% if user_signed_in? %>
  <%= link_to('Logout', destroy_user_session_path, :method => :delete) %>
<% else %>
  <%= link_to('Login', new_user_session_path) %>
<% end %>

これをリンクを追加したい場所に追加すれば大丈夫です。

以上、devise の実装でした。

次は devise を日本語化していきたいと思います。

その他、devise 関連記事はこちら

【Rails5】devise を日本語化する

【Rails5】devise でログイン後、ログアウト後のページを設定する

【Rails5】devise でログイン後ページをユーザー意図に合わせて変更する