前提として、Ruby on Rails で Hello World が表示できていること。
Ruby on Rails を始める方法は Ruby on Rails 事始め に記載。
Best in Place とは
jQuery ベースの AJAX エディット機能を提供する Ruby Gem パッケージである。
RESTful アプリケーションにおいて、HTML Form での送信ボタン不要で、表示されたデータを直接編集する感覚でデータ更新が出来る。
| 説明 | サンプル画像 |
|---|---|
| Best in Place サンプル画像 |  |
Best in Place を Ruby on Rails で使ってみる
詳細はBest in Place の READMEを参照。
Base in Place を Ruby on Rails で使うために必要なインストール手順は、Gem のインストールのみである。
インスターのために、Gemfiles に best_in_place を追加する。
インストール後は、JavaScript ファイルにて下記のとおり Best in Place（以後、bip） を require する。
//= require rails-ujs
//= require turbolinks
//= require jquery // ・・・追記箇所 ※ require_tree . より上に記載
//= require best_in_place // ・・・追記箇所
//= require_tree . // app/assets/javascripts 配下の js を読み込む
そして、下記のような JavaScript を app/assets/javascripts 配下に追加する。
（ファイル名は適当なので好みに応じて）
$(document).ready(function() {
/* Activating Best In Place */
jQuery(".best_in_place").best_in_place();
});
以下は、Ruby on Rails ではデフォルトで application.js を読み込むよう設定されているため必要に応じて。
・・・
<head>
・・・
<%= javascript_include_tag 'application' %>
・・・
</head>
・・・
尚、javascript_include_tag についてはRailsドキュメント - javascript_include_tag を参照。
これで bip を使うための準備が整った。
また、bip で操作する Active Record を用意してルーティングを行う。
ここでは例として scaffold を使って User モデルを作成してルーティング設定を追記する。
$ rails generate scaffold User name:string email:string
モデルが作成出来たら migration ファイルが作成されたことを確認。
ファイルが正しく生成されていれば、DB をマイグレートする。
$ 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
$ rails db:migrate
ルーティングするよう記載されたことも確認する。
Rails.application.routes.draw do
resources :users # users に対するルーティング
・・・
end
最後に、Users を bip の編集対象として指定する。
指定方法として、Ruby on Rails 用の編集対象として指定する方法として用意されている best_in_place メソッドを使う。
<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 モデル一覧が表示される。