近く一番人気のタピオカ屋は?2019年東京タピオカマップの作り方丨FineReport /* Template Name: singlenew(2019.11.12) */    

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

最終更新日:2020-2-24

去年から、若い女性を中心にタピオカティーがブームとなり、各地特に東京でタピオカ屋が勢いよく展開し、夏場で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』、『ゴンチャ』や『彩茶房』などは高く評価されます。一方、日本生まれのタピオカ店は人気度に弱いことが分かりました。

トップへ

Copyright@2020 Fanruan Software Co.,Ltd

All Rights Reserved