はじめに
まずはデモを見てくれ！デスクトップPCなどの大きい画面で見るのがおすすめです。
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のメーターのウィジェットの例です。
<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の例です。
<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でクライアント側のウィジェットに値をプッシュできます。
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用にダッシュボードを作ってみました。時計と天気とスケジュールと特に意味のないメーターを表示させています。
実際のところ、iPadはずっとつけておくと電池が持たないし、どこかに持って行ってしまうこともあるのであまり使えてないですが。。
まとめ
Dashingによって、簡単に綺麗なダッシュボードが作れます。オリジナルのウィジェットを作る際も、面倒なところをほとんど気にせずコードを書けるので、幸せな気持ちになれます。
綺麗に表示させるためには、ディスプレイのサイズに合わせてウィジェットのサイズや文字のサイズを調整しないといけない点は、改善の余地があると思いますが。
iPad用に作ったダッシュボードの他に、勤務先でもDashingでダッシュボードを使って情報を表示させていますが、やはり綺麗に表示されているといろんな人が興味を持ってくれるのでよいです。
この記事 にあるような、大きなディスプレイが使えるといいのですが、簡単には買ってもらえません。仕方なく20インチ程度のディスプレイにダッシュボードを表示させていますが、近づかないとよく見えないので、チーム全員で共有する用途には難しいなーと思ってます。
大きなディスプレイが欲しいです。
参考：