1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@jin112343( jin mizoi)Team Coffee

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

1
Posted at

【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 を構築

image.png

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 のスニペット機能 によく使うコマンドを登録:
image.png

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 を発行

  1. github.com/settings/tokens にアクセス
  2. 「Fine-grained token」 を選択
  3. 設定:
設定項目 値
Token name claude-code-mcp
Expiration 90 days（推奨）
Repository access All repositories
  1. Permissions:
Permission レベル 用途
Contents Read and write ファイル読み書き、コミット
Issues Read and write Issue 取得・作成・更新
Pull requests Read and write PR 作成・レビュー・マージ
Metadata Read-only（自動付与） リポジトリ基本情報
  1. 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

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

日常の使い方

# スマホから接続
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 ビルド対応も大きな利点です。

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

参考リンク

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?