@@ -326,10 +342,26 @@ const MENU = [
document.addEventListener('visibilitychange', function(){ if (document.hidden) { clearTimeout(timer); vids(scs[si], false); } else show(si); });
}
var loops = document.querySelectorAll('.srl video.loop');
- if (still) { loops.forEach(function(v){ v.controls = true; }); }
+ if (still) { loops.forEach(function(v){ v.controls = true; }); document.querySelectorAll('#baPair video').forEach(function(v){ v.controls = true; }); }
else if ('IntersectionObserver' in window) {
var io = new IntersectionObserver(function(es){ es.forEach(function(e){ var v = e.target; if (e.isIntersecting) { v.play().catch(function(){}); } else { v.pause(); } }); }, { threshold: .35 });
loops.forEach(function(v){ io.observe(v); });
+ // 直す前・直した後の2本は、見えたら頭から同時に流し、どちらかが終わったら2本とも頭に戻す
+ var ba = document.getElementById('baPair');
+ if (ba) {
+ var bv = [].slice.call(ba.querySelectorAll('video'));
+ // 2本とも再生できる状態になってから頭をそろえて流す（片方の読み込みが遅いと、先に流れた方とずれるため）
+ var ready = function(){ return bv.every(function(v){ return v.readyState >= 3; }); };
+ var restart = function(){
+ if (!ready()) { bv.forEach(function(v){ v.addEventListener('canplay', function once(){ v.removeEventListener('canplay', once); if (ready()) restart(); }); }); return; }
+ bv.forEach(function(v){ try { v.currentTime = 0; v.play().catch(function(){}); } catch(e){} });
+ };
+ bv.forEach(function(v){ v.addEventListener('ended', restart); });
+ // 流れている間も、右を左の時刻に合わせ直す（0.15秒以上ずれたら）
+ bv[0].addEventListener('timeupdate', function(){ var d = bv[1].currentTime - bv[0].currentTime; if (!bv[1].paused && Math.abs(d) > .15 && !bv[0].ended) { try { bv[1].currentTime = bv[0].currentTime; } catch(e){} } });
+ var seen = false;
+ new IntersectionObserver(function(es){ es.forEach(function(e){ if (e.isIntersecting) { if (!seen) { seen = true; bv.forEach(function(v){ v.preload = 'auto'; }); restart(); } else { bv.forEach(function(v){ v.play().catch(function(){}); }); } } else { bv.forEach(function(v){ v.pause(); }); } }); }, { threshold: .35 }).observe(ba);
+ }
}
// ---- 02 ①：店が回る最少のスタッフ ----
@@ -530,6 +562,14 @@ const MENU = [
.srl .srow em.same{background:#f0f0f0;color:var(--muted)}
.srl .srow em.cut{background:var(--ink);color:#fff}
.srl .srow em.plus{background:transparent;color:var(--muted);border:1px solid var(--rule)}
+.srl .ba{grid-column:1/-1;order:3;display:grid;gap:12px;margin:0}
+.srl .ba-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
+.srl .ba-v{display:grid;gap:10px;min-width:0}
+.srl .ba video{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:992/864;background:#e8e2d6;border-radius:var(--r-m)}
+.srl .ba-k{margin:0;display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;font-size:.84rem;font-weight:700}
+.srl .ba-tag{display:inline-block;padding:3px 10px;border-radius:4px;font-size:.8rem;background:#f0f0f0;color:var(--muted)}
+.srl .ba-tag.after{background:var(--ink);color:#fff}
+@media (max-width:640px){.srl .ba-pair{grid-template-columns:1fr}}
.srl .clip{display:grid;gap:10px}
.srl .clip-4{max-width:480px;justify-self:center;width:100%}
.srl .clip-4 video{aspect-ratio:694/720!important}
```
### PC で、前後の動画が文字の上に割り込んでいた
最初の下書きをビルドして PC の幅で見ると、前後の動画が「どこで止まるか」の文字の上に入り、文字が動画の下へ押し出されていました。この節は、文字の列を `order:2` で右に回す作りだったので、新しく足した枠（`order` なし）が先に並んでいたのが原因です。枠に `order:3` を付け、文字の下に並ぶようにしました。
### 公開した直後、2本が0.67秒ずれていた
公開したページで撮った画面では、左の時刻が17:12、右が17:04で、店の時刻で8秒（動画で約0.67秒）ずれていました。最初の作りは、画面に入ったら2本に「頭から再生」を出すだけで、片方の読み込みが遅いと、先に読めた方だけが流れ始めていました。2本とも再生できる状態になってから頭をそろえて流し、流れている間も右を左の時刻に合わせ直す（0.15秒以上ずれたら）作りに直しました。
- ねらい：同じ時刻の比べであることを、ずれのない2本で見せる
- 変わったこと：2本とも読み込めてから同時に流す。流れている間に0.15秒以上ずれたら右を左に合わせる
- 見込める効果：右の動画だけ2.5秒遅れて届く条件で試すと、ずれは0.01秒だった（測った値。下の sync.js の出力）
### 片方の動画を遅らせて、ずれを測った sync.js
確かめには [Playwright](https://playwright.dev/)（ブラウザを自動で動かす道具）を使い、ビルドしたページを手元で開いて、右の動画の読み込みだけを2.5秒遅らせました。
```javascript
const { chromium } = require('playwright');
(async () => {
const b = await chromium.launch();
const p = await b.newPage({ viewport: { width: 1280, height: 900 } });
await p.route('**/round-after.mp4', async r => { await new Promise(x=>setTimeout(x,2500)); await r.continue(); });
await p.goto('http://localhost:4322/serving-robot-one-less-staff.html?p2m-notrack=1');
await p.evaluate(() => document.getElementById('baPair').scrollIntoView({block:'center'}));
for (const t of [1500, 5000, 9000, 15000]) { await p.waitForTimeout(t === 1500 ? 1500 : 3500);
console.log(await p.evaluate(() => [...document.querySelectorAll('#baPair video')].map(v => v.currentTime.toFixed(2)+(v.paused?'p':'')).join(' / '))); }
await b.close();
})();
```
### sync.js の出力（右の動画を2.5秒遅らせたとき）
```
0.00p / 0.00p
2.44 / 2.43
5.94 / 5.93
9.45 / 9.44
```
### 公開したページを PC とスマホの幅で撮った shot2.js
```javascript
const { chromium } = require('playwright');
(async () => {
const b = await chromium.launch();
for (const [w,h,name] of [[1280,1700,'03_lp_pc'],[390,2400,'04_lp_phone']]) {
const p = await b.newPage({ viewport: { width: w, height: h }, deviceScaleFactor: 2 });
await p.goto('https://pixelstomotors.com/serving-robot-one-less-staff?p2m-notrack=1', { waitUntil: 'networkidle' });
await p.addStyleTag({content:'header,.site-header,[class*="header"]{position:static!important} body::before{display:none!important}'});
await p.evaluate(() => { document.querySelectorAll('video').forEach(v=>{v.preload='auto';}); });
await p.evaluate(() => document.querySelector('.kn.rev').scrollIntoView({block:'start'}));
await p.waitForTimeout(9000);
const el = await p.$('.kn.rev');
await el.screenshot({ path: `${process.argv[2]}/img/LOG404_${name}.png` });
}
await b.close();
})();
```
【画像】LOG404_03_lp_pc.png 公開した LP の「どこで止まるか」を PC の幅で見たところ。上に4つの視点の動画と数字の欄（79→0回・112→31回・8→0回）、その下に直す前と直した後の動画が左右に並ぶ
【画像】LOG404_04_lp_phone.png 同じ節をスマホの幅（390px）で見たところ。数字の欄のあとに4つの視点の動画、その下に直す前と直した後が上下に並ぶ
【画像】LOG404_01_round_tables_before_after.png 店の時刻1500秒（経過25:00）の、直す前（左）と直した後（右）の同じコマ。左は丸テーブルの間で白いロボット2台が止まったまま、右は丸テーブルのまわりが空いている
## 作業ログ ― 次に別の店で前後を見せるときも、同じ撮り方が使える
録画のときだけ光を上げる作りと、店の時刻に合わせて撮る作りは、Unity のプロジェクトに残っています（cs:43）。夜に回すシミュレーションの見た目と動きは変えていません。別の店で店の形や回し方を直したときも、同じ種・同じ時刻で直す前と後を撮れば、同じ形で LP や記事に並べられます。
| 残したもの | 場所 |
|---|---|
| 寄りの録画（75°・直す前と直した後） | KIOXIA の service_sim/unity/20261029_lpdemo2*_cs43_fam_p0_r2_s0_passon_sbret/recordings/ |
| 最初の録画（52°・寄りと全体） | KIOXIA の service_sim/unity/20261029_lpdemo*_cs41_fam_p0_r2_s0_passon_sbret/recordings/ |
| 光の角度を比べた静止画 | KIOXIA の service_sim/unity/20261029_lpdemo2still_cs43_fam_p0_r2_s0_passon_sbret/recordings/ |
| 録画の部品の全文と差分 | KIOXIA の service_sim/unity/20261029_lpdemo2_cs43_fam_p0_r2_s0_passon_sbret/scripts/ |
| LP に置いたループ | p2m-site の public/site/srl/round-before.mp4・round-after.mp4（と webp） |
台帳は、672行（追記だけ）になりました。