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

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

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

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

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

必要なもの

ダッシュボードとは

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

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

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

  • 情報を表示するパーツをWidget
  • 複数の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 へアクセスして次のようなダッシュボードが表示されれば完了です。

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リポジトリにアップしているので、興味のある方はご覧ください。

アニメファンのためのオンラインコミュニティ

qnyp(キュニップ)に参加すると、感想を読み書きしたり、感想をもとに自分の視聴記録を確認することができるようになって、アニメを見るのがより楽しくなります。

qnypを見てみる

タグ

  1. 雑談 (7)
  2. イベント (4)
  3. 技術 (19)
  4. ビジネス (3)
  5. 統計情報 (2)
  6. サービス (9)
  7. 新機能 (7)

年別アーカイブ

  1. 2015 (2)
  2. 2014 (7)
  3. 2013 (9)
  4. 2012 (16)