はじめに

タピオカが昨年からブームとなっている中、タピオカ店が今年急速に増えて、夏がピークと感じています。都心のどこでも行列が長いタピオカ店が見かけて、Qiitaでタピオカをめぐっていろいろな面白い記事が出てきます。

タピオカが大好きなので、東京におけるタピオカ店の分布と人気店舗が一目でわかるダッシュボード「タピオカマップ」を作ってみました。

手順は
①Octoparseで【Rettyグルメ】から東京のタピオカ店のデータ情報を抽出する
②Excelでデータを加工する
③FineReportでダッシュボードを作成する

ことになります。
出来上がったダッシュボードは以下に示します。

準備

①Octoparseに登録（無料版あり）：コチラ
②FineReportのダウンロード（無料版あり）：コチラ
③ダッシュボード作成の素材：Googleドライブ-ダッシュボードの素材
（ソフトのインストールやアカウント登録などの事前準備はここでは省きますが、公式サイトの説明をご参照ください。）

タピオカ店のデータを取得

今回のデータ収集には、コードを書かなくても簡単にスクレイピングできるツールOctoparseを使ってみました。クリックとドラッグでワークフローを作成し、エクスポート条件を設定し簡単にタピオカ店舗のデータを抽出できます。

ステップ1.　対象のWeb ページを設定する

Octoparseを起動して、ホーム画面の「カスタマイズモード」に表示されている「+ タスク」ボタンをクリックします。
「Webサイト」にRettyのURLを入力し、「URLを保存する」ボタンをクリックします。
下記のURLを使います。
Https://retty.me/restaurant-search/search-result/?free_word_area=東京都&prefecture_code=13&free_word_category=タピオカ&category_type=372

ステップ2.　取得する項目を設定する

今回は店名、住所、最寄駅、行きたい数、オススメ人数、予算を抽出します。

検索結果の一番目の店舗名をクリックすると、緑色に変わり、選択されたことを示します。残りの店舗名は赤色に変わり、類似した要素として識別されたことを示します。すべての店舗名を選択するには、「操作ヒント」で「すべて選択」をクリックします。選択すると、すべての店舗名が緑色で強調表示されます。

各詳細ページからデータを取得するため、「操作ヒント」で「各要素をループクリップする」をクリックします。そうすると、Octoparseは一番目の詳細ページを開きます。

店名をクリックし、「選択した要素のテキストを抽出する」を選択します。同じ手順を繰り返して、このページから住所、最寄駅、予算などの情報を抽出します。

ステップ3.　ページネーションを処理する

もちろん、最初のページだけではなく、すべてのページをスクレイピングしたいのです。すべてのページを抽出するには、ページネーションループを作る必要があります。

Rettyのページネーションには「次へ」ボタンがなく、ページ番号だけがあります。この場合、ページネーションのXPathを変更する必要があります。

ワークフローの「Webページに移動」をクリックして、検索結果ページに戻ります。ページ番号「1」をクリックし、「操作ヒント」から「選択したリンクをループクリップする」を選択します。

ページネーションの「ループアイテム」が作成され、ページ1のXPathも自動作成されました。

//LI[@class='pager_item pager_item--current']/A[1]

ページ番号「2」をクリックしてページ2に、次にページ3に移動させたいので、正しいXPathは次のようになります。新しいXPathに置き換えると、ループアイテムのところに「1」から「2」に変わります。

//LI[@class="pager_item pager_item--current"]/following-sibling::LI[1]/A

これで、スクレイピングのワークフローが完成しました。「抽出の開始」をクリックし、無料アカウントなので、「ローカル抽出」を選択します。データエクスポートの形式はさまざまなタイプが選べますので、好きなものを選択し任意のフォルダにファイルをエクスポートします。

元データの加工

ダッシュボード作成のために、先ほどスクレイピングしたデータを加工し、ほしいフォーマットに変換する必要があります。例えば、重複する値の削除、ヌル値の処理、特定のカラムの選択、新たに計算した値の導出など。ここは、店舗名、エリア、最寄駅、行きたい数、おすすめ数をダッシュボードのデータにしたいので、まずこれらのカラムを選定しましょう。

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

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

タピオカマップ作成

ダッシュボード作成の際に注意すべきポイントについて、前の記事ダッシュボードを作ってみたらそんなに難しくないをご確認ください。

今回はFineReportによるタピオカ店の分布状況のダッシュボードの作り方を詳しく説明します。ExcelのUIに似た画面で、シンプルなドラッグ操作でダッシュボードを設計できます。

タピオカマップから知りたいこと：
各エリアの店舗数
店舗数が一番多いエリア(10個)
各エリアに一番人気の店（5選）
店舗数が一番多い駅（10個）

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

ステップ1．データ接続

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

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

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

（SQLの学習方法について知りたい方はぜひ初心者が押さえておくべきSQLガイドもご覧ください）

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

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

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

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

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

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

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

ここまでダッシュボードは大体完成しましたが、しかし、ほしい情報を表すだけでは不十分です。人の興味をそそるダッシュボードデザインには適切な配色とビジュアル効果がかかせません。

ここで、ダッシュボード全体の背景を暗い色、グラフをやや明るい色、テキストを白色に設定します。最初の素材を利用します。

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

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);