// 案 F: Minimal — はてなブログ風の引用ベース + OGPサムネイル埋め込み // 各作品リンクのOGP画像を Microlink API 経由で取得し、はてなブログの埋め込みカード風に表示 const { useState: useStateM, useEffect: useEffectM } = React; // 軽量OGPフェッチフック — Microlink (free tier, CORS有効) を使用 function useOGP(url, manualThumbnail) { const [data, setData] = useStateM(null); useEffectM(() => { if (manualThumbnail) { setData({ image: { url: manualThumbnail } }); return; } if (!url) return; let alive = true; fetch(`https://api.microlink.io/?url=${encodeURIComponent(url)}`) .then(r => r.ok ? r.json() : null) .then(j => { if (alive && j && j.status === "success") setData(j.data); }) .catch(() => {}); return () => { alive = false; }; }, [url, manualThumbnail]); return data; } // はてなブログ風カード: サムネ左 / テキスト右。OGP取得失敗時はホスト名タイポ・フォールバック function CiteCard({ work, hostOf }) { const ogp = useOGP(work.link, work.thumbnail); const host = hostOf(work.link); const ogImg = ogp && ogp.image && ogp.image.url; const fav = host ? `https://www.google.com/s2/favicons?domain=${host}&sz=64` : null; return (

{work.year}

{work.link && ( {ogImg ? { e.target.style.display = "none"; e.target.parentNode.classList.add("no-img"); }} /> : null}
{fav && } {host}
)}

{work.link ? {work.title} : work.title}

{work.role}

{work.desc &&

{work.desc}

} {work.tags && (
{work.tags.map(t => {t})}
)} {work.link && (

{fav && } 引用元へ {host}

)}
); } function MinimalPortfolio() { const D = window.PORTFOLIO_DATA; const [tab, setTab] = useStateM("works"); const tabs = [ ["about", "About", "自己紹介"], ["works", "Works", "制作物"], ["legacy", "Early Works / Research", "京都大学時代"], ["pubs", "Publications", "論文・書籍"], ["awards", "Awards", "受賞歴"], ]; // URLからホスト名（と短縮ラベル）を取り出す const hostOf = (url) => { if (!url) return null; try { const u = new URL(url); return u.hostname.replace(/^www\./, ""); } catch { return null; } }; return (

{D.profile.nameJa}

{D.profile.nameEn}

{D.profile.title}　/　{D.profile.affiliation}

{D.profile.links.map(l => ( {l.label} ))}

{D.profile.bioShort}

※ このポートフォリオは AI によって作成されました。

{tab === "about" && (

About

{D.profile.bio.split("\n\n").map((para, i) => (

{para}

))}
所属
{D.profile.affiliation}
学位
{D.profile.degree}（京都大学）
生年
{D.profile.born}
領域
Robotics Engineering × Technical Direction × Art × Entertainment
)} {tab === "works" && (

Selected Works　/　制作物

{D.works.length} works　·　外部リンク参照

各作品はリリース／レビュー記事のサムネイルとともに引用元へリンクしています。

{D.works.map(w => )}
)} {tab === "legacy" && (

Early Works / Research　/　京都大学時代　2014 — 2021

{D.researchWorks.length} projects
{D.researchWorks.map((w,wi) => (
R-{String(wi+1).padStart(2,"0")} {w.period}

{w.title}

{w.role}

{w.desc}

{w.tags && (
{w.tags.map(t => {t})}
)} {w.media && w.media.length > 0 && (
{w.media.map((m, mi) => { if (m.kind === "youtube") { const url = `https://www.youtube.com/watch?v=${m.id}`; const thumb = `https://i.ytimg.com/vi/${m.id}/hqdefault.jpg`; return (
▶
VIDEO {m.title} youtube.com
); } // link return (
{m.host}
REFERENCE {m.title} {m.host}
); })}
)}
))}

関連リンク

研究時代の詳細は旧ブログにアーカイブされています：{" "} tattatatakemori.hatenablog.com

)} {tab === "pubs" && (

Journal Articles　/　学術雑誌

{D.publications.length} papers
{D.publications.map((p, i) => { const host = hostOf(p.url); return (
{p.year}

{p.url ? {p.title} : p.title}

{p.authors}

{p.venue}{p.vol ? `, ${p.vol}` : ""}

{p.url && ( ↗ {host} )}
); })}

Books / Chapters　/　書籍{D.books.length}

{D.books.map((b, i) => { const host = hostOf(b.url); return (
{b.year}

{b.url ? {b.title} : b.title}

{b.authors}

{b.venue &&

{b.venue}

} {b.url && ( ↗ {host} )}
); })}

International Conferences　/　国際会議{D.internationalConferences.length}

{D.internationalConferences.map((c, i) => (
{c.year}

{c.title}

{c.authors}

{c.venue}

))}

Patents & Grants　/　特許・予算

{D.patents.map(p => (
特許
{p.title}　（{p.number}）
))} {D.grants.map((g, i) => (
{g.period}
{g.title} {g.note && {g.note}} 受給：{g.recipient}
))}
)} {tab === "awards" && (

Awards & Honors　/　受賞歴

{D.awards.length} entries
{["学会賞", "学内表彰", "国際大会", "日本大会"].map(cat => { const items = D.awards.filter(a => a.category === cat); if (!items.length) return null; return (

{cat}{items.length}

{items.map((a, i) => (
{a.year}
{a.title} {a.venue && 　/　{a.venue}} {a.co && {a.co}}
))}
); })}
)}
); } window.MinimalPortfolio = MinimalPortfolio;