[Ruby on Rails]AdminLTEをテンプレートとして使用する(3) – サーバの実装

はじめに

前回から引き続き、AdminLTEをRuby on Railsで使用する方法についてです。今回はサーバ側の実装で、JSONを返却するAPIサーバを作成します。

実装方法

1.Railsアプリの作成

前々回に書いたように、サーバとクライアントではアプリを分離し、別々のフォルダに作成します。サーバは「server」フォルダ内に作成するので、ルートフォルダ内に「server」フォルダを作成してください。

serverフォルダを作成したら、$ rails new . などでRailsアプリケーションを作成します。以下のようなフォルダ構成になるはずです。

.
├── client
└── server
    ├── Gemfile
    ├── Gemfile.lock
    ├── README.rdoc
    ├── Rakefile
    ├── app
(以下略)

2.ApplicationBaseControllerの作成

今回作成するアプリのベースとなるコントローラを作成します。APIサーバなのでバージョン番号の付与なども考え「Api/V1」モジュール内に作成します。以下の様なコントローラとなります。

./server/app/controllers/api/v1/application_base_controller.rb

module Api
  module V1
    class ApplicationBaseController < ApplicationController
      before_filter :allow_cross_domain_access
      def allow_cross_domain_access
        response.headers["Access-Control-Allow-Origin"] = "*"
        response.headers["Access-Control-Allow-Methods"] = "*"
      end
    end
  end
end

クライアントからのアクセス時にクロスドメインで弾かれるのを防ぐため、allow_cross_domain_access()にてヘッダーの設定を行っています。このallow_cross_domain_access()をactionの実行前に呼び出すようにしています。

3.ChartjsControllerの作成

JSONを返すコントローラを作成します。が、まずはコントローラのクラスのみを実装したいと思います。以下の様になります。

./server/app/controllers/api/v1/pages/charts/chartjs_controller.rb

class Api::V1::Pages::Charts::ChartjsController < Api::V1::ApplicationBaseController
  
end

先に作成した「ApplicationBaseController」を継承します。またURLなども考え「Api::V1::Pages::Charts」モジュールの中に作成しました。

4.area_chartアクションによるJSONの返却

ではJSONを返却するロジックです。今回はサンプルのhtml内に書かれていたJSONと同じ値を返却するようにします。クライアントより「http://localhost:3000/api/v1/pages/charts/chartjs/area_chart.json」というURLでアクセスされるため、アクション名も「area_chart」となります。

./server/app/controllers/api/v1/pages/charts/chartjs_controller.rb area_chartアクション

class Api::V1::Pages::Charts::ChartjsController < Api::V1::ApplicationBaseController
  def area_chart
    @labels = ["January", "February", "March", "April", "May", "June", "July"]
    @datasets = [
      {
        label: "Electronics",
        fillColor: "rgba(210, 214, 222, 1)",
        strokeColor: "rgba(210, 214, 222, 1)",
        pointColor: "rgba(210, 214, 222, 1)",
        pointStrokeColor: "#c1c7d1",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [65, 59, 80, 81, 56, 55, 40]
      },
      {
        label: "Digital Goods",
        fillColor: "rgba(60,141,188,0.9)",
        strokeColor: "rgba(60,141,188,0.8)",
        pointColor: "#3b8bba",
        pointStrokeColor: "rgba(60,141,188,1)",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(60,141,188,1)",
        data: [28, 48, 40, 19, 86, 27, 90]
      }
    ]
  end
  (以下略)

アクション内で返却したい値を定義しています。JSONを返却するためJBuilderの定義も作成します。

./server/app/views/api/v1/pages/charts/chartjs/area_chart.json.jbuilder

json.labels @labels
json.datasets do
  json.array!(@datasets) do |dataset|
    json.label dataset[:label]
    json.fillColor dataset[:fillColor]
    json.strokeColor dataset[:strokeColor]
    json.pointColor dataset[:pointColor]
    json.pointStrokeColor dataset[:pointStrokeColor]
    json.pointHighlightFill dataset[:pointHighlightFill]
    json.pointHighlightStroke dataset[:pointHighlightStroke]
    json.data dataset[:data]
  end
end

上記のアクションで定義した値をJSONにフォーマットしています。

5.pieアクションによるJSONの返却

こちらはクライアントより「http://localhost:3000/api/v1/pages/charts/chartjs/pie.json」のURLでアクセスされ、pieチャートに表示するデータを返却するアクションです。アクションは以下のようになります。

./server/app/controllers/api/v1/pages/charts/chartjs_controller.rb pieアクション

class Api::V1::Pages::Charts::ChartjsController < Api::V1::ApplicationBaseController
  
  (中略)
  
  def pie
    @pies = [
      {
        value: 700,
        color: "#f56954",
        highlight: "#f56954",
        label: "Chrome"
      },
      {
        value: 500,
        color: "#00a65a",
        highlight: "#00a65a",
        label: "IE"
      },
      {
        value: 400,
        color: "#f39c12",
        highlight: "#f39c12",
        label: "FireFox"
      },
      {
        value: 600,
        color: "#00c0ef",
        highlight: "#00c0ef",
        label: "Safari"
      },
      {
        value: 300,
        color: "#3c8dbc",
        highlight: "#3c8dbc",
        label: "Opera"
      },
      {
        value: 100,
        color: "#d2d6de",
        highlight: "#d2d6de",
        label: "Navigator"
      }
    ]
  end
end

こちらも返却したい値を定義しているのみです。上記と同様、JBuilderを定義します。

./server/app/views/api/v1/pages/charts/chartjs/pie.json.jbuilder

json.array!(@pies) do |pie|
  json.value pie[:value]
  json.color pie[:color]
  json.highlight pie[:highlight]
  json.label pie[:label]
end

area_chartと同様、pieアクションで定義した値をJSONにフォーマットしています。

6.画面の確認

作成したRailsを起動し、クライアントでもサーバを起動します(起動方法については前回を参照してください)。「http://localhost:8888/pages/charts/chartjs.html」にブラウザからアクセスすると、以下のように表示されるはずです。

まとめ

サーバ側についてはJSONを返却するAPIサーバであるため、非常に単純な実装となりました。これもAdminETLをテンプレートとして使用するのに、クライアントとサーバを分けたことによると思います。

AdminLETを使用する際や、その他のテンプレートを使用する際などの参考になれば幸いです。

参考サイト

Railsアプリをクロスドメインに対応したAPIサーバーにする