MCP Video App - Setup & Run Instructions

MCP Video App - セットアップと実行手順

前提条件

• Node.js がインストールされていること（v14 以降）
• FFmpeg がインストールされていること（動画処理に必要）

プロジェクト構成

まず、MCP Video App 用のプロジェクトフォルダーを作成します。

mcp-video-app/
├── server.js         # Backend server code
├── package.json      # Project dependencies
├── public/           # Frontend static files
│   ├── index.html    # Main HTML file
│   ├── app.js        # Frontend JavaScript
│   └── styles.css    # CSS styles
├── uploads/          # Folder for uploaded videos
└── processed/        # Folder for processed videos

セットアップ手順

1. プロジェクトフォルダーを作成して移動する

mkdir mcp-video-app
cd mcp-video-app

2. Node.js プロジェクトを初期化する

npm init -y

3. 必要な依存関係をインストールする

npm install express cors multer morgan body-parser

4. server.js ファイルを作成する 「MCP Server - Backend Setup」アーティファクトからサーバーコードをコピーして、このファイルに貼り付けます。

5. アップロード用と処理済み動画用のディレクトリーを作成する

mkdir uploads
mkdir processed
mkdir public

6. フロントエンドファイルを作成する public/index.html を作成し、「MCP Video App - Frontend」アーティファクトから HTML をコピーします。

7. 基本的な CSS ファイルを作成する（任意） 追加のスタイルを設定する場合は、public/styles.css を作成します。

8. フロントエンドの JavaScript を作成する public/app.js を作成し、HTML ファイルから JavaScript 部分（<script> タグ内のすべて）をコピーします。

アプリケーションの実行

1. サーバーを起動する

node server.js

2. アプリケーションにアクセスする ウェブブラウザーを開き、次の場所にアクセスします。

http://localhost:3000

トラブルシューティング

FFmpeg が見つからない

FFmpeg に関連するエラーが発生した場合：

• FFmpeg がシステムにインストールされていることを確認します。
• Windows の場合：FFmpeg を PATH 環境変数に追加します。
• Mac の場合：brew install ffmpeg
• Linux の場合：sudo apt install ffmpeg

アップロードの問題

動画のアップロードに問題がある場合：

• uploads ディレクトリーが存在し、書き込み権限があることを確認します。
• ファイルサイズの上限（デフォルトは 100MB）を確認します。
• ブラウザーのコンソールで JavaScript エラーがないか確認します。

動画処理の問題

動画処理に失敗する場合：

• FFmpeg が正しくインストールされ、利用可能であることを確認します。
• サーバーログにエラーメッセージがないか確認します。
• まず、より小さなテスト動画ファイルで試します。