소개

먹어 로그의 평가점을 돈으로 팔고 있었던 것이 아닌가 하는 의혹이 화제가 되고 있네요.

자신도 되돌아 보면, 먹어 로그로 평가가 높은데 이마이치였구나라는 가게도 있으면,
먹어 로그에서는 평가가 낮지만 가 보면 대만족! 라는 것도 있었습니다.

이러한 현상으로, 최근에는 Google 지도에서의 가게의 평가를 맞추어 확인하면 좋다! 라는 이야기를 잘 듣게 되었습니다.
친밀한 가게에서 검색해 보면, 적당히 평가수도 있어, 정보도 신뢰할 수 있을 것 같은 느낌입니다.
또 방일 외국인의 코멘트도 있어, 보다 글로벌한 평가가 되고 있습니다.

단지 일일이 Google로 검색하는 것도 귀찮네요.
그래서 한 번의 클릭으로 검색 결과 페이지로 날 수있는 Chrome 확장을 만들려고했습니다.

사용법

다운로드/설치

음식점 찾기 전문가 - Chrome 웹 스토어

처음에는 "먹어 로그 글"이라는 이름으로 생각했지만 화가 났기 때문에 그만두었습니다.
꼭 설치해 보세요!

동작 확인 환경

Windows 10 Pro 64bit
Chrome 77.0.3865.90
로그아웃 상태에서 확인

웹 기술 밖에 사용하지 않기 때문에 Mac에서도 움직일 것.
먹어 로그나 Google의 사양 변경으로 사용할 수 없게 되는 경우가 있습니다.
먹어 로그 URL 규칙 등은 자세하게 조사하고 있지 않기 때문에, 예상외의 페이지에서 실행되어, 에러 등 나가 버리는 페이지가 있을지도 모릅니다.
또 로그인 상태나 유저 속성으로 취득 대상의 DOM이 다르다고 생각되기 때문에, 로그인하고 있는 경우는 에러가 나와 있을지도 모릅니다.

메커니즘

우선 먹어 로그의 페이지상에서 가게명과 주소를 취득합니다.
그런 다음 상점 이름과 주소를 포함한 Google 지도의 검색결과 표시 URL을 생성하고 DOM 작업으로 링크를 추가합니다.
Google의 검색엔진이 우수하기 때문에, 이런 까다로운 검색 방법으로도 제대로 찾아 줍니다.

빠진 포인트

・URL 패턴 매칭으로 정규 표현을 사용할 수 없다
manifest.js라는 파일에서 자바 스크립트가 실행되는 URL을 설정하지만, 정규 표현식을 사용할 수 없습니다.
여기는 싹둑으로 설정한 후, Javascript로부터 location.href로 URL을 취득해, 처리 대상의 페이지인가를 판정하도록(듯이) 했습니다.

개선점

・먹어 로그의 페이지상에 Google의 평가를 병기하는 편이 좋다.
→이를 위해서는 백그라운드에서 HTTP 요청을 던져 응답에서 평가를 꺼낼 필요가있다.
이번에는 빨리 완성하고 싶었기 때문에 생략했습니다.

자세한 것은 조사하고 있지 않습니다만, Google Map의 Places API라고 하는 것으로 가게의 정보를 취득할 수 있는 것처럼,
사용할 수 있다면 최상일 수 있습니다.

소스 코드

실수나 개선점이 있으면 지적해 주시면 감사하겠습니다.

main.js

(() => {
    // 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를 만든 경험이 있는 분이라면 낙승이라고 생각됩니다.