#はじめに
食べログの評価点をお金で売っていたんじゃないかという疑惑が話題になっていますね。
自分も振り返ってみると、食べログで評価が高いのにイマイチだったなぁというお店もあれば、
食べログでは評価が低いけど行ってみたら大満足！ということもありました。
このような現状で、最近ではGoogleマップでのお店の評価を合わせて確認すると良い！という話をよく聞くようになりました。
身近なお店で検索してみると、そこそこ評価数もあり、情報も信頼できそうな感じです。
また訪日外国人のコメントなどもあり、よりグローバルな評価となっています。
ただいちいちGoogleで検索かけるのも面倒ですよね。
そこでワンクリックで検索結果のページに飛べるChrome拡張をつくってみました。
#使い方
#ダウンロード/インストール
飲食店探しの達人 - Chrome ウェブストア
最初は「食べログーグル」という名前で考えてましたが、怒られそうなのでやめました笑
ぜひインストールしてみてください！
#動作確認環境
Windows 10 Pro 64bit
Chrome 77.0.3865.90
ログアウト状態で確認
Webの技術しか使っていないので、Macでも動くはず。
食べログやGoogleの仕様変更で使えなくなる場合あり。
食べログのURL規則などは詳しく調べてはいないため、想定外のページで実行されて、エラーなど出てしまうページがあるかもしれません。
またログイン状態やユーザー属性で取得対象のDOMが異なると思われるため、ログインしている場合はエラーが出ているかもしれません。
#仕組み
まず食べログのページ上から店名と住所を取得します。
その後店名と住所を含めたGoogleマップの検索結果表示用URLを生成し、DOM操作でリンクを追加します。
Googleの検索エンジンが優秀なので、こんな雑な検索方法でもしっかり見つけてくれます。
#ハマったポイント
・URLパターンマッチングで正規表現が使えない
manifest.jsというファイルで、Javascriptの実行対象とするURLを設定するのですが、なんと正規表現が使えません。
こちらはざっくりと設定した上で、Javascriptからlocation.hrefでURLを取得し、処理対象のページかを判定するようにしました。
#改善点
・食べログのページ上にGoogleの評価を併記したほうが良い。
→そのためにはバックグラウンドでHTTPリクエストを投げて、レスポンスから評価を抜き出す必要がある。
今回は早く完成させたかったため省きました。
詳しくは調べていませんが、Google MapのPlaces APIというものでお店の情報を取得できるようなので、
それが使えればベストかもしれません。
#ソースコード
間違いや改善点があればご指摘いただけると幸いです。
(() => {
// manifest.jsonでは細かなURLパターンマッチングを指定できない
// 改めてURLを厳密にチェックする
// URLが対象外の場合は処理を終了する。
const pattern = new RegExp('https://tabelog\\.com/.*/.*/.*/[0-9]{8}/');
if(pattern.test(location.href) === false){return;}
// お店の住所を取得する
// プレーンテキストではないため、HTMLの状態からテキストのみを抜き出す
const getShopAddress = () => {
const shopAddressNodes = document.getElementsByClassName('rstinfo-table__address')[0].childNodes;
let shopAddress = '';
for(let i = 0; i < shopAddressNodes.length; i++) {
if(shopAddressNodes[i].tagName !== 'SPAN'){continue;}
shopAddress += shopAddressNodes[i].innerText;
}
return shopAddress;
}
// リンク先URLの生成
const shopName = document.getElementsByClassName('display-name')[0].innerText;
const shopAddress = getShopAddress();
const googleUrl = 'https://www.google.co.jp/maps/search/' + shopName + shopAddress;
// タグの生成
const p = document.createElement('p');
const a = document.createElement('a');
a.href = googleUrl;
a.innerText = 'Googleで検索';
a.target = "_blank";
a.rel = "noopener noreferrer";
// タグの挿入先取得
const targetDom = document.getElementsByClassName('rdheader-rstname')[0];
// タグの挿入
p.appendChild(a);
targetDom.appendChild(p);
})();
#おわりに
自分で作っていうのもアレですが、なかなか便利です。
また初めてChromeの拡張作りましたが、思ったより簡単につくれる！
勝手に敷居が高いものだと思っていましたが、そんなことなかったです。
GreasemonkeyなどのUserScriptを作った経験がある方でしたら楽勝だと思われます。