// Skrrs portal — Columns (コラム) and News (お知らせ): list + article views. const { Button: CBtn, Badge: CBadge, Tag: CTag } = window.SkrrsDesignSystem_6013e8; // ── Columns list ──────────────────────────────────────────── const COL_KEYWORDS = ['オフィス移転','賃料相場','原状回復','居抜き','フリーレント','商圏分析','床荷重','用途地域','初期費用','ハイブリッドワーク']; function ColumnsScreen({ onNav, onOpenColumn }) { const D = window.SKRRS_DATA; const { isMobile, isTablet } = window.useViewport(); const [cat, setCat] = React.useState('all'); const cats = [['all','すべて'],['office','オフィス'],['retail','店舗'],['rnd','教室'],['industrial','倉庫'],['datacenter','工場']]; const all = D.columns; const featured = all[0]; const list = all.filter(c => cat==='all' || c.tone===cat).filter(c => c.id !== featured.id || cat!=='all'); const cols = isMobile?1:isTablet?2:2; const ranking = all.slice(0,5); // ── sidebar widgets ── const Sidebar = ( ); return (
{!(D.release||{}).columns ? ( ) : ( {/* ── Featured / pick up ── */} {cat==='all' && ( onOpenColumn(featured)} style={{ cursor:'pointer', display:'grid', gridTemplateColumns: isMobile?'1fr':'1.15fr 1fr', gap:0, marginBottom:'var(--sp-10)', borderRadius:'var(--r-xl)', overflow:'hidden', border:'1px solid var(--border-subtle)', boxShadow:'var(--shadow-md)', background:'var(--surface)' }}>
PICK UP
{featured.cat} {featured.date} {featured.read}

{featured.title}

{featured.excerpt}

続きを読む
)} {/* ── category tabs ── */}
{cats.map(([k,l])=>(setCat(k)}>{l}))}
{/* ── main grid + sidebar ── */}
{list.map(c=>( onOpenColumn(c)} style={{ cursor:'pointer', display:'flex', flexDirection:'column', minWidth:0, background:'var(--surface)', border:'1px solid var(--border-subtle)', borderRadius:'var(--r-md)', overflow:'hidden', boxShadow:'var(--shadow-sm)' }}>
{c.cat} {c.date} {c.read}

{c.title}

{c.excerpt}

続きを読む
))}
{Sidebar}
)}
); } // ── 記事本文のレンダラ ─────────────────────────────────────── // body は「文字列（＝段落）」と「オブジェクト」を混在できる。 // '本文' → 段落 // { h2:'見出し' } / { h3:'小見出し' } → 見出し（目次にも載る） // { list:['項目1','項目2'] } → 箇条書き // { note:'補足や注意点' } → 目立たせる囲み // { table:{ head:['列1','列2'], rows:[[..]] } } → 表 // 文字列だけの既存データもそのまま動く（後方互換）。 const blockHeading = (b) => (b && typeof b === 'object') ? (b.h2 || b.h3 || null) : null; const slugOf = (t, i) => 'sec-' + i; function ArticleBody({ blocks }) { const { isMobile } = window.useViewport(); const P = { margin:'0 0 var(--sp-5)', font:'var(--fw-regular) var(--t-base)/1.95 var(--font-body)', color:'var(--text-body)' }; return ( {blocks.map((b,i)=>{ if (typeof b === 'string') return

{b}

; if (!b || typeof b !== 'object') return null; if (b.h2) return (

{b.h2}

); if (b.h3) return (

{b.h3}

); if (b.list) return ( ); if (b.note) return (
{b.note}
); if (b.table && b.table.rows) return (
{b.table.head && ( {b.table.head.map((h,j)=>( ))} )} {b.table.rows.map((r,j)=>( {r.map((cell,k)=>( ))} ))}
{h}
{cell}
); return null; })} ); } // ── 目次（h2 が2つ以上ある記事だけ表示） ───────────────────── function ArticleToc({ blocks }) { const items = blocks.map((b,i)=>({ t: (b && typeof b==='object' && b.h2) || null, id: slugOf('',i) })) .filter(x => x.t); if (items.length < 2) return null; return ( ); } // ── Column article ────────────────────────────────────────── // 本文の文字数から読了時間を算出する（日本語は毎分500字で概算）。 // データに固定値を書くと、加筆しても古い分数のまま残るため、本文から都度計算する。 function readTimeOf(blocks) { let n = 0; (blocks||[]).forEach(b => { if (typeof b === 'string') { n += b.length; return; } if (!b || typeof b !== 'object') return; if (b.h2) n += b.h2.length; if (b.h3) n += b.h3.length; if (b.note) n += b.note.length; if (b.list) b.list.forEach(x => { n += String(x).length; }); if (b.table && b.table.rows) b.table.rows.forEach(r => r.forEach(x => { n += String(x).length; })); }); return Math.max(1, Math.round(n / 500)) + '分'; } // body正規化：CMS(D1)の旧記事は body が「文字列」で来る。配列前提のまま渡すと // readTimeOf/ArticleToc/ArticleBody が落ち、Error Boundaryが無いため全画面が白くなる。 // 文字列は1段落の配列に包む（NewsArticle と同じ扱いに統一）。 const toBlocks = (b) => Array.isArray(b) ? b : (b ? [String(b)] : []); function ColumnArticle({ column, onNav, onOpenColumn }) { const D = window.SKRRS_DATA; const c = column || D.columns[0]; const { isMobile } = window.useViewport(); // 関連記事は同じカテゴリを優先し、足りなければ他カテゴリで補う（最大3件） const rest = D.columns.filter(x => x.id !== c.id); const more = rest.filter(x => x.tone === c.tone).concat(rest.filter(x => x.tone !== c.tone)).slice(0,3); const blocks = toBlocks(c.body); const readTime = readTimeOf(blocks); return (
{/* 下書きプレビュー帯（管理者プレビューでのみ c.draft が立つ） */} {c.draft && (
下書きプレビュー — この記事はまだ公開されていません（管理者にのみ表示中）
)}
{c.cat} {c.date} {c.updated && ( 更新 {c.updated} )} {readTime} {c.author}
{/* 記事の写真はページ上部のヘッダーで既に大きく出しているため、ここでは繰り返さない */}

{c.excerpt}

この記事の内容について、個別にご相談いただけます

記事はあくまで一般的な内容です。実際の物件や契約条件によって判断は変わります。ご相談は無料ですので、具体的な状況をお聞かせください。

} onClick={()=>onNav('contact')}>無料で相談する
} onClick={()=>onNav('columns')}>コラム一覧へ戻る

関連記事

{more.map(m=>( onOpenColumn(m)} style={{ cursor:'pointer', display:'flex', flexDirection:'column', background:'var(--surface)', border:'1px solid var(--border-subtle)', borderRadius:'var(--r-md)', overflow:'hidden', boxShadow:'var(--shadow-sm)' }}>
{m.cat} {m.title}
))}
); } // ── News list ─────────────────────────────────────────────── function NewsScreen({ onNav, onOpenNews }) { const D = window.SKRRS_DATA; const { isMobile } = window.useViewport(); return (
{!(D.release||{}).news ? ( ) : (
{D.news.map((n,i)=>( onOpenNews(n)} style={{ cursor:'pointer', display:'flex', gap:16, alignItems:'flex-start', padding:'var(--sp-5)', borderBottom: i {n.date} {n.tag} {n.text} ))}
)}
); } // ── News article ──────────────────────────────────────────── function NewsArticle({ item, onNav, onOpenNews }) { const D = window.SKRRS_DATA; const n = item || D.news[0]; // body は文字列でも配列でも受ける（配列なら見出し・箇条書き・表が使える） const blocks = Array.isArray(n.body) ? n.body : [n.body || '']; const others = D.news.filter(x => x.id !== n.id).slice(0, 3); return (
{n.tag} {n.date}
ご不明な点は、お気軽にお問い合わせください } onClick={()=>onNav('contact')}>お問い合わせ
{others.length > 0 && (

ほかのお知らせ

)}
} onClick={()=>onNav('news')}>お知らせ一覧へ戻る
); } // ArticleBody / ArticleToc は PrivacyScreen（InfoPages.jsx）でも使うため公開する。 Object.assign(window, { ColumnsScreen, ColumnArticle, NewsScreen, NewsArticle, ArticleBody, ArticleToc });