この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
はじめに
前回から引き続き、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を使用する際や、その他のテンプレートを使用する際などの参考になれば幸いです。