Help us understand the problem. What is going on with this article?

Sinatra で JSON API を用意し JavaScript から利用する

More than 1 year has passed since last update.

前提

データベースに格納された残高のデータを読みだして図表を描きたい。図表は JavaScript ライブラリを利用してゴリゴリ動く感じのグラフにする。このようなニーズがあったとします。

データの流れ : RDBMS → Ruby(Sinatra) → JSON → JavaScript

JavaScript にデータを渡したいといったシチュエーションはよくあると思われるのでメモ。

JSON API の実装

まずは Sinatra 側に GET したら JSON が返ってくる API を実装する。

参考 [Ruby]SinatraでJSONを返す
http://d.hatena.ne.jp/rightgo09_ruby/20130828/p1

get '/api/balance/show' do
  if authorization # 認証に成功したか判定
    @balances = Balance.where(uid: @user.uid) # データを DB から読み出す
    # 配列に加工
    labels = []
    data = []
    @balances.each do |balance|
      labels.push(balance.month)
      data.push(balance.data)
    end

    # sinatra/json を使ってもいいけど
    content_type :json
    {
      type: 'bar',
      data: {
        labels: labels, # ラベルの配列をあてはめる
        datasets: [{
          label: "残高",
          backgroundColor: "rgba(2,117,216,1)",
          borderColor: "rgba(2,117,216,1)",
          data: data, # 数値の配列をあてはめる
        }],
      },
      options: {
        scales: {
          xAxes: [{
            time: {
              unit: 'month'
            },
            gridLines: {
              display: false
            },
            ticks: {
              maxTicksLimit: labels.count # ラベルの個数を渡す
            }
          }],
          yAxes: [{
            ticks: {
              min: 0,
              max: data.max, # データの最大値を渡す
              maxTicksLimit: data.count # データの個数を渡す
            },
            gridLines: {
              display: true
            }
          }],
        },
        legend: {
          display: false
        }
      }
    }.to_json # to_json で返せば JSON データを返却できる
  end
end

こんな感じで JSON API を作っておく。
JSON 全体をあらかじめ Ruby で前処理しておくのが楽ちん。

JavaScript で JSON を利用する

まずは JavaScript のライブラリを選定。

Chart.js
http://www.chartjs.org/

こいつを組み込んだら、あとは JSON API を叩いて Chart.js に渡すところだけ書いてあげれば良い。

function getBalance() {
  var data = null
  var req = new XMLHttpRequest();
  req.open("GET", "/api/balance/show", false);
  req.send(null);
  if(req.readyState == 4 && req.status == 200) {
      data = req.responseText; // JSON API の戻りを data に格納
  };
  return JSON.parse(data) // data を返却する
}
var ctx = document.getElementById("BalanceChart"); // DOM を指定
var balanceChart = new Chart(ctx, getBalance()); // Bar Chart のデータとして getBalance 関数の戻り値の JSON を利用

結果

Screenshot from 2017-10-18 14-18-00.png

できました。

あとはこの要領で JavaScript ライブラリを駆使してデータの可視化をガンガンおこなえますから便利ですね。

おわりです。

dts
コンサルティングから設計、開発、HW/SWの選定、運用、保守までシステムをサポートする総合情報サービス企業です。
http://www.dts.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした