2013/11/30

Rails4+kaminari+bootstrap3なページング

Railsにおけるページングライブラリといったらkaminariでいいですね。Rails4でも使えました。で、twitter-bootstrap3のページングUIと合わせて使えるのかやってみました。

kaminariの導入

Railsアプリこさえて、Gemfileに

  gem 'kaminari'
を追加して、
$ bundle
しますね。2013年11月28日現在では、kaminari (0.15.0) が入りました。ちなみに、Railsは4.0です。

bootstrap3の導入

同じく、Gemfileに
gem 'anjlab-bootstrap-rails',
:require => 'bootstrap-rails',
:github  => 'anjlab/bootstrap-rails'
を追加して、
$ bundle
します。

bootstrapのページング

bootstrapのページング(ページネーション)は、Components · Bootstrapに説明があります。kaminariのページングに、このUIを適用したい、っていうのがこの記事の根幹です。

rails generate kaminari:views bootstrap

kaminariにはthemeっていう概念があって、アプリにテーマを適用するには、

$ rails generate kaminari:views [theme]
を実行すると、[theme]が適用されたerbセットを作ってくれるんですね。で、[theme]に何指定したらいいの?ってことで、
$ rails g kaminari:views --help
をやったら、出てきました。
Usage:
  rails g kaminari:views THEME [options]

    Copies all paginator partial templates to your application.
    You can choose a template THEME by specifying one from the list below:

        - default
            The default one.
            This one is used internally while you don't override the partials.
        - bootstrap
            Pagination for Twitter Bootstrap 2.0.
            http://twitter.github.com/bootstrap/
        - github
            A very simple one with only "Older" and "Newer" links.
        - google
            A googlish one.
            Try with this option  :window => 10, :outer_window => -1

Options:
      [--skip-namespace]                   # Skip namespace (affects only isolated applications)
  -e, [--template-engine=TEMPLATE_ENGINE]  # Template engine for the views. Available options are "erb", "haml", and "slim".
                                           # Default: erb

Runtime options:
  -f, [--force]    # Overwrite files that already exist
  -p, [--pretend]  # Run but do not make any changes
  -q, [--quiet]    # Suppress status output
  -s, [--skip]     # Skip files that already exist
なんだ、bootstrapサポートされてるじゃない、ってことでTHEMEにbootstrapを指定して、
$ rails g kaminari:views bootstrap
を実行して、次のファイルたちを得たわけです。
  • app/views/kaminari/_first_page.html.erb
  • app/views/kaminari/_gape.html.erb
  • app/views/kaminari/_last_page.html.erb
  • app/views/kaminari/_next_page.html.erb
  • app/views/kaminari/_page.html.erb
  • app/views/kaminari/_paginator.html.erb
  • app/views/kaminari/_prev_page.html.erb

_paginator.html.erbの修正

上のヘルプの内容を見ると、bootstrap2.0用のテーマなんですね。じゃあ、bootstrap3用にするには、どうするかってことなんですが、試したところ、_paginator.html.erbを、↓のように修正することで対応出来ました。

diff --git a/app/views/kaminari/_paginator.html.erb b/app/views/kaminari/_paginator.html.erb
index 03d508e..01e7195 100644
--- a/app/views/kaminari/_paginator.html.erb
+++ b/app/views/kaminari/_paginator.html.erb
@@ -1,17 +1,19 @@
 <%= paginator.render do -%>
-  <div class="pagination">
-    <ul>
-      <%= first_page_tag unless current_page.first? %>
-      <%= prev_page_tag unless current_page.first? %>
-      <% each_page do |page| -%>
-        <% if page.left_outer? || page.right_outer? || page.inside_window? -%>
-          <%= page_tag page %>
-        <% elsif !page.was_truncated? -%>
-          <%= gap_tag %>
+  <div class="row">
+    <div class="col-md-12 text-center">
+      <ul class="pagination">
+        <%= first_page_tag unless current_page.first? %>
+        <%= prev_page_tag unless current_page.first? %>
+        <% each_page do |page| -%>
+          <% if page.left_outer? || page.right_outer? || page.inside_window? -%>
+            <%= page_tag page %>
+          <% elsif !page.was_truncated? -%>
+            <%= gap_tag %>
+          <% end -%>
         <% end -%>
-      <% end -%>
-      <%= next_page_tag unless current_page.last? %>
-      <%= last_page_tag unless current_page.last? %>
-    </ul>
+        <%= next_page_tag unless current_page.last? %>
+        <%= last_page_tag unless current_page.last? %>
+      </ul>
+    </div>
   </div>
 <% end -%>

2013/11/26

Javascriptのグラフ描画ライブラリJSChartsを試してみた。

Webページ上にチャートを描画するJavascriptライブラリに JSCharts というのがある。シンプルなAPIかつ、綺麗なチャートが描画できそうだったので試してみた。

JSCharts

JSChartsは、http://www.jumpeyecomponents.com/というサイトで公開されているソフトウェアライブラリの1つ。このサイトは、有償ソフトウェアを販売しているっぽくて、JSChartsも有償。ただ、同サイトにユーザ登録をし、JSChartsで描画するチャートにウォータマークを表示する、という条件で無料で利用できる。今回試したのは無料版。

価格

ちなみに、JSChartsの価格は2013年11月末現在、http://www.jscharts.com/free-downloadにあるように、1ドメインでの非商用利用で$39、商用利用で$79というお値段。

チャート

JSチャートがサポートするチャートは、

  • Line Chart
  • Bar Chart
  • Pie Chart
の3種類。チャートの種類は少ないけど、色が設定やツールチップや凡例の表示が細かくできる点が強いところに見える。チャートの例や具体的なAPIは本家のサイトに詳しく書いてあるのでここには書かないけど、実際にチャートを描画したイメージを張っておく。

画像、もしくは実際のサイト上の描画(http://simalabs.com/labs/jscharts)をよく見るとわかるんだけど、各チャートの左上に「JSCharts」っていう画像が表示されていて、これがそのウォータマークってやつ。これを表示させないためには、お金払ってね、ということ。けど、実際にWebページ上に敢えてチャート出す時って、軸や値の数値も見れた方が嬉しい、という人のほうが多いと思うし、4,000円乃至8,000円は払っても損はないかなと思います。以前試したChart.jsよりは個人的にはJSChartsの方が使いたいと思ってる。(Javascriptのグラフ描画ライブラリChart.jsを試してみた。参照)

2013/11/24

Javascriptのストリーミングデータ用チャートライブラリSmoothie Chartsを試してみた。

Javascriptのチャートライブラリを調べていて、ちょっと変わったライブラリをみつけたので試してみた。
今回試したのは、Smoothie Chartsというもので、ストリーミングデータを時系列なラインチャートとして表示するもの。MITラインセンスのオープンソースで、githubにホスティングされてる。

リアルタイムな時系列チャートを描く

このライブラリを使うと、簡単にリアルタイムな時系列チャートが描画できる。使い方は、チュートリアルがあり、本当に簡単すぎる・・・

ポイントとしては、

  • canvasタグを利用する。
  • setInterval関数を使ってリアルタイムにチャートを更新する。
というところか。

実際にページ上で使ってみた例が、このキャプチャになります。

ここに動くページを作ってみたよ。