前回（実データを流し込んだら、見せ物を道具に作り替えたくなった。nebula.js × Qlik でスーパーストアの赤字を探す）、スーパーストアの実データで、ちゃんと仕事に使えるダッシュボードを作りました。KPI があって、推移があって、地図があって、クリックすれば全部連動する。えらい。真面目。
……で、真面目なものを作ると、反動でふざけたくなるのが人間というものです。
というわけで今回は番外編。実用性？知らない子ですね、という気持ちで、同じダッシュボードを5通りに作り替えてみました。
ルールは1つだけ。
Qlik への接続・ハイパーキューブの定義・連想（クリックで絞り込み）は、実用版とまったく同じ。変えていいのは見た目だけ。
つまり中身は全部、あの真面目なダッシュボードです。頭脳は Qlik のまま、服だけ着替えさせます。いってみましょう。
1. NEON OVERDRIVE ── 全部光らせたら勝ち
まずは一番うるさいやつから。
光る。脈打つ。色相が回る。走査線が走る。KPI の数字はカウントアップしながら出てくる。背景にはオーロラとシンセウェイブの格子床。棒グラフはずっとゆらゆら伸び縮みしていて、バブルは呼吸しています。
仕事中にこれを開いたら、たぶん上司に肩を叩かれます。
で、ここが大事なんですが、これ、ちゃんとクリックで絞り込めます。「テーブル」の棒をクリックすると、光りっぱなしのまま全チャートがテーブルだけの世界に切り替わります。KPI の数字も、光りながらカウントダウンしていきます（利益がマイナスになる瞬間がちょっと気持ちいい）。
ちなみに、線グラフの「うねうね」は線そのものは動かしていません。線の形は実データのまま静止していて、その上を光の彗星が走っているだけです。ふざけていても、データは曲げない。そこだけは守りました。
2. Scroll Story ── スクロールすると描き上がる
次はうってかわって、すりガラス調の上品なやつです。
スクロールすると、チャートが1枚ずつ画面に貼り付いて、スクロール量に合わせて描き上がっていきます。折れ線は左から右へ引かれていき、棒は伸びていき、KPI は0からカウントアップ。よくある「スクロールで語るデータ記事」のあれです。
もちろんこれもクリックで絞り込めます。物語の途中で「テーブルだけで見たい」と思ったら、その場でクリックすれば、そこから先の物語が全部テーブルの話になります。読者参加型。
3. A Data Film ── 同じものに黒い服を着せたら映画になった
……はい、映画です。
種明かしをすると、これ、さっきの Scroll Story と中身がまったく同じです。スクロールの仕組みも、チャートの描き上がり方も同じ。変えたのは、
- 背景を深い黒に、差し色を金に
- 見出しを明朝体の大きな文字に
- 「01」「02」と章番号を振った
これだけ。服を着替えさせただけで、急に「四年間の物語」みたいな顔をし始めました。フォントと配色の力、恐るべし。
4. Kiosk ── 誰も触らなくても回り続ける
会社の受付とか、オフィスの壁のモニターに映っているやつです。
操作は一切不要。チャートが1枚ずつ描き上がっては、次へ、次へ。最後まで行ったら最初に戻って、永遠に回り続けます。右上には時計、下には進行バー。放送っぽさ、大事。
サイネージなので、クリックは絞り込みではなく「一時停止」にしています。気になるチャートで止めて、じっくり眺める用です。
今回の5つの中で、正直これが一番「このまま会議室のモニターに出せる」やつです。ふざけたつもりが、うっかり実用的になってしまいました。
5. Guided Tour ── スポットライトが勝手に解説してくれる
最後はガイドツアー。
実用版とほぼ同じ画面の上に、スポットライトが1枚ずつ当たって、吹き出しで解説してくれます。「まず、全体像から」「なぜ赤字か」……と、ダッシュボードの読み方を順番に教えてくれるやつです。
新しく入った人に「このダッシュボード、どこから見ればいいんですか」と聞かれたときに、黙ってこれを開けばいい。便利。
ただし1つだけ注意があって、吹き出しの文章には「売上2.27億」「テーブルだけが赤字」みたいに数字を直接書いています。なのでツアーの途中で絞り込むと、吹き出しと画面の数字がずれます。ツアー中はおとなしく見ていてください。
種明かし：チャートを「完成形」と「進み具合」に分けただけ
5つもあると大変そうに見えますが、やっていることは大したことありません。
まず、Qlik 側はぜんぶ実用版と同じです。チャートごとにセッションオブジェクト（ハイパーキューブ）を作って、クリックで selectHyperCubeValues、エンジンから changed が来たら描き直す。この部分は5つとも同じコードです。
違うのは描き方だけで、Scroll Story・A Data Film・Kiosk の3つは、各チャートを**「完成形を描く関数」と「進み具合（0〜1）に応じて途中まで見せる関数」のペア**にしています。
{
id: 'kpi',
hc: { /* ハイパーキューブの定義。実用版と同じ */ },
render(layout, el) { /* 完成形を描く */ },
prog(el, dp) { /* dp=0 で何もない、dp=1 で完成。途中は途中まで */ },
}
あとは、この dp を何で動かすかだけです。
- スクロール量で動かす → Scroll Story / A Data Film
- タイマーで動かす → Kiosk
// スクロール版：シーンの中でどこまでスクロールしたかを 0〜1 にして渡す
const p = clamp((window.scrollY - scene.offsetTop) / range, 0, 1);
spec.prog(el, smooth(0.08, 0.82, p));
// キオスク版：経過時間を 0〜1 にして渡す
spec.prog(el, ease(clamp(elapsed / DRAW, 0, 1)));
同じチャートを、スクロールで進めるか、時計で進めるか。それだけの違いで、見た目の体験はまったく別物になります。
Guided Tour はもっと手抜きで、チャートには一切手を入れていません。上にスポットライト用の枠を重ねて、box-shadow: 0 0 0 9999px rgba(0,0,0,.7) で「枠の外側全部」を暗くしているだけです。巨大な影で周りを塗りつぶす、昔からある小技です。
NEON だけは別路線で、アニメーションのループが毎フレーム画面の要素を拾い直して、光らせたり揺らしたりしています。絞り込みでチャートが描き直されても、次のフレームでまた新しい要素を拾うので、演出が途切れません。
まとめ：頭脳と見た目を分けておくと、ここまで遊べる
- 5つとも、Qlik への接続・ハイパーキューブ・連想は実用版とまったく同じ
- 変えたのは見た目だけ。それでも体験はまったく別物になる
- 「完成形」と「進み具合」を分けておけば、スクロールでもタイマーでも動かせる
前編から続けてきたこのシリーズ、結局言いたかったのはずっと同じで、見た目は Web、頭脳は Qlik。頭脳さえ Qlik に任せてしまえば、見た目は真面目にも、ふざけた方向にも、いくらでも振れます。
振り返ると、このシリーズはずっとこんな感じでした。
- 前編：BI でパックマンを作った人が「実務でこそ効く」と言い出す（誰も信じていない）
- 後編：「で、これクリックできるの？」と自分で聞いて、自分で「できました」と答える
- 第3編：急に真面目になって、スーパーストアのテーブルの赤字を突き止める
- 番外編：その反動で、全部光らせる
前編で「実務でこそ効く」と大見得を切ったのに、最後に出てきたのが映画とネオンです。でも、そのネオンの裏でもちゃんと Qlik の連想エンジンが動いていて、テーブルは今日も律儀に -318万円の赤字を出し続けています。光っていようが、明朝体だろうが、数字は1円もズレない。これこそが「見た目は Web、頭脳は Qlik」の一番の証明……ということにしておいてください。
というわけで、シリーズはこれでおしまいです。テーブルの値引き担当の方には、どうか割引率を見直していただきたい。
