任意のHTMLスライドを、
1行で追従可能にします。

2分でセットアップ

1. Supabaseクライアントと sync-lite.js を読み込む

<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2/dist/umd/supabase.min.js"></script>
<script src="https://sadame-client-docs.pages.dev/syncpres/sync-lite.js"
        data-session-id="my-talk-2026"
        data-framework="reveal"></script>

2. URLパラメータで役割を決める

3. 接続

発表者端末で起動 → 画面下に「表示側URL」が表示 → それを会場PCのブラウザで開く。以上。

完成形の例

平成桜まつり2026の代表挨拶用スライド（reveal.js + sync-lite）:

ソース: marche-slides.html

対応フレームワーク

reveal.js（data-framework="reveal"）

reveal.js本体を先に読み込んで Reveal.initialize() を呼んだ後に、sync-lite.jsを読み込む。自動でアダプターが繋がります。

<script src="...reveal.js"></script>
<script>
  Reveal.initialize({
    hash: false,
    keyboard: new URLSearchParams(location.search).get('role') !== 'display'
  });
</script>
<script src="...sync-lite.js" data-framework="reveal"></script>

impress.js（data-framework="impress"）

<div id="impress">
  <div class="step">Slide 1</div>
  <div class="step">Slide 2</div>
</div>
<script src="...impress.js"></script>
<script>impress().init();</script>
<script src="...sync-lite.js" data-framework="impress"></script>

自作スライド（data-framework="custom"）

任意のスライド実装。SyncPresのAPIで手動配線:

<script src="...sync-lite.js" data-framework="custom"></script>
<script>
  SyncPres.onReady(() => {
    // 表示側: 受信した番号でスライドを切り替える
    SyncPres.onSlide(h => myRenderer.goto(h));

    // 発表者側: スライド変更時に送信
    if (SyncPres.role === 'presenter') {
      myRenderer.on('change', h => SyncPres.broadcast(h));
    }
  });
</script>

data-* 属性オプション

JavaScript API

仕組み

• 通信: Supabase Realtime Broadcast（WebSocket、DB不要・公開チャンネル）
• セッション分離: data-session-id + URLの sid パラメータでチャンネル名を構成。他の発表と混線しない
• 堅牢性: スライド変更時に3連送（0ms/150ms/500ms）＋1秒ハートビート。パケットロスと遅延接続に耐性
• 遅延参加: 表示端末が途中で繋いでも request-sync で現在位置を即時取得
• タブ復帰: スマホでロック解除後、自動再送信

制限事項

• セッションIDが推測可能だと第三者が接続する可能性あり → data-session-id にランダム文字列を含める
• 発表中にネット切断された場合、再接続後に最新のスライド番号だけ復元される（履歴は復元しない）
• PDFのチャンク転送機能はない（それが必要なら従来のSyncPres PDF版を使う）
• 同期される情報はスライド番号のみ（ペン書きやポインタは未対応）

PDF版との違い