コンテンツにスキップ

プレゼンテーション

キー 動作
→ / Space 次のステップまたはスライド
← 前のステップまたはスライド
Home / ↑ 最初のスライド
End / ↓ 最後のスライド
o 一覧表示 — 全スライドをグリッドで表示
g スライドへ移動 — 番号やタイトルの一部を入力し、↑/↓ で選んで Enter で移動
d ペン — スライドに描画。c で現在のスライド、Shift+C でデッキ全体の描画を消去
l レーザーポインター
v カメラのバブル表示
r 録画の開始 / 停止
p 発表者ウィンドウを開く
n ノートのオーバーレイ
s 共有モード — 画面共有向けに UI をすべて隠す
f フルスクリーン
Esc ペン / レーザー、フルスクリーンの終了、オーバーレイを閉じる
e ブラウザでスライドのソースをライブ編集(astro dev のみ。デッキを作成するを参照)

タッチデバイスでは、左右にスワイプして移動します。

p を押すと発表者ウィンドウが開きます。表示される内容は次のとおりです。

  • 現在のスライド、次のスライドのライブプレビュー、このスライドの残りステップ数
  • スピーカーノート(文字サイズは A− / A+ または Shift+, / Shift+. で調整できます)
  • タイマー

2 つのウィンドウは BroadcastChannel で同期しています。スライドの切り替え、フラグメントとコードのステップ、ペンの描画、レーザーポインターが共有されるので、発表者ウィンドウで操作すれば聴衆側のウィンドウも同じように動きます。

g を押すと、すべてのスライドを番号とタイトルで一覧にしたダイアログが開きます。番号やタイトルの一部を入力すると絞り込めます。タイトルは frontmatter の title、なければスライドの最初の見出しから取得します。

  • d でペンを切り替えます。描画はスライドごとに保持され、移動して戻ってくると再び表示されます。c で現在のスライド、Shift+C でデッキ全体の描画を消去します。
  • l でレーザーポインターを切り替えます。
  • どちらもスライドの座標系で描かれるので、ウィンドウごとにスライドの表示サイズが違っても位置がずれません。発表者ウィンドウで書き込めば、聴衆側の画面にも表示されます。
  • 色: --astlide-pen-color、--astlide-laser-color
  • v でWeb カメラの映像を丸いバブルとしてスライドの上に表示します。好きな位置にドラッグでき(位置は記憶されます)、スライドを切り替えても再生は続きます。大きさは --astlide-camera-size(デフォルト 220px)で変更できます。
  • r で発表を録画します。ブラウザが録画する画面・ウィンドウ・タブを聞いてくるので選びます(現在のタブが候補に出ます)。マイクの音声も一緒に録音され、録画中は経過時間付きの赤い表示が出ます。もう一度 r を押すか、ブラウザ側で共有を止めると、<deck>-<date>.webm がダウンロードされます。デッキ内を移動しても録画は続きます。

録画にカメラを含めたい場合は、先にカメラをオンにしてください。どちらもセキュアコンテキスト(https:// または localhost)と利用許可が必要です。録画はブラウザの画面キャプチャ機能に依存します(Chromium 系ブラウザと Firefox。Safari の対応は限定的です)。

デフォルトでは、描画はブラウザのセッション中だけ保持されます。再読み込み後や、同じブラウザで次にデッキを開いたときにも残したい場合は、永続化を有効にします。

astlide({ drawings: { persist: true } });

描画はデッキごとに localStorage に保存されます。ペンが有効な状態で Shift+C を押すと消去されます。

画面下部のフローティングツールバーは、アクションを並べたリストで構成します。ホバーやキーボードフォーカスで表示され、タッチデバイスでは常に表示されます。

astlide({
toolbar: ["home", "prev", "counter", "next", "spacer", "notes", "overview", "goto", "draw", "laser", "presenter", "fullscreen", "download"],
});
アクション
home デッキ一覧に戻る
prev / next / counter ナビゲーションと n / total の表示
notes ノートのオーバーレイ
overview 一覧表示のグリッド
goto スライドへの移動ダイアログ
draw / laser ペン / レーザーポインター
camera / record カメラのバブル表示 / 録画
presenter 発表者ウィンドウを開く
fullscreen フルスクリーンの切り替え
print / share 印刷モード / 共有モード
download ブラウザ内での PDF 生成(実験的機能)
spacer 伸縮する余白

デフォルト: ["prev", "counter", "next"]

ツールバー、プログレスバー、発表者パネルは CSS カスタムプロパティ(--astlide-nav-bg、--astlide-nav-fg、--astlide-nav-btn-bg、--astlide-progress-color、--astlide-presenter-bg、--astlide-presenter-fg、--astlide-presenter-accent など)を参照するので、テーマから !important を使わずにスタイルを変更できます。