MCP Web Tutorial 🚀

MCP Web チュートリアル 🚀

MCP（Model Context Protocol）サーバーの構築方法を学ぶための、インタラクティブなウェブチュートリアルです。この学習用ウェブサイトでは、MCP サーバーを実装し、理解するための手順を段階的に解説します。

特長 ✨

• 📱 モバイルファーストの、モダンでレスポンシブなデザイン
• 📚 充実したチュートリアルコンテンツ
• ⚡ リアルタイムのコード例
• 🎨 シンタックスハイライト
• 📋 クリップボードへのコピー機能
• 📊 進捗の追跡
• 🔍 手順ごとのインストールガイド
• 🌐 インタラクティブな UI 要素
• 🔄 ライブプレビュー
• 🌙 ダークモード対応

はじめに 🚀

前提条件 📋

• Node.js（v14 以上）💻
• npm または yarn 📦

インストール 🛠️

1. リポジトリをクローンします。

git clone https://github.com/opestro/mcp-web.git
cd mcp-web

2. 依存関係をインストールします。

npm install

3. サーバーを起動します。

node server.js

4. ブラウザーで http://localhost:3000 にアクセスします 🌐

プロジェクト構成 📁

mcp-web/
├── views/              # EJS templates
│   ├── layout.ejs      # Main layout template 🏗️
│   ├── index.ejs       # Home page 🏠
│   ├── installation.ejs # Installation guide ⚙️
│   └── tutorial.ejs    # Tutorial content 📚
├── public/             # Static assets 🖼️
│   └── image.png       # Main hero image 🖼️
├── server.js           # Express server 🖥️
└── package.json        # Dependencies 📦

使用技術 🛠️

• ⚡ Express.js - ウェブフレームワーク
• 🧩 EJS - テンプレートエンジン
• 💅 TailwindCSS - スタイリング
• ✨ Prism.js - コードのシンタックスハイライト

コントリビューション 🤝

コントリビューションを歓迎します。お気軽にプルリクエストを送信してください。

1. プロジェクトをフォークします 🍴
2. フィーチャーブランチを作成します（git checkout -b feature/amazing-feature）
3. 変更をコミットします（git commit -m 'Add some amazing feature'）
4. ブランチにプッシュします（git push origin feature/amazing-feature）
5. プルリクエストを作成します 📬

作者 ✍️

Mehdi Harzallah

• 💼 LinkedIn: Mehdi Harzallah
• 🐱 GitHub: @opestro
• 📧 Email: [email protected]

ライセンス 📄

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

謝辞 🙏

• この学習リソースの構築に協力してくださったすべてのコントリビューターに感謝します ❤️
• MCP コミュニティに特別な感謝を 🌟

サポート 💬

サポートが必要な場合は、次の方法をご利用ください。

• 🐞 GitHub でイシューを作成する
• 💬 WhatsApp で問い合わせる: +213 778191078
• 📧 [email protected] にメールを送る