[Ruby on Rails]AdminLTEをテンプレートとして使用する(1) – アプリの概要

はじめに

Ruby on Railsでダッシュボードや管理画面を作るケースは多いかと思います。このとき見栄えをよくするため、テンプレートを使用することも多いかと思います。今回はAdminLTEというテンプレートをRailsと組み合わせてみました。

AdminLTEとは

AdminLTEについては公式ページの以下の文が特徴を一言で上手く表しているのではないかと思います。

AdminLTE is a popular open source WebApp template for admin dashboards and control panels.

公式ページより

このページ内のサンプル画面を見てもらうと、棒グラフ・線グラフ・地図・パネルや円グラフなど様々なテンプレートが用意されていることが分かるかと思います。これら以外にも入力フォーム・テーブル・カレンダーなど、ダッシュボードや管理画面を作るのに必要そうなテンプレートが数多く用意されています。

今回つくるアプリの概要

では、RailsとAdminLTEを組み合わせたアプリの概要です。今回はサーバとクライアントを明確に別け

• サーバ　　　　・・・　RailsによるAPIサーバで、JSONを返却する
• クライアント　・・・　AdminLTEのライブラリとHTMLのみで、サーバよりJSONを取得して表示する

という構成にしました。

サーバとクライアントを分離した理由は、純粋なクライアント側のテンプレートであるAdminLTEを極力そのままの構成で使用したかったためです。仮にRailsにAdminLTEを組み込むと、AdminLTEのHTMLにRailsのソースが混じることや、AdminLTEのフォルダ構成を変える必要などが出てくると思います。今回は、それらを避けました。

フォルダ構成

以下のようなフォルダ構成としました。

.
├── client ・・・クライアント
│   ├── lib
│   │   └── adminlte ・・・AdminLTEに必要なライブラリを格納
│   │       ├── bootstrap
│   │       ├── dist
│   │       ├── plugins
│   ├── pages
│   │   └── charts
│   │       └── chartjs.html　・・・AdminLTEのchartjs.htmlを流用した画面
│   ├── starter.html　　　　　 ・・・AdminLTEのstarter.htmlを流用した画面
└── server　・・・サーバ(Rails)
    ├── Gemfile
    ├── app
    │   ├── controllers
    │   │   ├── api
    │   │   │   └── v1
    │   │   │       ├── application_base_controller.rb
    │   │   │       └── pages
    │   │   │           └── charts
    │   │   │               └── chartjs_controller.rb
    │   │   ├── application_controller.rb
(以降略)

先にも書いたようにclient・serverとでそれぞれ分離させています。

clientフォルダについては、AdminLTEのライブラリについてはlib/adminlteフォルダ内に配置し、htmlファイルは直下やpagesフォルダ内に置くこととしました。lib内にadminlteフォルダを作成した理由は、別の機会に別のライブラリを併用することも考えてのことです(そのときはlib内に別フォルダを作成してそこにライブラリを配置することになるでしょう)。

serverフォルダについては、ここに純粋なRailsアプリを作成しています。今回はAPIサーバなの、Rails側にViewはありません。

画面について

上記にも書きましたが、starter.html・chartjs.htmlという2つの画面をAdminLTEのサンプルより流用して作成します。以下に画面のスクリーンショットを載せておきます。

starter.html

こちらの画面についてはサンプルそのままです。ただし次回に書きますが、AdminLTEのライブラリを参照するよう、cssやjsのパスを変更します。

chartjs.html

こちらの画面には4つのグラフがあります。グラフを含む画面デザインがサンプルそのままですが、表示するデータをサーバから取得するよう変更します。

まとめ

RailsとAdminLTEを組み合わせてアプリを作った場合の概要について書いてきました。次回、このアプリの具体的な作成方法やソースコードについて書いていこうと思います。