近く一番人気のタピオカ屋は？2019年東京タピオカマップの作り方

去年から、若い女性を中心にタピオカティーがブームとなり、各地特に東京でタピオカ屋が勢いよく展開し、夏場で2倍に急増しました。「タピ活」（タピオカドリンクを飲む活動）という言葉が生まれ、SNSで人気のハッシュタグになっています。タピ活する人におすすめのなタピオカリストはネットで色々出ますが、今回はダッシュボードツールFineReportによって、東京におけるタピオカ店の分布と人気店舗が一目でわかる「タピオカマップ」を作りました。その作り方を見ていきましょう。

【関連】ダッシュボードとは？どのように作りますか？
実例から学べる | 経営ダッシュボード作成の際に押さえるべきポイント

タピオカマップの効果

まず出来上がったダッシュボードをご覧ください。

タピオカマップから知りたいこと：

• 各エリアの店舗数
• 店舗数が一番多いエリア(10個)
• 各エリアに一番人気の店（5選）
• 店舗数が一番多い駅（10個）

実現したい効果：
地図でエリアをクリックすると、そのエリアの一番人気の店（5選）を表示します。

ステップ1．Excelデータの加工

ダッシュボード作成のために、店舗データを加工し、ほしいフォーマットに変換する必要があります。例えば、重複する値の削除、ヌル値の処理、特定のカラムの選択、新たに計算した値の導出など。

ここは、店舗名、エリア、最寄駅、行きたい数、おすすめ数をダッシュボードのデータにしたいので、まずこれらのカラムを選定しましょう。

それから、Excelの【重複の削除】機能で重複する店舗の行を削除します。

「住所」と「最寄駅」のカラムから関数【LEFT,RIGHT,FIND】を使ってエリア名と駅名を取り出します。
処理済みのデータは以下に示します。

ステップ2．データ接続

Excelファイルを任意のデータベースに導入し（ここはMySQL）、FineReportで「データ接続定義」で「JDBC」を選択し、必要な情報を入力し、データベースに接続します。

（店舗数が一番多いエリア、各エリアに一番人気の店などのデータはSQL文によって抽出したいので、Excelファイルをデータソースとして接続するのではなく、データベースにインポートし、FineReportで接続してから操作するのが効率的です。）

「＋」⇒「データベースクエリ」を選び、SQL文によってグラフと地図に必要なデータセットを作ります。

ステップ3．グラフと地図作成

「ファイル」⇒「ダッシュボード新規作成」をクリックし、空白のダッシュボードが表示されます。レイアウト方法として、絶対レイアウトと自動調整がありますが、ここは絶対レイアウトを選択します。

帳票ブロック、グラフと地図をツールバーからダッシュボードにドラッグし、サイズと位置をすこし調整します。FineReportに様々なグラフや地図が用意されるので、必要に合わせて選択できます。

東京のタピオカ店舗数を地図で可視化するために、下記のように地図のデータを設定します。

横棒グラフ（行きたい数トップ5の店舗、おすすめ数トップ5の店舗）、バブルチャート（店舗数トップ10のエリア）、帳票ブロック（店舗数トップ10の駅）のデータをそれぞれに設定します。

パレメータの追加によって、地図と二つの横棒グラフを連動させます。つまり、地図上のエリアをクリックすると、そのエリアの行きたい数トップ5の店舗とおすすめ数トップ5の店舗を表示するということです。

ステップ4．スタイル設定と動的効果

ここまでダッシュボードは大体完成しましたが、しかし、ほしい情報を表すだけでは不十分です。人の興味をそそるダッシュボードデザインには適切な配色とビジュアル効果がかかせません。
ここで、ダッシュボード全体の背景を暗い色、グラフをやや明るい色、テキストを白色に設定します。

見出しと各コンポーネントをはっきりさせるために、飾りをつけましょう。

FineReportはビジュアル効果にカスタマイズ性が高いので、ダッシュボードに生き生きさせるために、【店舗数トップ10の駅】にスクロール効果を追加します。

コードは以下の通り：

setTimeout(function() {
$(“div[widgetname=REPORT2]”).find(“#frozen-center”).css(‘overflow-x’, ‘hidden’);
$(“div[widgetname=REPORT2]”).find(“#frozen-center”).css(‘overflow-y’, ‘hidden’);
$(“div[widgetname=REPORT2]”).find(“#frozen-north”).css(‘overflow-x’, ‘hidden’);
$(“div[widgetname=REPORT2]”).find(“#frozen-north”).css(‘overflow-y’, ‘hidden’);
$(“div[widgetname=REPORT2]”).find(“.reportContent”).css(‘overflow-y’, ‘hidden’);
$(“div[widgetname=REPORT2]”).find(“.reportContent”).css(‘overflow-x’, ‘hidden’);
}, 100);
window.flag = true;
setTimeout(function() {
$(“#frozen-center”).mouseover(function() {
window.flag = false;
})
$(“#frozen-center”).mouseleave(function() {
window.flag = true;
})
var old = -1;
var interval = setInterval(function() {
if (window.flag) {
currentpos = $(“div[widgetname=REPORT2]”).find(“#frozen-center”)[0].scrollTop;
if (currentpos == old) {
$(“div[widgetname=REPORT2]”).find(“#frozen-center”)[0].scrollTop = 0;
} else {
old = currentpos;
$(“div[widgetname=REPORT2]”).find(“#frozen-center”)[0].scrollTop = currentpos + 1.5;
}
}
}, 25);
//
}, 1000)
setTimeout(function() {
//帳票ブロックの幅を取得する
var wid = ($(“div[widgetname=’REPORT2′]”).width() – 17) + ‘px’;
//帳票ブロックの幅をリセット
$(“div[widgetname=’REPORT2′]”).css(‘width’, wid);
//帳票ブロックの高さを取得する
var height = ($(“div[widgetname=’REPORT2′]”).height() – 16) + ‘px’;
//帳票ブロックの高さをリセット
$(“div[widgetname=’REPORT2′]”).css(‘height’, height);
}, 1000);

注意を引くためのもう一つの方法は、コンポーネントが十分に息ができるスペースを作ることです。最後に各コンポーネントのサイズと位置を適切に調整しましょう。

まとめ

ダッシュボードから見ると、タピオカ店舗は大部のエリアに展開しますが、主に都心、特に渋谷区と新宿区に分布します。明治神宮前、池袋、渋谷、新宿駅の周りに、たくさんのタピオカ店が見つかります。

東京全体と各エリアの人気店には、台湾カフェ『春水堂』、『The Alley』、『ゴンチャ』や『彩茶房』などは高く評価されます。一方、日本生まれのタピオカ店は人気度に弱いことが分かりました。