【2026年版】Mac mini を常時稼働サーバーにしてスマホ + MCP で Flutter 開発を回す

はじめに

Flutterエンジニアのmizoiです。
「Mac mini を家に置いて、外出先からスマホで Flutter 開発を進めたい」——2025年後半から急速に広まったこの開発スタイルが、2026年に入りさらに実用的になりました。

Claude Code は Opus 4.6（1Mコンテキスト）対応、エージェントチーム機能（マルチエージェント協調）、自動メモリ記録など大幅にアップデートされ、MCP エコシステムも Firebase・Figma・GitHub の公式サーバーが安定稼働しています。

本記事では、Mac mini を Flutter 開発用の常時稼働サーバーにして、スマホから Claude Code + MCP で開発を回す構成を、セットアップから実践ワークフローまで一気通貫で解説します。

筆者の現在の環境

本記事は、以下の環境からスタートして構築しています。すでに Flutter + Claude Code が動いている状態から、リモート開発環境を追加していく流れです。

項目	状態	バージョン / 備考
Homebrew	✅	5.0.14
Flutter	✅	3.35.1
Node.js	✅	v24.5.0
Claude Code	✅	2.0.9
Xcode	✅	26.2
FVM	❌	未インストール（複数バージョン管理したい場合は推奨）
tmux	❌	未インストール → 本記事でセットアップ
Tailscale	❌	未インストール → 本記事でセットアップ
Mosh	❌	未インストール（任意・接続安定性向上）
SSH（リモートログイン）	❓	要確認 → 本記事でセットアップ
スリープ設定	⚠️	`sleep=1`（1分でスリープ） → 要変更

つまり、Flutter 開発環境はすでに整っているが、リモートアクセスの仕組みがまだないという状態です。この記事では、ここから tmux・Tailscale・SSH・MCP を順番に構築していきます。

対象読者

Flutter エンジニアで、外出先でも開発を進めたい方
Claude Code + MCP の導入を検討している方
Mac mini をリモート開発サーバーとして活用したい方

全体構成図

┌─────────────────────────────────────────────────────────────┐
│  スマホ (iPhone / Android)                                    │
│  ┌──────────┐                                               │
│  │ Termius  │  ← SSH / Mosh クライアント                      │
│  └────┬─────┘                                               │
└───────┼─────────────────────────────────────────────────────┘
        │ Tailscale VPN（暗号化 P2P 接続・無料）
        ▼
┌─────────────────────────────────────────────────────────────┐
│  Mac mini（常時稼働）                                         │
│                                                             │
│  ┌────────────────────────────────────────────────────────┐ │
│  │ tmux セッション                                         │ │
│  │  ┌──────────────────────────────────────────────────┐  │ │
│  │  │ Claude Code (Opus 4.6 / Sonnet 4.6)              │  │ │
│  │  │  ├── 🔥 Firebase MCP  → Firestore / Auth / Crash │  │ │
│  │  │  ├── 🎨 Figma MCP     → デザイン→Widget生成       │  │ │
│  │  │  ├── 🐙 GitHub MCP    → Issue / PR 管理          │  │ │
│  │  │  └── 📚 Context7 MCP  → 最新Flutter/Dartドキュメント│ │ │
│  │  └──────────────────────────────────────────────────┘  │ │
│  └────────────────────────────────────────────────────────┘ │
│                                                             │
│  Flutter SDK / Xcode / Android SDK                           │
└─────────────────────────────────────────────────────────────┘

Part 1: Mac mini を常時稼働 Flutter 開発サーバーにする

なぜ Mac mini なのか

Flutter 開発で Mac を選ぶ最大の理由は iOS ビルド（Xcode）ができる唯一の選択肢 だからです。加えて Apple Silicon の省電力性能により、24時間稼働のサーバーに向いています。

比較項目	Mac mini	VPS ($5〜/月)
iOS ビルド	✅	❌
月額コスト	電気代のみ（約300円）	$5〜60
初期コスト	約10万円〜	なし
性能	M1〜M4（十分すぎるほど高性能）	スペック次第
データの場所	手元	クラウド

すでに Mac mini を持っている方は初期投資ゼロで始められます。常時稼働させても Apple Silicon の消費電力は非常に低いです。

Step 1: Flutter + Claude Code 環境の確認

筆者の環境ではすでにインストール済みですが、まだの方は以下で構築できます。

# Homebrew
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# Flutter SDK
brew install --cask flutter

# Node.js（Claude Code と MCP サーバーに必要）
brew install node

# Claude Code
npm install -g @anthropic-ai/claude-code

# 認証（ブラウザが開く）
claude login

すでにインストール済みの場合は、バージョンだけ確認しておきます:

flutter --version     # 3.35.1
node --version        # v24.5.0
claude --version      # 2.0.9

Xcode は App Store からインストール後:

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
flutter doctor --android-licenses  # Android も使う場合

Step 2: SSH を有効化

まず現在の状態を確認します:

sudo systemsetup -getremotelogin
# Remote Login: Off → まだ有効化されていない
# Remote Login: On  → すでに有効

有効化の方法は2つ:

方法 A: GUI（推奨・簡単）

システム設定 → 一般 → 共有 → リモートログイン をオンにします。

方法 B: コマンドライン

sudo systemsetup -setremotelogin on

セキュリティ強化として、パスワード認証を無効化し鍵認証のみにします:

sudo nano /etc/ssh/sshd_config

PasswordAuthentication no
PubkeyAuthentication yes

Step 3: スリープを防止

筆者の環境では sleep=1（1分でスリープ）になっていました。常時稼働には変更が必要です。

現在の設定を確認:

pmset -g | grep sleep
# sleep         1  ← これだとすぐスリープしてしまう

ディスプレイだけオフにして本体はスリープさせない設定に変更:

sudo pmset -c displaysleep 5 sleep 0 disksleep 0

caffeinate -s & でも一時的にスリープを防げますが、再起動後にリセットされます。pmset のほうが恒久的です。

Step 4: Tailscale で VPN を構築

Tailscale もまだインストールされていないので、ここでセットアップします。Tailscale はポート開放・ダイナミックDNS不要で、Mac mini とスマホを安全な P2P 暗号化ネットワークで繋ぎます。個人利用は無料（最大20デバイス）。

# Mac mini
brew install tailscale
open /Applications/Tailscale.app
# ブラウザでログイン

スマホ側にも Tailscale アプリをインストールし、同じアカウントでログインするだけ。

Step 5: tmux でセッションを永続化

tmux はまだインストールされていないので、まずインストールします。tmux を使えば、SSH 接続が切れても Claude Code が動き続けます。

brew install tmux

モバイル向け ~/.tmux.conf:

set -g history-limit 50000
set -g mouse on
set -g default-terminal "screen-256color"
set -ga terminal-overrides ",*256col*:Tc"
set -g status-style 'bg=colour235 fg=colour136'
set -g status-right '%H:%M'

使い方:

# セッション作成 & Claude Code 起動
tmux new -s flutter-dev
cd ~/Projects/my_flutter_app
claude

# セッションから抜ける（Claude Code は動き続ける）
# Ctrl+B → D

# 再接続（スマホからでも PC からでも）
tmux attach -t flutter-dev

Part 2: スマホから接続する

SSH クライアントアプリ

プラットフォーム	おすすめ	特徴
iOS	Termius	スニペット保存・UI が直感的
iOS	Blink Shell	Mosh 対応・パワーユーザー向け
Android	Termux	無料・日本語入力がスムーズ

接続手順

# スマホの SSH クライアントから
ssh ユーザー名@mac-mini     # Tailscale 経由のホスト名

# tmux セッションに再接続
tmux attach -t flutter-dev

Tips: スマホ操作を快適にする

Termius のスニペット機能 によく使うコマンドを登録:

tmux attach -t flutter-dev
flutter run --debug
flutter test
claude --continue

接続安定性を上げるなら Mosh:

# Mac mini 側
brew install mosh

# スマホから（Mosh 対応クライアントが必要）
mosh ユーザー名@mac-mini

Mosh は接続断を自動復旧し、モバイル回線でもレスポンシブに動きます。

通知を受け取る（ntfy）:

# Claude Code の作業完了時にスマホに通知
claude "この機能を実装して" && curl -d "✅ 完了" ntfy.sh/my-dev

Part 3: MCP サーバーで Flutter 開発を強化する

ここからが本記事の肝です。MCP（Model Context Protocol）で Claude Code を外部サービスと連携させます。

MCP の基本操作

# サーバー追加
claude mcp add --transport http <名前> <URL>
claude mcp add [オプション] <名前> -- <コマンド> [引数...]

# 一覧 / 削除
claude mcp list
claude mcp remove <名前>

# Claude Code 内で状態確認・ON/OFF切替
/mcp

-s user（--scope user）を付けると全プロジェクト共通で使えます。省略するとそのプロジェクトのみ。

🐙 GitHub MCP — Issue から PR まで一気通貫

Step 1: GitHub PAT を発行

github.com/settings/tokens にアクセス
「Fine-grained token」 を選択
設定:

設定項目	値
Token name	`claude-code-mcp`
Expiration	90 days（推奨）
Repository access	All repositories

Permissions:

Permission	レベル	用途
Contents	Read and write	ファイル読み書き、コミット
Issues	Read and write	Issue 取得・作成・更新
Pull requests	Read and write	PR 作成・レビュー・マージ
Metadata	Read-only（自動付与）	リポジトリ基本情報

Generate token → 表示されたトークンを安全に保存

トークンは一度しか表示されません。必ずこの時点でコピーしてください。

Step 2: Claude Code に追加

claude mcp add -s user --transport http github \
  https://api.githubcopilot.com/mcp \
  -H "Authorization: Bearer github_pat_xxxxxxxxx"

セキュリティ Tips: トークンをコマンド履歴に残さないために、環境変数経由で渡す方法もあります:

export GITHUB_PAT="github_pat_xxxxxxxxx"
claude mcp add -s user --transport http github \
  https://api.githubcopilot.com/mcp \
  -H "Authorization: Bearer $GITHUB_PAT"

Step 3: 確認

claude mcp list
# github: connected と表示されれば成功

できること

カテゴリ	操作例
Issue	一覧取得、作成、更新、コメント追加
PR	作成、レビュー取得、マージ、差分確認
リポジトリ	ファイル取得、ブランチ作成、コード検索
Gist	作成、取得

活用例

👤 「Issue #42 の内容を確認して、要件に沿ってコードを実装して PR を作って」

👤 「PR #15 のレビューコメントを確認して、指摘箇所を修正して」

🔥 Firebase MCP — Firestore / Auth / Crashlytics を直接操作

Flutter × Firebase は王道の組み合わせ。公式の Firebase MCP サーバーが安定稼働しており、Claude Code から直接 Firestore のクエリや Crashlytics のエラー分析ができます。

インストール

# 方法1: 公式プラグイン（最も簡単・推奨）
claude plugin install firebase

# 方法2: 手動
claude mcp add -s user firebase -- npx -y firebase-tools@latest mcp

事前に Firebase CLI でログインしておきます:

npx firebase-tools@latest login

Firebase MCP は firebase.json を自動検出して、プロジェクトで使っている機能に応じたツールを有効化します。--only firestore,auth で機能を限定することも可能です。

できること

機能	操作例
Firestore	コレクション一覧、ドキュメント CRUD、クエリ
Authentication	ユーザー検索、カスタムクレーム設定
Crashlytics	直近のクラッシュ取得、原因分析、Issue にメモ追加
Cloud Functions	ログ確認
Hosting	デプロイ
Remote Config	テンプレート管理

活用例

👤 「Firestore の users コレクションのスキーマを確認して、
     UserModel クラスを Dart で生成して」

👤 「Crashlytics の直近24時間のクラッシュを確認して、
     原因を特定して修正コードを書いて」

🎨 Figma MCP — デザインから Flutter ウィジェットを生成

デザイナーが作った Figma のデザインを、Claude Code で Flutter ウィジェットに変換できます。2026年現在、リモート MCP サーバーが利用可能で Figma デスクトップアプリなしでも接続できます。

インストール

# 方法1: 公式プラグイン（推奨）
claude plugin install figma@claude-plugins-official

# 方法2: リモート MCP（デスクトップアプリ不要）
claude mcp add -s user --transport http figma https://mcp.figma.com/mcp

認証

Claude Code 内で /mcp → figma を選択 → Authenticate → ブラウザで Figma にログイン。

活用例

👤 「この Figma リンクのデザインを Flutter の StatelessWidget で実装して」
   https://www.figma.com/design/xxxxx/...?node-id=1-234

👤 「Figma のデザインシステムからカラーとフォントの変数を取得して、
     lib/theme/app_theme.dart を生成して」

Figma 側でコンポーネントに意味のある名前（CardContainer など）を付け、Auto Layout や Variables を使っておくと、生成コードの品質が大幅に上がります。

📚 Context7 MCP — 最新 Flutter / Dart ドキュメントを参照

Claude Code の学習データには知識カットオフがあります。Context7 を接続すると、Flutter パッケージの最新バージョンのドキュメントを参照してコードを生成できます。

claude mcp add -s user context7 -- npx -y @upstash/context7-mcp@latest

👤 「Riverpod 3.x の最新ドキュメントを確認して、
     正しいプロバイダーの書き方で UserNotifier を実装して」

👤 「go_router の最新 ShellRoute の使い方を調べて実装して」

MCP サーバーの一括設定

~/.claude.json を直接編集してまとめて設定できます:

{
  "mcpServers": {
    "firebase": {
      "command": "npx",
      "args": ["-y", "firebase-tools@latest", "mcp"]
    },
    "context7": {
      "command": "npx",
      "args": ["-y", "@upstash/context7-mcp@latest"]
    }
  }
}

Figma と GitHub はリモート（HTTP）なので CLI から追加:

claude mcp add -s user --transport http figma https://mcp.figma.com/mcp
claude mcp add -s user --transport http github \
  https://api.githubcopilot.com/mcp \
  -H "Authorization: Bearer $GITHUB_PAT"

Part 4: 実践ワークフロー

シナリオ 1: 通勤中にスマホから新機能を実装

🚃 通勤電車の中

📱 Termius → ssh mac-mini → tmux attach -t flutter-dev

📱 Claude Code に指示:
   「GitHub の Issue #15 を確認して、
    Figma のこのリンクのデザインに沿って
    ユーザープロフィール画面を実装して。
    Firestore の users コレクションからデータを取得。
    Riverpod で状態管理して。」

   → Claude Code が自動で:
     1. GitHub MCP → Issue の内容を取得
     2. Figma MCP → デザインの構造・カラー・レイアウトを取得
     3. Firebase MCP → Firestore のスキーマを確認
     4. Context7 MCP → Riverpod の最新 API を参照
     5. コードを生成 → flutter test を実行

📱 「LGTM、PR 作って。closes #15 を付けて。」
   → GitHub MCP で PR を自動作成

🏢 会社到着 → PC で tmux attach して詳細レビュー

シナリオ 2: Crashlytics のエラーを外出先で即対応

📱 プッシュ通知: 「クラッシュ率上昇」

📱 Claude Code に接続:
   「Crashlytics の直近1時間のクラッシュを確認して、
    原因を特定してホットフィックスを書いて、
    fix/null-check ブランチで PR を作成して」

   → Claude Code が:
     1. Firebase MCP → クラッシュ情報を取得
     2. スタックトレースを分析
     3. 修正コードを生成 → テスト実行
     4. GitHub MCP → PR を作成

シナリオ 3: マルチエージェントで並列開発（2026年新機能）

Claude Code の エージェントチーム機能（研究プレビュー）を使えば、複数のエージェントが並列で作業できます:

# 環境変数を設定して有効化
export CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS=1

👤 「エージェント A: Figma のデザインから UI ウィジェットを生成して
     エージェント B: Firebase のデータ層を実装して
     最後に統合して PR を作って」

Part 5: コンテキストウィンドウの管理

MCP サーバーを有効化すると、ツール定義がコンテキストを消費します。長いセッションでは管理が重要です。

# Claude Code 内で MCP の ON/OFF を切り替え
/mcp

# コンテキスト使用量の確認
/context

# 会話を圧縮してコンテキストを節約
/compact

運用のコツ:

デザイン作業中は Firebase MCP を無効化、DB 作業中は Figma MCP を無効化
Opus 4.6 の 1M コンテキストを使えば、かなり余裕がある
長時間セッションでは /compact でこまめに圧縮

トラブルシューティング

Mac mini に SSH 接続できない

# Tailscale の状態確認
tailscale status

# Mac mini 側で SSH が動いているか
sudo launchctl list | grep ssh

MCP サーバーに接続できない

# 一覧で状態確認
claude mcp list

# 再接続
claude mcp remove github
claude mcp add -s user --transport http github \
  https://api.githubcopilot.com/mcp \
  -H "Authorization: Bearer $GITHUB_PAT"

GitHub MCP で「Unauthorized」

PAT の有効期限が切れていないか → github.com/settings/tokens で確認
Permissions が足りているか（Contents / Issues / Pull requests）
トークン前後に余計な空白が入っていないか

tmux セッションが見つからない

tmux ls                      # 既存セッション一覧
tmux new -s flutter-dev      # 無ければ新規作成

セキュリティのベストプラクティス

項目	推奨
SSH 認証	パスワード認証を無効化、鍵認証のみ
GitHub PAT	Fine-grained Token、必要最小限の権限、90日以内の有効期限
トークン保管	環境変数 or シークレットマネージャー（コード直書き禁止）
Firebase 認証	サービスアカウントキーは `.gitignore` に追加
リモートログイン	使わないときはオフにする
コマンド履歴	先頭にスペースを入れて履歴に残さない（`HISTCONTROL=ignorespace`）

付録: 筆者の Mac mini セットアップ完了まとめ

本記事の手順を実際に筆者の Mac mini で実施した結果をまとめます。「最終的にどうなるのか」の参考にしてください。

インストールしたもの

ツール	バージョン	用途
tmux	3.6a	セッション永続化
Mosh	1.4.0	モバイル回線での接続安定化
Tailscale	1.94.1	VPN（スマホと Mac mini を暗号化接続）
Termius	—	iPhone 用 SSH クライアント

設定・生成したもの

項目	内容
SSH 鍵	Ed25519 鍵ペア生成（`~/.ssh/id_ed25519`）
sshd_config	パスワード認証 ON、公開鍵認証 ON
スリープ防止	`sleep=0`, `displaysleep=5`, `disksleep=0`
tmux 設定	`~/.tmux.conf`（モバイル向け最適化）

追加した MCP サーバー（4つ）

MCP	接続方式	状態
Firebase	stdio (npx)	✅ 接続済み
Context7	stdio (npx)	✅ 接続済み
GitHub	HTTP (PAT)	✅ 接続済み
Figma	HTTP	⚠️ 認証待ち

接続確認済みの経路

iPhone (Termius) → Tailscale VPN → Mac mini (SSH) → tmux → Claude Code

実際にスマホから接続した画面がこちらです:

日常の使い方

# スマホから接続
ssh jin@100.86.86.23
tmux attach -t flutter-dev

# 切断（Claude Code は動き続ける）
Ctrl+B → D

ここまでのセットアップを終えれば、あとはスマホからこの2行を打つだけで Claude Code + MCP の開発環境にいつでもアクセスできます。

まとめ

構成一覧

構成要素	役割	コスト
Mac mini	Flutter SDK / Xcode / Claude Code が動く常時稼働サーバー	電気代のみ
Tailscale	スマホと Mac mini を安全に接続する VPN	無料
tmux	セッション永続化	無料
Termius / Termux	スマホ用 SSH クライアント	無料〜
Claude Code	AI コーディングアシスタント	Pro $20 / Max $100〜
GitHub MCP	Issue / PR 管理	無料（PAT）
Firebase MCP	Firestore / Auth / Crashlytics 操作	無料（Firebase プラン次第）
Figma MCP	デザイン→Flutter ウィジェット生成	Dev seat 以上推奨
Context7 MCP	最新ドキュメント参照	無料

最短セットアップ手順

# 1. Mac mini に Flutter + Claude Code をインストール
brew install --cask flutter && brew install node
npm install -g @anthropic-ai/claude-code && claude login

# 2. SSH + Tailscale + tmux を設定
brew install tailscale && open /Applications/Tailscale.app
brew install tmux

# 3. MCP サーバーを接続
claude plugin install firebase
claude mcp add -s user --transport http figma https://mcp.figma.com/mcp
claude mcp add -s user --transport http github \
  https://api.githubcopilot.com/mcp -H "Authorization: Bearer $GITHUB_PAT"
claude mcp add -s user context7 -- npx -y @upstash/context7-mcp@latest

# 4. スマホから接続
# Tailscale + Termius をインストール → ssh → tmux attach

この構成の最大の強みは、スマホからは自然言語で指示を出すだけで、Claude Code が各 MCP サーバーを駆使しながら Flutter の実装 → テスト → PR 作成まで一気通貫で行えることです。Mac mini ならではの iOS ビルド対応も大きな利点です。

ぜひ試してみてください 💪

参考リンク