🙆‍♀️

SUUMOで気になる物件を、全部Googleマップ上に表示する方法

2024/08/25に公開

はじめに

こんにちは！引っ越しの物件選びって大変ですよね。
そんな中で、物件の場所をマップで確認したいとき、いちいち住所をコピペして調べるのは面倒ですよね。
なので、気になる物件だけ全部マップ上に表示できるものを作りました(SUUMOに同じ機能があるけどね...)。

動作環境

GoogleChrome:127.0.6533.120（Official Build）（64 ビット）
OS:Windows10
CPU:Core i5-1135G7
メモリ:16GB

すること

下記3つのコードをコピーし、ブックマークのURLに追加する。名前は何でもよい。
適当なページをブックマークに保存し、右クリックから編集で名前とURLを変える。
ブックマークバーに保存しておくと便利。

①『地図ページへ遷移』コード

クリックでコードが表示されます

javascript:(function()%7B%2F%2F redirectToMapPage.js%0A%0A%2F%2F 現在のURLから物件コードを取得%0Afunction getPropertyCode() %7B%0A    var currentURL %3D window.location.href%3B%0A    var codeMatch %3D currentURL.match(%2F%5C%2Fchintai%5C%2F(jnc_%5Cd%2B)%5C%2F%3F%2F)%3B%0A    return codeMatch %3F codeMatch%5B1%5D %3A ''%3B%0A%7D%0A%0A%2F%2F 現在のURLから %3Fbc%3D パラメータを取得%0Afunction getBcParam() %7B%0A    var currentURL %3D window.location.href%3B%0A    var bcMatch %3D currentURL.match(%2F%5B%5C%3F%26%5Dbc%3D(%5B%5E%26%5D*)%2F)%3B%0A    return bcMatch %3F bcMatch%5B1%5D %3A ''%3B%0A%7D%0A%0A%2F%2F 地図・周辺環境ページに遷移%0Afunction redirectToMapPage() %7B%0A    var propertyCode %3D getPropertyCode()%3B%0A    var bcValue %3D getBcParam()%3B%0A    if (propertyCode %26%26 bcValue) %7B%0A        var mapPageURL %3D window.location.origin %2B '%2Fchintai%2F' %2B propertyCode %2B '%2Fkankyo%2F%3Fbc%3D' %2B bcValue%3B%0A        window.location.href %3D mapPageURL%3B%0A    %7D else %7B%0A        console.log('物件コードまたは bc パラメータが見つかりませんでした。')%3B%0A    %7D%0A%7D%0A%0A%2F%2F スクリプト実行%0AredirectToMapPage()%3B%7D)()%3B

②『物件追加』コード

クリックでコードが表示されます

javascript:(function()%7B%2F%2F JSONデータを含む <script> タグを取得%0Avar scriptElement %3D document.getElementById('js-gmapData')%3B%0A%0A%2F%2F 物件名を含む <h1> タグを取得%0Avar propertyNameElement %3D document.querySelector('.section_h1-header-title')%3B%0A%0A%2F%2F 現在のURLを取得%0Avar currentURL %3D window.location.href%3B%0A%0Aif (scriptElement %26%26 propertyNameElement) %7B%0A    %2F%2F スクリプトタグの内容を取得し、JSONとしてパース%0A    var jsonData %3D JSON.parse(scriptElement.textContent)%3B%0A%0A    %2F%2F 緯度と経度を取得%0A    var centerLat %3D jsonData.center.lat%3B%0A    var centerLng %3D jsonData.center.lng%3B%0A%0A    %2F%2F 物件名を取得%0A    var propertyName %3D propertyNameElement.textContent.trim()%3B%0A%0A    %2F%2F 保存するオブジェクトを作成%0A    var locationData %3D %7B%0A        name%3A propertyName%2C%0A        lat%3A centerLat%2C%0A        lng%3A centerLng%2C%0A        url%3A currentURL  %2F%2F URLを追加%0A    %7D%3B%0A%0A    %2F%2F ローカルストレージに保存されたデータを取得%0A    var savedLocations %3D JSON.parse(localStorage.getItem('locations')) %7C%7C %5B%5D%3B%0A%0A    %2F%2F 既に savedLocations がオブジェクト形式の場合は、新しい配列に変換する%0A    if (!Array.isArray(savedLocations)) %7B%0A        var convertedArray %3D %5B%5D%3B%0A        for (var key in savedLocations) %7B%0A            if (savedLocations.hasOwnProperty(key)) %7B%0A                convertedArray.push(savedLocations%5Bkey%5D)%3B%0A            %7D%0A        %7D%0A        savedLocations %3D convertedArray%3B%0A    %7D%0A%0A    %2F%2F 新しいデータを追加%0A    savedLocations.push(locationData)%3B%0A%0A    %2F%2F 更新されたデータをローカルストレージに保存%0A    localStorage.setItem('locations'%2C JSON.stringify(savedLocations))%3B%0A%0A    %2F%2F 成功メッセージをページに表示%0A    var messageDiv %3D document.createElement('div')%3B%0A    messageDiv.textContent %3D 'データがローカルストレージに保存されました%3A ' %2B%0A                             '物件名%3A ' %2B propertyName %2B '%2C ' %2B%0A                             '緯度%3A ' %2B centerLat %2B '%2C ' %2B%0A                             '経度%3A ' %2B centerLng %2B '%2C ' %2B%0A                             'URL%3A ' %2B currentURL%3B%0A    messageDiv.style.position %3D 'fixed'%3B%0A    messageDiv.style.top %3D '10px'%3B%0A    messageDiv.style.right %3D '10px'%3B%0A    messageDiv.style.backgroundColor %3D '%23dff0d8'%3B%0A    messageDiv.style.color %3D '%233c763d'%3B%0A    messageDiv.style.padding %3D '10px'%3B%0A    messageDiv.style.border %3D '1px solid %23d6e9c6'%3B%0A    messageDiv.style.borderRadius %3D '5px'%3B%0A    messageDiv.style.zIndex %3D '1000'%3B %2F%2F 他の要素の上に表示%0A    document.body.appendChild(messageDiv)%3B%0A%0A    %2F%2F 5秒後にメッセージを消す%0A    setTimeout(function() %7B%0A        document.body.removeChild(messageDiv)%3B%0A    %7D%2C 5000)%3B%0A%7D else %7B%0A    console.log('指定された要素が見つかりませんでした。')%3B%0A%7D%7D)()%3B

③『CSV保存』コード

クリックでコードが表示されます

javascript:(function()%7Bfunction downloadCSVFile(content%2C fileName) %7B%0A    var a %3D document.createElement("a")%3B%0A    var file %3D new Blob(%5Bcontent%5D%2C %7B type%3A 'text%2Fcsv' %7D)%3B%0A    a.href %3D URL.createObjectURL(file)%3B%0A    a.download %3D fileName%3B%0A    a.click()%3B%0A%7D%0A%0A%2F%2F ローカルストレージから緯度と経度、物件名、URLを取得%0Avar savedLocations %3D JSON.parse(localStorage.getItem('locations')) %7C%7C %5B%5D%3B%0A%0A%2F%2F 重複を排除するためのセット%0Avar uniqueLocations %3D new Set()%3B%0A%0A%2F%2F 重複しないデータを集めるための配列%0Avar uniqueLocationArray %3D %5B%5D%3B%0A%0A%2F%2F 各データをチェックして重複を排除%0AsavedLocations.forEach(function(location) %7B%0A    var locationKey %3D %60%24%7Blocation.name%7D%2C%24%7Blocation.lat%7D%2C%24%7Blocation.lng%7D%2C%24%7Blocation.url%7D%60%3B%0A    if (!uniqueLocations.has(locationKey)) %7B%0A        uniqueLocations.add(locationKey)%3B%0A        uniqueLocationArray.push(location)%3B%0A    %7D%0A%7D)%3B%0A%0A%2F%2F CSVのヘッダー%0Avar csvContent %3D "物件名%2C緯度%2C経度%2CURL%5Cn"%3B%0A%0A%2F%2F 各データをCSV形式に変換%0AuniqueLocationArray.forEach(function(location) %7B%0A    csvContent %2B%3D %60"%24%7Blocation.name%7D"%2C%24%7Blocation.lat%7D%2C%24%7Blocation.lng%7D%2C"%24%7Blocation.url%7D"%5Cn%60%3B%0A%7D)%3B%0A%0A%2F%2F CSVファイルをダウンロード%0AdownloadCSVFile(csvContent%2C 'locations.csv')%3B%7D)()%3B

名前をつけ、URLにコードを張り付ける

3つそれぞれ行い、ブックマークバーに保存した例

SUUMOで物件を表示する
『地図ページへ遷移』ブックマークをクリックし、地図・周辺環境ページへ移動する
『物件追加』ブックマークをクリックし、物件情報を保存する(保存に成功すると、画面上部にメッセージが表示される)
上記2.3.4を好きなだけ行う(必ず2.3.4の順番で行う)
『CSV保存』ブックマークをクリックし、csvファイルをパソコンに保存する(locations.csvで保存される)

Googleマイマップを表示し、「新しい地図を作成→CREATE→レイヤーを追加→インポート」と進み、先ほどのcsvファイルをインポートする
緯度と経度を設定し、マーカーのタイトルに物件名を選択する
マップ上に物件が全て表示される

簡単に解説

SUUMOの物件情報から物件名・緯度・経度・URLを取得し、ローカルストレージに保存する
ローカルストレージの物件情報をcsv形式に変換しダウンロードする
googleマイマップでcsvを読み込ませて終わり

最後に

本当は『地図ページへ遷移』と『物件追加』プログラムを一緒にしたかったんですけどね...
地図ページへ遷移した時にURLが変わるので、コンソールがリセットされて物件追加コードが動かないんですよね。解決策知ってる方いましたら教えてください。
　あと、ブックマークレット初めて使いましたが便利ですね、これ。コードの書き方とかコンパイラとか色々勉強になりました。下にコンパイル前のJavascript置いておきますので自由に使ってください。

コンパイラ：https://caiorss.github.io/bookmarklet-maker/

①『地図ページへ遷移』コード

クリックでコードが表示されます

// 現在のURLから物件コードを取得
function getPropertyCode() {
    var currentURL = window.location.href;
    var codeMatch = currentURL.match(/\/chintai\/(jnc_\d+)\/?/);
    return codeMatch ? codeMatch[1] : '';
}

// 現在のURLから ?bc= パラメータを取得
function getBcParam() {
    var currentURL = window.location.href;
    var bcMatch = currentURL.match(/[\?&]bc=([^&]*)/);
    return bcMatch ? bcMatch[1] : '';
}

// 地図・周辺環境ページに遷移
function redirectToMapPage() {
    var propertyCode = getPropertyCode();
    var bcValue = getBcParam();
    if (propertyCode && bcValue) {
        var mapPageURL = window.location.origin + '/chintai/' + propertyCode + '/kankyo/?bc=' + bcValue;
        window.location.href = mapPageURL;
    } else {
        console.log('物件コードまたは bc パラメータが見つかりませんでした。');
    }
}

// スクリプト実行
redirectToMapPage();

②『物件追加』コード

クリックでコードが表示されます

// JSONデータを含む <script> タグを取得
var scriptElement = document.getElementById('js-gmapData');

// 物件名を含む <h1> タグを取得
var propertyNameElement = document.querySelector('.section_h1-header-title');

// 現在のURLを取得
var currentURL = window.location.href;

if (scriptElement && propertyNameElement) {
    // スクリプトタグの内容を取得し、JSONとしてパース
    var jsonData = JSON.parse(scriptElement.textContent);

    // 緯度と経度を取得
    var centerLat = jsonData.center.lat;
    var centerLng = jsonData.center.lng;

    // 物件名を取得
    var propertyName = propertyNameElement.textContent.trim();

    // 保存するオブジェクトを作成
    var locationData = {
        name: propertyName,
        lat: centerLat,
        lng: centerLng,
        url: currentURL  // URLを追加
    };

    // ローカルストレージに保存されたデータを取得
    var savedLocations = JSON.parse(localStorage.getItem('locations')) || [];

    // 既に savedLocations がオブジェクト形式の場合は、新しい配列に変換する
    if (!Array.isArray(savedLocations)) {
        var convertedArray = [];
        for (var key in savedLocations) {
            if (savedLocations.hasOwnProperty(key)) {
                convertedArray.push(savedLocations[key]);
            }
        }
        savedLocations = convertedArray;
    }

    // 新しいデータを追加
    savedLocations.push(locationData);

    // 更新されたデータをローカルストレージに保存
    localStorage.setItem('locations', JSON.stringify(savedLocations));

    // 成功メッセージをページに表示
    var messageDiv = document.createElement('div');
    messageDiv.textContent = 'データがローカルストレージに保存されました: ' +
                             '物件名: ' + propertyName + ', ' +
                             '緯度: ' + centerLat + ', ' +
                             '経度: ' + centerLng + ', ' +
                             'URL: ' + currentURL;
    messageDiv.style.position = 'fixed';
    messageDiv.style.top = '10px';
    messageDiv.style.right = '10px';
    messageDiv.style.backgroundColor = '#dff0d8';
    messageDiv.style.color = '#3c763d';
    messageDiv.style.padding = '10px';
    messageDiv.style.border = '1px solid #d6e9c6';
    messageDiv.style.borderRadius = '5px';
    messageDiv.style.zIndex = '1000'; // 他の要素の上に表示
    document.body.appendChild(messageDiv);

    // 5秒後にメッセージを消す
    setTimeout(function() {
        document.body.removeChild(messageDiv);
    }, 5000);
} else {
    console.log('指定された要素が見つかりませんでした。');
}

③『CSV保存』コード

クリックでコードが表示されます

function downloadCSVFile(content, fileName) {
    var a = document.createElement("a");
    var file = new Blob([content], { type: 'text/csv' });
    a.href = URL.createObjectURL(file);
    a.download = fileName;
    a.click();
}

// ローカルストレージから緯度と経度、物件名、URLを取得
var savedLocations = JSON.parse(localStorage.getItem('locations')) || [];

// 重複を排除するためのセット
var uniqueLocations = new Set();

// 重複しないデータを集めるための配列
var uniqueLocationArray = [];

// 各データをチェックして重複を排除
savedLocations.forEach(function(location) {
    var locationKey = `${location.name},${location.lat},${location.lng},${location.url}`;
    if (!uniqueLocations.has(locationKey)) {
        uniqueLocations.add(locationKey);
        uniqueLocationArray.push(location);
    }
});

// CSVのヘッダー
var csvContent = "物件名,緯度,経度,URL\n";

// 各データをCSV形式に変換
uniqueLocationArray.forEach(function(location) {
    csvContent += `"${location.name}",${location.lat},${location.lng},"${location.url}"\n`;
});

// CSVファイルをダウンロード
downloadCSVFile(csvContent, 'locations.csv');

はじめに

動作環境

すること

簡単に解説

最後に

Discussion