図書管理システム karitakke 製作その１


さくさくっと作っていきましょう！！

## 環境
 - 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も先に追加しておきます。

```ruby:Gemfile
gem 'twitter-bootstrap-rails'
gem 'less-rails'
gem 'devise'
gem 'cancancan'
```

さらにGemfile中程にある

```ruby: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`に以下を追加します。

``` ruby:config/environments/development.rb
config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }
```

次に、`config/routes.rb`に以下を追加します。

``` ruby:config/routes.rb
root 'menu#index'
```

さらに、```app/controller/application_controller.rb```を以下のようにします。

``` ruby: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の設定もしておきます。以下を追記します。

``` ruby: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`に以下を追加します。

``` ruby:app/models/user.rb
enum role: {admin: 'admin', member: 'member'}
```

`app/models/ability.rb`に以下を追加します。

``` ruby: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`に以下を追加します．

```ruby: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`を以下のようにします。

``` Ruby: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>&copy; hogehoge</p>
      </footer>

    </div> <!-- /container -->

  </body>
</html>
```

## 今回はここまで！
ちょっと内容が多かったかな...
次回に続きます！

## 参考
 - [Devise/cancancanを使ってログイン機能を実装する [Rails 4.1]](http://morizyun.github.io/blog/devise-cancan-rails-authorize/)
 - [Rails4 + bootstrap3](http://qiita.com/crotsu/items/eb4777c1222a690d23bc)