p.name ? `${p.name}(${p.area || ''})` : '料理'}
getEmoji={(p) => p.emoji}
getCaption={(p) => p.name ? `${p.name}${p.area ? ` · ${p.area}` : ''}` : null}
/>
);
}
// ============================================================
// ニュースカード(起点)
// ============================================================
function NewsCard({ headline, summary, hotwords, activeAxis, onSelectAxis, sourceUrl, sourceLabel, date }) {
// ヘッドラインと要約からホットワードをハイライトしてレンダリング
const renderWithHotwords = (text) => {
const labels = hotwords.map((h) => h.label);
const sorted = [...labels].sort((a, b) => b.length - a.length);
// 簡易的なマッチング: 各ホットワードの位置を見つけて分割
const parts = [];
let remaining = text;
let key = 0;
while (remaining.length > 0) {
let matchedIdx = -1;
let matchedPos = Infinity;
let matchedLabel = '';
sorted.forEach((label) => {
const pos = remaining.indexOf(label);
if (pos !== -1 && pos < matchedPos) {
matchedPos = pos;
matchedLabel = label;
matchedIdx = labels.indexOf(label);
}
});
if (matchedIdx === -1) {
parts.push({remaining});
break;
}
if (matchedPos > 0) {
parts.push({remaining.slice(0, matchedPos)});
}
const isActive = matchedIdx === activeAxis;
parts.push(
);
remaining = remaining.slice(matchedPos + matchedLabel.length);
}
return parts;
};
// SNSシェア
const handleShare = () => {
const shareUrl = typeof window !== 'undefined' ? window.location.href : '';
const shareText = `「${headline.slice(0, 80)}...」から遡る現代史 #遡 #今日から遡る現代史`;
// Web Share API があれば優先
if (typeof navigator !== 'undefined' && navigator.share) {
navigator.share({ title: '今日から遡る現代史', text: shareText, url: shareUrl }).catch(() => {});
} else {
// フォールバック: X (Twitter) のシェアURLを開く
const xUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(shareText)}&url=${encodeURIComponent(shareUrl)}`;
window.open(xUrl, '_blank', 'noopener,noreferrer');
}
};
return (
本日の起点
{renderWithHotwords(headline)}
{renderWithHotwords(summary)}
▽
色付きの語をタップ、または左右スワイプで遡る軸を切替
);
}
// ============================================================
// 時間スロットタブ(朝/昼/夜の3記事切替)
// 1日のうちに複数記事(時間スロット)が存在する場合のみ表示
// ============================================================
function TimeSlotTabs({ articles, active, onSelect }) {
// 時刻ラベル(HH:MM 形式)から短い表示名を生成
const labelFor = (time) => {
if (!time) return '';
const h = parseInt(time.split(':')[0], 10);
if (h < 11) return '朝';
if (h < 17) return '昼';
return '夜';
};
return (
{articles.map((a, i) => (
))}
{axes.map((a, i) => (
))}
);
}
// ============================================================
// 年表
// ============================================================
function Timeline({ axis, scrollToYear, onScrollDone }) {
// 広告挿入位置を動的に決定
// - 7ノード未満: 広告なし
// - 7〜14ノード: 真ん中(50%地点)に1か所
// - 15ノード以上: 1/3地点と2/3地点に2か所
// ただし起点ノード(最後尾)の直前には挿入しない
const len = axis.timeline.length;
const lastIdx = len - 1;
const adIndices = (() => {
if (len < 7) return [];
const candidates =
len >= 15
? [Math.floor(len / 3) - 1, Math.floor((len * 2) / 3) - 1]
: [Math.floor(len / 2) - 1];
// 起点(最後尾)の直前は避ける
return candidates.filter((i) => i !== lastIdx - 1 && i < lastIdx);
})();
// 同一軸内で同じ wiki を参照するノードが複数ある場合、
// 2回目以降は画像非表示(連続する同一画像を避ける)
// useGoogleSearch=true → NodeImage が Google CSE 試行 → 失敗で空表示、結果として非表示
const seenWikis = new Set();
const useGoogleFlags = axis.timeline.map((node) => {
if (!node.wiki) return false;
if (seenWikis.has(node.wiki)) return true;
seenWikis.add(node.wiki);
return false;
});
// 辞書からのジャンプ時、該当年のノードまで自動スクロール
// 画像が遅延ロードされる構造のため、対象が見つかるまで複数回リトライ
useEffect(() => {
if (!scrollToYear) return;
let cancelled = false;
let attempts = 0;
const maxAttempts = 20; // 100ms * 20 = 最大2秒待機
const tryScroll = () => {
if (cancelled) return;
attempts += 1;
const target = document.querySelector(`[data-node-year="${scrollToYear}"]`);
if (!target) {
if (attempts < maxAttempts) {
setTimeout(tryScroll, 100);
} else if (onScrollDone) {
onScrollDone();
}
return;
}
// 対象が見つかった → スクロール実行
const rect = target.getBoundingClientRect();
const top = rect.top + window.scrollY - 80;
try {
window.scrollTo({ top, behavior: 'smooth' });
} catch (e) {
window.scrollTo(0, top);
}
// 600ms後に動いてなかったら instant でフォールバック(scrollIntoView を含む)
setTimeout(() => {
if (Math.abs(window.scrollY - top) > 50) {
window.scrollTo(0, top);
if (Math.abs(window.scrollY - top) > 50) {
// それでもダメな場合は scrollIntoView
target.scrollIntoView({ block: 'start' });
}
}
}, 600);
// ハイライトで視認性向上
target.style.transition = 'background 0.5s';
target.style.background = 'rgba(122, 16, 16, 0.12)';
setTimeout(() => {
if (target) target.style.background = '';
}, 2200);
if (onScrollDone) onScrollDone();
};
// 初回マウント直後の DOM 反映を待つため少し遅延してから開始
const start = setTimeout(tryScroll, 150);
return () => {
cancelled = true;
clearTimeout(start);
};
}, [scrollToYear, axis]);
return (
{axis.timeline.map((node, i) => (
{adIndices.includes(i) && (
)}
))}
{node.isOrigin ? (
) : (
)}
{!isLast &&
}
{node.year}
{node.era}
{node.desc}
{node.isOrigin &&
― 起点 ―
}
);
}
// ============================================================
// ノード画像 (Wikipedia REST API + Google CSE で取得・シネマチック表示)
// IntersectionObserverで遅延読み込み(画面に近づいてから取得)
// ============================================================
const imageCache = {};
// --- Google Custom Search Engine 設定 ---
// 取得元: Google Cloud Console (Custom Search API) + programmablesearchengine.google.com
// 1日100クエリ無料枠(95でセーフ停止)。リファラ制限を必ず設定すること。
// 機密情報は config.js (gitignore対象) から読み込み、JSXソースには含めない
const GOOGLE_CSE_API_KEY = (typeof window !== 'undefined' && window.SOKYU_CONFIG?.gcseApiKey) || 'YOUR_GOOGLE_CSE_API_KEY';
const GOOGLE_CSE_ENGINE_ID = (typeof window !== 'undefined' && window.SOKYU_CONFIG?.gcseEngineId) || 'YOUR_GOOGLE_CSE_ID';
const GOOGLE_CSE_DAILY_LIMIT = 95;
const GOOGLE_CSE_ENABLED =
GOOGLE_CSE_API_KEY !== 'YOUR_GOOGLE_CSE_API_KEY' &&
GOOGLE_CSE_ENGINE_ID !== 'YOUR_GOOGLE_CSE_ID';
// localStorage を安全に扱うヘルパー(SSR・無効化環境を考慮)
const lsGet = (key) => {
try { return typeof localStorage !== 'undefined' ? localStorage.getItem(key) : null; }
catch { return null; }
};
const lsSet = (key, val) => {
try { if (typeof localStorage !== 'undefined') localStorage.setItem(key, val); }
catch { /* quota超過等は無視 */ }
};
// 日次クエリ数カウンタ(キー: gcse_count_YYYY-MM-DD)
const todayKey = () => {
const d = new Date();
return `gcse_count_${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
};
const getDailyCount = () => parseInt(lsGet(todayKey()) || '0', 10);
const incDailyCount = () => lsSet(todayKey(), String(getDailyCount() + 1));
// Google CSE 画像検索 — 1ヒット目の画像URLを返す。失敗時 null。
async function fetchGoogleImage(query) {
if (!GOOGLE_CSE_ENABLED) return null;
if (getDailyCount() >= GOOGLE_CSE_DAILY_LIMIT) return null;
const cacheKey = `gcse_img_${query}`;
const cached = lsGet(cacheKey);
if (cached !== null) return cached === '__NULL__' ? null : cached;
const url = `https://www.googleapis.com/customsearch/v1?key=${encodeURIComponent(GOOGLE_CSE_API_KEY)}&cx=${encodeURIComponent(GOOGLE_CSE_ENGINE_ID)}&searchType=image&num=1&safe=active&q=${encodeURIComponent(query)}`;
try {
incDailyCount(); // 呼ぶ時点でクエリを消費する想定でカウント
const resp = await fetch(url);
if (!resp.ok) {
lsSet(cacheKey, '__NULL__');
return null;
}
const data = await resp.json();
const link = data?.items?.[0]?.link || null;
lsSet(cacheKey, link || '__NULL__');
return link;
} catch {
lsSet(cacheKey, '__NULL__');
return null;
}
}
// YouTube URL から video ID 抽出(失敗時 null)
function extractYouTubeId(url) {
if (!url) return null;
const m = String(url).match(/(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/|youtube\.com\/shorts\/)([\w-]{11})/);
return m ? m[1] : null;
}
function NodeImage({ node, useGoogleSearch = false }) {
// visible: 画面付近に入ったか(=読み込み開始するか)
// state: 取得結果
const [visible, setVisible] = useState(false);
// Wikipedia由来は wiki キー、Google CSE 由来は node固有キー(wiki+node+year)で
// メモリキャッシュを分ける(=重複wikiでもGoogle結果は固有)
const cacheKey = useGoogleSearch
? `__g__${node.wiki || ''}__${node.node}__${node.year}`
: node.wiki;
const [state, setState] = useState(() => {
if (cacheKey && imageCache[cacheKey] !== undefined) {
return {
url: imageCache[cacheKey],
loading: false,
error: imageCache[cacheKey] === null,
};
}
return { url: null, loading: true, error: false };
});
const frameRef = useRef(null);
// 画面接近検知
useEffect(() => {
// wikiなし & Google検索もしない → 何もしない
if (!node.wiki && !useGoogleSearch) {
setState({ url: null, loading: false, error: true });
return;
}
if (cacheKey && imageCache[cacheKey] !== undefined) {
setVisible(true);
return;
}
// IntersectionObserver 未対応環境では即座に有効化
if (typeof IntersectionObserver === 'undefined') {
setVisible(true);
return;
}
const el = frameRef.current;
if (!el) return;
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
setVisible(true);
observer.disconnect();
}
});
},
{
// 画面の上下200pxまでを「近い」とみなして先読み
rootMargin: '200px 0px 200px 0px',
threshold: 0.01,
}
);
observer.observe(el);
return () => observer.disconnect();
}, [cacheKey]);
// 画像取得 (visibleになってから初めて実行)
useEffect(() => {
if (!visible || !cacheKey) return;
if (imageCache[cacheKey] !== undefined) {
setState({
url: imageCache[cacheKey],
loading: false,
error: imageCache[cacheKey] === null,
});
return;
}
let cancelled = false;
const fetchImg = async () => {
// --- 2回目以降の wiki 参照ノード: Google CSE で多様化 ---
if (useGoogleSearch) {
// クエリ: 「wiki記事名 年」(例: 井上尚弥 1993)で年代別に多様化
const query = `${node.wiki || node.node} ${node.year}`.trim();
const gUrl = await fetchGoogleImage(query);
if (gUrl) {
imageCache[cacheKey] = gUrl;
if (!cancelled) setState({ url: gUrl, loading: false, error: false });
} else {
imageCache[cacheKey] = null;
if (!cancelled) setState({ url: null, loading: false, error: true });
}
return;
}
// --- 1回目: Wikipedia (ja → en) ---
try {
const ja = await fetch(
`https://ja.wikipedia.org/api/rest_v1/page/summary/${encodeURIComponent(node.wiki)}`
);
if (ja.ok) {
const data = await ja.json();
const url = data?.originalimage?.source || data?.thumbnail?.source || null;
if (url) {
imageCache[cacheKey] = url;
if (!cancelled) setState({ url, loading: false, error: false });
return;
}
}
const en = await fetch(
`https://en.wikipedia.org/api/rest_v1/page/summary/${encodeURIComponent(node.wiki)}`
);
if (en.ok) {
const data = await en.json();
const url = data?.originalimage?.source || data?.thumbnail?.source || null;
if (url) {
imageCache[cacheKey] = url;
if (!cancelled) setState({ url, loading: false, error: false });
return;
}
}
imageCache[cacheKey] = null;
if (!cancelled) setState({ url: null, loading: false, error: true });
} catch (e) {
imageCache[cacheKey] = null;
if (!cancelled) setState({ url: null, loading: false, error: true });
}
};
fetchImg();
return () => {
cancelled = true;
};
}, [visible, cacheKey]);
// --- 動画優先: node.videoUrl があれば YouTube サムネイル + ▶ オーバーレイ ---
// wiki 取得 useEffect は走るが結果は使わない(常時動画表示が優先)
const videoId = extractYouTubeId(node.videoUrl);
if (videoId) {
const thumb = `https://img.youtube.com/vi/${videoId}/hqdefault.jpg`;
return (
e.stopPropagation()}
>
▶
{node.year}
via YouTube
);
}
// 画像取得失敗時は何も表示しない (cinemaFrameごと消す)
// ただしIntersectionObserver監視のため、visibleがfalseの間は枠を残す必要がある
if (!visible) {
// 監視対象の空枠 (まだ読み込み開始していない)
return ;
}
if (state.loading) {
return (
);
}
if (!state.url || state.error) {
return null;
}
return (
{
imageCache[cacheKey] = null;
setState({ ...state, error: true });
}}
/>
{node.year}
{useGoogleSearch ? 'via Google' : 'via Wikipedia'}
);
}
// ============================================================
// 誤記報告モーダル (対象選択 + 自由記述)
// ============================================================
function ReportModal({ axis, articleTitle, initialTarget, onClose }) {
// 対象オプション: 記事自体 + 軸ヘッダー + 各タイムラインノード
const targetOptions = [
{ id: 'article', label: '記事全体', detail: articleTitle },
{ id: 'axis', label: '軸の選定', detail: `「${axis.axis}」軸そのもの` },
...axis.timeline.map((n, i) => ({
id: `node_${i}`,
label: `${n.year} ${n.node}`,
detail: n.desc,
node: n,
})),
];
const [selectedId, setSelectedId] = useState(
initialTarget
? `node_${axis.timeline.findIndex((n) => n.year === initialTarget.year && n.node === initialTarget.node)}`
: 'article'
);
const [text, setText] = useState('');
const [submitted, setSubmitted] = useState(false);
const selected = targetOptions.find((o) => o.id === selectedId);
const submit = () => {
// 将来: バックエンドに送信 → Claude APIで判定 → 自動修正フロー
console.log('Report:', { target: selected, text });
setSubmitted(true);
setTimeout(onClose, 1500);
};
return (
e.stopPropagation()}>
{submitted ? (
✓
報告ありがとうございました
自動検証の上、修正します
) : (
<>
誤りを報告する
どの項目に誤りがありますか?
{targetOptions.map((opt) => (
))}
