Web To Ios MCP

🚀 Web to iOS MCP

Web to iOS MCPは、Capacitorを使用してWebアプリケーション（Vite/Next.js/React）をiOSアプリに変換するためのMCPサーバーです。このサーバーは、既存のWebアプリを自動的に分析し、iOS化に必要な仕様書や設定ファイルを生成することで、開発者の負担を大幅に軽減します。

🚀 クイックスタート

このセクションでは、Web to iOS MCPを使い始めるための基本的な手順を説明します。

✨ 主な機能

🔍 1. フレームワーク自動検出

• Vite + React/Vue：package.jsonとvite.config.tsを解析します。
• Next.js：App Router / Pages Routerを検出します。
• Create React App：react-scriptsを検出します。
• その他：Parcel、Webpackなどのフレームワークも検出可能です。

検出内容には、フレームワーク名とバージョン、ビルド出力ディレクトリ、ルーティング方式、使用している主要ライブラリ（React Router、Supabaseなど）が含まれます。

📝 2. iOS変換仕様書の自動生成

プロジェクトの構成に基づいて、以下の内容を含む詳細な仕様書を生成します。

• 現在の技術スタック分析
• Capacitorのインストール手順
• フレームワーク固有の設定変更（Vite/Next.js別）
• capacitor.config.tsの推奨設定
• package.jsonへの追加スクリプト
• iOS固有の最適化（Safe Area、Status Barなど）
• トラブルシューティングガイド

⚙️ 3. 設定ファイルの自動生成

• capacitor.config.ts：プロジェクトに最適化された設定を生成します。
• ビルド設定の変更提案
• .gitignoreの追加項目

✅ 4. 移行準備チェックリスト

• Xcode環境の確認
• CocoaPodsのインストール状況
• 必要な依存関係の確認
• ビルド成功の確認

📦 インストール

# NPMで公開後
npm install -g web-to-ios-mcp

# または、ローカル開発
git clone https://github.com/Gaku52/web-to-ios-mcp.git
cd web-to-ios-mcp
npm install
npm run build

💻 使用例

基本的な使用法

MCPリソース

このMCPサーバーは、以下のドキュメントをMCPリソースとして提供します。Claude Codeから直接アクセス可能です。

web-to-ios://guides/implementation

Implementation Guide - iOS移行の実装ガイド

完全な実装ガイドを提供します。

• 実装前の問題整理とリスク管理
• 設計原則（KISS、YAGNI、Fail Fastなど）
• パフォーマンス最適化のベストプラクティス
• 品質チェックリスト
• MVP（Minimum Viable Product）の定義

web-to-ios://guides/troubleshooting

Common Issues & Solutions - トラブルシューティングガイド

よくある問題と解決策を網羅します。

• ビルドエラー（CocoaPods、Xcode署名など）
• 実行時エラー（白い画面、ルーティング、環境変数）
• Vite特有の問題（base設定、HMRなど）
• Next.js特有の問題（Static Export、画像最適化など）
• Supabase連携の問題
• UI/UX問題（Safe Area、ステータスバー、キーボード）
• パフォーマンス問題

MCPツール

detect_web_framework

Webプロジェクトのフレームワークと構成を検出します。

{
  "framework": "vite",
  "version": "5.0.0",
  "uiLibrary": "react",
  "buildOutputDir": "dist",
  "routing": "react-router",
  "dependencies": {
    "supabase": "^2.78.0",
    "tailwindcss": "^3.4.0"
  }
}

generate_ios_migration_spec

iOS変換のための詳細な仕様書を生成します。

generate_capacitor_config

Capacitor設定ファイルを生成します。

analyze_migration_readiness

iOS移行の準備状況をチェックします。

{
  "ready": false,
  "checks": [
    { "name": "Xcode installed", "status": "pass" },
    { "name": "CocoaPods installed", "status": "pass" },
    { "name": "Build successful", "status": "fail", "message": "npm run build failed" }
  ]
}

📚 ドキュメント

対応フレームワーク

✅ 対応済み（v1.0）

• Vite + React
• Vite + Vue
• Next.js (App Router / Pages Router)
• Create React App

🔜 今後対応予定

• Astro
• SvelteKit
• Remix
• Nuxt.js

技術スタック

• TypeScript：型安全性を提供します。
• Node.js：実行環境です。
• MCP SDK：@modelcontextprotocol/sdk
• 依存ライブラリ：
  • fs-extra：ファイル操作を行います。
  • glob：ファイル検索を行います。
  • JSON/YAMLパーサー

開発ロードマップ

Phase 1: 基本機能（v1.0）

• [x] プロジェクト構想・仕様策定
• [ ] フレームワーク検出機能
  • [ ] Vite検出
  • [ ] Next.js検出
  • [ ] CRA検出
• [ ] iOS仕様書生成
  • [ ] Vite用テンプレート
  • [ ] Next.js用テンプレート
• [ ] Capacitor設定生成
• [ ] 移行準備チェック
• [ ] テストケース作成
• [ ] ドキュメント整備

Phase 2: 拡張機能（v1.1+）

• [ ] より詳細な依存関係分析
• [ ] カスタムプラグイン推奨機能
• [ ] トラブルシューティング自動診断
• [ ] 既存iOSプロジェクトの検出・更新

Phase 3: Android対応（v2.0）

• [ ] リポジトリ名を web-to-mobile-mcp に変更検討
• [ ] Android変換機能追加
• [ ] iOS/Android共通設定の最適化

コントリビューション

コントリビューションを歓迎します！以下の手順で参加できます。

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

関連プロジェクト

• Spark Vault - このMCPを使用してiOS化予定のアイデア管理アプリ
• Capacitor - Web to Nativeコンバーター

🔧 技術詳細

このプロジェクトでは、TypeScriptを使用して型安全性を確保し、Node.jsを実行環境として利用しています。また、MCP SDK @modelcontextprotocol/sdk を使用しています。依存ライブラリとして、fs-extra を使ってファイル操作を行い、glob を使ってファイル検索を行っています。JSON/YAMLパーサーも使用しています。

📄 ライセンス

このプロジェクトはMIT Licenseの下で公開されています。詳細は LICENSE を参照してください。

Web to iOS MCP で、あなたのWebアプリを簡単にiOSアプリへ。