モダンなダッシュボード用フレームワークDashing入門

Dashingのサンプルダッシュボード

こんにちは、キュニップのあさくらです。前回の記事で紹介したダッシュボード用フレームワークDashingがとても良い感じだったので、今日はDashingのインストールからサンプルダッシュボードの作成までの簡単なチュートリアル記事をお届けします。

この記事でできるようになること

Dashingのインストール
サンプルプロジェクトの作成と起動
サンプルダッシュボードの作成

必要なもの

Ruby 1.9
Bundler

ダッシュボードとは

ソフトウェアにおけるダッシュボードは、複数の情報源からデータを集め、概要をまとめて一覧表示するものを指します。

Dashingにおけるダッシュボード

Dashingでは次のサンプル画像のように

情報を表示するパーツをWidget
複数のWidgetを一つの画面にまとめたものをダッシュボード

と呼びます。ひとつのプロジェクトに複数のダッシュボードをもつことができます。

Dashingの特徴

Dashingのサイト

Dashingは、ECプラットフォーム提供サービスのShopifyが公開しているオープンソースのダッシュボード用フレームワークで、次のような特徴を持ちます。

Sinatraベース
簡潔でカラフルな見た目で、TVや大画面のスクリーンで映えるように考慮されている
CoffeeScript, HTML, SCSS（まとめてWidgetと呼ぶ）でフロントエンドを構築できる
APIまたはコードからデータをプッシュして、Widgetの表示をリアルタイムに更新できる
デフォルトで見栄えの良いWidgetが用意されている
ドラッグ&ドロップでWidgetの並びを変更できる
Herokuに容易にデプロイできる

Dashingをインストールする

Dashingはgemが提供されているのでgem installコマンドでインストールします。

$ gem install dashing

rbenvなどのパッケージマネージャを使っている場合はrehashでコマンドを実行できる状態にしてください。

Successfully installed dashing-1.0.4
Done installing documentation for dashing (0 sec).
1 gem installed

どんなコマンドが利用可能かdashing helpで見てみましょう。

$ dashing help
Commands:
  dashing generate (widget/dashboard/job) NAME  # Creates a new widget, dashboard, or job.
  dashing help [COMMAND]                        # Describe available commands or one specific command
  dashing job JOB_NAME AUTH_TOKEN(optional)     # Runs the specified job. Make sure to supply your auth token if you have one set.
  dashing new PROJECT_NAME                      # Sets up ALL THE THINGS needed for your dashboard project.
  dashing start                                 # Starts the server in style!

プロジェクトの作成は dashing new コマンド
ダッシュボードの作成は dashing generate dashboard コマンド

であることがわかります。

サンプルプロジェクトを作成する

サンプルプロジェクトを作成してみましょう、名前は try-dashing とします。

dashing new コマンドでプロジェクトを作成し、 bundle コマンドで依存ライブラリをインストールします。

$ dashing new try-dashing
$ cd try-dashing
$ bundle

次のようにgemのインストールができれば、サンプルプロジェクトの作成は完了です。

Your bundle is complete!
Use `bundle show [gemname]` to see where a bundled gem is installed.

サンプルプロジェクトを開発環境で起動する

さっそくサンプルプロジェクトを起動してみましょう。 dashing start コマンドで起動します。

$ dashing start

次のように起動メッセージが表示され、 http://localhost:3030 でアクセスできることがわかります。

>> Thin web server (v1.5.1 codename Straight Razor)
>> Maximum connections set to 1024
>> Listening on 0.0.0.0:3030, CTRL+C to stop

プロジェクトには次の2つのサンプルダッシュボードが作成されます。

サンプルダッシュボードその1 — http://localhost:3030/sample

サンプルダッシュボードその2 — http://localhost:3030/sampletv

デフォルトで見栄えの良いWidgetが用意されていることがわかります。

サンプルダッシュボードを作成する

最後にドキュメントにあるサンプルダッシュボードを作成してみましょう、名前は karma とします。 dashing generate dashboard コマンドでダッシュボードを作成します。

$ dashing generate dashboard karma
       exist  dashboards
      create  dashboards/karma.erb

作成した dashboards/karma.erb を次のように編集します。

<% content_for(:title) { "Now, count your Karma!" } %>
<div class="gridster">
  <ul>
    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
      <div data-id="karma" data-view="Number" data-title="Karma" style="background-color:#96bf48;"></div>
    </li>
    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
      <div data-id="valuation" data-view="Number" data-title="Current Valuation" data-prefix="$"></div>
    </li>
  </ul>
</div>

プロジェクトを再起動し、 http://localhost:3030/karma へアクセスして次のようなダッシュボードが表示されれば完了です。

デフォルトのダッシュボードはconfig.ruで変更できます。

Herokuへデプロイする

Herokuアカウントを持っていれば、以下のようにデプロイできます。

Gitコミット

$ git init
$ git add .
$ git commit -m 'initial commit'

Herokuアプリの作成

$ heroku create

Herokuへデプロイ

$ git push heroku master

heroku open コマンドでデプロイしたHerokuアプリへアクセスしてみましょう。

$ heroku open

次のようにダッシュボードが表示されればデプロイは完了です。

Herokuアプリ画像

おわりに

Dashingを利用すると、見栄えの良いダッシュボードが数ステップで作成できます。素晴らしいソフトウェアを公開してくださっているShopifyさんに感謝です。

今回作成したサンプルプロジェクトはGitHubリポジトリにアップしているので、興味のある方はご覧ください。