Peithoにスマホからスライド操作できる機能を入れた
自作プレゼンツール Peitho の話の続き。今回はスマホからスライドを操作できるようにした話。
peitho present deck.md --host
で起動すると、ターミナルにQRコードが表示される。これをスマホで読み取ると、スマホがスライドのリモコンになる。
--hostでLANに公開する
通常の
peitho present
はlocalhostにしかバインドしない。
--host
をつけると、LANに向けたリスナーも追加で立ち上がる。IPアドレスを明示的に指定することもできるけど、
--host
だけ渡せば自動で適切なアドレスを選んでくれる。TailscaleなどのメッシュVPNのアドレスがあればそれを優先し、なければLANのアドレスを使う。
起動するとターミナルにQRコードとURLが表示される。
スマホ側の画面
QRコードを読み取ると
/remote
ページが開く。縦持ちだとこんな感じ。
上からスライドプレビュー、タイトルとスライド番号、かめとうさぎのトラッカー、タイマー操作、スピーカーノート、Previous/Nextボタン、という構成。PC側の発表者ツールに出ている情報がほぼそのままスマホに載っている。
スライドプレビューは実際のスライドHTMLをそのまま縮小表示しているので、本物と同じ見た目。
横持ちにするとレイアウトが切り替わる。
左にプレビューとトラッカー、中央にスピーカーノート、右にPrevious/Nextボタン、という3カラム構成になる。
ホーム画面に追加できる
/remote
ページはPWA（Progressive Web App）として動くようにしてある。iOSの「ホーム画面に追加」で登録すると、次からSafariのアドレスバーなしのフルスクリーンで開く。
--host
のポートはデフォルトで6173に固定されているので、URLが再起動で変わらない。一度ホーム画面に追加しておけば、次の発表のときもそのまま使える。
参考: