さくさくっと作っていきましょう！！
環境
- Mac OS X 10.10.2
- Rails 4.2.0
- Ruby 2.2.1p85
- gem 2.4.5
- bundle 1.8.5
- rbenv 0.4.0
- rake 10.4.2
プロジェクト作成
$ rails new karitakke
Gemfileの編集
今後使うGemも先に追加しておきます。
Gemfile
gem 'twitter-bootstrap-rails'
gem 'less-rails'
gem 'devise'
gem 'cancancan'
さらにGemfile中程にある
Gemfile
gem 'therubyracer', platforms: :ruby
がコメントアウトされているので外します。
編集が終わったら保存して
$ bundle install
しときます。
controller・viewの作成
メニューページでも作っておきます。
$ rails g controller Welcome index
deviseの設定
deviseの設定を行います。
$ rails g devise:install
$ rails g devise:views
$ rails g devise User
$ rake db:migrate
まず、config/environments/development.rbに以下を追加します。
config/environments/development.rb
config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }
次に、config/routes.rbに以下を追加します。
config/routes.rb
root 'menu#index'
さらに、app/controller/application_controller.rbを以下のようにします。
app/controller/application_controller.rb
class ApplicationController < ActionController::Base
# Prevent CSRF attacks by raising an exception.
# For APIs, you may want to use :null_session instead.
protect_from_forgery with: :exception
before_action :authenticate_user!
end
Bootstrapの設定
Bootstrap3の設定を行います。
$ rails g bootstrap:install
$ rails g bootstrap:layout application fluid
動作確認
このあたりで一度動作確認をしておきます。
$ rails s
ブラウザで localhost:3000 を開き、ログイン画面が出てくることを確認します。
modelの変更
Userモデルにrole(cancancanで使う)とnameというカラムを追加しておきます。
$ rails g migration add_role_to_user role
$ rails g migration add_name_to_user name:string
$ rake db:migrate
ついでにcontrollerの設定もしておきます。以下を追記します。
app/controllers/application_controller.rb
before_action :configure_permitted_parameters, if: :devise_controller?
protected
def configure_permitted_parameters
devise_parameter_sanitizer.for(:sign_up) { |u| u.permit(:email, :password, :password_confirmation, :role, :name) }
devise_parameter_sanitizer.for(:account_update) { |u| u.permit(:email, :password, :password_confirmation, :current_password, :role, :name) }
end
cancancanの設定
まず
$ rails g cancan:ability
で設定を追加します。
app/models/user.rbに以下を追加します。
app/models/user.rb
enum role: {admin: 'admin', member: 'member'}
app/models/ability.rbに以下を追加します。
app/models/user.rb
if user.admin?
can :manage, :all
else
can :update, user
end
あとはviewにもいろいろ記述しますが、それは後ほどで。
見た目の変更
ついでに画面の見た目の変更をしておきます。
deviseのview
サインインやサインアップのviewをbootstrap風にします。devise-bootstrap-viewsというGemを使います。
Gemfileに以下を追加します．
Gemfile
gem 'devise-bootstrap-views'
追加したら保存して
$ bundle install
を実行します。その後、
$ rails g devise:views:bootstrap_templates
とすると
(enter "h" for help) [Ynaqdh] a
と聞かれるのでaを押します。
次に、app/helpers/application_helper.rbを以下のようにします。
app/helpers/application_helper.rb
module ApplicationHelper
def bootstrap_devise_error_messages!
return '' if resource.errors.empty?
messages = resource.errors.full_messages.map { |msg| content_tag(:li, msg) }.join
sentence = I18n.t('errors.messages.not_saved',
count: resource.errors.count,
resource: resource.class.model_name.human.downcase)
html = <<-HTML
<div class="alert alert-danger alert-block">
<button type="button" class="close" data-dismiss="alert">x</button>
<h5>#{sentence}</h5>
#{messages}
</div>
HTML
html.html_safe
end
end
さらに、名前と権限を入力・選択できるようにしたいのでapp/views/devise/registrations/new.html.erbも変更します。
app/views/devise/registrations/new.html.erb
# ↓名前
<div class="form-group">
<%= f.label :name %>
<%= f.text_field :name, autofocus: true, class: "form-control" %>
</div>
# ↓権限
<div class="form-group">
<%= f.label :role %>
<%= f.select :role, {"一般ユーザー" => "member", "管理者" => "admin"}, class: "form-control" %>
</div>
editも同様に変更します。
全体的な部分
app/views/layouts/application.html.erbを編集します。
app/views/layouts/application.html.erb
<body>
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Karitakke</a>
<div class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li><%= link_to "Home", root_path %></li>
<li><%= link_to "貸出図書一覧", rentals_path %></li>
<li><%= link_to "蔵書一覧", books_path %></li>
</ul>
<% if user_signed_in? %>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><%= current_user.name %> <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><%= link_to "プロフィール変更", edit_user_registration_path %></li>
<li class="divider"></li>
<li><%= link_to "サインアウト", destroy_user_session_path, :method => :delete%></li>
</ul>
</li>
</ul>
<% end %>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12">
<%= bootstrap_flash %>
<%= yield %>
</div>
</div><!--/row-->
<footer>
<p>© hogehoge</p>
</footer>
</div> <!-- /container -->
</body>
</html>
今回はここまで！
ちょっと内容が多かったかな...
次回に続きます！