function getFeaturedImage(item, fallback) { return (item && item._embedded && item._embedded["wp:featuredmedia"] && item._embedded["wp:featuredmedia"][0] && item._embedded["wp:featuredmedia"][0].source_url) || fallback; } function getTermName(item, taxonomy) { const groups = (item && item._embedded && item._embedded["wp:term"]) || []; for (const group of groups) { const t = group.find((t) => t.taxonomy === taxonomy); if (t) return t.name; } return ""; } function stripTags(html) { // タグ除去に加え、WordPressが変換した文字参照（’ など）も元の文字に戻す return (new DOMParser().parseFromString(html || "", "text/html").body.textContent || "").trim(); } // 本文データ（Figma 450:1037配下。Q3/A3はFigma原文のタイポ（Q2と同文）をそのまま再現） const ARTICLE = { category: "若手社会人 / INTERVIEW", title: "会社を辞めずに、小さく試してみた。", mainImage: "/wp-content/themes/original/assets/story-photo-worker.png", mainImageCrop: { h: "150%", left: "-21.26%", top: "-8.18%", w: "128.98%" }, lead: { heading: "仕事帰りと休日に、小さく。「好き」から始まった、まち歩きの会。", body: "会社と家を往復する毎日に、少しだけ変化がほしかった。長崎で働く田中さんが、趣味のまち歩きを通じて始めた、小さな挑戦について聞きました。", }, qaBlock1: [ { q: "——何かを始めたいと思ったきっかけは？", a: [ "仕事に不満はなかったのですが、「職場以外にも、新しい人と出会える場所があったらいいな」と思っていました。でも、特別なスキルもないし、自分が何かを企画するイメージはなかったですね。", "そんなとき、趣味のまち歩きの写真を見た友人から「今度、連れていってよ」と言われて。「土曜日、一緒に歩かない？」と声をかけたのが始まりです。", ], }, { q: "——実際にやってみて、どうでしたか？", a: [ "最初は私を含めて3人で、好きな道やお店を巡りました。「一人では来なかった場所に来られた」と喜んでもらえて、うれしかったです。", "一方で、張り切って予定を詰め込みすぎた回もありました。それからは行き先を減らして、おしゃべりや寄り道を楽しめる余裕をつくっています。", ], }, { q: "——実際にやってみて、どうでしたか？", a: [ "最初は私を含めて3人で、好きな道やお店を巡りました。「一人では来なかった場所に来られた」と喜んでもらえて、うれしかったです。", "一方で、張り切って予定を詰め込みすぎた回もありました。それからは行き先を減らして、おしゃべりや寄り道を楽しめる余裕をつくっています。", ], }, ], midImage: "/wp-content/themes/original/assets/story-photo-worker.png", section2: { heading: "無理なく続けたら、自分の「好き」が見えてきた。", qaBlock: [ { q: "——仕事とは、どう両立していますか？", a: [ "毎月必ず開催するとは決めず、余裕があるときに声をかけています。準備も休日の散歩の延長で、友人にも相談しながら。無理をしないことが、続けるコツなのかなと思います。", "始めてみて、まち歩きだけでなく、人と人が打ち解けていく時間も好きなんだと気づきました。次は参加した人のおすすめの道を歩いてみたいですね。", ], }, { q: "——何かを始めたい人に、ひと言お願いします。", a: [ "私の最初の一歩は、一通のメッセージでした。大きな目標がなくても、好きなことを誰かに話したり、気になる場所へ行ったりするところからでいいと思います。", "やってみたあとに、次の「やってみたい」が見つかることもありますよ。", ], }, ], }, }; // Q&Aブロック（Figma 450:1202/450:1217/450:1221など共通構造） function QaBlock({ q, a }) { return (

{q}

{a.map((paragraph, i) => (

{paragraph}

))}
); } // 02｜ストーリー詳細 本文（Figma 450:1037）。WP投稿が取得できればその内容を、できなければFigma由来の静的データを表示する function ArticleBody() { const [post, setPost] = useState(null); useEffect(() => { if (typeof CURRENT_STORY_ID === "undefined" || !CURRENT_STORY_ID) return; fetch(`${WP_API}/wp/v2/story/${CURRENT_STORY_ID}?_embed`) .then((r) => (r.ok ? r.json() : null)) .then((data) => { if (data) setPost(data); }) .catch(() => {}); }, []); const category = post ? `${getTermName(post, "story_category") || "INTERVIEW"} / INTERVIEW` : ARTICLE.category; const title = post ? stripTags(post.title.rendered) : ARTICLE.title; const mainImage = post ? getFeaturedImage(post, ARTICLE.mainImage) : ARTICLE.mainImage; return (

{category}

{title}

{post ? ( ) : ( )}
{post ? (
) : ( <>

{ARTICLE.lead.heading}

{ARTICLE.lead.body}

{ARTICLE.qaBlock1.map((qa, i) => (
))}

{ARTICLE.section2.heading}

{ARTICLE.section2.qaBlock.map((qa, i) => ( ))}
)}

ストーリー一覧へ

); } function App() { const [mobileOpen, setMobileOpen] = useState(false); return ( <>
setMobileOpen(true)} />