// ===== オーナー側 O-05〜O-10 ===== // デモ取り込み時に追加される、高品質な実践トレーニング用スライドプール const IMPORT_POOL = [ { k: '01 ARTICULATION', a: '割りばしを軽く噛み「あえいうえおあお」を3回発声', h: '口角をしっかり上げて母音の響きを意識します', tpl: 0 }, { k: '02 BREATH CONTROL', a: '細く長く20秒かけて一定の息を吐き続ける', h: '息の揺れや途切れがないかスマホで耳を澄ませてチェック', tpl: 2 }, { k: '03 TONE WORK', a: 'ド・ミ・ソの音階で「ら・ら・ら」と響かせる', h: '胸元と眉間の両方に振動が伝わる感覚を掴みましょう', tpl: 1 }, { k: '04 ACTION TASK', a: '今日一番調子の良かった「1音」をボイスメモに保存', h: '録音をためることで自分の声の進化を実感できます', tpl: 3 }, ]; // ---------- O-05 ステージの編集 ---------- function O05Stage({ m, go, rm, setRm, cfg, ost, toast }) { const si = Math.min(ost.stage || 0, rm.stages.length - 1); const st = rm.stages[si]; const [importing, setImporting] = React.useState(false); const [progress, setProgress] = React.useState(null); const [drag, setDrag] = React.useState(null); const [sel, setSel] = React.useState(0); const lp = React.useRef(null); if (!st) return
ステージがありません
; const upd = (fn) => { setRm(r => ({ ...r, stages: r.stages.map((s, k) => k === si ? fn(s) : s) })); ping(); }; const moveStep = (a, b) => { if (b < 0 || b >= st.steps.length || a === b) return; upd(s => { const x = [...s.steps]; const [y] = x.splice(a, 1); x.splice(b, 0, y); return { ...s, steps: x }; }); }; const delStep = (i) => { const removed = st.steps[i]; upd(s => ({ ...s, steps: s.steps.filter((_, k) => k !== i) })); toast('削除しました', () => upd(s => { const x = [...s.steps]; x.splice(i, 0, removed); return { ...s, steps: x }; })); }; const fileInputRef = React.useRef(null); // パソコンやスマホから画像ファイルまたはPDFを取り込んでステップに変換する処理 // 引数: files（選択されたファイル一覧） // （本棚に新しいアルバムのページを差し込んでいくような処理です） const handleFiles = async (files) => { if (!files || !files.length) return; setImporting(false); // ① PDFファイルが含まれているかチェック const pdfFile = Array.from(files).find(f => f.type === 'application/pdf' || f.name.toLowerCase().endsWith('.pdf')); if (pdfFile && window.convertPdfToSlideSteps) { setProgress({ n: 0, src: 'PDFファイル', total: 1 }); try { const result = await window.convertPdfToSlideSteps(pdfFile, (current, total) => { setProgress({ n: current, src: 'PDF各ページ', total: total }); }); const spaceLeft = 30 - st.steps.length; const toAdd = result.steps.slice(0, spaceLeft); upd(s => ({ ...s, steps: [...s.steps, ...toAdd] })); if (result.exceeded || result.steps.length > spaceLeft) { toast(`上限のため最初の${toAdd.length}枚のみ取り込みました（最大30枚）`); } else { toast(`PDFから${toAdd.length}枚のスライドを取り込みました`); } // Supabase接続中なら裏側で自動同期を試みる if (window.syncRoadmapToSupabase) { setTimeout(() => window.syncRoadmapToSupabase(rm), 600); } } catch (err) { console.error('PDF取り込み失敗:', err); toast('PDFの取り込みに失敗しました'); } finally { setProgress(null); } return; } // ② 画像ファイルの場合の処理 const validFiles = Array.from(files).filter(f => f.type.startsWith('image/')).slice(0, 30 - st.steps.length); if (!validFiles.length) { toast('画像（PNG/JPG）またはPDFファイルを選択してください'); return; } setProgress({ n: 0, src: '画像ファイル', total: validFiles.length }); let loadedCount = 0; const newSteps = []; validFiles.forEach((file, index) => { const reader = new FileReader(); reader.onload = (e) => { newSteps.push({ k: 'STEP ' + (st.steps.length + newSteps.length + 1), a: file.name.replace(/\.[^/.]+$/, ''), // 拡張子を除いたファイル名 h: '取り込んだスライド画像', image: e.target.result, // DataURL形式の画像データ addedAt: Date.now(), }); loadedCount++; setProgress({ n: loadedCount, src: '画像ファイル', total: validFiles.length }); // 全ての画像が読み終わったら、ステージのステップ一覧に追加します if (loadedCount >= validFiles.length) { setTimeout(() => { setProgress(null); upd(s => ({ ...s, steps: [...s.steps, ...newSteps].slice(0, 30) })); toast(`${newSteps.length}枚のスライドを取り込みました`); if (window.syncRoadmapToSupabase) { setTimeout(() => window.syncRoadmapToSupabase(rm), 600); } }, 300); } }; reader.readAsDataURL(file); }); }; const doImport = (src) => { setImporting(false); setProgress({ n: 0, src }); let n = 0; const total = 4; const iv = setInterval(() => { n++; setProgress({ n, src, total }); if (n >= total) { clearInterval(iv); setTimeout(() => { setProgress(null); upd(s => ({ ...s, steps: [...s.steps, ...IMPORT_POOL].slice(0, 30) })); toast('デモスライドを取り込みました'); }, 350); } }, 320); }; const cur = st.steps[Math.min(sel, st.steps.length - 1)]; return (
ステージ {si + 1}
ステージの編集
{/* 受講者にはこう見えます */}
受講者にはこう見えます
{st.steps.length > 0 && {Math.min(sel, st.steps.length - 1) + 1}/{st.steps.length}}
{cur ? :
スライドを取り込むと、ここに出ます
}
{/* steps */}
ステップ {st.steps.length}/30
{st.steps.length > 0 && {m ? '長押しで削除' : 'ドラッグで並び替え · 右上 ✕ で削除'}}
{progress && (
{progress.src}から取り込み中…{progress.n}/4
)} {st.steps.length === 0 && !progress ? (
e.preventDefault()} onDrop={e => { e.preventDefault(); handleFiles(e.dataTransfer.files); }} onClick={() => setImporting(true)} >
画像・PDFをここにドロップ
1枚 = 1ステップ（最大30枚まで）
) : (
{st.steps.map((s, i) => (
setDrag(i)} onDragOver={e => { e.preventDefault(); if (drag !== null && drag !== i) { moveStep(drag, i); setDrag(i); } }} onDragEnd={() => setDrag(null)} onClick={() => setSel(i)} onPointerDown={() => { if (m) lp.current = setTimeout(() => delStep(i), 600); }} onPointerUp={() => clearTimeout(lp.current)} onPointerLeave={() => clearTimeout(lp.current)} style={{ position: 'relative', cursor: 'grab' }} className={'step-thumb ' + (drag === i ? 'is-dragging' : '')}>
{String(i + 1).padStart(2, '0')}
{!m && }
))} {st.steps.length < 30 && ( )}
)}
{/* settings */}
upd(s => ({ ...s, title: e.target.value }))} />
{st.title.length}/24
upd(s => ({ ...s, aura: a }))} />
取り込んだ時点の画像で保存されます。?
{/* 隠しファイル選択ダイアログ（ファイル選択ボタンを押した時に起動） */} handleFiles(e.target.files)} /> {importing && (
setImporting(false)}>
e.stopPropagation()}>
スライドを取り込む
30枚を超える分は取り込まれません
)}
); } // ---------- O-06 プレビュー ---------- // 管理者が受講生の体験をそのまま事前確認できるプレビュー画面 function O06Preview({ m, go, rm, setRm, cfg, reduced }) { const [si, setSi] = React.useState(0); const [i, setI] = React.useState(0); const [fx, setFx] = React.useState(null); const [bigFx, setBigFx] = React.useState(null); // ステージ達成時の全画面演出用 const ref = React.useRef(null); const st = rm.stages[si] || rm.stages[0]; React.useEffect(() => { setRm(r => r.previewed ? r : { ...r, previewed: true }); }, []); if (!st) return null; const n = st.steps.length; const ac = auraC(st.aura); // バー（進捗ゲージ）と同じオーラカラーコード // 「次へ」または「達成！」ボタンが押されたときの処理 const next = (e) => { // 最後のスライドに到達している場合は、ステージクリア演出（覚醒エフェクト）を発火 if (i >= n - 1) { const isAllClear = si >= rm.stages.length - 1; const nextSi = isAllClear ? 0 : si + 1; const key = Math.random(); setBigFx({ key, aura: ac, aura2: auraC(rm.stages[(si + 1) % rm.stages.length]?.aura || st.aura), plus: isAllClear, title: isAllClear ? rm.title : st.title, after: () => { setSi(nextSi); setI(0); setBigFx(null); } }); return; } // 途中のステップの場合は、カード枠内のプチ演出を出して次のスライドへ進む const k = Math.random(); const r = ref.current?.getBoundingClientRect(); const sc = r && ref.current ? r.width / ref.current.offsetWidth : 1; setFx({ t: i === 0 ? 'A' : 'B', k, x: e?.clientX && r ? (e.clientX - r.left) / sc : 200, y: e?.clientY && r ? (e.clientY - r.top) / sc : 100 }); setTimeout(() => setFx(f => f && f.k === k ? null : f), 1250); setI(i + 1); }; const isLast = i >= n - 1; const fxNode = fx && (fx.t === 'A' ? : ); return (
プレビュー
プレビュー
{!m && }
{rm.stages.map((s, k) => ( ))}
{/* ボタン配色はステージオーラではなく「設定/グラスの色」に完全統一 */} {(() => { const btnTheme = getButtonTheme(cfg); return ( ); })()}
{m && } {/* ステージクリア達成時の全画面エフェクト（クリックで即スキップ可能） */} {bigFx && (
{ if (bigFx.after) bigFx.after(); setBigFx(null); }}>
)}
); } // ---------- O-07 公開 ---------- function O07Publish({ m, go, rm, setRm, cfg }) { const [copied, setCopied] = React.useState(null); const [site, setSite] = React.useState('UTAGE'); const [showNotice, setShowNotice] = React.useState(false); React.useEffect(() => { setRm(r => ({ ...r, published: true })); }, []); const origin = window.location.origin; const shareUrl = `${origin}/#${rm.slug || 'tachibana/seikatsu'}`; const ph = site === 'UTAGE' ? '%mail%' : '%email%'; const code = `
\n`; const copy = (k, text) => { navigator.clipboard?.writeText(text || (k === 'url' ? shareUrl : code)); setCopied(k); setTimeout(() => setCopied(null), 1600); }; const sampleNoticeText = `【受講者のみなさまへ】\n本レッスンのアクションプランは、新ツール「NEXTAGE」を埋め込んで提供しています。\n1ステップずつ進めるだけであなたの進捗が自動保存されます。\n※メールアドレス等の個人情報は暗号化されており、外部に漏れることはありません。`; return (
公開
公開しました
公開中
URLを受講者に送るだけで始められます。
{shareUrl}
会員サイトに埋め込むPRO?
{cfg.plan === 'pro' &&
{['UTAGE', 'MyASP'].map(s => )}
}
{cfg.plan === 'pro' ? ( <> 
{code}
{site}のレッスンページにそのまま貼り付け
) : (
UTAGE・MyASPの会員ごとに進捗を記録
)}
{showNotice && (
setShowNotice(false)}>
e.stopPropagation()}>
会員への告知文のひな形
会員サイト（UTAGE / MyASP）の冒頭や受講案内メールにそのまま貼り付けできます。