Claude Arm64 Browser

🚀 誰もが使えるノーコードAI SaaSビルダー

このプロジェクトは、わずか80ドルのハードウェアでAIの支援を受けながら完全なSaaSアプリケーションを構築およびテストすることを可能にします。予算が限られたグローバルなユーザーに対して、AI駆動の開発を民主化します。

🚀 クイックスタート

初心者向けガイド

Raspberry Piをまだセットアップしたことがない場合 完全なセットアップガイド - 30分でゼロからSaaSビルダーになるステップバイステップガイドです！

前提条件

# システム依存関係のインストール
sudo apt update
sudo apt install chromium-browser nodejs npm python3

# Chromiumが動作することを確認
chromium-browser --version

インストール

git clone https://github.com/nfodor/claude-arm64-browser
cd claude-arm64-browser
npm install
chmod +x *.py *.sh

クイックテスト（ワンライナー）

# インストール直後に動作を確認
python3 -c "import sys; sys.path.append('.'); import arm64_browser; print('[OK] ARM64 Browser Works!' if 'error' not in arm64_browser.navigate('https://example.com').lower() else '[FAIL] Failed')"

期待される結果: [OK] ARM64 Browser Works!

>>> 素敵なデモを実行

# 即座に結果が見えるクイックデモ（30秒）
python3 instant_demo.py

# すべての機能を示す包括的なデモ（2 - 3分）
./run_demo.sh

セットアップのテスト

# MCPサーバーを直接テスト
echo '{"jsonrpc":"2.0","method":"tools/list","id":1}' | node index.js

# Pythonラッパーをテスト
python3 simple_browser.py

✨ 主な機能

革命: 誰もがAI開発を行えるように

従来の方法: エンタープライズAI開発には5万ドル以上のワークステーションが必要で、世界の開発者の95％が除外されていました。

新しい方法: 480ドルのRaspberry Piセットアップで、シリコンバレーのスタートアップと同じAI機能を得ることができます。

なぜこれがすべてを変えるのか

• 金銭的な障壁が取り除かれる: 従来5万ドルかかっていたものが現在では480ドル（99％の削減）。
• グローバルなアクセス: シリコンバレーだけでなく、すべての国で手頃な価格。
• ノーコード革命: AIがSaaSを構築し、あなたは顧客に集中できます。
• 完全自動化: アイデアからデプロイされたアプリまで、手動でコーディングする必要がありません。
• 即時テスト: AIがユーザーが見る前にすべての機能をテストします。

グローバルなメーカー運動に最適

• 国際的な起業家: 現地の予算でシリコンバレーのAIツールにアクセスできます。
• 学生と教育者: 借金を抱えることなく、最新のAI開発を学べます。
• 副業者: 正社員を維持しながらSaaS製品を構築できます。
• 単独創業者: 80ドルのデバイスで完全な開発チームを持つことができます。
• 小規模チーム: ベンチャーファンドのあるスタートアップと競争できます。
• リモートコミュニティ: インターネットがあればどこでもAI開発が可能です。

構築できるもの（コーディング不要！）

実際に機能するAI駆動のSaaSアイデア

電子商取引ツール

• 数千の競合他社にわたる価格監視
• 製品調査と市場分析
• 自動在庫追跡
• レビューからの顧客の感情分析

ビジネスインテリジェンス

• ソーシャルメディア監視ダッシュボード
• SEOランク追跡サービス
• リード生成と資格認定
• 競合他社分析プラットフォーム

自動化サービス

• ウェブサイトの稼働率監視
• コンテンツの検証とコンプライアンス
• データ入力と処理
• フォームの入力と送信サービス

マーケティングソリューション

• A/Bテストプラットフォーム
• ランディングページの最適化
• メールキャンペーンの監視
• 社会的証拠の収集

魔法: AIが大きな仕事をこなす

1. アイデアを説明する: "競合他社の価格を監視したい"
2. AIがコードを書く: Claudeがスクレイピングロジックを構築します。
3. AIがすべてをテストする: 自動ブラウザテストで動作を保証します。
4. デプロイとスケール: SaaSが顧客向けに準備完了です。
5. 収益を上げる: AIが製品を維持している間、マーケティングに集中できます。

このプロジェクトの特別な点

• ノーコードSaaS開発: アプリのアイデアを平易な英語で説明するだけで、AIがコードを書き、テストし、デプロイします。あなたは顧客に集中できます。数日でアプリを立ち上げることができます。
• 大幅なコスト削減: 従来のAI開発では5万ドル以上かかっていたものが、現在では480ドルです。シリコンバレーのスタートアップと同じ機能を備えています。クラウドの定期的な請求やライセンス料がかからず、開発インフラストラクチャを自前で持つことができます。
• グローバルなアクセシビリティ: インターネットがあればどこでも動作します。すべての国で手頃な価格で、技術的な背景がなくても利用できます。完全なチュートリアルとサンプルが含まれています。
• 即時結果: SaaSがリアルタイムで動作するのを確認できます。AIがすべての機能を自動的にテストし、デバッグや技術的なトラブルシューティングが不要です。同日に顧客にデプロイすることができます。

💻 使用例

基本的な使用法

import simple_browser

# 任意のウェブサイトに移動
result = simple_browser.browser_navigate("https://example.com")
print(result)  # "Successfully navigated to https://example.com"

# スクリーンショットを撮る
screenshot = simple_browser.browser_screenshot("homepage.png")
print(screenshot)  # "Screenshot saved to /tmp/homepage.png"

# JavaScriptを実行
title = simple_browser.browser_evaluate("document.title")
print(title)  # ウェブサイトのタイトル

# ページのコンテンツを抽出
content = simple_browser.browser_get_content("text")
print(content[:100])  # ページテキストの最初の100文字

高度な使用法

# 実際のユースケースでの高度な使用例
# 例: エンドツーエンドのSaaSテスト
def test_saas_signup_flow():
    # サインアップページに移動
    simple_browser.browser_navigate("https://yourapp.com/signup")
    
    # 登録フォームを入力
    simple_browser.browser_fill("#email", "test@example.com")
    simple_browser.browser_fill("#password", "securepass123")
    simple_browser.browser_click("#signup-btn")
    
    # サインアップが成功したことを確認
    success_msg = simple_browser.browser_evaluate("document.querySelector('.success-message').textContent")
    
    # ダッシュボードへのアクセスをテスト
    simple_browser.browser_navigate("https://yourapp.com/dashboard")
    dashboard_loaded = simple_browser.browser_evaluate("document.querySelector('.dashboard').style.display !== 'none'")
    
    # ビジュアル回帰のためにスクリーンショットを撮る
    simple_browser.browser_screenshot("dashboard_post_signup.png")
    
    return "PASS" if success_msg and dashboard_loaded else "FAIL"

Claude CLIとの統合

前提条件

# まだインストールしていない場合はClaude CLIをインストール
npm install -g @anthropic/claude-cli

Claude CLIに追加

# クローン後のプロジェクトディレクトリから
claude mcp add chromium-arm64 "$(pwd)/mcp-wrapper.sh" --scope user

接続を確認

claude mcp list
# 表示されるはず: chromium-arm64: /path/to/mcp-wrapper.sh - ✓ Connected

⚠️ 重要: 追加後にClaudeを再起動

MCPサーバーを追加した後は、必ず新しいClaudeセッションを開始する必要があります:

# 現在のセッションがある場合は終了
exit
# 新しいセッションを開始
claude

Claude CLIでの使用方法

Claudeにchromium-arm64ツールを使用するように依頼する:

List available MCP servers and use chromium-arm64 to navigate to https://example.com

Take a screenshot using the chromium-arm64 tool

Use chromium-arm64 to click the button with selector #submit

Fill the email field using chromium-arm64 with test@example.com

Playwright/Puppeteerを避けるために明示的に指定すること:

• "Use chromium-arm64 to navigate..."
• "Using the chromium-arm64 tool, take a screenshot"
• "Open a browser" (壊れたPlaywrightを試そうとする可能性があります)
• "Take a screenshot" (壊れたPuppeteerを試そうとする可能性があります)

成功例

正常に動作すると、次のような表示がされます:

You: Use chromium-arm64 to navigate to https://httpbin.org/json and show me what you see

Claude: I'll navigate to https://httpbin.org/json using the chromium-arm64 tool.

[Uses chromium-arm64.navigate tool]

The page displays a JSON object with a slideshow structure containing:
- Author: "Yours Truly"
- Date: "date of publication"
- Title: "Sample Slide Show"
...

📚 ドキュメント

実世界でのユースケース

1. エンドツーエンドのSaaSテスト（画期的なアプローチ）

# 完全なユーザージャーニーテスト - 人間によるデバッグ不要
def test_saas_signup_flow():
    # サインアップページに移動
    simple_browser.browser_navigate("https://yourapp.com/signup")
    
    # 登録フォームを入力
    simple_browser.browser_fill("#email", "test@example.com")
    simple_browser.browser_fill("#password", "securepass123")
    simple_browser.browser_click("#signup-btn")
    
    # サインアップが成功したことを確認
    success_msg = simple_browser.browser_evaluate("document.querySelector('.success-message').textContent")
    
    # ダッシュボードへのアクセスをテスト
    simple_browser.browser_navigate("https://yourapp.com/dashboard")
    dashboard_loaded = simple_browser.browser_evaluate("document.querySelector('.dashboard').style.display !== 'none'")
    
    # ビジュアル回帰のためにスクリーンショットを撮る
    simple_browser.browser_screenshot("dashboard_post_signup.png")
    
    return "PASS" if success_msg and dashboard_loaded else "FAIL"

2. 自律的なAPI + フロントエンドテスト

# フロントエンドを通じたバックエンドAPIの検証
def validate_api_through_ui():
    # UIを通じたデータ作成のテスト
    simple_browser.browser_navigate("https://yourapp.com/create-project")
    simple_browser.browser_fill("#project-name", "Test Project AI")
    simple_browser.browser_click("#create-btn")
    
    # データがリストビューに表示されることを確認
    simple_browser.browser_navigate("https://yourapp.com/projects")
    project_exists = simple_browser.browser_evaluate("document.querySelector('[data-project=\"Test Project AI\"]') !== null")
    
    # データの修正をテスト
    simple_browser.browser_click("[data-project=\"Test Project AI\"] .edit-btn")
    simple_browser.browser_fill("#project-name", "Modified by AI")
    simple_browser.browser_click("#save-btn")
    
    # バックエンドの永続性を確認
    simple_browser.browser_navigate("https://yourapp.com/projects")
    updated = simple_browser.browser_evaluate("document.querySelector('[data-project=\"Modified by AI\"]') !== null")
    
    return {"api_create": project_exists, "api_update": updated}

3. クロスブラウザ互換性（人間による介入ゼロ）

# 自動化されたクロスプラットフォームテスト
def test_responsive_design():
    test_results = {}
    
    # モバイルビューポート
    simple_browser.browser_evaluate("window.resizeTo(375, 667)")  # iPhoneサイズ
    simple_browser.browser_navigate("https://yourapp.com")
    simple_browser.browser_screenshot("mobile_view.png")
    mobile_nav = simple_browser.browser_evaluate("document.querySelector('.mobile-nav').style.display !== 'none'")
    
    # デスクトップビューポート  
    simple_browser.browser_evaluate("window.resizeTo(1920, 1080)")
    simple_browser.browser_screenshot("desktop_view.png")
    desktop_nav = simple_browser.browser_evaluate("document.querySelector('.desktop-nav').style.display !== 'none'")
    
    return {"mobile_responsive": mobile_nav, "desktop_responsive": desktop_nav}

4. 競合他社分析の自動化

# 競合他社の価格を監視
simple_browser.browser_navigate("https://competitor.com/pricing")
simple_browser.browser_screenshot("competitor_pricing.png")
prices = simple_browser.browser_evaluate("document.querySelectorAll('.price').length")

5. SEO監視

# 検索ランキングを確認
simple_browser.browser_navigate("https://google.com/search?q=your+keywords")
simple_browser.browser_screenshot("serp_results.png")
rankings = simple_browser.browser_evaluate("document.querySelector('.g').textContent")

なぜARM64 + ブラウザ自動化がSaaSの宝庫なのか

SaaS開発における重要なギャップ

すべてのSaaSスタートアップは、アプリケーションを出荷する前にエンドツーエンドで動作することを確認する必要があります。従来のアプローチは以下の理由で失敗します:

• 手動テスト: 高価で、遅く、エラーが発生しやすく、スケールしません。
• x86_64専用ツール: Puppeteer/PlaywrightはARM64でバイナリが壊れて動作しません。
• 人間によるデバッグ: QAチームはテスト失敗のデバッグに何日も費やします。
• 限られたカバレッジ: 大規模なチームがいないとすべてのユーザージャーニーをテストすることができません。
• 回帰盲点: 変更によって既存の機能が破損することが検出されません。

我々の画期的なアプローチ: ARM64での自律的なAIテスト

• 人間によるデバッグゼロ: AIエージェントが完全なユーザーフローを自律的にテストします。
• 24時間体制の継続的なテスト: 予算内のハードウェアで常に検証を行います。
• フルスタックカバレッジ: 実際のブラウザを通じてフロントエンド + バックエンド + APIの検証を行います。
• ビジュアル回帰検出: スクリーンショットによってUIの破損変更を自動的に検出します。
• クロスデバイステスト: モバイル/タブレット/デスクトップのビューポート自動化。
• ネイティブARM64: 壊れたx86_64バイナリではなく、システムのChromiumを使用します。
• コスト効果が高い: 480ドルのセットアップで、従来のQAインフラストラクチャでは5万ドル以上かかっていたものを実現します。

なぜこれがSaaS開発を永遠に変えるのか

以前: 手動のQAチーム → 高価 → 遅い → 人間のエラー → 限られたカバレッジ

Deploy → Hope → Customer finds bugs → Emergency fixes → Reputation damage

以降: AIエージェント → 自律的 → 高速 → 包括的 → 24時間体制の監視

Code → AI tests everything → Deploy with confidence → Happy customers

ARM64の利点

標準的なブラウザ自動化はARM64で失敗することが多いのは、Puppeteer/Playwrightが動作しないx86_64バイナリをダウンロードするためです。我々の解決策は以下の通りです:

• システムにインストールされたChromium（ネイティブARM64）を使用します。
• ヘッドレスARM64動作に適した起動フラグを使用します。
• Claude Codeとの統合のためにMCPプロトコルに準拠しています。
• 事前にビルドされたブラウザバイナリに依存しません。

アーキテクチャ

graph TB
    A[Claude Code] --> B[MCP Protocol]
    B --> C[ARM64 Browser Server]
    C --> D[System Chromium]
    D --> E[Web Pages]
    
    F[Python Tools] --> C
    G[Direct CLI] --> C

🔧 技術詳細

システム要件

• OS: Raspberry Pi OS (64-bit) または任意のARM64 Linux
• RAM: 最小4GB、推奨8GB
• ストレージ: 32GB以上の高速SDカード (Class 10/A2)
• ブラウザ: Chromium (aptを通じてインストール)
• ランタイム: Node.js 18+、Python 3.8+

ブラウザの設定

// ARM64用に最適化されています
{
  executablePath: '/usr/bin/chromium-browser',
  headless: true,
  args: [
    '--no-sandbox',
    '--disable-setuid-sandbox', 
    '--disable-dev-shm-usage',
    '--disable-gpu',
    '--disable-web-security',
    '--disable-features=VizDisplayCompositor'
  ]
}

🛠️ トラブルシューティング

MCP接続問題

chromium-arm64が "✗ Failed to connect" と表示される場合

# ラッパースクリプトが存在し、実行可能であることを確認
ls -la $(pwd)/mcp-wrapper.sh
chmod +x mcp-wrapper.sh

# サーバーを直接テスト
echo '{"jsonrpc":"2.0","method":"tools/list","id":1}' | node index.js

# 正しいパスで再追加
claude mcp remove chromium-arm64
claude mcp add chromium-arm64 "$(pwd)/mcp-wrapper.sh" --scope user

# 重要: Claudeを再起動
exit
claude

ClaudeがPlaywright/Puppeteerを代わりに使用しようとする場合

• 明示的に指定する: 常にプロンプトに "chromium-arm64" を記載する。
• 利用可能なサーバーを確認: claude mcp list
• chromium-arm64がリストに表示されない場合は、Claudeを再起動する。

Claudeセッションで "Server not found" と表示される場合

• MCPサーバーは起動時に読み込まれます。
• MCPサーバーを追加/変更した後は常にClaudeを再起動してください。
• 起動前に claude mcp list を実行して確認してください。

一般的な問題

ブラウザが起動しない場合

# Chromiumのインストールを確認
which chromium-browser
chromium-browser --version

# ヘッドレスモードをテスト
chromium-browser --headless --disable-gpu --dump-dom https://example.com

MCP接続が失敗する場合

# Claude Code MCPのセットアップを確認
claude mcp list

# サーバーを手動でテスト
echo '{"jsonrpc":"2.0","method":"tools/list","id":1}' | node index.js

メモリ問題が発生する場合

# システムリソースを監視
htop

# Chromiumのメモリ使用量を最適化
# ブラウザ引数に追加: '--memory-pressure-off', '--max_old_space_size=512'

500ドル未満での完全なAIセットアップ

高級グラフィックスカードよりも安い価格で、完全なAI駆動の開発環境を構築できます。

得られるもの

• ポータブルAIワークステーション: 4インチ×3インチのサイズでデスクトップクラスのパフォーマンス。
• Claude Sonnet 4アクセス: 200Kのコンテキストウィンドウを持つ最新のAIモデル。
• ブラウザ自動化: ウェブスクレイピング、テスト、監視機能。
• 24時間体制の動作: 常にオンのAIアシスタントと自動化。
• 低消費電力: システム全体で15W（従来のセットアップでは500W以上）。
• 静かな動作: ファンがなく、完全に静か。
• タッチインターフェイス: 内蔵ディスプレイで直接操作可能。

スタートアップにとっての投資収益率

• 自律的なテスト: AIエージェントが人間によるデバッグなしでSaaSの全フローをテスト - 週に40時間以上の節約。
• 継続的な検証: 24時間体制の監視で、顧客がバグを見つける前にアプリが動作することを保証。
• QAコスト削減: 高価な手動テストチームを自動化されたAI検証に置き換える。
• 迅速な出荷: AIがすべてのユーザージャーニーをテストしたことを知って自信を持ってデプロイ。
• ゼロ回帰: 自動化されたビジュアルおよび機能テストで破損変更を防止。
• 市場調査: 自動化された競合他社分析で週に20時間以上の節約。
• カスタマーサポート: AI駆動の応答生成とテスト。
• コンテンツ作成: 自動化されたソーシャルメディア監視とコンテンツアイデア。
• 製品開発: AI支援によるコーディングと迅速なプロトタイピング。

🤝 コントリビューション

このプロジェクトは、スタートアップやメーカーに対してAIアクセスを民主化することを目指しています。コントリビューションを歓迎します！

コントリビューションの分野

• モバイルブラウザのサポート (Android/iOSテスト)
• 追加のMCPツールと統合
• Pi Zero/小型デバイス向けのパフォーマンス最適化
• タッチインターフェイスのUI/UX改善
• チュートリアルコンテンツとユースケースの例

開発環境のセットアップ

git clone https://github.com/nfodor/claude-arm64-browser
cd claude-arm64-browser
npm install
# 開発サーバーは不要 - すぐに使用可能！

📄 ライセンス

MITライセンス - 商用プロジェクトでの使用も自由です！

謝辞

• Anthropic - Claude CodeとMCPプロトコルの提供
• Raspberry Pi Foundation - コンピューティングの民主化
• Chromium Project - ARM64ブラウザのサポート
• オープンソースコミュニティ - このプロジェクトを可能にした皆さん

サポートとコミュニティ

• 問題報告: GitHub Issues
• ディスカッション: GitHub Discussions
• メール: github@fodor.app
• リポジトリ: github.com/nfodor/claude-arm64-browser

このリポジトリがあなたのスタートアップにAIを活用するのに役立つ場合は、スターをつけてください！
すべてのスターが、より多くの開発者に手頃なAIソリューションを発見する手助けになります。

脚注

¹ 2025年時点の価格 (USD、概算):

• Raspberry Pi 5 16GB: $180 (公式MSRP)
• Piディスプレイ2 (11.9インチタッチ): $120 (公式アクセサリー)
• 公式27W USB-C PSU: $25 (Pi 5に推奨)
• SanDisk Extreme 128GB A2: $35 (高速マイクロSD)
• Claude Code Pro: $40/月 (2ヶ月のスタートアップ期間)
• ケース & ケーブル: $40 (公式ケース + HDMI/USBアクセサリー)

価格は地域や在庫状況によって異なる場合があります。最新の価格は公式小売店を確認してください。

_{メーカーとスタートアップコミュニティのために愛を込めて作られました。}