人生のヒント

私が経験したことが、誰かの人生のヒントになればと願い書きます。

Ruby On Railsでレスポンシブに対応した可変テーブルを表示させる(FooTable)

スポンサーリンク

f:id:hinthint:20160909165623j:plain

 

HTMLタグだけでテーブルを作ろうとするとPCでは綺麗に見えても、スマホだと文字が見えないとかありませんか?

そういった時に役立つ方法がFooTableです。jQueryのため、Ruby On Railsじゃなくても使えますが、今回はRuby On Railsでの使い方を紹介します。

 

下記サイトでモジュールをダウンロードでき、マニュアルも確認できます。(英語)

http://fooplugins.github.io/FooTable/index.html

 

1.インストール

バージョンは、BootstrapとStandaloneがありますが、今回は、Bootstrapを使わないパターン、つまりStandaloneで行きたいと思います。

 

rootでログインします。(URLは、サイトでの最新を記載してください。)

# wget http://fooplugins.github.io/FooTable/releases/footable-standalone.latest.zip

# apt-get install unzip

# unzip footable-standalone.latest.zip

# cp -R css/footable.standalone.css /home/rails/work/foo/app/assets/stylesheets/

# cp -R js/footable.js /home/rails/work/foo/app/assets/javas
cripts/

# chown -R rails:rails /home/rails

# su - rails

$ cd work/foo

$ vi config/initializers/assets.rb

config/initializers/assets.rbファイルに以下記述を記入します。

Rails.application.config.assets.precompile += %w( footable.js )
Rails.application.config.assets.precompile += %w( footablejs.js )
Rails.application.config.assets.precompile += %w( footable.standalone.css )

 

$ vi app/assets/javascripts/footablejs.js

app/assets/javascripts/footablejs.jsファイルに以下記述を記入します。

jQuery(function($){
    $('.table').footable();
});

 

$ vi app/assets/javascripts/application.js

app/assets/javascripts/application.jsファイルに以下記述を記入します。

//= require footable.js
//= require footablejs.js

 

$ vi app/assets/stylesheets/application.css

 app/assets/stylesheets/application.cssファイルに以下記述を記入します。

//= require footable.standalone.css

 

以下コマンドを実行します。

$ rake assets:clobber

$ rake assets:precompile

$ vi app/views/layouts/application.html.erb

app/views/layouts/application.html.erbファイルのheadタグ内でjavascript_include_tagより前になるように以下記述を記入します。

これらのURLは、お使いのFooTableのバージョンで使えるバージョンに変更してください。ブログ執筆時点では、これを使いました。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>

以下コマンドを実行します。

$ /etc/init.d/unicorn restart

 

 

2.table設定

$ vi app/views/users/index.html.erb

app/views/users/index.html.erbファイルを以下のように書き直します。

<% breadcrumb :root %>
<p id="notice"><%= notice %></p>

<h1>Listing Users</h1>

<table class="table" data-filtering="true" data-sorting="true" data-paging="true">
  <thead>
    <tr>
      <th data-visible="true">Name</th>
      <th data-breakpoints="xs sm">Email</th>
      <th data-type="html" data-breakpoints="xs sm">Show</th>
      <th data-type="html" data-breakpoints="xs sm">Edit</th>
      <th data-type="html" data-breakpoints="xs sm">Destroy</th>
    </tr>
  </thead>

  <tbody>
    <% @users.each do |user| %>
      <tr>
        <td><%= user.name %></td>
        <td><%= user.email %></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 %>

以下コマンドを実行します。

$ /etc/init.d/unicorn restart

 

Webブラウザでhttp://FQDN/userにアクセスして、以下のようなテーブルが表示され、ブラウザの表示を縮小したり、スマホで見た時にテーブルの表示が問題ないかも確認した方が良いでしょう。

f:id:hinthint:20160909175742p:plain

 

 

 3.まとめ

jQueryなどのモジュールをサーバ上に保管したい場合は、assetする手順などいるので、ご注意ください。

今回使ったFooTableは、Gemの手順じゃないんで、手順を作成するのに苦労しました。

はまりやすいので、ご注意ください。

4年前のGemもあるのですが、現在も更新され続けているものなのに、古いものを使っていいのかと考え、最新バージョンのものを使う手順にしました。

 

また、Bootstrapでも今回使ったファイルとファイルが違うだけなので、ファイルを変えればBootstrapを適用させた上で同様の手順でできます。

 

オプションは、公式サイトに載っているので、参考にしてください。

 

尚、今回使ったサンプルでは、戻る動作はFooTableが実行されるような実装はできていないので、ご容赦ください。