vscode-demo-time

Demo Time を使えば、完璧なコーディングデモをスクリプト化し、スライドを Visual Studio Code 内でシームレスに発表できます。 入力ミスや操作ミスをなくし、魅力的でストレスのないプレゼンテーションを実現します。

ドキュメント 👉 demotime.show

機能

• スクリプト化されたデモ：コーディングデモを自動化して、完璧な流れを維持します。​
• コードのハイライト：特定のコード部分を強調表示し、聴衆の注目を集めます。​
• スライドの統合：スライドを VS Code 内で直接発表し、一貫した体験を実現します。​
• カスタマイズ可能なアクション：デモの一部として、さまざまな VS Code コマンドやタスクを実行します。
• PowerPoint との統合：PowerPoint 統合を使って、スライドからコードへシームレスに移動できます。
• AI スキル：Demo Time AI スキルを使えば、GitHub Copilot、Claude Code などの AI アシスタントに、トークの計画、スライドやスライドテーマの作成、デモのスクリプト化を任せられます。

はじめに

1. インストール：拡張機能をインストールします。​
2. 初期化：インストール後、VS Code でエクスプローラーパネルを開き、プロジェクト内で拡張機能を初期化します。Demo Time ビューを見つけて、**「Initialize」**ボタンをクリックします。この操作により、選択した形式に応じて demo.json または demo.yaml ファイルを含む .demo フォルダーがワークスペースに作成されます。​
3. デモの作成：アクトファイルにアクションを記述し、必要に応じて各ステップとアクションを定義します。​利用可能なアクションの詳細は、ドキュメントのサポートされているアクションのセクションをご覧ください。

ドキュメント

詳しい手順、高度な設定、ベストプラクティスについては、 https://demotime.showで公開されている詳細なドキュメントをご覧ください。このリソースには、拡張機能の機能を最大限に活用するための詳しいガイドと例が掲載されています。

アクトファイルの例

デモの例を次に示します。

{
  "$schema": "https://demotime.show/demo-time.schema.json",
  "title": "Sample demo",
  "description": "This is a sample demo configuration to show the capabilities of the extension.",
  "demos": [
    {
      "title": "Step 1",
      "description": "This is step 1",
      "steps": [
        {
          "action": "create",
          "path": "sample.json",
          "content": "{\n  \"firstName\": \"Elio\",\n  \"lastName\": \"Struyf\"\n}"
        },
        {
          "action": "open",
          "path": "sample.json"
        },
        {
          "action": "highlight",
          "path": "sample.json",
          "position": "2:3"
        }
      ]
    },
    {
      "title": "Step 2",
      "description": "This is step 2",
      "steps": [
        {
          "action": "snippet",
          "contentPath": "./snippets/insert_and_highlight.json",
          "args": {
            "MAIN_FILE": "sample.json",
            "CONTENT_PATH": "content.txt",
            "CONTENT_POSITION": "3",
            "HIGHLIGHT_POSITION": "4"
          }
        }
      ]
    }
  ]
}

次の GitHub リポジトリでは、詳細な例もご覧いただけます。

• Demo Time の紹介プレゼンテーション
• presentation-github-actions
• presentation-m365-playwright-github-actions

テスト

次のコマンドで、リントと単体テストを実行します。

npm run lint
npm test

テストには、カバレッジ機能が組み込まれたJestを使用します。新しいテストは tests/ ディレクトリに配置します。

サポート

私の活動を気に入っていただき、役に立つと感じられた場合は、私とエコシステムをスポンサーして、オープンソースの持続可能性を支援することをご検討ください。ありがとうございます！

ライセンス

このプロジェクトは Apache License 2.0 の下でライセンスされています。詳細は LICENSE ファイルをご覧ください。