Playground

Playground を開く →

Playground は go-slides v0.9.0 そのものを WebAssembly にコンパイルし、 ブラウザー内で動かしたものです。左側にスライドデッキを入力すると、右側にスライドが追従して表示されます。 スライドデッキも共有リンクも、サーバーには何も送信されません。

主な機能

• 各スライドの ライブプレビュー。ページのスレッドとは別（Web Worker）でレンダリングされるので、入力が待たされることはありません。スライドをクリックすると、エディターが その行に移動します。キャレットを動かすと、プレビューがそのスライドまでスクロールします。

• スライドショー：キーボード操作、画面上のコントローラー、トランジションを備えた、 プレゼンテーションそのものです。

• 発表者ビュー：Present（スライドショーでは p）を押すと、2 つ目のウィンドウで開きます。 現在のスライド、次のステップ、スピーカーノート（スライドデッキの <!-- comments -->）、時計、タイマーが表示されます。矢印キー、Space、 Home、End はどちらのウィンドウでも使え、互いに連動します。スライドデッキを編集したときも 連動します。ウィンドウが開かない場合は、このサイトのポップアップを許可してください。 一覧表示（o）は、ダウンロードしたページでのみ使えます。

• 入力中の 補完：ディレクティブのキー（コメント内ではスポットディレクティブの _ 付きのものも）、 kind、theme、size、paginate の値、そして {{ }} 内のテンプレート関数と データのフィールド。

• キャレット位置にあるものの ヘルプ：ディレクティブ、kind（スライドの種類。何を設定するか）、 テンプレート関数。ヘルプペインからは、このドキュメントの各ページにもリンクしています。

• 該当行に表示される 問題：テンプレート、YAML、HCL のエラーはエディター内でハイライトされ、 エディターの下に一覧表示されます。プレビューには、最後に正しくレンダリングできたスライドデッキが 表示されたままになります。

• サンプル：ウェルカム用のスライドデッキ、スライドを生成するテンプレート、スライドの kind、 HCL のフロントマター、テーマとスポットディレクティブ、そして数式、画像、 背景（![bg]、分割背景の ![bg left:40%]、フィルター）。

• ファイル：エディターの左にあるパネルはスライドデッキのプロジェクトで、 コマンド や VS Code 拡張機能 が読み込むのと同じ構成になっています：deck.md、 slides.yaml、themes/、kinds/、media/。

  • ファイルをクリックすると編集できます。エディターは言語 （Markdown、YAML、HCL、JSON、CSS）に応じて色付けし、問題箇所に印を付けます。
  • 右クリック（または Shift+F10）で、New File、New Folder、Rename（F2）、 Delete（確認あり）、New theme / New kind を使えます。ファイルをフォルダーにドラッグすると 移動できます。キーボード操作は WAI-ARIA のツリーパターンに従い、先行入力による検索にも 対応しています。
  • Project ▸ New theme は themes/my-gaia.css（または default、 uncover をもとにしたもの）を作成します。内容は組み込みテーマの @import と、追加したルールです。 作成したテーマは Theme の一覧に加わります。New kind と New data file も テンプレートから始まります。いずれも slides.yaml に登録されるので、slides build deck.md で見つかります。
  • Project ▸ Download project (.zip) ですべてを保存できます。展開すれば、 slides build deck.md でビルドできます。Open project では .zip または フォルダーを読み込めます。フォルダーの外に出るアーカイブ（..、絶対パス）、 256 個を超えるファイルや 8 MiB を超えるファイルを含むアーカイブ、展開後のサイズが 100 倍を超えるアーカイブは拒否されます。
  • すべては下書きと一緒に、このブラウザー内に保存されます。プロジェクトの容量は 最大 64 MiB で、ファイル一覧の下の行に使用量が表示されます。

• メディア：画像、動画、音声をエディターにドロップまたは貼り付けると、 media/ に保存され、スライドデッキにその参照が書き込まれます：![](media/photo.png)。パネルのフォルダーに ファイルをドロップすると、そのフォルダーに保存されます。スライドデッキは小さく読みやすいままで、 何もアップロードされません。プレビューのサンドボックスは、制限を緩めることなくメディアを読み込みます （ページがバイト列を渡します）。Save as ▸ HTML page では、メディアがページに埋め込まれます。https: の画像も使えますが、ブラウザーが そのサーバーから取得するため、サーバー側にはあなたのアドレスが伝わります。 プレビューはリファラーを送信しません。

• サイズ変更可能なペイン：ファイルパネル、エディター、スライドのサムネイル、 プレビュー、ヘルプは、ドラッグできるバーで区切られています（バーの上ではポインターが サイズ変更カーソルになります）。バーの隣のペインが広さを取り、 ほかのペインはサイズを保ちます。バーをダブルクリックするか、バー上で Enter を押すと、 ペインを閉じたり元に戻したりできます。キーボードでは、F6 でバー間を移動し、 矢印キーで 16 px ずつ動かし、Home と End でバーの前のペインを最小・最大にし、Escape でエディターに戻ります。 View タブではこれまでどおりペインを非表示にできます。設定したサイズは下書きと一緒に このブラウザーに保存されます。デフォルトのサイズ（190、168、280 px で、残りをエディターと プレビューが 6 対 5 で分け合う）は保存されません。

• 書式：Format タブで Markdown を編集でき、1 回押すごとに 元に戻す（Undo）の 1 ステップになります。

  • テキスト：Bold、Italic、Strikethrough、Inline code は、選択範囲 またはキャレット位置の単語に適用され、オン・オフが切り替わります（Ctrl+B、Ctrl+I、Ctrl+Shift+X、 Ctrl+E。Mac では Cmd）。キャレットが書式の記号の内側にあると、ボタンが押された状態で表示されます。 Markdown には下線がないため、Underline（Ctrl+U）はテキストを <u>…</u> で囲みます。このタグは Marp のデフォルトの HTML 許可リストで残されるので、 生の HTML がオフでも機能します。
  • 段落：見出し 1〜3（Ctrl+Alt+1..3）、箇条書き（Ctrl+Shift+8）、 番号付きリスト（Ctrl+Shift+7）、引用は、選択した行に適用され、オン・オフが切り替わります。 水平線は <hr> タグです：---、***、___ は、Marp ではいずれも 新しいスライドの開始になってしまうためです。
  • 表：グリッドで列数と行数を選びます。表の中にキャレットがあるときは、 行や列を追加・削除したり、列の配置（:--、:-:、 --:）を設定したりできます。編集のたびに、表は整形し直されます。
  • スライドのテキスト の左揃え、中央揃え、右揃えは、現在のスライドに <style scoped> ブロックを 書き込みます。Marp には配置の構文がなく、style 属性はデフォルトの HTML 許可リストを 通りませんが、scoped ブロックは通ります。そのため、生の HTML がオフでも機能し、 プレビュー、HTML ページ、PDF に反映されます。
  • リンク（Ctrl+K）は、url を選択した状態で [text](url) を書き込みます。

• フロントマターのキーを、どの深さでも ハイライト します。YAML（ {a: 1} 形式のマッピングも含む）と HCL に対応しています。

• テーマ の選択：default、gaia、uncover、プロジェクトのテーマ （themes/*.css）、スライドデッキ内で定義したテーマ（<style> 内の /* @theme name */）から選べます。選択すると、YAML または HCL のフロントマターに theme: が 書き込まれるので、共有リンクにも反映されます。フロントマターを編集すると、 選択もそれに追従します。

• 入力中もプレビューは 表示位置を保ちます：変更されたスライドだけが置き換えられ、 テーマを変更してもプレビューは同じスライドで開き直されます。

• 共有リンク：スライドデッキはリンク自体（# 以降の部分に 圧縮して）に含まれるので、リンクを開けばスライドデッキが開きます。リンクで運べるのは 圧縮後 64 KiB までで、スライドデッキだけです。プロジェクトにほかのもの （テーマ、kind、メディア）が含まれる場合は、Share がその旨を伝え、.zip を提案します。

• Save as：

  • HTML ページ（slides deck.md が書き出すものと同じ）
  • PDF（ベクター、テキスト選択可、アウトライン付き）
  • 編集可能な PowerPoint または OpenDocument のスライドデッキ

  これらは、slides --pdf、 --pptx、--odp と同じコードによってブラウザー内で作成されます。100 枚のベンチマーク用スライドデッキの PDF は、 コマンドで作成したものとバイト単位で同一です。最初のエクスポート時には、エクスポート エンジン（約 5 MiB。一度だけで、次の更新までブラウザーに保持されます）が、 進捗表示付きでダウンロードされ、届きながらコンパイルされます。その後は、スライドが使うフォントだけを ダウンロードします。3 MB/s の回線では、ウェルカムデッキの最初の PDF が 3 秒未満で仕上がります。その後、100 枚のスライドデッキは約 3 秒で書き出せます。 https: の画像は、そのサーバーが許可している場合（CORS）にだけ含まれます。data: の 画像は常に含まれます。

• 下書きは保持されます：

  • スライドデッキは入力に合わせてこのブラウザーに保存され（IndexedDB、このサイト専用）、 再読み込みしても戻ってきます。どこにも何も送信されません。 プロジェクトのテキストファイル（テーマ、kind、データ、slides.yaml）も同じように保存され、 入力直後にタブを閉じても失われません。メディアはドロップした時点で保存されます。
  • 共有リンクを開くとそのスライドデッキが開きますが、あなたの下書きは保持されます：Draft ▸ Restore my draft で元に戻せます。
  • サンプルを開いても、Draft ▸ Reset to the example（確認あり）を実行しても、 別のタブで作業しても、下書きは消えません：Draft ▸ Restore replaced で 元に戻せます。
  • Draft ▸ Forget my drafts は、保存されているものをすべて消去します。

どのエクスポートも、プレビューに表示されているプロジェクト（slides.yaml、 テーマ、kind、データファイル、メディア）をレンダリングし、メディアはドキュメント内に埋め込まれます。

ファイルとしての画像（slides の --images）はブラウザーでは作成できません。 コマンド または VS Code 拡張機能 を使ってください。

セキュリティ

スライドデッキは、ページのオリジンを持たないサンドボックス化された iframe に表示されます。 iframe からは Playground にもそのストレージにもアクセスできず、フォームの送信もナビゲーションもできません。 そのページには、自身のスクリプトだけを実行する Content Security Policy が設定されています。 スライドデッキ内の生の HTML は、slides のデフォルトと同じく Marp の許可リストに従います。 5 秒を超えて実行されるレンダリング（ループするテンプレートなど）は 停止されます。

発表者ウィンドウも同じサンドボックスを保ちます。このウィンドウは Playground 自身が開き、 同じようにサンドボックス化された iframe にスライドデッキを表示します。2 つの iframe はストレージを共有できないので、Playground がメッセージでスライド番号を 中継します。スライドデッキを実行するフレームが Playground の オリジンを得ることはありません。

プロジェクトのメディアは、メッセージ内のバイト列としてサンドボックス化されたフレームに渡され、 各フレームは自身のオリジンで、それぞれ独自の blob: URL を作成します。Playground が作成した blob: URL はそこでは読み込まれず、フレームのポリシーに追加されるのは、メディアとフォント向けの blob: だけです。

サイズと速度

モジュールは、GitHub Pages が配信する状態で 8.8 MiB です（gzip。Pages は brotli で配信しません）。進捗バー付きで一度だけダウンロードされ、その後は次のデプロイまで ブラウザーにキャッシュされます。Apple M4 Max と Chrome 155 で公開中のページを 計測したところ、エディターはページを開いてから 2.1 s で使えるようになり、そのうち 1.5 s はダウンロードで、最初のスライドは 2.4 s で表示されました。100 枚のベンチマーク用スライドデッキへの変更は、 約 30 ms でプレビューに反映されます：go-slides は変更されたスライドだけを レンダリングし、プレビューでもそのスライドだけが置き換えられます。