任意の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://syncpres.app/sync-lite.js"
        data-session-id="my-talk-2026"
        data-framework="reveal"></script>

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

3. 接続

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

完成形の例

4枚だけの最小サンプルです。開くと操作端末になり、画面の下に表示端末用のURLが出ます。それを別のタブか会場のPCで開くと、ページ送りが揃います。

同期のために書いてあるのは <script> 1行と、onSlide / broadcast の2箇所だけです。ソースを表示すれば全部見えます。

対応フレームワーク

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

会場で困りそうなことへの対策

• 回線が不安定でも、ページがずれたままにならない。送信は毎秒繰り返しているので、1回落ちても次の送信で揃います。
• 途中から繋いだ端末も、いまのページから始まります。最初のページに戻ることはありません。
• スマホの画面ロックを解除したあとも、そのまま操作を続けられます。開き直す必要はありません。
• 他の人の発表と混線しません。data-session-id がチャンネルを分けています。
• 通信は Supabase Realtime（WebSocket）です。データベースには何も保存しません。

できないこと

• 投票・人数カウント・コメントは使えません。送っているのはページ番号だけです。それらが要るなら PDF版 を使ってください。HTMLスライドでの回答収集は開発中です。
• ペン書きやポインタは同期しません。共有されるのはページの位置だけです。
• セッションIDは推測できない文字列にしてください。 data-session-id="seminar" のような短い名前だと、たまたま同じ名前を使った第三者と繋がる可能性があります。 data-session-id="seminar-4f9c2a" のように、ランダムな文字を混ぜてください。
• 発表中に回線が切れた場合、繋ぎ直すといまのページに追いつきます。それまでの経過は残りません。

PDF版との違い