Ruby on Rails での best_in_place 事始め

前提として、Ruby on Rails で Hello World が表示できていること。
Ruby on Rails を始める方法は [Ruby on Rails 事始め](https://qiita.com/tatsurou313/items/a2cad29352a23c722f9f) に記載。

# Best in Place とは

jQuery ベースの AJAX エディット機能を提供する Ruby Gem パッケージである。

RESTful アプリケーションにおいて、HTML Form での送信ボタン不要で、表示されたデータを直接編集する感覚でデータ更新が出来る。

|説明|サンプル画像|
|------------------------|------------------------------|
|Best in Place サンプル画像|![sample_of_best_in_place.gif](https://qiita-image-store.s3.amazonaws.com/0/206493/69e254c5-b9d1-29de-704e-0f241e1e8d54.gif)|

# Best in Place を Ruby on Rails で使ってみる

詳細は[Best in Place の README](https://github.com/bernat/best_in_place)を参照。

Base in Place を Ruby on Rails で使うために必要なインストール手順は、Gem のインストールのみである。

インスターのために、Gemfiles に best_in_place を追加する。

インストール後は、JavaScript ファイルにて下記のとおり Best in Place（以後、bip） を require する。

```js:app/assets/javascripts/application.js
//= require rails-ujs
//= require turbolinks
//= require jquery           // ・・・追記箇所 ※ require_tree . より上に記載
//= require best_in_place    // ・・・追記箇所
//= require_tree .           // app/assets/javascripts 配下の js を読み込む
```

そして、下記のような JavaScript を app/assets/javascripts 配下に追加する。
（ファイル名は適当なので好みに応じて）

```js:app/assets/javascripts/use_best_in_place.js
$(document).ready(function() {
  /* Activating Best In Place */
  jQuery(".best_in_place").best_in_place();
});
```

以下は、Ruby on Rails ではデフォルトで application.js を読み込むよう設定されているため必要に応じて。

```erb:app/views/layouts/application.html.erb
・・・
<head>
  ・・・
  <%= javascript_include_tag 'application' %>
  ・・・
</head>
・・・
```

尚、javascript_include_tag については[Railsドキュメント - javascript_include_tag](http://railsdoc.com/references/javascript_include_tag) を参照。

これで bip を使うための準備が整った。

また、bip で操作する Active Record を用意してルーティングを行う。
ここでは例として scaffold を使って User モデルを作成してルーティング設定を追記する。

```sh:Userモデルを作成（属性にname,emailを用意）
$ rails generate scaffold User name:string email:string
```

モデルが作成出来たら migration ファイルが作成されたことを確認。
ファイルが正しく生成されていれば、DB をマイグレートする。

```sh:マイグレーションファイルの確認
$ cat db/migrate/YYYYMMDDhhmmss_create_users.rb 
class CreateUsers < ActiveRecord::Migration[5.1]
  def change
    create_table :users do |t|
      t.string :name
      t.string :email

      t.timestamps
    end
  end
end
```

```sh:DBマイグレーション
$ rails db:migrate
```

ルーティングするよう記載されたことも確認する。

```rb:config/routes.rb
Rails.application.routes.draw do
  resources :users   # users に対するルーティング
  ・・・
end
```

最後に、Users を bip の編集対象として指定する。
指定方法として、Ruby on Rails 用の編集対象として指定する方法として用意されている best_in_place メソッドを使う。

```erb:
<p id="notice"><%= notice %></p>

<h1>Users</h1>

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @users.each do |user| %>
      <tr>
        <td><%= best_in_place user, :name, :as => :input %></td><!-- ★変更箇所 -->
        <td><%= best_in_place user, :email, :as => :input %></td><!-- ★変更箇所 -->
        <td><%= link_to 'Show', user %></td>
        <td><%= link_to 'Edit', edit_user_path(user) %></td>
        <td><%= link_to 'Destroy', user, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>

<br>

<%= link_to 'New User', new_user_path %>
```

これで、rails s でサーバを立ち上げ、 /users を指定すると best in place で編集可能な User モデル一覧が表示される。