// Skrrs portal — Search results. Responsive. const { PropertyCard: SPCard, Button: SButton, Select: SSelect, Tag: STag, Checkbox: SCheck, Badge: SBg } = window.SkrrsDesignSystem_6013e8; const TYPE_TABS = [ { key:'all', label:'すべて' }, { key:'office', label:'オフィス' }, { key:'retail', label:'店舗' }, { key:'rnd', label:'教室' }, { key:'industrial', label:'倉庫' }, { key:'datacenter', label:'工場' }, ]; // こだわり条件（チップ・サイドバー共通）。判定関数までセットで定義＝全て実動作 const FEATURE_FILTERS = [ { key:'zero', label:'仲介手数料0円', test:p=>!!p.zeroCommission }, { key:'inuki', label:'居抜き・セットアップ', test:p=>!!(p.flags&&p.flags.inuki) }, { key:'new', label:'NEW物件', test:p=>!!p.isNew }, { key:'parking', label:'駐車場あり', test:p=>!!(p.flags&&p.flags.parking) }, { key:'h24', label:'24時間利用可', test:p=>!!(p.flags&&p.flags.h24) }, { key:'power', label:'電力増設可', test:p=>!!(p.flags&&p.flags.power) }, ]; const RENT_STEPS = [5000,10000,15000,20000,25000,30000,50000]; const SIZE_STEPS = [10,20,30,50,80,100,150]; const rentOf = p => (p.rentNum>0 ? p.rentNum : (parseInt(String(p.rent).replace(/[^0-9]/g,''),10)||0)); const sizeOf = p => (p.sizeNum>0 ? p.sizeNum : (parseFloat(p.size)||0)); // ── 地図パネル（Leaflet + OSM）：絞り込み結果の物件をピン表示。ピン→ポップアップ→詳細へ ── function ResultsMap({ list, onOpen }) { const { isMobile } = window.useViewport(); const [open, setOpen] = React.useState(true); const mapRef = React.useRef(null); const mapObj = React.useRef(null); const layerRef = React.useRef(null); const pts = list.filter(p => p.lat && p.lng); const ptsKey = pts.map(p=>p.id).join(','); // 緯度経度を持つ物件が1件も無いときは、空の日本地図が出るだけなのでパネルごと出さない。 // 物件データに lat / lng を入れれば自動で表示される。 const hasPts = pts.length > 0; React.useEffect(() => { if (!open) return; let tries = 0, cancelled = false; const init = () => { if (cancelled) return; if (!window.L) { if (tries++ < 24) setTimeout(init, 250); return; } // Leaflet読込待ち if (!mapRef.current) return; if (!mapObj.current) { mapObj.current = window.L.map(mapRef.current, { scrollWheelZoom: false }); window.L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap', maxZoom: 18, }).addTo(mapObj.current); layerRef.current = window.L.layerGroup().addTo(mapObj.current); } const g = layerRef.current; g.clearLayers(); if (!pts.length) { mapObj.current.setView([35.60, 139.60], 9); return; } pts.forEach(p => { const m = window.L.marker([p.lat, p.lng]).addTo(g); m.bindPopup( '
' + '
' + p.name + '
' + '
' + p.typeLabel + '・' + p.size + '・' + p.rent + '
' + '詳細を見る ›
' ); }); const b = window.L.latLngBounds(pts.map(p=>[p.lat,p.lng])); mapObj.current.fitBounds(b, { padding:[34,34], maxZoom: 14 }); setTimeout(()=>{ if (mapObj.current) mapObj.current.invalidateSize(); }, 250); }; init(); return () => { cancelled = true; }; }, [open, ptsKey]); // ポップアップ内「詳細を見る」→ 物件詳細へ React.useEffect(() => { const h = (e) => { const a = e.target && e.target.closest ? e.target.closest('.sk-map-open') : null; if (a) { e.preventDefault(); const p = list.find(x => x.id === a.getAttribute('data-pid')); if (p) onOpen(p); } }; document.addEventListener('click', h); return () => document.removeEventListener('click', h); }, [ptsKey]); // 画面遷移時にマップを破棄 React.useEffect(() => () => { if (mapObj.current) { mapObj.current.remove(); mapObj.current = null; layerRef.current = null; } }, []); if (!hasPts) return null; return (
地図から探す {pts.length}件を表示中
{open &&
}
); } function SearchScreen({ initialType = 'all', saved, onToggleSave, onOpen, onNav }) { const D = window.SKRRS_DATA; const { isMobile, isTablet } = window.useViewport(); const [type, setType] = React.useState(initialType); const [feat, setFeat] = React.useState({}); const [sort, setSort] = React.useState('new'); const [showFilters, setShowFilters] = React.useState(false); const [pref, setPref] = React.useState(''); // 都県 const [rentMin, setRentMin] = React.useState(0); const [rentMax, setRentMax] = React.useState(0); const [sizeMin, setSizeMin] = React.useState(0); const [sizeMax, setSizeMax] = React.useState(0); const [kw, setKw] = React.useState(''); // フリーワード（物件名/住所/駅） React.useEffect(()=>{ setType(initialType); }, [initialType]); const activeFeats = FEATURE_FILTERS.filter(f=>feat[f.key]); const kwLow = kw.trim().toLowerCase(); const list = D.properties .filter(p => type === 'all' || p.type === type) .filter(p => !pref || String(p.area||'').indexOf(pref) === 0) .filter(p => { const r = rentOf(p); return (!rentMin || r >= rentMin) && (!rentMax || r <= rentMax); }) .filter(p => { const s = sizeOf(p); return (!sizeMin || s >= sizeMin) && (!sizeMax || s <= sizeMax); }) .filter(p => activeFeats.every(f => f.test(p))) .filter(p => !kwLow || [p.name,p.area,p.access,p.station,p.ward].some(v => String(v||'').toLowerCase().indexOf(kwLow) >= 0)) .sort((a,b) => sort==='low' ? rentOf(a)-rentOf(b) : sort==='high' ? rentOf(b)-rentOf(a) : sort==='size' ? sizeOf(b)-sizeOf(a) : sort==='sizeAsc' ? sizeOf(a)-sizeOf(b) : (b.isNew?1:0)-(a.isNew?1:0)); // 新着順＝NEWを先頭に const cols = isMobile ? 2 : isTablet ? 2 : 3; const clearAll = () => { setFeat({}); setPref(''); setRentMin(0); setRentMax(0); setSizeMin(0); setSizeMax(0); setKw(''); setType('all'); }; const hasCond = pref || rentMin || rentMax || sizeMin || sizeMax || kwLow || activeFeats.length || type!=='all'; // ── ページネーション（実装）：12件/ページ。フィルタ変更で1ページ目へ戻す ── const PER_PAGE = 12; const [pageN, setPageN] = React.useState(1); React.useEffect(()=>{ setPageN(1); }, [type, pref, rentMin, rentMax, sizeMin, sizeMax, kwLow, sort, activeFeats.length]); const totalPages = Math.max(1, Math.ceil(list.length / PER_PAGE)); const curPage = Math.min(pageN, totalPages); // 件数減でページが消えても安全 const paged = list.slice((curPage-1)*PER_PAGE, curPage*PER_PAGE); const goPage = (n) => { setPageN(n); window.scrollTo({ top: 0, behavior: 'smooth' }); }; // 表示するページ番号：現在±2＋先頭末尾（1000件規模でも並びが破綻しない窓表示） const pageNums = []; for (let n = 1; n <= totalPages; n++) { if (n === 1 || n === totalPages || Math.abs(n - curPage) <= 2) pageNums.push(n); else if (pageNums[pageNums.length-1] !== '…') pageNums.push('…'); } const rangeRow = (label, minV, setMin, maxV, setMax, steps, fmt) => (
{label}
setMin(Number(e.target.value)||0)} options={[{value:'',label:'下限なし'}].concat(steps.map(v=>({value:String(v),label:fmt(v)})))} /> 〜 setMax(Number(e.target.value)||0)} options={[{value:'',label:'上限なし'}].concat(steps.map(v=>({value:String(v),label:fmt(v)})))} />
); const FilterPanel = (
絞り込み条件 {hasCond && }
フリーワード setKw(e.target.value)} placeholder="駅名・エリア・物件名など" style={{ width:'100%', boxSizing:'border-box', padding:'10px 12px', border:'1.5px solid var(--border-default)', borderRadius:'var(--r-sm)', font:'var(--fw-regular) var(--t-sm)/1.4 var(--font-body)', color:'var(--text-strong)', outline:'none' }} />
setPref(e.target.value)} options={[{value:'',label:'すべて'}].concat((D.areas||[]).map(a=>({value:a,label:a})))} /> {rangeRow('賃料（坪単価）', rentMin, setRentMin, rentMax, setRentMax, RENT_STEPS, v=>'¥'+v.toLocaleString())} {rangeRow('面積（坪・㎡）', sizeMin, setSizeMin, sizeMax, setSizeMax, SIZE_STEPS, v=>v+'坪（約'+Math.round(v*3.3058)+'㎡）')}
こだわり条件 {FEATURE_FILTERS.map(f=>( setFeat(s=>({...s,[f.key]:!s[f.key]}))} /> ))}
{isMobile && } onClick={()=>setShowFilters(false)}>この条件で検索（{list.length}件）}
); // 宅建業法25条：供託／分担金の納付・届出が完了するまで物件広告は掲載できない。 // data.js の release.properties を true にすると検索結果が公開される。 if (!(D.release || {}).properties) { return (
onNav('home')}>ホーム 賃貸物件を探す

賃貸物件を探す
); } return (
{/* breadcrumb + title */}
onNav('home')}>ホーム 物件を探す

物件を探す

{list.length} 件
{/* type tabs */}
{TYPE_TABS.map(t=>{ const on = type===t.key; return ( ); })}
{/* 非公開物件バナー（表示件数の外に希少在庫がある＝問い合わせ動機） */}
Webに出ていない物件も、お探しします。 業者間の流通ネットワーク、大手仲介会社の取扱物件、シェアオフィスまで。ご希望の条件をお聞かせいただければ、担当エージェントより個別にご案内します。
} onClick={()=>onNav('contact')}>非公開物件を相談する
{/* ── Filter rail ── */} {isMobile ? (
} onClick={()=>setShowFilters(v=>!v)}> 絞り込み条件{showFilters?'を閉じる':'を開く'} {showFilters &&
{FilterPanel}
}
) : ( )} {/* ── Results ── */}
{/* 地図（絞り込み結果と連動・ピン→詳細） */}
{FEATURE_FILTERS.map(f=>( setFeat(s=>({...s,[f.key]:!s[f.key]}))}>{f.label} ))}
並び替え
setSort(e.target.value)} options={[{value:'new',label:'新着順'},{value:'low',label:'賃料が安い順'},{value:'high',label:'賃料が高い順'},{value:'sizeAsc',label:'面積が狭い順'},{value:'size',label:'面積が広い順'}]} />
{list.length === 0 && (
条件に合う公開物件が見つかりませんでした Webに出ていない物件からも、ご条件に合うものを担当エージェントがお探しします。条件を少し緩めていただくか、お気軽にご相談ください。
} onClick={()=>onNav('contact')}>この条件で相談する 条件をクリア
)}
{paged.map(p=>{ const n = parseFloat(p.size); // 収容人数の目安は、人が滞在する用途にだけ出す。 // 倉庫・工場に「◯〜◯名」を出しても意味がなく、かえって不正確に見える。 const capTypes = ['office','rnd']; const cap = (n && capTypes.indexOf(p.type) >= 0) ? `${Math.max(2,Math.round(n*0.4))}〜${Math.round(n*0.6)}名` : null; const specRow = (icon,label,val,wrap)=>(
{label && {label}} {val}
); return (
{/* photo + badges */}
onOpen(p)}>
{p.typeLabel} {p.isNew && NEW} {p.draft && 下書き（未公開）}
{/* body */}

onOpen(p)} style={{ margin:0, cursor:'pointer', font:`var(--fw-bold) ${isMobile?'var(--t-base)':'var(--t-h4)'}/1.4 var(--font-display)`, color:'var(--blue-900)', display:'-webkit-box', WebkitLineClamp:2, WebkitBoxOrient:'vertical', overflow:'hidden' }}>{p.name}

{specRow('pin','', p.area, true)} {specRow('train','', p.access, true)}
{specRow('ruler','面積', p.size)} {cap && specRow('users','人数', cap)}
{p.rent}
{p.zeroCommission &&
仲介手数料0円
}
onOpen(p)}>詳細を見る {!isMobile && } onClick={()=>onNav('contact')}>相談}
); })}
{totalPages > 1 && (
goPage(curPage-1)}> {pageNums.map((n,i)=>( n === '…' ? … : goPage(n)}>{n} ))} goPage(curPage+1)}>
)}
); } function PageBtn({ children, active, disabled, onClick }) { return ( ); } Object.assign(window, { SearchScreen });