SUSURU TV.で紹介されたラーメン屋さんを地図上に可視化してみた🍜🍜🍜【Python✕Folium✕Heroku】

はじめに

作ったもの

上の画像のように、SUSURU TV.で紹介されたラーメン屋さんを地図上にプロットしたWebサイトを公開しました！
ココをクリック！↓

タイトル未設定

背景

昨今、YouTubeを観ない人はいないのでは？というくらいYouTubeは浸透していますね。僕も大好きで、毎日観ています。
在宅勤務の日は勤務中にこっそり観てたりします(おい)

僕はSUSURU TV.　といううめぇラーメン屋を紹介するチャンネルをよく観ます！
食レポの上手さ・面白さ(謎のオノマトペ笑)、またサクサクっと見れるテンポの良い動画が魅力的だと思います。
近場のラーメン屋さんが紹介されてたらテンションバク上がりだし、ちょっと外出するときとか遠出に旅行するときに、近くにすするTVで紹介されてたラーメン屋さんがないかポチポチ検索して、動画を漁ることもしばしばです。

SUSURU TV.

ある日のこと、外出ついでにラーメン屋さんに行きたくなり、YouTubeの検索ボックスに「すするTV 〇〇(地名)」と入れて検索しようとしたときに、
日本地図上に紹介されたラーメン屋を可視化できた方が、もっと手早くラーメン屋さんを探せるのでは？？？ということに気づきました。

思い立てば早い僕、何となくたぶんPythonでいい感じのライブラリあるべ！よし作ってみっか！と一念発起し、気付けば(割と簡単に)それっぽいのが出来上がり、Webサイトとして公開できました！
まだまだ色々課題はありますが(笑)、実装手順についてざっくりと共有していきたいと思います！

概要

使うもの

言語：Python3

必須ライブラリ：Folium, Pandas

クラウド・アプリケーション・プラットフォーム：Heroku

手順１：動画情報を取得する🍜

YouTubeAPIを使って動画情報を取得します。
やり方は以前紹介した下の記事と同じ内容なので割愛とします。
SUSURU TV. の最初期の2015年11月から2021年7月までの2270件の動画を取得しました。

上の記事と同じ要領で、
動画ごとに以下の画像のようなカラムを持つxlsxファイルを出力します。

5店舗分の情報を保存したサンプルも共有します。↓

ramen-data_sample.xlsx

12992 Bytes

ファイルダウンロードについて

ダウンロード

手順２：動画説明欄から店舗名と住所を抽出🍜🍜

手順１で色んなカラムを持つxlsxファイルを取得しましたが、メインで使うのは動画説明欄(description)です。
すするさんは動画説明欄に店舗名と住所を記載してくれています↓

オレンジ枠の箇所を、正規表現等を用いて自動的に抽出していきます。
今回ですと、1890件(2270/件中)の店舗名と住所は自動的に取得しました。
（ソースコードは近日中に共有予定、かなり力技）

手順３：geocoding.jpのAPIを使って、座標位置を取得🍜🍜🍜

geocoding.jpのAPIを使って、地名から緯度と経度を取得します。
超便利。

API操作とかはこの記事を参考にしてください↓

住所から緯度経度を取得するpythonスニペット - Qiita

xlsxファイルは最終的に下のようになりました。

ramen-data_final_sample.xlsx

9447 Bytes

ファイルダウンロードについて

ダウンロード

手順４：foliumを使って可視化！🍜🍜🍜🍜

foliumを使い、ラーメン店の緯度経度情報を地図上にプロットします

基本的な使い方はコチラから↓

foliumの基本的な使い方とオープンデータ活用 - Qiita

foliumに実装されている機能を使い、以下のような地図(.html)を作成しました。

・ラーメン店のアイコンをクリックすると、店名とYouTubeの動画リンクとサムネ画像を表示(下の画像を参照)

・サイト起動時は東京駅の座標を中心に地図を表示
・地図が一定以上縮小している場合は、ラーメン店をクラスター表示
(全店舗名を常に表示するとhtmlのファイルサイズが大きくなり、動作がもっさりするため)
・ミニマップを左下に表示(デフォルトでは表示OFF)。また、スマホでのアクセスの方が多いと考えたため、縦長。

ソースコードはこんなかんじ。簡単に作成できます。

import pandas as pd
from folium import Map, Marker, CustomIcon, LayerControl, Icon, Popup
from folium.plugins import HeatMap, MarkerCluster, MiniMap
import json

# CSVファイル読み込み
df_ramen = pd.read_excel("../input/ramen-data_final_sample.xlsx",sheet_name="note_sample")
df_ramen_ext = df_ramen[~df_ramen.latitude.isna()]
df_ramen_ext.reset_index(drop=True, inplace=True)

# マップ作成
# 初期表示位置設定のための変数用意(tokyo_crd)
tokyo_lat = 35.71
tokyo_lon = 139.7
tokyo_crd = [tokyo_lat, tokyo_lon]

# Map関数からオブジェクトmを作成
m = Map(location=tokyo_crd, zoom_start=7)
# クラスター表示設定
marker_cluster = MarkerCluster(options={'disableClusteringAtZoom': 14})

# ラーメン店のデータをfor文を用いてmに追加する
for i in df_ramen_ext.index:
   crd = [df_ramen_ext.latitude[i],df_ramen_ext.longitude[i]]
   text = df_ramen_ext.thumbnails[i]
   text_replace = text.replace("\'","\"")
   json_df_merged = json.loads(text_replace)
   thumbnails = json_df_merged["default"]["url"]
   Marker(crd, popup=Popup('<p style="text-align:center"><a href="{url}" target="_blank">{name}</a></p>'.format(url=df_ramen_ext.url_video[i],
                                           name=df_ramen_ext.name[i]+'</br></br>'+df_ramen_ext.title[i]+"</br>"+"<img src={}>".format(thumbnails)), 
                                           max_width=300, show=False, sticky=False),icon=Icon(color="lightblue", icon="cutlery")).add_to(marker_cluster)
# クラスター設定をmに追加
marker_cluster.add_to(m) 
# ミニマップ設定をmに追加
MiniMap(toggle_display=True, zoom_level_offset=-4, width=100, height=200, minimized=True).add_to(m)

# 保存
m.save("../output/ramen_map.html")  

手順５：Herokuを使って、Webサイトとして公開！🍜🍜🍜🍜🍜

この記事を参考にしました。

HTMLページをHerokuにデプロイ - Qiita

課題

以下、列挙します。

・全部のお店はプロットできていない
まだ全部はできていないです。
約2500件ほどある動画の内、約1900件程度しかまだマッピングできていません。
残りの分も自動化or手作業で追加していきたいです。
動画によってはラーメン店ではなくインスタントラーメンの紹介動画の場合もあるので、そこらへんの分類もうまくやっていかないとですね...。

・若干重い(3000件程度が限界)
どうやらfolium全般に言えることらしいのですが、プロット数が多くなってくると挙動が重くなります。最初1900件のプロットを全てアイコン表示したところ、サイト表示がとても遅く、実用レベルには全く達していない状況でした。クラスター表示したらファイルサイズも4MBから2MBに減少し、極めて重い挙動は脱しましたが、未だに若干重いですねぇ。
地図可視化の方法は他にも色々あるので、将来的にはfoliumから乗り換えるのも有りかもですね。技術的ハードルは高いかもだけど...

・クラスターをクリックするとうずまき現象が発生する

これはfoliumのクラスター機能あるあるなんですかね？（笑）
画面をズームすると一応直るのですが、根本原因を直したい...

さいごに

最後に感想です。
今回、初めて地図上にデータをプロットするということをやってみましたが、foliumとかHerokuを活用して、ぶじWebサイト表示までたどり着きました！正直な話、出来上がったときは割と嬉しかったです（笑）
まだまだ多くの課題を抱えていますが、時間のあるときにでもアップデートしていきたいです！
また、やってみたいことの一つとして、ラーメン店の評価値(別サイトから取得、例えばラーメンデータベースの点数とか)もプロットする際に重み付けとして与えられれば、より検索しやすくなるんじゃないかなぁと考えています。

それでは、今回は以上です！またネタが出来たら記事にします！
ではでは👋

-----------------------------------------------------------------------------【自己紹介】
IT系のことをメインに呟きます。初心者です。
PythonとかWordPressネタとかが多いと思います。
オードリーの動画まとめサイト(https://matome-odozehi.com)を運営しています。日々開発中。

Twitterもやってます　⇛　https://twitter.com/pipotteru
趣味で作曲しています。作曲用のアカウントはコチラ　⇛　https://twitter.com/tterusic
-----------------------------------------------------------------------------