2026-03-21 04:37:40 +00:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="ja" data-app-id="posimai-brief">
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
|
<meta name="robots" content="noindex, nofollow">
|
|
|
|
|
|
<script>
|
|
|
|
|
|
(function () {
|
|
|
|
|
|
const p = new URLSearchParams(location.search);
|
|
|
|
|
|
const k = p.get('init_key');
|
|
|
|
|
|
if (k) {
|
|
|
|
|
|
localStorage.setItem('posimai-brief-apikey', k);
|
|
|
|
|
|
p.delete('init_key');
|
|
|
|
|
|
const u = location.pathname + (p.toString() ? '?' + p : '');
|
|
|
|
|
|
history.replaceState({}, '', u);
|
|
|
|
|
|
}
|
|
|
|
|
|
const t = localStorage.getItem('posimai-brief-theme') || 'system';
|
|
|
|
|
|
const dark = t === 'dark' || (t === 'system' && matchMedia('(prefers-color-scheme:dark)').matches);
|
|
|
|
|
|
document.documentElement.setAttribute('data-theme', dark ? 'dark' : 'light');
|
|
|
|
|
|
document.documentElement.setAttribute('data-theme-pref', t);
|
|
|
|
|
|
})();
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
|
|
|
|
|
<meta name="description" content="音声ニュースブリーフィング">
|
|
|
|
|
|
<meta name="color-scheme" content="dark light">
|
|
|
|
|
|
<meta name="theme-color" content="#0D0D0D" media="(prefers-color-scheme: dark)">
|
|
|
|
|
|
<meta name="theme-color" content="#F9FAFB" media="(prefers-color-scheme: light)">
|
|
|
|
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
|
|
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
|
|
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
|
|
|
|
<meta name="apple-mobile-web-app-title" content="Brief">
|
|
|
|
|
|
<link rel="manifest" href="/manifest.json">
|
|
|
|
|
|
<link rel="icon" type="image/png" href="/logo.png">
|
|
|
|
|
|
<link rel="apple-touch-icon" href="/logo.png">
|
|
|
|
|
|
<title>Posimai Brief</title>
|
|
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
|
|
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
|
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
|
|
|
|
|
|
<link rel="stylesheet" href="https://posimai-ui.vercel.app/v1/base.css">
|
|
|
|
|
|
<script src="https://unpkg.com/lucide@0.344.0/dist/umd/lucide.min.js"></script>
|
|
|
|
|
|
|
|
|
|
|
|
<style>
|
2026-03-22 05:40:02 +00:00
|
|
|
|
/* ── アクセントグロー変数 ─────────────────────────────── */
|
|
|
|
|
|
:root {
|
|
|
|
|
|
--accent-glow: rgba(110, 231, 183, 0.3);
|
|
|
|
|
|
}
|
|
|
|
|
|
[data-theme="light"] {
|
|
|
|
|
|
--accent-glow: rgba(5, 150, 105, 0.2);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* ── base.css の main を没入型レイアウト用に上書き ────── */
|
2026-03-21 04:37:40 +00:00
|
|
|
|
main {
|
|
|
|
|
|
padding: 0;
|
|
|
|
|
|
max-width: none;
|
|
|
|
|
|
margin: 0;
|
|
|
|
|
|
height: 100dvh;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-03-22 05:40:02 +00:00
|
|
|
|
/* ── トップバー ──────────────────────────────────────────── */
|
2026-03-21 04:37:40 +00:00
|
|
|
|
.brief-top {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
gap: 8px;
|
2026-03-22 05:26:21 +00:00
|
|
|
|
padding: max(14px, env(safe-area-inset-top)) 16px 10px;
|
2026-03-21 04:37:40 +00:00
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
|
}
|
2026-03-22 05:40:02 +00:00
|
|
|
|
.brief-date { font-size: 14px; font-weight: 400; color: var(--text2); }
|
|
|
|
|
|
.brief-sep { color: var(--border); font-size: 14px; }
|
2026-03-22 05:26:21 +00:00
|
|
|
|
.brief-count { font-size: 14px; color: var(--text3); }
|
2026-03-21 04:37:40 +00:00
|
|
|
|
.brief-top-right {
|
|
|
|
|
|
margin-left: auto;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
2026-03-22 05:26:21 +00:00
|
|
|
|
gap: 4px;
|
2026-03-21 04:37:40 +00:00
|
|
|
|
}
|
|
|
|
|
|
.brief-icon-btn {
|
2026-03-22 05:26:21 +00:00
|
|
|
|
width: 34px;
|
|
|
|
|
|
height: 34px;
|
2026-03-21 04:37:40 +00:00
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
border: none;
|
|
|
|
|
|
background: transparent;
|
|
|
|
|
|
color: var(--text3);
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
transition: color 0.12s, background 0.12s;
|
|
|
|
|
|
}
|
|
|
|
|
|
.brief-icon-btn:active { background: var(--surface); color: var(--text2); }
|
|
|
|
|
|
|
2026-03-22 05:40:02 +00:00
|
|
|
|
/* ── 現在再生中の記事情報（最上部） ─────────────────────── */
|
2026-03-22 05:26:21 +00:00
|
|
|
|
.brief-now-playing {
|
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
|
padding: 14px 20px 16px;
|
|
|
|
|
|
border-bottom: 1px solid var(--border);
|
2026-03-21 04:37:40 +00:00
|
|
|
|
}
|
|
|
|
|
|
.brief-article-meta {
|
|
|
|
|
|
font-size: 11px;
|
2026-03-22 05:26:21 +00:00
|
|
|
|
font-weight: 600;
|
2026-03-21 04:37:40 +00:00
|
|
|
|
color: var(--accent);
|
2026-03-22 05:26:21 +00:00
|
|
|
|
letter-spacing: 0.08em;
|
2026-03-21 04:37:40 +00:00
|
|
|
|
text-transform: uppercase;
|
2026-03-22 05:26:21 +00:00
|
|
|
|
margin-bottom: 8px;
|
2026-03-21 04:37:40 +00:00
|
|
|
|
}
|
|
|
|
|
|
.brief-article-title {
|
2026-03-22 05:26:21 +00:00
|
|
|
|
font-size: 20px;
|
2026-03-21 04:37:40 +00:00
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
color: var(--text);
|
2026-03-22 05:26:21 +00:00
|
|
|
|
line-height: 1.4;
|
2026-03-21 04:37:40 +00:00
|
|
|
|
display: -webkit-box;
|
|
|
|
|
|
-webkit-line-clamp: 3;
|
|
|
|
|
|
-webkit-box-orient: vertical;
|
|
|
|
|
|
overflow: hidden;
|
2026-03-22 05:26:21 +00:00
|
|
|
|
margin-bottom: 6px;
|
2026-03-21 04:37:40 +00:00
|
|
|
|
}
|
2026-03-22 05:40:02 +00:00
|
|
|
|
.brief-article-source { font-size: 13px; color: var(--text3); }
|
2026-03-21 04:37:40 +00:00
|
|
|
|
|
2026-03-22 05:40:02 +00:00
|
|
|
|
/* ── プレーヤー（波形 + 再生コントロール）flex: 1 ─────── */
|
2026-03-22 05:26:21 +00:00
|
|
|
|
.brief-player {
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
2026-03-22 05:40:02 +00:00
|
|
|
|
padding: 0 20px;
|
|
|
|
|
|
min-height: 120px;
|
2026-03-22 05:26:21 +00:00
|
|
|
|
overflow: hidden;
|
2026-03-22 05:40:02 +00:00
|
|
|
|
position: relative;
|
2026-03-22 05:26:21 +00:00
|
|
|
|
}
|
|
|
|
|
|
|
2026-03-22 05:40:02 +00:00
|
|
|
|
/* ── 波形エリア ────────────────────────────────────────── */
|
|
|
|
|
|
.brief-visual {
|
2026-03-21 04:37:40 +00:00
|
|
|
|
width: 100%;
|
2026-03-22 05:40:02 +00:00
|
|
|
|
height: 80px;
|
2026-03-21 04:37:40 +00:00
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
2026-03-22 05:40:02 +00:00
|
|
|
|
position: relative;
|
|
|
|
|
|
margin-bottom: 24px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.brief-visual-glow {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
width: 240px;
|
|
|
|
|
|
height: 70px;
|
|
|
|
|
|
background: radial-gradient(ellipse at center, var(--accent-glow) 0%, transparent 70%);
|
|
|
|
|
|
filter: blur(20px);
|
|
|
|
|
|
z-index: 0;
|
|
|
|
|
|
opacity: 0.6;
|
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
|
}
|
|
|
|
|
|
.brief-waveform {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
gap: 3px;
|
|
|
|
|
|
height: 72px;
|
|
|
|
|
|
z-index: 1;
|
2026-03-21 04:37:40 +00:00
|
|
|
|
}
|
2026-03-22 05:40:02 +00:00
|
|
|
|
.brief-wave-bar {
|
|
|
|
|
|
width: 3px;
|
|
|
|
|
|
height: 8px;
|
|
|
|
|
|
background: var(--accent);
|
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
|
box-shadow: 0 0 8px var(--accent-glow);
|
|
|
|
|
|
transition: height 0.15s ease;
|
|
|
|
|
|
flex-shrink: 0;
|
2026-03-21 04:37:40 +00:00
|
|
|
|
}
|
|
|
|
|
|
|
2026-03-22 05:40:02 +00:00
|
|
|
|
@keyframes brief-wave-sparkle {
|
|
|
|
|
|
0%, 100% {
|
|
|
|
|
|
filter: brightness(1) drop-shadow(0 0 5px var(--accent-glow));
|
|
|
|
|
|
background: var(--accent);
|
|
|
|
|
|
}
|
|
|
|
|
|
50% {
|
|
|
|
|
|
filter: brightness(2.5) drop-shadow(0 0 20px #fff);
|
|
|
|
|
|
background: #fff;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.brief-wave-bar.sparkle {
|
|
|
|
|
|
animation: brief-wave-sparkle 0.4s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* ── 再生コントロール行（skip · play · skip） ────────── */
|
|
|
|
|
|
.brief-controls-row {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
gap: 32px;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
}
|
|
|
|
|
|
.brief-skip-btn {
|
|
|
|
|
|
width: 44px;
|
|
|
|
|
|
height: 44px;
|
2026-03-21 04:37:40 +00:00
|
|
|
|
border: none;
|
2026-03-22 05:40:02 +00:00
|
|
|
|
background: transparent;
|
|
|
|
|
|
color: var(--text2);
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
transition: color 0.12s, transform 0.1s;
|
|
|
|
|
|
}
|
|
|
|
|
|
.brief-skip-btn:active { transform: scale(0.9); color: var(--text); }
|
|
|
|
|
|
|
|
|
|
|
|
/* Daily スタイル再生ボタン */
|
|
|
|
|
|
.brief-play-main {
|
|
|
|
|
|
width: 80px;
|
|
|
|
|
|
height: 80px;
|
2026-03-21 04:37:40 +00:00
|
|
|
|
background: var(--accent);
|
2026-03-22 05:40:02 +00:00
|
|
|
|
border: none;
|
|
|
|
|
|
border-radius: 50%;
|
2026-03-21 04:37:40 +00:00
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
cursor: pointer;
|
2026-03-22 05:40:02 +00:00
|
|
|
|
box-shadow: 0 0 40px var(--accent-glow), inset 0 0 15px rgba(255,255,255,0.3);
|
|
|
|
|
|
transition: transform 0.2s cubic-bezier(.4, 0, .2, 1);
|
|
|
|
|
|
position: relative;
|
2026-03-21 04:37:40 +00:00
|
|
|
|
}
|
2026-03-22 05:40:02 +00:00
|
|
|
|
.brief-play-main::after {
|
|
|
|
|
|
content: '';
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
inset: -12px;
|
|
|
|
|
|
border: 1px solid var(--accent);
|
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
opacity: 0;
|
2026-03-21 04:37:40 +00:00
|
|
|
|
}
|
2026-03-22 05:40:02 +00:00
|
|
|
|
.brief-play-main.playing::after {
|
|
|
|
|
|
opacity: 0.2;
|
|
|
|
|
|
animation: brief-pulse-ring 2s linear infinite;
|
2026-03-22 05:26:21 +00:00
|
|
|
|
}
|
2026-03-22 05:40:02 +00:00
|
|
|
|
@keyframes brief-pulse-ring {
|
|
|
|
|
|
0% { transform: scale(1); opacity: 0.4; }
|
|
|
|
|
|
100% { transform: scale(1.4); opacity: 0; }
|
2026-03-21 04:37:40 +00:00
|
|
|
|
}
|
2026-03-22 05:40:02 +00:00
|
|
|
|
.brief-play-main:active { transform: scale(0.92); }
|
|
|
|
|
|
.brief-play-inner {
|
|
|
|
|
|
width: 66px;
|
|
|
|
|
|
height: 66px;
|
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
border: 1px solid rgba(0,0,0,0.05);
|
2026-03-21 04:37:40 +00:00
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
2026-03-22 05:40:02 +00:00
|
|
|
|
color: #000;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* パーティクル */
|
|
|
|
|
|
.brief-particles {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
width: 160px;
|
|
|
|
|
|
height: 160px;
|
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
|
z-index: -1;
|
|
|
|
|
|
top: 50%;
|
|
|
|
|
|
left: 50%;
|
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
|
}
|
|
|
|
|
|
.brief-particle {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
background: #fff;
|
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
opacity: 0;
|
|
|
|
|
|
box-shadow: 0 0 10px var(--accent);
|
|
|
|
|
|
filter: blur(0.5px);
|
|
|
|
|
|
}
|
|
|
|
|
|
@keyframes brief-particle-sparkle {
|
|
|
|
|
|
0% { transform: translate(0, 0) scale(0); opacity: 0; }
|
|
|
|
|
|
20% { opacity: 1; }
|
|
|
|
|
|
100% { transform: translate(var(--tx), var(--ty)) scale(1.5); opacity: 0; }
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* ── 設定パネル内の入力・スピード ────────────────────── */
|
|
|
|
|
|
.settings-text-input {
|
2026-03-21 04:37:40 +00:00
|
|
|
|
width: 100%;
|
2026-03-22 05:40:02 +00:00
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
background: var(--surface);
|
|
|
|
|
|
border: 1px solid var(--border);
|
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
|
color: var(--text);
|
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
|
padding: 9px 12px;
|
|
|
|
|
|
outline: none;
|
|
|
|
|
|
font-family: inherit;
|
|
|
|
|
|
margin-top: 6px;
|
|
|
|
|
|
transition: border-color 0.15s;
|
2026-03-21 04:37:40 +00:00
|
|
|
|
}
|
2026-03-22 05:40:02 +00:00
|
|
|
|
.settings-text-input:focus { border-color: var(--accent); }
|
|
|
|
|
|
.settings-action-btn {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
padding: 10px;
|
|
|
|
|
|
margin-top: 8px;
|
|
|
|
|
|
background: var(--accent);
|
|
|
|
|
|
color: #0D0D0D;
|
2026-03-21 04:37:40 +00:00
|
|
|
|
border: none;
|
2026-03-22 05:40:02 +00:00
|
|
|
|
border-radius: 8px;
|
2026-03-21 04:37:40 +00:00
|
|
|
|
font-family: inherit;
|
2026-03-22 05:40:02 +00:00
|
|
|
|
font-size: 13px;
|
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
|
cursor: pointer;
|
2026-03-21 04:37:40 +00:00
|
|
|
|
}
|
2026-03-22 05:40:02 +00:00
|
|
|
|
.settings-field-label {
|
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
|
color: var(--text2);
|
|
|
|
|
|
line-height: 1.5;
|
|
|
|
|
|
margin-top: 4px;
|
|
|
|
|
|
}
|
|
|
|
|
|
/* speed/speaker ボタングループ */
|
|
|
|
|
|
.brief-seg-group {
|
2026-03-21 04:37:40 +00:00
|
|
|
|
display: flex;
|
2026-03-22 05:26:21 +00:00
|
|
|
|
gap: 4px;
|
2026-03-22 05:40:02 +00:00
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
margin-top: 8px;
|
2026-03-21 04:37:40 +00:00
|
|
|
|
}
|
2026-03-22 05:40:02 +00:00
|
|
|
|
.brief-seg-btn {
|
|
|
|
|
|
padding: 6px 12px;
|
2026-03-21 04:37:40 +00:00
|
|
|
|
border: 1px solid var(--border);
|
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
|
background: transparent;
|
|
|
|
|
|
color: var(--text3);
|
2026-03-22 05:26:21 +00:00
|
|
|
|
font-size: 12px;
|
2026-03-21 04:37:40 +00:00
|
|
|
|
font-family: inherit;
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
transition: all 0.12s;
|
|
|
|
|
|
line-height: 1;
|
|
|
|
|
|
}
|
2026-03-22 05:40:02 +00:00
|
|
|
|
.brief-seg-btn.active {
|
2026-03-21 04:37:40 +00:00
|
|
|
|
border-color: var(--accent);
|
|
|
|
|
|
color: var(--accent);
|
|
|
|
|
|
background: var(--surface);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-03-22 05:40:02 +00:00
|
|
|
|
/* ── 音声エンジン表示 ──────────────────────────────── */
|
|
|
|
|
|
.voice-badge {
|
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
gap: 4px;
|
|
|
|
|
|
font-size: 10px;
|
|
|
|
|
|
color: var(--text3);
|
|
|
|
|
|
padding: 2px 8px;
|
|
|
|
|
|
border: 1px solid var(--border);
|
|
|
|
|
|
border-radius: 20px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.voice-badge.voicevox { border-color: var(--accent); color: var(--accent); }
|
|
|
|
|
|
|
|
|
|
|
|
/* ── 記事リスト ─────────────────────────────────────── */
|
2026-03-22 05:10:48 +00:00
|
|
|
|
.brief-list {
|
|
|
|
|
|
flex-shrink: 0;
|
2026-03-22 05:40:02 +00:00
|
|
|
|
max-height: 40dvh;
|
2026-03-22 05:10:48 +00:00
|
|
|
|
overflow-y: auto;
|
|
|
|
|
|
scrollbar-width: none;
|
2026-03-22 05:26:21 +00:00
|
|
|
|
border-top: 1px solid var(--border);
|
|
|
|
|
|
padding-bottom: max(12px, env(safe-area-inset-bottom));
|
2026-03-22 05:10:48 +00:00
|
|
|
|
}
|
|
|
|
|
|
.brief-list::-webkit-scrollbar { display: none; }
|
|
|
|
|
|
.brief-list-item {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: flex-start;
|
2026-03-22 05:40:02 +00:00
|
|
|
|
gap: 10px;
|
|
|
|
|
|
padding: 11px 16px 11px 20px;
|
2026-03-22 05:10:48 +00:00
|
|
|
|
border-bottom: 1px solid var(--border);
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
transition: background 0.12s;
|
|
|
|
|
|
}
|
|
|
|
|
|
.brief-list-item:active { background: var(--surface); }
|
|
|
|
|
|
.brief-list-item.active { background: var(--surface); }
|
|
|
|
|
|
.brief-list-num {
|
2026-03-22 05:26:21 +00:00
|
|
|
|
font-size: 12px;
|
2026-03-22 05:10:48 +00:00
|
|
|
|
color: var(--text3);
|
2026-03-22 05:26:21 +00:00
|
|
|
|
width: 18px;
|
|
|
|
|
|
text-align: right;
|
2026-03-22 05:10:48 +00:00
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
|
padding-top: 2px;
|
|
|
|
|
|
font-variant-numeric: tabular-nums;
|
|
|
|
|
|
}
|
2026-03-22 05:26:21 +00:00
|
|
|
|
.brief-list-num.active { color: var(--accent); font-weight: 600; }
|
2026-03-22 05:10:48 +00:00
|
|
|
|
.brief-list-info { flex: 1; min-width: 0; }
|
|
|
|
|
|
.brief-list-title {
|
2026-03-22 05:26:21 +00:00
|
|
|
|
font-size: 14px;
|
2026-03-22 05:10:48 +00:00
|
|
|
|
color: var(--text2);
|
|
|
|
|
|
line-height: 1.4;
|
|
|
|
|
|
display: -webkit-box;
|
|
|
|
|
|
-webkit-line-clamp: 2;
|
|
|
|
|
|
-webkit-box-orient: vertical;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
}
|
|
|
|
|
|
.brief-list-title.active { color: var(--text); font-weight: 500; }
|
2026-03-22 05:40:02 +00:00
|
|
|
|
.brief-list-meta {
|
|
|
|
|
|
font-size: 11px;
|
2026-03-22 05:10:48 +00:00
|
|
|
|
color: var(--text3);
|
2026-03-22 05:40:02 +00:00
|
|
|
|
margin-top: 3px;
|
|
|
|
|
|
display: flex;
|
2026-03-21 04:37:40 +00:00
|
|
|
|
align-items: center;
|
|
|
|
|
|
gap: 4px;
|
|
|
|
|
|
}
|
2026-03-22 05:40:02 +00:00
|
|
|
|
.brief-list-link {
|
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
|
width: 32px;
|
|
|
|
|
|
height: 32px;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
2026-03-22 05:26:21 +00:00
|
|
|
|
border-radius: 8px;
|
2026-03-22 05:40:02 +00:00
|
|
|
|
color: var(--text3);
|
|
|
|
|
|
transition: color 0.12s, background 0.12s;
|
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
|
align-self: center;
|
2026-03-22 05:26:21 +00:00
|
|
|
|
}
|
2026-03-22 05:40:02 +00:00
|
|
|
|
.brief-list-link:active { background: var(--border); color: var(--text2); }
|
2026-03-21 04:37:40 +00:00
|
|
|
|
</style>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 設定パネル -->
|
|
|
|
|
|
<aside class="settings-panel" id="settingsPanel" role="complementary">
|
|
|
|
|
|
<div class="settings-panel-header">
|
|
|
|
|
|
<span class="settings-panel-title">設定</span>
|
|
|
|
|
|
<button class="icon-btn" id="settingsCloseBtn" aria-label="設定を閉じる">
|
|
|
|
|
|
<i data-lucide="x" style="width:18px;height:18px;stroke-width:1.75"></i>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="settings-panel-body">
|
|
|
|
|
|
|
2026-03-22 05:40:02 +00:00
|
|
|
|
<!-- 外観 -->
|
2026-03-21 04:37:40 +00:00
|
|
|
|
<div>
|
|
|
|
|
|
<div class="settings-group-label">外観</div>
|
|
|
|
|
|
<div class="settings-item">
|
|
|
|
|
|
<div class="settings-item-label">テーマ</div>
|
|
|
|
|
|
<div class="theme-selector">
|
|
|
|
|
|
<button class="theme-btn" data-theme-val="dark">
|
|
|
|
|
|
<i data-lucide="moon" style="width:12px;height:12px;stroke-width:1.75"></i>ダーク
|
|
|
|
|
|
</button>
|
|
|
|
|
|
<button class="theme-btn" data-theme-val="light">
|
|
|
|
|
|
<i data-lucide="sun" style="width:12px;height:12px;stroke-width:1.75"></i>ライト
|
|
|
|
|
|
</button>
|
|
|
|
|
|
<button class="theme-btn" data-theme-val="system">
|
|
|
|
|
|
<i data-lucide="monitor" style="width:12px;height:12px;stroke-width:1.75"></i>自動
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
2026-03-22 05:40:02 +00:00
|
|
|
|
<!-- 再生 -->
|
|
|
|
|
|
<div style="margin-top:20px">
|
|
|
|
|
|
<div class="settings-group-label">再生</div>
|
|
|
|
|
|
<div class="settings-item" style="flex-direction:column;align-items:flex-start;gap:0">
|
|
|
|
|
|
<div class="settings-item-label">再生速度</div>
|
|
|
|
|
|
<div class="brief-seg-group" id="speedGroup">
|
|
|
|
|
|
<button class="brief-seg-btn" data-speed="0.8">0.8x</button>
|
|
|
|
|
|
<button class="brief-seg-btn active" data-speed="1.0">1.0x</button>
|
|
|
|
|
|
<button class="brief-seg-btn" data-speed="1.25">1.25x</button>
|
|
|
|
|
|
<button class="brief-seg-btn" data-speed="1.5">1.5x</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="settings-item" style="flex-direction:column;align-items:flex-start;gap:0;margin-top:12px">
|
|
|
|
|
|
<div class="settings-item-label">音声キャラクター（VOICEVOX）</div>
|
|
|
|
|
|
<div class="brief-seg-group" id="speakerGroup">
|
|
|
|
|
|
<button class="brief-seg-btn active" data-speaker="1">ずんだもん</button>
|
|
|
|
|
|
<button class="brief-seg-btn" data-speaker="3">春日部つむぎ</button>
|
|
|
|
|
|
<button class="brief-seg-btn" data-speaker="2">四国めたん</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Posimai API Key -->
|
2026-03-21 04:37:40 +00:00
|
|
|
|
<div style="margin-top:20px">
|
|
|
|
|
|
<div class="settings-group-label">Posimai API Key</div>
|
|
|
|
|
|
<p class="settings-field-label">
|
2026-03-22 05:40:02 +00:00
|
|
|
|
設定すると Synology 経由でずんだもん音声が使えます（未設定時はブラウザ音声）。
|
2026-03-21 04:37:40 +00:00
|
|
|
|
</p>
|
|
|
|
|
|
<input class="settings-text-input" id="apiKeyInput" type="password"
|
|
|
|
|
|
placeholder="posimai_api_key" autocomplete="off">
|
|
|
|
|
|
<button class="settings-action-btn" id="apiKeySave">保存</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</aside>
|
|
|
|
|
|
<div class="overlay" id="overlay" aria-hidden="true"></div>
|
|
|
|
|
|
|
|
|
|
|
|
<main id="main-content">
|
|
|
|
|
|
|
|
|
|
|
|
<!-- トップバー -->
|
|
|
|
|
|
<div class="brief-top">
|
|
|
|
|
|
<span class="brief-date" id="briefDate"></span>
|
|
|
|
|
|
<span class="brief-sep">·</span>
|
|
|
|
|
|
<span class="brief-count" id="briefCount">読み込み中...</span>
|
|
|
|
|
|
<div class="brief-top-right">
|
|
|
|
|
|
<span class="voice-badge" id="voiceBadge">
|
|
|
|
|
|
<i data-lucide="mic" style="width:10px;height:10px;stroke-width:2"></i>
|
|
|
|
|
|
<span id="voiceBadgeLabel">ブラウザ音声</span>
|
|
|
|
|
|
</span>
|
|
|
|
|
|
<button class="brief-icon-btn" id="refreshBtn" aria-label="再読み込み">
|
|
|
|
|
|
<i data-lucide="refresh-cw" style="width:15px;height:15px;stroke-width:2"></i>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
<button class="brief-icon-btn" id="settingsBtn" aria-label="設定">
|
|
|
|
|
|
<i data-lucide="settings" style="width:15px;height:15px;stroke-width:1.75"></i>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
2026-03-22 05:40:02 +00:00
|
|
|
|
<!-- 現在再生中の記事情報 -->
|
2026-03-22 05:26:21 +00:00
|
|
|
|
<div class="brief-now-playing">
|
2026-03-21 04:37:40 +00:00
|
|
|
|
<div class="brief-article-meta" id="briefMeta">Posimai Brief</div>
|
|
|
|
|
|
<div class="brief-article-title" id="briefTitle">記事を読み込んでいます</div>
|
|
|
|
|
|
<div class="brief-article-source" id="briefSource"></div>
|
2026-03-22 05:26:21 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- プレーヤー（波形 + 再生ボタン） -->
|
|
|
|
|
|
<div class="brief-player" id="briefPlayer">
|
2026-03-21 04:37:40 +00:00
|
|
|
|
|
2026-03-22 05:40:02 +00:00
|
|
|
|
<!-- 波形 -->
|
|
|
|
|
|
<div class="brief-visual">
|
|
|
|
|
|
<div class="brief-visual-glow" id="briefGlow"></div>
|
|
|
|
|
|
<div class="brief-waveform" id="briefWaveform"></div>
|
2026-03-21 04:37:40 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
|
2026-03-22 05:40:02 +00:00
|
|
|
|
<!-- skip-back · play · skip-forward -->
|
|
|
|
|
|
<div class="brief-controls-row">
|
|
|
|
|
|
<button class="brief-skip-btn" id="prevBtn" aria-label="前の記事">
|
|
|
|
|
|
<i data-lucide="skip-back" style="width:24px;height:24px;stroke-width:2"></i>
|
|
|
|
|
|
</button>
|
2026-03-21 04:37:40 +00:00
|
|
|
|
|
2026-03-22 05:40:02 +00:00
|
|
|
|
<div style="position:relative">
|
|
|
|
|
|
<div class="brief-particles" id="briefParticles"></div>
|
|
|
|
|
|
<button class="brief-play-main" id="playBtn" aria-label="再生">
|
|
|
|
|
|
<div class="brief-play-inner" id="playInner">
|
|
|
|
|
|
<i data-lucide="play" style="fill:#000;width:32px;height:32px;stroke-width:2"></i>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</div>
|
2026-03-21 04:37:40 +00:00
|
|
|
|
|
2026-03-22 05:40:02 +00:00
|
|
|
|
<button class="brief-skip-btn" id="nextBtn" aria-label="次の記事">
|
|
|
|
|
|
<i data-lucide="skip-forward" style="width:24px;height:24px;stroke-width:2"></i>
|
|
|
|
|
|
</button>
|
2026-03-21 04:37:40 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
2026-03-22 05:10:48 +00:00
|
|
|
|
<!-- 記事リスト -->
|
|
|
|
|
|
<div class="brief-list" id="briefList"></div>
|
|
|
|
|
|
|
2026-03-21 04:37:40 +00:00
|
|
|
|
</main>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="toast" role="status" aria-live="polite"></div>
|
|
|
|
|
|
|
|
|
|
|
|
<script src="https://posimai-ui.vercel.app/v1/base.js" defer></script>
|
2026-03-22 05:26:21 +00:00
|
|
|
|
<script>
|
2026-03-21 04:37:40 +00:00
|
|
|
|
// ============================================================
|
|
|
|
|
|
// Posimai Brief — 音声ニュースブリーフィング
|
|
|
|
|
|
// ============================================================
|
|
|
|
|
|
|
2026-03-22 05:40:02 +00:00
|
|
|
|
const FEED_API = 'https://posimai-feed.vercel.app/api/feed';
|
|
|
|
|
|
const API_BASE = 'https://posimai-lab.tail72e846.ts.net/brain/api';
|
|
|
|
|
|
const TTS_API = API_BASE + '/tts';
|
|
|
|
|
|
const DAYS_JP = ['日','月','火','水','木','金','土'];
|
2026-03-21 04:37:40 +00:00
|
|
|
|
|
|
|
|
|
|
// ── 状態 ─────────────────────────────────────────────────────
|
2026-03-22 05:26:21 +00:00
|
|
|
|
let articles = [];
|
|
|
|
|
|
let speechQueue = [];
|
|
|
|
|
|
let currentIdx = 0;
|
2026-03-21 04:37:40 +00:00
|
|
|
|
let isPlaying = false;
|
2026-03-22 05:40:02 +00:00
|
|
|
|
let speechRate = parseFloat(localStorage.getItem('posimai-brief-rate') || '1.0');
|
|
|
|
|
|
let ttsSpeaker = parseInt(localStorage.getItem('posimai-brief-speaker') || '1', 10);
|
2026-03-21 04:37:40 +00:00
|
|
|
|
let audioCtx = null;
|
2026-03-22 05:26:21 +00:00
|
|
|
|
let currentSource = null;
|
2026-03-21 04:37:40 +00:00
|
|
|
|
|
2026-03-22 05:40:02 +00:00
|
|
|
|
// ── 波形（CSS divバー、Daily スタイル） ──────────────────────
|
|
|
|
|
|
const WAVE_BAR_COUNT = 36;
|
|
|
|
|
|
const waveBars = [];
|
|
|
|
|
|
let waveRAF = null;
|
|
|
|
|
|
let lastWaveUpdate = 0;
|
|
|
|
|
|
|
|
|
|
|
|
(function initWave() {
|
|
|
|
|
|
const container = document.getElementById('briefWaveform');
|
|
|
|
|
|
for (let i = 0; i < WAVE_BAR_COUNT; i++) {
|
|
|
|
|
|
const bar = document.createElement('div');
|
|
|
|
|
|
bar.className = 'brief-wave-bar';
|
|
|
|
|
|
container.appendChild(bar);
|
|
|
|
|
|
waveBars.push(bar);
|
2026-03-21 04:37:40 +00:00
|
|
|
|
}
|
2026-03-22 05:40:02 +00:00
|
|
|
|
})();
|
|
|
|
|
|
|
|
|
|
|
|
function updateWaveRAF() {
|
|
|
|
|
|
if (!isPlaying) return;
|
|
|
|
|
|
const now = Date.now();
|
|
|
|
|
|
if (now - lastWaveUpdate >= 150) {
|
|
|
|
|
|
lastWaveUpdate = now;
|
|
|
|
|
|
const time = now * 0.003;
|
|
|
|
|
|
waveBars.forEach((bar, i) => {
|
|
|
|
|
|
const sine = Math.sin(time + i * 0.45) * 22;
|
|
|
|
|
|
const h = Math.max(6, 28 + sine + Math.random() * 16);
|
|
|
|
|
|
bar.style.height = h + 'px';
|
|
|
|
|
|
if (Math.random() > 0.93) bar.classList.add('sparkle');
|
|
|
|
|
|
else bar.classList.remove('sparkle');
|
|
|
|
|
|
});
|
2026-03-21 04:37:40 +00:00
|
|
|
|
}
|
2026-03-22 05:40:02 +00:00
|
|
|
|
waveRAF = requestAnimationFrame(updateWaveRAF);
|
2026-03-21 04:37:40 +00:00
|
|
|
|
}
|
|
|
|
|
|
|
2026-03-22 05:40:02 +00:00
|
|
|
|
function stopWave() {
|
|
|
|
|
|
cancelAnimationFrame(waveRAF);
|
|
|
|
|
|
waveRAF = null;
|
|
|
|
|
|
waveBars.forEach(bar => { bar.style.height = '8px'; bar.classList.remove('sparkle'); });
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// ── パーティクル ──────────────────────────────────────────────
|
|
|
|
|
|
let particleInterval = null;
|
|
|
|
|
|
|
|
|
|
|
|
function createParticle() {
|
|
|
|
|
|
if (!isPlaying) return;
|
|
|
|
|
|
const container = document.getElementById('briefParticles');
|
|
|
|
|
|
const p = document.createElement('div');
|
|
|
|
|
|
p.className = 'brief-particle';
|
|
|
|
|
|
const angle = Math.random() * Math.PI * 2;
|
|
|
|
|
|
const dist = 50 + Math.random() * 55;
|
|
|
|
|
|
const size = 2 + Math.random() * 3;
|
|
|
|
|
|
const dur = 0.6 + Math.random() * 0.4;
|
|
|
|
|
|
p.style.cssText = `
|
|
|
|
|
|
width:${size}px; height:${size}px;
|
|
|
|
|
|
left:50%; top:50%;
|
|
|
|
|
|
--tx:${Math.cos(angle) * dist}px;
|
|
|
|
|
|
--ty:${Math.sin(angle) * dist}px;
|
|
|
|
|
|
animation: brief-particle-sparkle ${dur}s cubic-bezier(0,.5,.5,1) forwards;
|
|
|
|
|
|
`;
|
|
|
|
|
|
container.appendChild(p);
|
|
|
|
|
|
setTimeout(() => p.remove(), 1000);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function startEffects() {
|
|
|
|
|
|
updateWaveRAF();
|
|
|
|
|
|
particleInterval = setInterval(createParticle, 45);
|
|
|
|
|
|
document.getElementById('briefGlow').style.opacity = '0.8';
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function stopEffects() {
|
|
|
|
|
|
stopWave();
|
|
|
|
|
|
clearInterval(particleInterval);
|
|
|
|
|
|
particleInterval = null;
|
|
|
|
|
|
document.getElementById('briefGlow').style.opacity = '0.3';
|
2026-03-21 04:37:40 +00:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// ── 音声制御 ──────────────────────────────────────────────────
|
|
|
|
|
|
function getAudioCtx() {
|
|
|
|
|
|
if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
|
|
|
|
|
|
if (audioCtx.state === 'suspended') audioCtx.resume();
|
|
|
|
|
|
return audioCtx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function stopAudio() {
|
|
|
|
|
|
if (currentSource) {
|
|
|
|
|
|
currentSource.onended = null;
|
|
|
|
|
|
try { currentSource.stop(); } catch(e) {}
|
|
|
|
|
|
currentSource = null;
|
|
|
|
|
|
}
|
|
|
|
|
|
window.speechSynthesis.cancel();
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function preprocessText(t) {
|
|
|
|
|
|
return (t || '')
|
|
|
|
|
|
.replace(/https?:\/\/\S+/g, '')
|
|
|
|
|
|
.replace(/[「」『』【】〔〕《》]/g, '')
|
|
|
|
|
|
.replace(/([。！？])([^\s])/g, '$1 $2')
|
|
|
|
|
|
.replace(/\s{2,}/g, ' ')
|
|
|
|
|
|
.trim();
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
async function tryVoicevox(text) {
|
|
|
|
|
|
const apiKey = localStorage.getItem('posimai-brief-apikey');
|
|
|
|
|
|
if (!apiKey) return false;
|
|
|
|
|
|
|
2026-03-22 05:26:21 +00:00
|
|
|
|
const ctx = getAudioCtx();
|
2026-03-21 04:37:40 +00:00
|
|
|
|
const res = await fetch(TTS_API, {
|
|
|
|
|
|
method: 'POST',
|
|
|
|
|
|
headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${apiKey}` },
|
2026-03-22 05:40:02 +00:00
|
|
|
|
body: JSON.stringify({ text: preprocessText(text), speaker: ttsSpeaker }),
|
2026-03-21 04:37:40 +00:00
|
|
|
|
});
|
|
|
|
|
|
if (!res.ok) return false;
|
|
|
|
|
|
|
|
|
|
|
|
const buf = await ctx.decodeAudioData(await res.arrayBuffer());
|
2026-03-22 05:26:21 +00:00
|
|
|
|
if (!isPlaying) return true;
|
2026-03-21 04:37:40 +00:00
|
|
|
|
|
|
|
|
|
|
return new Promise(resolve => {
|
|
|
|
|
|
currentSource = ctx.createBufferSource();
|
|
|
|
|
|
currentSource.buffer = buf;
|
2026-03-22 05:40:02 +00:00
|
|
|
|
currentSource.playbackRate.value = speechRate;
|
2026-03-21 04:37:40 +00:00
|
|
|
|
currentSource.connect(ctx.destination);
|
2026-03-22 05:40:02 +00:00
|
|
|
|
currentSource.onended = () => { currentSource = null; resolve(true); };
|
2026-03-21 04:37:40 +00:00
|
|
|
|
currentSource.start(0);
|
|
|
|
|
|
updateVoiceBadge(true);
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function speakBrowser(text, onEnd) {
|
|
|
|
|
|
const utter = new SpeechSynthesisUtterance(preprocessText(text));
|
|
|
|
|
|
const voices = speechSynthesis.getVoices();
|
2026-03-22 05:40:02 +00:00
|
|
|
|
const ja = voices.find(v => v.lang.startsWith('ja') && !v.localService)
|
|
|
|
|
|
|| voices.find(v => v.lang.startsWith('ja') && v.name.match(/Natural|Enhanced|Neural|Premium/))
|
2026-03-21 04:37:40 +00:00
|
|
|
|
|| voices.find(v => v.lang.startsWith('ja'))
|
|
|
|
|
|
|| null;
|
|
|
|
|
|
if (ja) utter.voice = ja;
|
|
|
|
|
|
utter.rate = speechRate;
|
|
|
|
|
|
utter.lang = 'ja-JP';
|
2026-03-22 05:40:02 +00:00
|
|
|
|
utter.onend = onEnd;
|
2026-03-21 04:37:40 +00:00
|
|
|
|
utter.onerror = onEnd;
|
|
|
|
|
|
speechSynthesis.speak(utter);
|
|
|
|
|
|
updateVoiceBadge(false);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
async function speak(text) {
|
|
|
|
|
|
if (!isPlaying) return;
|
|
|
|
|
|
stopAudio();
|
|
|
|
|
|
|
2026-03-22 05:40:02 +00:00
|
|
|
|
let vvOk = false;
|
|
|
|
|
|
try { vvOk = (await tryVoicevox(text)) === true; } catch(e) {}
|
2026-03-21 04:37:40 +00:00
|
|
|
|
|
|
|
|
|
|
if (!isPlaying) return;
|
2026-03-22 05:40:02 +00:00
|
|
|
|
if (vvOk) {
|
2026-03-21 04:37:40 +00:00
|
|
|
|
onSpeakEnd();
|
|
|
|
|
|
} else {
|
|
|
|
|
|
speakBrowser(text, () => { if (isPlaying) onSpeakEnd(); });
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function onSpeakEnd() {
|
|
|
|
|
|
if (!isPlaying) return;
|
|
|
|
|
|
currentIdx++;
|
|
|
|
|
|
playNext();
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function playNext() {
|
|
|
|
|
|
if (currentIdx >= speechQueue.length) {
|
|
|
|
|
|
isPlaying = false;
|
|
|
|
|
|
updatePlayBtn();
|
2026-03-22 05:40:02 +00:00
|
|
|
|
stopEffects();
|
2026-03-21 04:37:40 +00:00
|
|
|
|
updateArticleDisplay(articles[articles.length - 1], articles.length - 1);
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
updateArticleDisplay(
|
|
|
|
|
|
articles[Math.min(currentIdx, articles.length - 1)],
|
|
|
|
|
|
Math.min(currentIdx, articles.length - 1)
|
|
|
|
|
|
);
|
|
|
|
|
|
speak(speechQueue[currentIdx]);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// ── UI 更新 ───────────────────────────────────────────────────
|
|
|
|
|
|
function updatePlayBtn() {
|
2026-03-22 05:40:02 +00:00
|
|
|
|
const btn = document.getElementById('playBtn');
|
|
|
|
|
|
const inner = document.getElementById('playInner');
|
|
|
|
|
|
const icon = isPlaying ? 'pause' : 'play';
|
|
|
|
|
|
inner.innerHTML = `<i data-lucide="${icon}" style="fill:#000;width:32px;height:32px;stroke-width:2"></i>`;
|
2026-03-21 04:37:40 +00:00
|
|
|
|
btn.classList.toggle('playing', isPlaying);
|
|
|
|
|
|
lucide.createIcons();
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-03-22 05:26:21 +00:00
|
|
|
|
function esc(str) {
|
|
|
|
|
|
return (str || '')
|
|
|
|
|
|
.replace(/&/g, '&')
|
|
|
|
|
|
.replace(/</g, '<')
|
|
|
|
|
|
.replace(/>/g, '>')
|
|
|
|
|
|
.replace(/"/g, '"');
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-03-22 05:40:02 +00:00
|
|
|
|
function formatTimeAgo(dateStr) {
|
|
|
|
|
|
if (!dateStr) return '';
|
|
|
|
|
|
const diff = Date.now() - new Date(dateStr).getTime();
|
|
|
|
|
|
const min = Math.floor(diff / 60000);
|
|
|
|
|
|
if (min < 1) return 'たった今';
|
|
|
|
|
|
if (min < 60) return `${min}分前`;
|
|
|
|
|
|
const h = Math.floor(min / 60);
|
|
|
|
|
|
if (h < 24) return `${h}時間前`;
|
|
|
|
|
|
return `${Math.floor(h / 24)}日前`;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-03-21 04:37:40 +00:00
|
|
|
|
function updateArticleDisplay(a, idx) {
|
|
|
|
|
|
if (!a) return;
|
2026-03-22 05:40:02 +00:00
|
|
|
|
document.getElementById('briefMeta').textContent = `${idx + 1} / ${articles.length}`;
|
|
|
|
|
|
document.getElementById('briefTitle').textContent = a.title || '---';
|
|
|
|
|
|
document.getElementById('briefSource').textContent = a.source || '';
|
2026-03-22 05:10:48 +00:00
|
|
|
|
updateListHighlight(idx);
|
2026-03-21 04:37:40 +00:00
|
|
|
|
if ('mediaSession' in navigator) {
|
|
|
|
|
|
navigator.mediaSession.metadata = new MediaMetadata({
|
2026-03-22 05:40:02 +00:00
|
|
|
|
title: a.title || 'Posimai Brief',
|
2026-03-21 04:37:40 +00:00
|
|
|
|
artist: a.source || 'Posimai',
|
|
|
|
|
|
album: 'Daily Briefing',
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-03-22 05:10:48 +00:00
|
|
|
|
function renderList() {
|
|
|
|
|
|
const list = document.getElementById('briefList');
|
|
|
|
|
|
list.innerHTML = '';
|
|
|
|
|
|
articles.forEach((a, i) => {
|
2026-03-22 05:26:21 +00:00
|
|
|
|
const isActive = i === currentIdx;
|
2026-03-22 05:40:02 +00:00
|
|
|
|
const item = document.createElement('div');
|
2026-03-22 05:26:21 +00:00
|
|
|
|
item.className = 'brief-list-item' + (isActive ? ' active' : '');
|
2026-03-22 05:40:02 +00:00
|
|
|
|
|
|
|
|
|
|
const timeStr = formatTimeAgo(a.publishedAt);
|
|
|
|
|
|
const metaParts = [esc(a.source), timeStr].filter(Boolean);
|
|
|
|
|
|
|
2026-03-22 05:10:48 +00:00
|
|
|
|
item.innerHTML = `
|
2026-03-22 05:26:21 +00:00
|
|
|
|
<span class="brief-list-num${isActive ? ' active' : ''}">${i + 1}</span>
|
2026-03-22 05:10:48 +00:00
|
|
|
|
<div class="brief-list-info">
|
2026-03-22 05:26:21 +00:00
|
|
|
|
<div class="brief-list-title${isActive ? ' active' : ''}">${esc(a.title)}</div>
|
2026-03-22 05:40:02 +00:00
|
|
|
|
${metaParts.length ? `<div class="brief-list-meta">${metaParts.join('<span style="opacity:.4">·</span>')}</div>` : ''}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
${a.url ? `<a class="brief-list-link" href="${esc(a.url)}" target="_blank" rel="noopener" aria-label="記事を開く">
|
|
|
|
|
|
<i data-lucide="external-link" style="width:15px;height:15px;stroke-width:1.75"></i>
|
|
|
|
|
|
</a>` : ''}
|
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
|
|
// 記事タップ → 音声再生ジャンプ
|
2026-03-22 05:10:48 +00:00
|
|
|
|
item.addEventListener('click', () => {
|
|
|
|
|
|
const wasPlaying = isPlaying;
|
|
|
|
|
|
stopAudio();
|
2026-03-22 05:26:21 +00:00
|
|
|
|
isPlaying = false;
|
2026-03-22 05:10:48 +00:00
|
|
|
|
currentIdx = i;
|
|
|
|
|
|
updateArticleDisplay(articles[i], i);
|
2026-03-22 05:26:21 +00:00
|
|
|
|
if (wasPlaying) {
|
|
|
|
|
|
isPlaying = true;
|
|
|
|
|
|
updatePlayBtn();
|
2026-03-22 05:40:02 +00:00
|
|
|
|
startEffects();
|
2026-03-22 05:26:21 +00:00
|
|
|
|
playNext();
|
|
|
|
|
|
}
|
2026-03-22 05:10:48 +00:00
|
|
|
|
});
|
2026-03-22 05:40:02 +00:00
|
|
|
|
|
|
|
|
|
|
// 外部リンクは伝播させない
|
|
|
|
|
|
const link = item.querySelector('.brief-list-link');
|
|
|
|
|
|
if (link) link.addEventListener('click', e => e.stopPropagation());
|
|
|
|
|
|
|
2026-03-22 05:10:48 +00:00
|
|
|
|
list.appendChild(item);
|
|
|
|
|
|
});
|
2026-03-22 05:40:02 +00:00
|
|
|
|
lucide.createIcons();
|
2026-03-22 05:10:48 +00:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function updateListHighlight(idx) {
|
|
|
|
|
|
document.querySelectorAll('.brief-list-item').forEach((el, i) => {
|
|
|
|
|
|
const active = i === idx;
|
|
|
|
|
|
el.classList.toggle('active', active);
|
2026-03-22 05:26:21 +00:00
|
|
|
|
const numEl = el.querySelector('.brief-list-num');
|
|
|
|
|
|
const titleEl = el.querySelector('.brief-list-title');
|
|
|
|
|
|
if (numEl) numEl.classList.toggle('active', active);
|
|
|
|
|
|
if (titleEl) titleEl.classList.toggle('active', active);
|
2026-03-22 05:40:02 +00:00
|
|
|
|
if (active) el.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
|
2026-03-22 05:10:48 +00:00
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-03-21 04:37:40 +00:00
|
|
|
|
function updateVoiceBadge(isVoicevox) {
|
|
|
|
|
|
const badge = document.getElementById('voiceBadge');
|
|
|
|
|
|
const label = document.getElementById('voiceBadgeLabel');
|
2026-03-22 05:40:02 +00:00
|
|
|
|
label.textContent = isVoicevox ? 'VOICEVOX' : 'ブラウザ音声';
|
2026-03-21 04:37:40 +00:00
|
|
|
|
badge.classList.toggle('voicevox', isVoicevox);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// ── 再生・一時停止 ────────────────────────────────────────────
|
|
|
|
|
|
document.getElementById('playBtn').addEventListener('click', () => {
|
|
|
|
|
|
if (!articles.length) return;
|
|
|
|
|
|
isPlaying = !isPlaying;
|
|
|
|
|
|
updatePlayBtn();
|
|
|
|
|
|
if (isPlaying) {
|
|
|
|
|
|
if (currentIdx >= speechQueue.length) currentIdx = 0;
|
2026-03-22 05:40:02 +00:00
|
|
|
|
startEffects();
|
2026-03-21 04:37:40 +00:00
|
|
|
|
playNext();
|
|
|
|
|
|
} else {
|
|
|
|
|
|
stopAudio();
|
2026-03-22 05:40:02 +00:00
|
|
|
|
stopEffects();
|
2026-03-21 04:37:40 +00:00
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// ── スキップ ─────────────────────────────────────────────────
|
|
|
|
|
|
function skip(dir) {
|
|
|
|
|
|
const wasPlaying = isPlaying;
|
|
|
|
|
|
stopAudio();
|
2026-03-22 05:26:21 +00:00
|
|
|
|
isPlaying = false;
|
|
|
|
|
|
currentIdx = Math.max(0, Math.min(articles.length - 1, currentIdx + dir));
|
|
|
|
|
|
updateArticleDisplay(articles[currentIdx], currentIdx);
|
|
|
|
|
|
if (wasPlaying) {
|
|
|
|
|
|
isPlaying = true;
|
|
|
|
|
|
updatePlayBtn();
|
2026-03-22 05:40:02 +00:00
|
|
|
|
startEffects();
|
2026-03-22 05:26:21 +00:00
|
|
|
|
playNext();
|
|
|
|
|
|
}
|
2026-03-21 04:37:40 +00:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
document.getElementById('prevBtn').addEventListener('click', () => skip(-1));
|
|
|
|
|
|
document.getElementById('nextBtn').addEventListener('click', () => skip(1));
|
|
|
|
|
|
|
2026-03-22 05:26:21 +00:00
|
|
|
|
// MediaSession
|
2026-03-21 04:37:40 +00:00
|
|
|
|
if ('mediaSession' in navigator) {
|
2026-03-22 05:40:02 +00:00
|
|
|
|
navigator.mediaSession.setActionHandler('play', () => { if (!isPlaying) { isPlaying = true; updatePlayBtn(); startEffects(); playNext(); } });
|
|
|
|
|
|
navigator.mediaSession.setActionHandler('pause', () => { if (isPlaying) { isPlaying = false; updatePlayBtn(); stopAudio(); stopEffects(); } });
|
2026-03-21 04:37:40 +00:00
|
|
|
|
navigator.mediaSession.setActionHandler('previoustrack', () => skip(-1));
|
|
|
|
|
|
navigator.mediaSession.setActionHandler('nexttrack', () => skip(1));
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-03-22 05:40:02 +00:00
|
|
|
|
// ── 再生速度 ─────────────────────────────────────────────────
|
|
|
|
|
|
function initSpeedBtns() {
|
|
|
|
|
|
document.querySelectorAll('#speedGroup .brief-seg-btn').forEach(btn => {
|
|
|
|
|
|
const v = parseFloat(btn.dataset.speed);
|
|
|
|
|
|
btn.classList.toggle('active', v === speechRate);
|
|
|
|
|
|
btn.addEventListener('click', () => {
|
|
|
|
|
|
speechRate = v;
|
|
|
|
|
|
localStorage.setItem('posimai-brief-rate', String(v));
|
|
|
|
|
|
document.querySelectorAll('#speedGroup .brief-seg-btn').forEach(b => b.classList.toggle('active', parseFloat(b.dataset.speed) === v));
|
|
|
|
|
|
if (isPlaying) { stopAudio(); playNext(); }
|
|
|
|
|
|
});
|
2026-03-21 04:37:40 +00:00
|
|
|
|
});
|
2026-03-22 05:40:02 +00:00
|
|
|
|
}
|
2026-03-21 04:37:40 +00:00
|
|
|
|
|
2026-03-22 05:40:02 +00:00
|
|
|
|
// ── 音声キャラクター ──────────────────────────────────────────
|
|
|
|
|
|
function initSpeakerBtns() {
|
|
|
|
|
|
document.querySelectorAll('#speakerGroup .brief-seg-btn').forEach(btn => {
|
|
|
|
|
|
const v = parseInt(btn.dataset.speaker, 10);
|
|
|
|
|
|
btn.classList.toggle('active', v === ttsSpeaker);
|
|
|
|
|
|
btn.addEventListener('click', () => {
|
|
|
|
|
|
ttsSpeaker = v;
|
|
|
|
|
|
localStorage.setItem('posimai-brief-speaker', String(v));
|
|
|
|
|
|
document.querySelectorAll('#speakerGroup .brief-seg-btn').forEach(b => b.classList.toggle('active', parseInt(b.dataset.speaker, 10) === v));
|
|
|
|
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
2026-03-21 04:37:40 +00:00
|
|
|
|
|
|
|
|
|
|
// ── API キー保存 ──────────────────────────────────────────────
|
|
|
|
|
|
document.getElementById('apiKeyInput').value = localStorage.getItem('posimai-brief-apikey') || '';
|
|
|
|
|
|
document.getElementById('apiKeySave').addEventListener('click', () => {
|
|
|
|
|
|
const v = document.getElementById('apiKeyInput').value.trim();
|
|
|
|
|
|
localStorage.setItem('posimai-brief-apikey', v);
|
2026-03-22 05:26:21 +00:00
|
|
|
|
if (typeof showToast === 'function') showToast('保存しました');
|
2026-03-21 04:37:40 +00:00
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// ── 日付表示 ─────────────────────────────────────────────────
|
|
|
|
|
|
function updateDate() {
|
|
|
|
|
|
const now = new Date();
|
2026-03-22 05:40:02 +00:00
|
|
|
|
document.getElementById('briefDate').textContent = `${now.getMonth() + 1}月${now.getDate()}日（${DAYS_JP[now.getDay()]}）`;
|
2026-03-21 04:37:40 +00:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// ── フィード読み込み ──────────────────────────────────────────
|
|
|
|
|
|
async function loadFeed() {
|
|
|
|
|
|
document.getElementById('briefTitle').textContent = '記事を読み込んでいます';
|
|
|
|
|
|
document.getElementById('briefSource').textContent = '';
|
2026-03-22 05:26:21 +00:00
|
|
|
|
document.getElementById('briefMeta').textContent = 'Posimai Brief';
|
2026-03-21 04:37:40 +00:00
|
|
|
|
document.getElementById('briefCount').textContent = '...';
|
2026-03-22 05:26:21 +00:00
|
|
|
|
document.getElementById('briefList').innerHTML = '';
|
2026-03-21 04:37:40 +00:00
|
|
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
|
const res = await fetch(FEED_API, { cache: 'no-store' });
|
|
|
|
|
|
if (!res.ok) throw new Error(`Feed ${res.status}`);
|
|
|
|
|
|
const data = await res.json();
|
|
|
|
|
|
const list = (data.articles || []).slice(0, 8);
|
|
|
|
|
|
if (!list.length) throw new Error('no articles');
|
|
|
|
|
|
|
|
|
|
|
|
articles = list;
|
|
|
|
|
|
speechQueue = [];
|
|
|
|
|
|
currentIdx = 0;
|
|
|
|
|
|
|
|
|
|
|
|
list.forEach((a, i) => {
|
|
|
|
|
|
const prefix = i === 0 ? '最初のニュースです。' : '続いて。';
|
|
|
|
|
|
speechQueue.push(`${prefix}${a.source || ''}より。${a.title || ''}`);
|
|
|
|
|
|
});
|
|
|
|
|
|
speechQueue.push('本日のブリーフィングは以上です。');
|
|
|
|
|
|
|
|
|
|
|
|
document.getElementById('briefCount').textContent = `${list.length}件`;
|
|
|
|
|
|
updateArticleDisplay(list[0], 0);
|
2026-03-22 05:10:48 +00:00
|
|
|
|
renderList();
|
2026-03-21 04:37:40 +00:00
|
|
|
|
} catch (e) {
|
|
|
|
|
|
document.getElementById('briefTitle').textContent = '記事の取得に失敗しました';
|
|
|
|
|
|
document.getElementById('briefSource').textContent = 'ネットワークを確認してください';
|
2026-03-22 05:26:21 +00:00
|
|
|
|
document.getElementById('briefMeta').textContent = 'ERROR';
|
2026-03-21 04:37:40 +00:00
|
|
|
|
document.getElementById('briefCount').textContent = 'エラー';
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-03-22 05:40:02 +00:00
|
|
|
|
// ── 再読み込み ────────────────────────────────────────────────
|
2026-03-21 04:37:40 +00:00
|
|
|
|
document.getElementById('refreshBtn').addEventListener('click', () => {
|
2026-03-22 05:40:02 +00:00
|
|
|
|
if (isPlaying) { isPlaying = false; stopAudio(); stopEffects(); updatePlayBtn(); }
|
2026-03-21 04:37:40 +00:00
|
|
|
|
loadFeed();
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// ── SW 登録 ──────────────────────────────────────────────────
|
|
|
|
|
|
if ('serviceWorker' in navigator) {
|
|
|
|
|
|
navigator.serviceWorker.register('/sw.js').catch(() => {});
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// ── 初期化 ───────────────────────────────────────────────────
|
|
|
|
|
|
updateDate();
|
2026-03-22 05:40:02 +00:00
|
|
|
|
initSpeedBtns();
|
|
|
|
|
|
initSpeakerBtns();
|
2026-03-21 04:37:40 +00:00
|
|
|
|
loadFeed();
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
