発表する
作業中は開発サーバがブラウザをファイルと同期させます。会場では HTML ファイルが 1 つあれば足ります。このページではその両方に加えて、発表者ビュー、別デバイスからのリモート操作、PDF と PPTX の書き出しを扱います。
開発サーバ
デッキの中で dekc を叩けばそのデッキを、プロジェクト直下で叩けば全デッキの一覧を配信します。
dekc
dekc --visual
dekc --port 3030--port を省くと、空いているポートを OS が選び、dekc がその URL を表示します。ほかのツールにアドレスを事前に教える必要があるときは固定してください。
保存のたびに次が起きます。
script.md— 新しい見出しに骨格が生成され、孤児になった HTML がブラウザに警告表示され、発表者ビューの台本が更新されます。デッキにvoice/があれば、変わった文だけが再合成されます。slides/*.html— 変更された枚だけがその場で差し替わり、lint が走り、診断が端末とブラウザのオーバーレイの両方に出ます。theme.css— 全スライドが再描画され、クラス語彙が再解決されます。slides/*.css— スタイルがその場で当て直され、lint が走ります。slides/*.ts— スライドスクリプトは読み込み時に一度だけ登録されるので、ページが再読み込みされ、lint が走ります。voice/voice.toml— キャッシュ済みのクリップからデッキのタイミングを組み直します。--visualを付けて Playwright があれば、保存した枚のはみ出しとコントラストも測ります。
プロジェクトごとにサーバは 1 つです。2 つ目の dekc は .dek/server.json にある 1 つ目のロックを見つけ、その URL を案内します。
発表者ビュー
/presenter を開くか、プレイヤーで p を押します。いまのスライド、次のビートかスライドのプレビュー、いまのセクションの台本が並び、いまのビートがハイライトされます。台本は段落内の改行を詰めて表示するので、エディタではなく発表者ビューの幅で折り返されます。日本語は間を空けずに繋ぎます。ト書き、リスト、コードは行を保ちます。上端の進捗バーはデッキ全体の位置を示します。下端には枚数、いまのセクションの予算、そして最初に送ってからの経過時間。経過時間はトーク全体の予算の 80% を超えると黄色、100% を超えると赤になります。もう一度 p を押すと、同じウィンドウで観客ビューに戻ります。
接続しているすべてのウィンドウが WebSocket で発表者ビューに追従します。2 台目のモニタでも、別のノート PC でも、スマホでも。サーバの再起動や Wi-Fi の瞬断で接続が切れたウィンドウは自動でつなぎ直し、いま映っているスライドに追いつきます。切れている間にそのウィンドウで進めた位置は、つながった時点で送られます。
dekc goto architecture
dekc currentサーバが立っている間は、端末からブラウザを動かしたり、いまどの枚が出ているかを問い合わせたりできます。エージェントも同じ 2 つのコマンドを使います。
キー操作
| キー | 動作 |
|---|---|
→ PageDown Space | 次のビート。使い切ったら次のスライド |
← PageUp Backspace Shift+Space | 前のビート。使い切ったら前のスライド |
Home End | 最初のスライドが出たところ、最後のスライドの最後のビート |
p | 発表者ビューの切り替え |
s | スライド一覧の表示切り替え |
f | 全画面の切り替え |
l | レーザーポインターの切り替え |
m | 表示中のビートに直す印を付ける、または外す（開発サーバ） |
a | 注釈モードの切り替え（開発サーバ） |
↑ ↓ | スライド一覧の中を移動 |
一覧の端で ← → | スライド一覧の幅を変える |
Space | dekc rehearse 中の再生 / 停止 |
押したキーはすべて数に入ります。クリッカーで先へ飛ばすときのようにトランジションより速く押しても、再生中のトランジションを切り上げて、押した回数ぶん先へ進みます。別ウィンドウも押すたびにすぐ追従します。Alt、Ctrl、Cmd と組み合わせたキーはブラウザの操作になり、スライド上の入力欄に打ったキーは入力欄に入ります。
スライドをタップまたはクリックすると次へ、左 3 分の 1 なら前へ進みます。スマートフォンやタブレットでは横にスワイプしても移動できます。マウスでドラッグした場合は文字の選択になり、選択を終えるクリック、右クリック、修飾キーを押しながらのクリックでは移動しません。リンク、ボタン、入力欄へのタップやクリックは、それぞれの要素の操作になります。狭い画面やタッチ画面では、スライド一覧とキーの案内は出しません。
l を押すか、発表者ビューのバーの端にある丸いボタンで、レーザーポインターになります。マウスや指を置いたスライド上の位置に、デッキのすべてのウィンドウで赤い点が出ます。プロジェクター、発表者ビュー、スマートフォンのどれでも、ウィンドウの大きさに関係なくスライド上の同じ位置です。レーザーがオンのあいだスライドは指し示すためのものなので、タップやクリックでは進みません。キーでは進みます。点は、ポインターがスライドの外に出たとき、指を離したとき、別のスライドへ移ったとき、レーザーをオフにしたときに消えます。そのウィンドウが位置を知らせなくなってから数秒たっても自然に消えるので、ノート PC を閉じても点がプロジェクターに残りません。開発サーバでは発表者だけが指せます。観客のウィンドウのレーザーは、そのウィンドウにしか出ません。動画と PDF には点が出ません。
開発サーバで声に出してリハーサルしながら、言いよどんだビートで m を押すか、発表者ビューのバーの鉛筆ボタンを押します。そのビートにはビート一覧で鉛筆が付き、印は消すまで .dek/marks.json に残ります。あとで dekc marks を実行すると、印を付けたビートが script.md の行と当時の文面つきで並ぶので、自分で書き直すことも、エージェントに書き直させることもできます。リハーサルのあとでを参照してください。ビルドしたファイルには印を保存するサーバがないので、ボタンもありません。
どの要素を直してほしいかをエージェントに伝えるには、開発サーバで a を押すか、発表者ビューのバーの ⌖ ボタンを押して、その要素を指します。ポインターの下の要素が枠で囲まれ、slides/<slug>.html の何行目かが出ます。クリックで選び、Cmd か Ctrl を押しながらクリックすると、1 つの注釈に要素を足せます。ポップアップは選んだ要素の横に開き、要素の上には重なりません。Cmd か Ctrl を押しているあいだは、ポップアップの下にある要素もそのままクリックできます。ポップアップには、クリックした位置とその近くにある要素が、文字、それを囲む矢羽、さらにそのレーンのように、内側のものから並びます。指したいものをクリックし、どう直すかを書いて Enter を押します。ポインターを受けない図形（pointer-events: none）も選べます。まだ出ていないステップは選べません。何もないところをクリックすると、スライド上のその位置に注釈を付けます。注釈には番号付きのマーカーが付き、クリックすると書き直したり消したりできます。Copy を押すと、すべての注釈が 1 つのテキストになり、エージェントに貼り付けられます。指差しは双方向を参照してください。注釈は消すまで開発サーバが .dek/annotations.json に保存するので、再読み込みしてもサーバを立ち上げ直しても消えません。同じデッキに注釈しているタブや端末は、どれも同じ注釈を表示します。編集で要素が動いても、注釈はその要素を追いかけます。dekc annotations が注釈を一覧するので、エージェントはコピーを頼まずに読めます。すべて消したあとも、次の注釈を書くかモードを抜けるまでは、バーの Undo で元に戻せます。モードがオフのあいだは何も表示しません。注釈モードがあるのは発表者のページだけで、LAN 上の観客のページ、ビルドしたファイル、動画にはありません。LAN のアドレスで開いていてブラウザがクリップボードを使わせないときは、テキストを選択した状態で表示するので、そのままコピーしてください。
URL はデッキの位置を表します。スライドは #<slug>、そのスライドの n 番目のビートは #<slug>/<n> です。履歴にはスライドごとに 1 件だけ積むので、ブラウザの「戻る」はビートを一つずつ戻るのではなく、前のスライドへ戻ります。スライドの最後より大きいビート番号を開くと最後のビートで開き、URL もそれに合わせて書き直します。
1 ファイル
dekc builddecks/<deck>/dist/<deck>.html ができます。全スライド、テーマ、data URI 化した画像、プレイヤーのランタイムを minify して 1 ファイルにしたものです。ブラウザで開いて発表します。--root-dist を付けると、全デッキのビルドがプロジェクト直下の dist/ に集まります。
build がやることは 4 つです。各 <section class="slide"> を抜き出して data-slug を付ける、テーマを minify する、assets/ を data URI にする、ランタイムを埋め込む。外部の HTML minifier は使わないので、入力の書き方がどうであれ出力は一つの形になります。HTML がまだないセクションは、dekc sync が書くはずの骨格からビルドし、そのことは lint の DEK001 が伝えます。lint の結果でビルドが止まることはありません。
?presenter を付けて開くか p を押すと発表者ビューになります。同じファイルを別ウィンドウで開けば、BroadcastChannel で最初のウィンドウに追従します。観客ビューをプロジェクタに、発表者ビューを手元に置きます。サーバもネットワークも要りません。別のデッキのファイルを同時に開いても、そちらは追従しません。観客ビューには左にスライド一覧があり、サムネイルをクリックすればその枚へ飛べます。s で隠し、端をドラッグして幅を変えられます。ファイルを開くと、s と p の案内が下にふわっと出て、しばらくすると消えます。キーを押せばその場で消えます。開発サーバでは保存のたびに読み込み直すので、この案内は出しません。
Web で公開する
同じファイルはどの静的ホスティングにも置けます。共有したリンクにタイトル、説明、画像のカードを出したいときは、dist/ を公開する URL を dek に教えます。
# dek.toml
url = "https://example.com/talks/"するとビルドは、ページに Open Graph と Twitter カードのタグを書き込み、1 枚目のスライドを最終ビートの状態で dist/<deck>.png として隣に書き出します。両方をアップロードしてください。og:url と og:image は、その URL に各ファイル名をつないだものです。クローラーは絶対 URL の画像しか取りに来ないからです。タイトルは frontmatter の title、説明は description から取り、description がなければ event と date から作ります。画像を撮るには Playwright が要ります。Playwright がないときや URL がないときも、ページにはタイトルと説明が入り、足りないものはビルドの出力に出ます。
プレビューデプロイのように、デプロイのたびに URL が変わるホスティングは dek.toml に書けません。ホスティングが用意する環境変数から、ビルド時に渡してください。--url は dek.toml より優先されます。
dekc build --root-dist --url "https://$DEPLOY_HOST/"URL がアップロードの後にしか決まらない場合は、ページに書ける絶対 URL がないので、共有リンクには画像なしでタイトルと説明だけが出ます。
ビルドしたファイルは発表に使うものなので、URL の有無にかかわらず、発表者ビューに台本がすべて入ります。リンクを知る誰もが開くページは dekc build --public で作ります。その発表者ビューには声に出す部分だけが入り、script.md のト書き（引用）と HTML コメントは外され、コードブロックは書いたまま残ります。Web に置く前には --public でビルドし、発表には --public なしのビルドか開発サーバを使ってください。
印刷はブラウザの「印刷」で構いません。スライドはデッキの大きさとそのレイアウトのまま 1 枚ずつ別のページになります。ビートはすべて表示され、スライドスクリプトは最後のビートの状態で描かれます。スライド一覧や案内は印刷されません。dekc pdf はダイアログなしで同じページを書き出します。
別のデバイスから
会場で開発サーバを使うのは、スマホをリモコンにするなど、別のデバイスからデッキを操作したいときだけです。
dekc --remoteLAN に公開します。台本から作られるものはすべて HTTP Basic 認証で守られます。発表者ビュー、goto と current、音声のタイムラインとオーディオ、開発サーバが配信する lint の診断です。観客ビュー、スライド、その素材は認証なしで開けます。パスワードは起動のたびに dek が 10 文字で作り、URL とともに表示します。ブラウザに聞かれたら、ユーザー名は何でもよく、そのパスワードを入れます。パスワードは選べないので、弱いものや空のもの、シェルの履歴に残るものになることはありません。
スマホで入力を省くには、パスワードの下に dek が表示する QR コードを読み取ります。サインイン済みの発表者ビューが開きます。QR に入っているコードは 1 回だけ、5 分間だけ有効なので、映り込んだターミナルを撮られても、試されるころには使えません。次のデバイス用の新しいコードは、ターミナルで Enter を押すと出ます。デッキが複数あるときはデッキ一覧が開き、各デッキに発表者ビューへのリンクがあります。スマホのサインインはサーバを止めるまで続きます。
サーバが応じるのは自分の IP アドレスとこのマシン自身の名前だけなので、Web ページが自分のドメイン名を使ってたどり着くこと（DNS rebinding）はできません。dekc <deck> --remote はそのデッキだけを共有し、プロジェクトのほかのデッキは見せません。パスワードは平文の HTTP で送られるので、信頼できるネットワークで使ってください。
USB メモリの 1 ファイルは、必ず動くフォールバックです。それ以外はすべて任意です。
PDF
dekc pdf全スライドを最終ビートの状態で dist/<deck>.pdf に描き出します。Playwright が必要です。
PPTX
dekc pptx
dekc pptx --publicPowerPoint や Keynote で作業する人、たとえばスライドを集める主催者、共同発表者、社内のテンプレート運用のために、dist/<deck>.pptx を書きます。## 1 つが 1 枚で、PDF と同じく各スライドの最終ビートです。台本はノートに入ります。--public を付けると、dekc build --public と同じくト書きと HTML コメントを除きます。Playwright が必要です。
PDF と同じくブラウザが各スライドを描き、ファイルはその描画を 2 つの層で持ちます。
- 文字は編集できます。 スライドの HTML にある文字は、1 行ずつ、ブラウザが置いた場所に、その大きさ・太さ・色・フォントのテキストボックスとして入ります。改行もブラウザが折り返した位置のままです。受け取った人は、言葉や日付や名前をその場所で直せます。
- それ以外はすべて画像です。 スライドの 2 倍の大きさで、背景、カード、罫線、画像、ラベルを含む SVG の図、
aria-hiddenの飾り、疑似要素が描くノンブルやランニングヘッド、transform で回した文字、文字の影が入ります。これらは動かしたり色を変えたりできません。
テキストボックスには Chromium が実際に描いたフォントの名前を入れ、フォントそのものは埋め込みません。そのフォントがない環境では PowerPoint の代わりのフォントで同じ場所に表示されます。ボックスは折り返さないので、幅の広いフォントでも行が少し長くなるだけで、スライドが組み直されることはありません。PowerPoint が適用しない OpenType の機能、たとえば font-feature-settings: "palt" による約物の詰めも同じで、行が少し広くなり、同じ行の後ろにあるチップの下に入り込むことがあります。編集してもらう文字は SVG ではなく HTML で書いてください。画像の代替テキストはスライド自身のものです。各画像の alt と、名前を付けた絵の aria-label で、どちらも DEK034 が求めるものです。
次
ナレーションを付けて動画にする → 声と動画。ライブだけで足りるなら AI エージェントと作るへ。