読者です 読者をやめる 読者になる 読者になる

orangain flavor

じっくりコトコト煮込んだみかん2。知らないことを知りたい。

かっこいいダッシュボードが簡単に作れるDashingがすごい

はじめに

まずはデモを見てくれ!デスクトップPCなどの大きい画面で見るのがおすすめです。

Dashingのデモ(中)

Windows 8風のフラットなデザインで、いろいろ動いていてかっこいいですね。こんな感じのダッシュボードを簡単に作れるライブラリがDashingです。

Ruby, HTML, SCSS, CoffeeScriptで少しコードを書くだけで簡単にカスタマイズできるので、使い方を簡単に紹介します。

プロジェクトの開始

Getting Startedに書いてあるとおり、

$ gem install dashing
$ dashing new sweet_dashboard_project
$ cd sweet_dashboard_project
$ bundle
$ dashing start

これで、http://localhost:3030/をブラウザで開けば、デモと同じダッシュボードが表示されます。

ちなみにGem環境が汚れるのが気になる場合は、以下のようにするのがおすすめです。dashing newは、templates/project をカレントディレクトリにコピーしてくるだけです。

$ wget https://github.com/Shopify/dashing/archive/master.tar.gz
$ tar zxvf master.tar.gz
$ mv dashing-master/templates/project sweet_dashboard_project
$ cd sweet_dashboard_project
$ bundle install --path=vendor/bundle
$ bundle exec dashing start

プロジェクトのディレクトリ構成

プロジェクトにはいくつかのファイルとディレクトリがありますが、重要なのは以下の3つのディレクトリです。

  • dashboards:ウィジェットの配置を定義するHTML (eRuby)
  • jobs:Rubyで書かれたサーバーサイドのジョブ
  • widgets:HTML / SCSS / CoffeeScriptで書かれた一つ一つのウィジェット

レイアウト

ウィジェットの配置はHTMLで記述します。<li>で配置やサイズを記述し、<div>ウィジェットの種類やそのパラメータを記述します。

以下は、オレンジ色のテキストを表示するウィジェットと、紫色のSynergyのメーターのウィジェットの例です。

dashboards/sample.erbより抜粋

<li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
  <div data-id="welcome" data-view="Text" data-title="Hello" data-text="This is your shiny new dashboard." data-moreinfo="Protip: You can drag the widgets around!"></div>
</li>

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
  <div data-id="synergy" data-view="Meter" data-title="Synergy" data-min="0" data-max="100"></div>
</li>

ウィジェット

ウィジェットは、HTML / SCSS / CoffeeScriptで記述します。以下は、テキストを表示するウィジェットのHTMLの例です。

widgets/text/text.html

<h1 class="title" data-bind="title"></h1>

<h3 data-bind="text | raw"></h3>

<p class="more-info" data-bind="moreinfo | raw"></p>

<p class="updated-at" data-bind="updatedAtMessage"></p>

データを表示するだけであれば、データ・バインディングを使って簡単にデータを表示できます。

ジョブとHTTP API

サーバーサイドのジョブを以下のようにRubyで書くことができます。SCHEDULERで定期的にジョブを実行し、send_eventでクライアント側のウィジェットに値をプッシュできます。

jobs/twitter.rb

require 'net/http'
require 'json'

search_term = URI::encode('#todayilearned')

SCHEDULER.every '10m', :first_in => 0 do |job|
  http = Net::HTTP.new('search.twitter.com')
  response = http.request(Net::HTTP::Get.new("/search.json?q=#{search_term}"))
  tweets = JSON.parse(response.body)["results"]
  if tweets
    tweets.map! do |tweet|
      { name: tweet['from_user'], body: tweet['text'], avatar: tweet['profile_image_url_https'] }
    end

    send_event('twitter_mentions', comments: tweets)
  end
end

また、ダッシュボードの一番下に表示されているとおり、次のようにしてJSONをPOSTすることで、外部からダッシュボードの値を更新することもできます。

$ curl -d '{ "auth_token": "YOUR_AUTH_TOKEN", "text": "Hey, Look what I can do!" }' \http://localhost:3030/widgets/welcome

iPadをダッシュボードにする

適当なディスプレイが手元になかったので、iPad用にダッシュボードを作ってみました。時計と天気とスケジュールと特に意味のないメーターを表示させています。

f:id:mi_kattun:20130412224548j:plain

実際のところ、iPadはずっとつけておくと電池が持たないし、どこかに持って行ってしまうこともあるのであまり使えてないですが。。

orangain/mydashboard · GitHub 

まとめ

Dashingによって、簡単に綺麗なダッシュボードが作れます。オリジナルのウィジェットを作る際も、面倒なところをほとんど気にせずコードを書けるので、幸せな気持ちになれます。

綺麗に表示させるためには、ディスプレイのサイズに合わせてウィジェットのサイズや文字のサイズを調整しないといけない点は、改善の余地があると思いますが。

 

iPad用に作ったダッシュボードの他に、勤務先でもDashingでダッシュボードを使って情報を表示させていますが、やはり綺麗に表示されているといろんな人が興味を持ってくれるのでよいです。

この記事 にあるような、大きなディスプレイが使えるといいのですが、簡単には買ってもらえません。仕方なく20インチ程度のディスプレイにダッシュボードを表示させていますが、近づかないとよく見えないので、チーム全員で共有する用途には難しいなーと思ってます。

大きなディスプレイが欲しいです。

参考: