前提として、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 する。

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 配下に追加する。
（ファイル名は適当なので好みに応じて）

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 を読み込むよう設定されているため必要に応じて。

app/views/layouts/application.html.erb

・・・
<head>
  ・・・
  <%= javascript_include_tag 'application' %>
  ・・・
</head>
・・・

尚、javascript_include_tag についてはRailsドキュメント - javascript_include_tag を参照。

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

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

Userモデルを作成（属性にname,emailを用意）

$ 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

DBマイグレーション

$ rails db:migrate

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

config/routes.rb

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 モデル一覧が表示される。

Ruby on Rails での best_in_place 事始め

Best in Place とは

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