この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
はじめに
どうも。DI部@大阪オフィスのtamaです。
大阪オフィスは、東京等の他オフィスのメンバーがよく出張で訪れてきます。そんなとき、よく上がる話題の1つが「スーパー玉出」です。関西人にはお馴染みのスーパーマーケットですが、やはり他の地域の方々は、存在を知らなかったり、知ってても行ったことがなかったり、ということがほとんどです。
大阪オフィス民としては、やはり他のオフィスメンバーの方々にも（そして社外の方々にも）、スーパー玉出を知っていただきたいッ…！という想いがあります。
というわけで、スーパー玉出の店舗データを可視化して、皆に見てもらうことにしました。
（毎度のことですが、今回もNo Codingで行います。）
スーパー玉出とは
関西で一番有名なスーパーマーケット
スーパー玉出は、大阪府（と一部兵庫県）に展開しているスーパーマーケットです。…とだけ書くと、ただのスーパーとしか思えませんが、何が凄いかは、下記をご覧ください。
参考情報
とんでもなく癖が強いスーパーであることはご理解いただけたかな？
「ウォークスルー玉出」に想いを馳せる大阪オフィス民
突然ですが、弊社クラスメソッドは、以前より、下記のようなカフェをオープンし、運営しています。
社内でこの話題が出た時、社内Slackの大阪オフィス雑談チャネルで盛り上がった話題が、禁断のウォークスルー玉出です。
ここから、玉出でウォークスルー決済を行ったら…というテーマのトークが繰り広げられました。
「クリオネ？」と思うかもしれませんが、玉出はクリオネが買えるスーパーとしても有名です。
また、リモートワークの合間を縫って、「今から玉出に行ってくる」という猛者も出現。弊社がいかに自由な働き方をしているかが伺えますね。
スーパー玉出の可視化に向けて
さて、スーパー玉出のVizを作ると行っても、そもそもどんなデータがあるかが分からないことには、可視化のネタも思い浮かびません。
どのようなデータが取得できそうか
とりあえず、スーパー玉出のHPを確認します。
1円セールという文字にビビってますか？こんなの玉出では普通ですよ。
お、この店舗情報はそのままデータとして使えそうですね。他に可視化して面白そうなデータも見つかりませんので、ここは玉出の各店舗の位置情報MAPでも作りましょうかね。
どのようなVizが作れそうか
店舗情報なので、地図上に各店舗の場所をプロットしたものが思いつきます。それに加えて、HPに掲載されている営業時間等の付加情報も入れたいですね。
データの取得方法を検討する
肝心の「どうやってこのデータを取得するか」について、大したデータ量ではないので、コピー→Excelとかでもいいのですが、もしかしたら新店舗ができてデータが更新されるかもしれません。そういった可能性も視野にいれるのであれば、ここはこのページをWebスクレイピングして、直接データにしちゃいましょう。
作業の方針
作業の流れ
- Alteryx Designerでスーパー玉出の店舗情報ページをスクレイピングする
- スクレイピングで取得したデータをAlteryx Designerで整形し、hyper形式で出力する
- 出力したhyper形式のデータをTableau Desktopで可視化する
作業環境
- Windows 10 pro（MacのVMware上）
- Alteryx Designer 2019.1
- Tableau Desktop 2019.1.2
参考ブログ
今回の取り組みを行うにあたって、以下のブログがとっっっても参考になりました（これが無かったら玉出Vizは誕生していません）。
truestar様、ありがとうございます！
データの取得（Alteryxサイド）
ワークフロー全体図
今回はこのような形になりました。
スーパー玉出の店舗ページのHTMLを確認
上記ブログにならって、まずは玉出の店舗ページのHTMLを確認します。Chromeの開発ツールを使います。
こんな感じで、データとして取得したい部分が、どう記述されているのか確認しておきます。
ダウンロードツールでHTML全体を取得
テキスト入力ツールで、そのまま店舗ページのURLをぶっこんで…
ダウンロードツールでダウンロードするだけです。
HTMLがそのまま入手できます。
欲しい要素を正規表現ツール（RegEx）で狙い撃ち
今回のキモの部分です。
先程、取得したいデータ周辺のHTMLの構造を確認しました。そして、そのデータの部分だけを抜いてこれるように、正規表現（正規表現ツールで可能）を使います。AlteryxのWebスクレイピングの王道（？）ですね。
まずtrタグだけ取得する
ここからの方法は、人によって千差万別となりますので、あくまで一例として読んでもらえればと思います。
玉出の店舗情報はテーブルタグで書かれています。私は下記の正規表現で、trタグで囲われた部分を取得しました。trタグは横方向を指定するタグなので、ツールのプロパティ設定も「行」を指定します。これで、囲われた部分毎にレコードが生成されます。
店舗単位のデータを分けて取得
玉出の店舗情報には「大阪市内」「大阪府下」「兵庫県」という地区情報が書かれていますが、ここはまず店舗単位のデータに集中したいと思います。玉出の店舗情報には「大阪市内」「大阪府下」「兵庫県」という地域情報が書かれていますが、こちらはcolspanタグですので、それをフィルタツールで弾きます。
店舗名
ここからは私が大国町に住んでいた時代にお世話になっていた大国町店のデータで説明します。trタグで囲われた大国町店データ部分は下記のようになっています。
<tr>
<td class=“daikokucho”><a href=“ [27_daikokucho.html](http://www.supertamade.co.jp/store/27_daikokucho.html) “>大国町店</a></td>
<td class=“add-border”><img src=“ [img/ex-machine/ex-machine_logo_jpy.jpg](http://www.supertamade.co.jp/store/img/ex-machine/ex-machine_logo_jpy.jpg) “ class=“jpy-logoS” alt=“” /></td>
<td class=“”>大阪市浪速区敷津西1丁目3-3</td>
<td class=“”>06-6645-5550</td>
<td class=“”>24時間</td>
</tr>店舗名は、そのまま店舗別ページへのリンク（aタグ）が付与されているので、抜くのは簡単ですね。
外貨両替機があるかどうか
スーパー玉出は外貨両替機が置いてある店舗が存在します。これはフラグとして是非取得したいデータですね。
外貨両替機がある店舗は、外貨両替機のマーク画像があります。HTMLを確認するかぎり、外貨両替機画像の部分はclassがadd-borderとなっているので、そこを狙います。
外貨両替機画像がある店舗はimgタグが、そうでない店舗はnullとなりました。後はフォーミュラツールで、データをフラグっぽくしときます。
IIF(Contains([DownloadData],"jpy-logoS"),1,0)住所、電話番号、営業時間
これらはclassが指定されていません。幸い、この残り3つが全く同じ記述となっているため、一気に取得します。
ポイントは、正規表現ツールのプロパティ設定を「列」にすることです。<td class=“”>というタグはtrタグ毎（すなわちレコード毎）に3つ存在するため、値を3つ一気に取得します。後でTableauに食わせることを考えると、これらのデータはそれぞれ列として持つべきです。ですので、列単位で出力します。
地区情報は諦める
玉出の店舗ページに「地区」という列があります。これは大阪市内だったら区の名称、大阪市外だったら市の名前（場合によっては区名）が入っています。ただ、これはぶっちゃけ私のスキルではどう取得していいかわからなかったため、諦めました。
「地区」はExcelでいうセル結合されたような感じになっています。
<tr>
<td rowspan=“2” id=“ckNaniwaku”>浪速区</td>
<td class=“ebisucho”><a href=“ [37_ebisu.html](http://www.supertamade.co.jp/store/37_ebisu.html) “>恵美須店</a></td>
<td class=“add-border”><img src=“ [img/ex-machine/ex-machine_logo_jpy.jpg](http://www.supertamade.co.jp/store/img/ex-machine/ex-machine_logo_jpy.jpg) “ class=“jpy-logoS” alt=“” /></td>
<td class=“”>大阪市浪速区恵美須西1丁目2-14</td>
<td class=“”>06-6648-0900</td>
<td class=“”>24時間</td>
</tr>
<tr>
<td class=“daikokucho”><a href=“ [27_daikokucho.html](http://www.supertamade.co.jp/store/27_daikokucho.html) “>大国町店</a></td>
<td class=“add-border”><img src=“ [img/ex-machine/ex-machine_logo_jpy.jpg](http://www.supertamade.co.jp/store/img/ex-machine/ex-machine_logo_jpy.jpg) “ class=“jpy-logoS” alt=“” /></td>
<td class=“”>大阪市浪速区敷津西1丁目3-3</td>
<td class=“”>06-6645-5550</td>
<td class=“”>24時間</td>
</tr>最初にtrタグ毎にレコードを分けたため、恵比寿店データには「浪速区」という地区が記述されていますが、そのまま同じ地区である大国町店には浪速区を示すタグはありません。つまり、データ上で、大国町店が浪速区であると紐付けることが困難となってしまいました。
そもそも私は正規表現が大の苦手、HTMLやCSSといったフロント系の知識も皆無（っていうか業務でちょーっとした触ったことがない）ということもあるので、ここは悩むより、潔く諦めました。
地域情報は後で無理やり
こちらも他データと同じやり方で取得するのは諦めました。
「大阪市内」という文字列だけとっても、データ上、どの店舗に「大阪市内」が紐づくのか分からないためです（例えば、各行毎に「大阪市内」と書かれていれば楽だった）。
このデータに関しては、後で無理やり付与します。
データを整える
必要なデータをそれぞれ抜き出せたら、それらをくっつけるため、複合ジョインツールでJOINします。「結合キー無くない？」って感じですけれども、今回のデータはスクレイピングで「上から順に」とってきています。だからキーではなく「レコードポジションで結合」や！
空白等をデータクレンジングツールで掃除した後、地域情報を無理やり付与します。どうやるのかって、以下の計算をフォーミュラツールで行うだけやないかい！
IF Left([住所], 3) == "大阪市" then "大阪市内"
ELSEIF Left([住所], 3) == "兵庫県" then "兵庫県"
ELSE "大阪府下"
ENDIF最初は「玉出に新店舗ができてもそのまま対応できるように」と言って構築しはじめたワークフローですが、すっかり汎用性のないワークフローになっちゃいました（細かいことは気にせんほうがええ）。
ジオコーディングして店舗の緯度経度を取得
データ自体はキレイに出揃ったのですが、今回は「店舗MAP」を作ります。地図上に店舗をプロットするためには、緯度経度が必要です。そのため、住所からジオコーディングする必要があります。しかし、住所から緯度経度を出してくれるAPIは、どれも規約が厳しく（二次利用禁止が多い）、なかなか困りました。海外のサービスもあるのですが、日本の住所を入れても精度が激低で使い物になりません。
そこで役に立ったのがこちらのマクロ。詳細は上記で紹介したtruestar様のブログをチェックしてください。神マクロです。
MapFanのAPIキー（要登録）を入れるだけで、住所から緯度経度を導き出してくれます。
そして最終的に下記のようなデータとなりました。
マッチング精度がほとんど号レベルで、素晴らしい結果となりました。1つだけ「条丁目レベル」ですが、まあこのくらいはもういいでしょう（なんやそれ）。
ってなわけで、このデータをhyperとして出力して、Tableau DesktopでVizを作ります。
データの可視化（Tableauサイド）
何をどのように可視化するか
スクレイピングして得たデータから、以下の情報がわかるダッシュボードを作ろうと思います。
- 店舗の場所がわかる地図
- 地域別店舗数の棒グラフ
- 営業時間別店舗数の棒グラフ
ダッシュボードを玉出カラーに染め上げる
構造自体は、もはや解説するまでもないくらい簡単なものですが、問題はダッシュボードのカラーリングです。玉出の大きな特徴の1つが、その圧倒的な極彩色！玉出のダッシュボードなのですから、このダッシュボードも玉出カラーに染め上げないとダメでしょう。
玉出のカラーを調べるため、以下のChrome拡張機能を使って玉出カラーを調査します。
このカラーピッカーを使って、玉出HPの黄、赤、青のカラーコードを調べて、そのままダッシュボードに適用しました（せっかくなので玉出カラーを載せておきます）。
- 黄色：
#ffff00 - 赤色（文字色）：
#03a5e7 - 青色（ひまわりロゴの周り）:
#de0711
完成
棒グラフがフィルタになっているため、選択すると絞り込めます（例：24時間営業の部分を選択すると、他のビューも24時間営業の玉出だけに絞り込まれる）
24時間営業している店舗が非常に多い！ほんとに助かりますね〜。
おわりに
このダッシュボードを作成している間、異常に目がチカチカしておりましたが、何とか慣れました。スーパー玉出が気になったそこの君、いつでも来てええんやで。
3
