データサイエンス　~戦略コンサルの現場から~

データサイエンティスト。データサイエンスを活用し、経営戦略やマーケティング戦略、M&A戦略の策定を行っております。

【初心者向け】iPhoneから自宅PCのClaude Codeをリモート操作する方法 ～Tailscale + Termiusでどこでも開発できる環境をつくる～

🧭 はじめに

今回のテーマは──

🚀 外出中のiPhoneから、自宅のWindows PC（WSL上のClaude Code）にリモート接続して開発を続けたい！

です。
この記事では、私が実際に成功した構成と、初心者でもできるように手順を1つずつ紹介します。

なお前提は以下

・claude codeはwindowsのWSL

・スマホはiphone

🧩 システム構成図

 
iPhone（Termius + Tailscale） │ ▼ Tailscale 経由の VPN 通信（暗号化） │ ▼ 自宅PC（Windows + WSL + SSH Server）

 

⚠️ 注意点

  • Tailscaleは有料です（年間で約13,000円）

  • Windowsの「PIN」ではSSH接続できません。
    　→ 必ず「Windowsログインパスワード」または「SSH鍵」を使います。

  • PowerShell操作は「管理者権限」で実行しないとエラーになります。

🪟 手順①：Windowsに OpenSSH Server をインストール

iPhoneからPCにSSH接続するには、まずWindows側で OpenSSHサーバー を有効にする必要があります。
方法は2種類あります👇

✅ 方法①（GUIで簡単）

  1. 「設定」を開く

  2. 「アプリ → オプション機能 → 機能の追加」をクリック

  3. 検索バーに「OpenSSH Server」と入力

  4. 「OpenSSH サーバー」を選択して「インストール」

インストールには1〜2分かかります。

✅ 方法②（PowerShellで一発インストール）

コマンドでやりたい場合は、管理者権限のPowerShell で以下を実行：

 
Add-WindowsCapability -Online -Name OpenSSH.Server~~~~0.0.1.0

インストールが完了したらサービスを確認します：

 
Get-Service sshd

このように表示されればOK：

 
Status Name DisplayName ------ ---- ----------- Stopped sshd OpenSSH SSH Server

✅ サービスを起動＋自動起動に設定

 
Start-Service sshd Set-Service -Name sshd -StartupType 'Automatic'

✅ ファイアウォールを許可

 
netsh advfirewall firewall add rule name="SSH" dir=in action=allow protocol=TCP localport=22

✅ 接続確認

同じPC上で次を実行：

 
ssh <あなたのWindowsユーザー名>@localhost

成功すれば、パスワードを求められてSSHログインできます🎉

🚨 注意：管理者権限でPowerShellを開く方法

  1. スタートメニューで「PowerShell」と検索

  2. 「Windows PowerShell」を右クリック

  3. 「管理者として実行」を選択

🪟 ステップ②：Windowsに Tailscale を入れる

  1. Tailscale公式サイト にアクセス

  2. 「Windows」版をダウンロードしてインストール

  3. インストール後、Google・Microsoft・GitHub などでサインイン

  4. 右下のタスクトレイにTailscaleのアイコンが出ます 

  5. 「Connected」と表示されていればOK！

これでWindows PCがTailscaleネットワークに参加しました。

📱 ステップ③：iPhoneにも Tailscale を入れる

  1. App Storeで「Tailscale」を検索し、インストール

  2. Windowsと同じアカウントでログイン

  3. 「Devices」にあなたのPC名が表示されます

例：

 
Devices: - taro-PC (100.x.x.x)

この「100.x.x.x」または「taro-PC.ts.net」がVPN上でのアドレスです。
→ 後でTermiusの設定で使います。

🧠 ステップ④：iPhoneのTermiusから接続設定

  1. Termiusアプリを開く

  2. 右下の「＋」→「New Host」を選択

  3. 以下のように設定👇

項目 設定内容
Address taro-PC.ts.net（または TailscaleのIP）
Port 22
Username taro（Windowsユーザー名）
Password Windowsログインのパスワード or SSH鍵
Label 任意（例：My Home PC）

  1. 「Save」→右上の▶を押して接続テスト

  2. 成功すれば、iPhoneの画面がPCのPowerShell/WSLターミナルに変わります 🎉

  ＊＊注意点

Usernameは、pcのwindowsボタン→設定→アカウントの画面で表示されるメアド。
Passwordは、そのメアドで登録したMicrosoftアカウントのパスワード

💡 ステップ⑤：自動でWSLに入る設定（おすすめ）

Termiusで接続したとき、すぐにWSL環境に入れるようにしておくと便利です。

  1. Windows側で以下のファイルを作成（メモ帳でOK）：
    　C:\Users\taro\.ssh\rc

  2. 内容を以下のように：

 
wsl.exe

  1. 保存して完了。

これで、Termiusでログインすると自動的にWSL（Ubuntuなど）に入ります。

🪄 Termiusの設定まとめ（画像説明向け）

ステップ 操作内容
① Termiusで「Add a host」→「New Host」へ
② Label：任意（例：My Claude Code PC）
③ Hostname：tar0-PC.ts.net または 100.x.x.x
④ Port：22
⑤ Username：Windowsログインユーザー名
⑥ Password：Windowsログインパスワード
⑦ 「Use SSH」をオン、「Use Mosh」はオフ
⑧ Save → 接続開始（初回は「yes」を入力）

成功すると、画面に：

 
taro@taro-PC:~$

と表示されます。
これで iPhoneから自宅のWSL環境にSSHログイン できました！🎉

✨ 最終確認：Claude Codeを起動してみよう

ログイン後、いつものようにClaude Codeを起動します：

 
cd ~/claude-code npm run dev

起動したら、Tailscale経由のアドレスでアクセスできます：

 
http://100.x.x.x:3000

ブラウザからClaude CodeのUIが開けば成功です！

🧱 構成のまとめ

項目 使用ツール
VPN通信 Tailscale
SSHクライアント Termius
OS Windows + WSL
開発環境 Claude Code
接続デバイス iPhone

🧩 トラブルシューティング

問題 原因 対策
PowerShellでStart-Serviceが失敗 管理者権限で開いていない 管理者として実行
iPhoneから接続できない PCがスリープ スリープ設定をオフにする
Permission denied パスワード間違い Windowsパスワードでログイン
ホストが見つからない Tailscale未接続 VPNを再接続

🪶 まとめ

これで、あなたのiPhoneが「ポケットに入る開発端末」になります。
通勤中でも、カフェでも、Claude Codeを自宅PC上で動かしながら開発を進められます。

💬 私自身、最初はPINコードやユーザー名の違いで何度も弾かれましたが、
一度つながると本当に快適です。Tailscaleの安定性は神。

🧰 まとめ

ステップ 内容
① OpenSSH ServerをWindowsに入れる
② TailscaleでPCとiPhoneを接続
③ TermiusでSSH設定を登録
④ 自動WSLログインを設定
⑤ Claude Codeを起動してリモート開発完了

📘 外出先でもClaude Codeを動かそう！

「どこでも開発」時代の第一歩は、TailscaleとTermiusから。

WSL（Ubuntu）でClaude CodeにSerena MCPを追加する方法

Claude Codeをより安価で強力にするSerena MCPの導入手順を詳しく解説します。

Serena MCPとは

Serena（GitHub - oraios/serena）は、セマンティック検索と編集機能を提供する強力なコーディングエージェントツールキットです。Claude Codeと組み合わせることで、開発効率を大幅に向上させることができます。

前提条件

  • WSL（Ubuntu）環境
  • Claude Code がインストール済み

手順1: uvxのインストール（wslターミナル画面を開く）

まず、Serena MCPサーバーを実行するためのuvx（uv package runner）をインストールします。

# uvxのインストール
curl -LsSf https://astral.sh/uv/install.sh | sh

# シェルを再起動またはPATHを更新
source ~/.bashrc

または、pipxが既にある場合：

pipx install uv

手順2: プロジェクトディレクトリでSerena MCPを追加

基本的な追加方法

# プロジェクトディレクトリに移動
cd /path/to/your/project

# Serena MCPサーバーを追加
claude mcp add serena -- uvx --from git+https://github.com/oraios/serena serena start-mcp-server --context ide-assistant --project $(pwd)

手順3: インストールの確認

# MCP接続状況を確認
claude mcp list

# Claude Codeを起動
claude code

Claude Code内で以下を質問して、Serenaが正常に接続されているか確認します：

利用可能なMCPサーバーとツールを表示してください

手順4: Serenaの初期設定

自動設定（Claude Code v1.0.52以降）

Claude Code v1.0.52以降では、Serenaの初期指示が自動的に読み込まれます。

手動設定（古いバージョンの場合）

古いバージョンのClaude Codeを使用している場合、以下のいずれかの方法で初期指示を読み込みます：

方法1：直接質問

Serenaの初期指示を読んでください

方法2：コマンド実行

/mcp__serena__initial_instructions

設定ファイルでの手動設定

より詳細な設定が必要な場合は、.mcp.jsonファイルを直接編集できます：

# プロジェクトルートに設定ファイルを作成
cat > .mcp.json << 'EOF'
{
  "mcpServers": {
    "serena": {
      "command": "uvx",
      "args": [
        "--from",
        "git+https://github.com/oraios/serena",
        "serena",
        "start-mcp-server",
        "--context",
        "ide-assistant",
        "--project",
        "."
      ],
      "env": {},
      "included_optional_tools": ["initial_instructions"]
    }
  }
}
EOF

トラブルシューティング

エラー1: uvxが見つからない

# uvxのインストール状況確認
uvx --version

# PATHの確認
echo $PATH

# シェル設定の再読み込み
source ~/.bashrc

エラー2: Python環境の問題

# Python環境の確認
python3 --version
pip3 --version

# 必要に応じてPython環境をインストール
sudo apt update
sudo apt install python3 python3-pip python3-venv

エラー3: 権限の問題

# ユーザー権限でuvxを再インストール
curl -LsSf https://astral.sh/uv/install.sh | sh

# 設定ファイルの権限確認
ls -la .mcp.json
chmod 644 .mcp.json

Serenaの使用方法

Serenaが正常に追加されると、Claude Codeで以下のような高度な機能が利用できます：

  • セマンティック検索: プロジェクト内のコードを意味的に検索
  • インテリジェントな編集: コンテキストを理解した的確なコード修正
  • プロジェクト全体の把握: 大規模なコードベースの理解を支援

複数プロジェクトでの使用

複数のプロジェクトでSerenaを使用する場合は、各プロジェクトディレクトリで個別に設定する必要があります：

# プロジェクト1
cd /path/to/project1
claude mcp add serena -- uvx --from git+https://github.com/oraios/serena serena start-mcp-server --context ide-assistant --project $(pwd)

# プロジェクト2
cd /path/to/project2
claude mcp add serena -- uvx --from git+https://github.com/oraios/serena serena start-mcp-server --context ide-assistant --project $(pwd)

まとめ

Serena MCPを追加することで、Claude Codeの開発効率が大幅に向上します。特に大規模なプロジェクトでは、セマンティック検索機能が威力を発揮します。

設定は一度行えば継続的に使用できるので、ぜひ試してみてください。

参考リンク

 

Complete Guide: Installing Claude Code on Windows Using WSL - From Setup to Success

Introduction

~~Claude Code currently runs only on Linux and macOS environments, which means Windows users need to utilize WSL (Windows Subsystem for Linux) to get it working~~. This comprehensive guide will walk you through everything from WSL basics to Claude Code installation, ensuring even beginners can follow along without getting lost.

July 2025 Update: Claude Code is now installable directly on Windows! However, several unexplained errors have been reported, so installing via WSL might still be the safer approach.

Prerequisites

Before we begin, make sure you've subscribed to Claude Pro or Max on the claude.ai website.

Understanding WSL and Ubuntu

What is WSL (Windows Subsystem for Linux)?

WSL is a Microsoft-provided feature that allows you to run a Linux environment directly on Windows. Unlike virtual machines, WSL provides a lightweight Linux environment that's integrated with Windows.

WSL Features:

  • Run Linux commands on Windows
  • Cross-platform file system access
  • Fast and lightweight
  • Excellent compatibility with developer tools

What is Ubuntu?

Ubuntu is one of the most popular Linux distributions, known for its user-friendliness and stability. WSL installs Ubuntu by default, and it has excellent compatibility with most development tools.

Step 1: Installing WSL and Ubuntu

1.1 Installing WSL via PowerShell

Let's start by installing WSL:

  1. Press the Windows key to open the search box
  2. Type "PowerShell"
  3. Right-click and select "Run as administrator"
  4. Execute the following command:
wsl --install

This command will automatically install WSL2 and Ubuntu.

Screenshot: WSL installation completion screen

1.2 System Restart

After installation completes, you must restart your system. You can press the Windows button and manually select "Restart".

# To restart via PowerShell
Restart-Computer

1.3 Ubuntu Initial Setup

After restart, Ubuntu will launch automatically.

Screenshot: Ubuntu installation process

During the first launch, complete these settings:

  1. Username Setup
    • Enter any username following the prompts
    • We recommend using lowercase English letters
  2. Password Setup
    • Set a memorable yet secure password
    • The input won't be displayed on screen, but it's being entered correctly
  3. System Update
# Update package list and upgrade system
sudo apt update && sudo apt upgrade -y

Step 2: Setting Up Node.js Environment

Since Claude Code runs on Node.js, we'll install Node.js using NVM (Node Version Manager).

2.1 Installing NVM

In the currently open PowerShell:

# Download and execute NVM installation script
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

2.2 Reloading the Shell

To make NVM available, reload the shell:

source ~/.bashrc

2.3 Installing Node.js

# Install LTS (Long Term Support) version of Node.js
nvm install --lts
nvm use --lts

# Verify installation
node --version
npm --version

If installed correctly, version numbers will be displayed.

Step 3: Installing and Configuring Claude Code

3.1 Installing Claude Code

# Install Claude Code globally using NPM
npm install -g @anthropic-ai/claude-code

3.2 Initial Launch and Setup

# Launch Claude Code
claude

Screenshot: Claude Code's initial launch screen

During the first launch, a setup dialog will appear. Follow the on-screen instructions to complete these settings:

  • Enter your Anthropic API key

Screenshot: Login screen

  • Confirm basic configuration items

Step 4: Windows Integration Setup

4.1 Understanding the File System

Understanding how to access Windows file system from within WSL is helpful:

# Access C drive
cd /mnt/c/

# Access user folder
cd /mnt/c/Users/[your-windows-username]/

# Access desktop
cd /mnt/c/Users/[your-windows-username]/Desktop/

4.2 Setting Up Project Working Directory

Recommended working directory setup considering Windows integration:

# Navigate to home directory
cd ~

# Create project directory
mkdir projects
cd projects

Troubleshooting

Common Issues and Solutions

Q: WSL installation encounters an error A: For Windows 10, your version might be outdated. Update to the latest version using Windows Update.

Q: Ubuntu won't start A: Try manually installing the "Ubuntu" app from Microsoft Store and launching it.

Q: Node.js installation encounters an error A: Check your internet connection and reinstall NVM using these commands:

# Remove NVM directory
rm -rf ~/.nvm

# Reinstall
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
source ~/.bashrc

Conclusion

You're now ready to use Claude Code on Windows! By using WSL, you can access a full-featured Linux development environment right on Windows.

Next Steps:

  • Learn the basics of using Claude Code
  • Master project creation and management
  • Explore integration methods with Windows editors

If you encounter any issues, refer to the official documentation of each tool or ask questions in community forums.

If this guide helped you, please share it or bookmark it! Your support helps us create more helpful content.

About the Author

This guide was written to help developers get Claude Code running smoothly on Windows. Feel free to reach out if you have questions or suggestions for improvements!

Tags: #ClaudeCode #WSL #Windows #Linux #Development #AI #Programming

SUPABASE MCPでREAD_ONLYから管理者権限に切り替える方法 〜Claude CodeでSupabase MCPを利用するときのTips〜

環境

対象者

Claude CodeでSupabase MCP経由でDBを編集したいのに、権限がread_onlyと言われて困っている方

問題の概要

Claude CodeでSupabase MCPを利用する際、デフォルトでは読み取り専用ユーザー（supabase_read_only_user）として接続されてしまい、以下のような操作ができません：

  • テーブルの作成・削除
  • データの挿入・更新・削除
  • スキーマの変更（ALTER TABLE等）

解決方法

① Supabaseダッシュボードでservice role keyを取得

  1. Supabaseダッシュボードにアクセス
  2. 対象プロジェクトを選択
  3. Project Settings → API Keys → Legacy API keys
  4. service_roleのRevealボタンを押してキーをコピー

注意: service role keyはアルファベットの長い文字列です。ANON_KEYとほんの少しだけ異なります。

② Personal Access Token (PAT) を取得

  1. Supabaseダッシュボードの右上アカウントアイコンをクリック
  2. Account preferences を選択
  3. 左メニューの Access Tokens をクリック
  4. Generate new token でトークンを作成
  5. 生成されたトークン（sbp_で始まる）をコピー

③ MCP設定の更新

1. 既存の設定を削除

claude mcp remove supabase

2. 管理者権限で再設定

claude mcp add supabase npx @supabase/mcp-server-supabase -e SUPABASE_URL=https://XXX.supabase.co -e SUPABASE_SERVICE_ROLE_KEY=eXXX -e SUPABASE_ACCESS_TOKEN=XXX

3. 接続確認

claude mcp list

以下のように表示されれば成功：

supabase: npx @supabase/mcp-server-supabase - ✓ Connected

④ 権限の確認

Claude Code内で以下をプロンプトに書いて権限を確認：

-supabase mcp経由でsupabaseの権限を確認して

私の場合はいくらファイル内のjsonとかを設定しなおしてもダメでしたが、この方法でうまくいきました

WSL環境でPlaywright MCP導入完全ガイド

Claude CodeでPlaywright MCPを使ってWebブラウザ自動化を試したいけど、WSL（Windows Subsystem for Linux）環境でハマってしまった経験はありませんか？この記事では、WSL環境特有の問題とその解決策を詳しく解説します。

※chromeでplaywright に操作を行わせる前提

前提条件

  • WSL2がインストールされている（WSL1では制限があるためWSL2推奨）
  • Ubuntu 20.04以降
  • Claude Codeがインストール済み
  • Node.js/npmが利用可能

よくある問題とその原因

WSL環境でPlaywright MCPを使用する際に発生する主な問題：

  1. ブラウザが見つからないエラー

    Error: browserType.launchPersistentContext: Chromium distribution 'chrome' is not found at /opt/google/chrome/chrome

  2. 権限エラー

    Install location: <system>
sudo権限が必要ですが、パスワード入力ができない

  3. 共有ライブラリエラー

    error while loading shared libraries: libnspr4.so: cannot open shared object file

解決手順

ステップ1: 既存のPlaywrightブラウザ確認

まず、既にPlaywrightブラウザがインストールされているか確認します。別のwslターミナルを開き、以下をコピペ。：

# Playwrightキャッシュディレクトリを確認
ls -la ~/.cache/ms-playwright/

多くの場合、chromium-XXXX（XXXXはバージョン番号）ディレクトリが既に存在しています。

ステップ2: 依存関係の確認と修復

WSL環境では、パッケージシステムが破損している場合があります：

# パッケージシステムの修復
sudo dpkg --configure -a

# エラーが出る場合は破損パッケージを削除
sudo dpkg --remove --force-remove-reinstreq [破損パッケージ名]

# システム更新
sudo apt update
sudo apt --fix-broken install

ステップ3: Chromium実行に必要な依存関係インストール

Ubuntu 24.04では一部パッケージ名が変更されているため注意が必要です：

# 必要なライブラリをインストール
sudo apt install -y \
    libnspr4 \
    libnss3 \
    libatk-bridge2.0-0 \
    libdrm2 \
    libxkbcommon0 \
    libxcomposite1 \
    libxdamage1 \
    libxrandr2 \
    libgbm1 \
    libxss1 \
    libasound2t64 \
    libatspi2.0-0 \
    libgtk-3-0

注意: Ubuntu 24.04では libasound2 ではなく libasound2t64 を使用してください。

ステップ4: Playwright公式の依存関係インストール

# Playwright公式の依存関係自動インストール
npx playwright install-deps chromium

ステップ5: 環境変数の設定

# 既存のChromiumパスを環境変数に設定
export PLAYWRIGHT_CHROMIUM_EXECUTABLE_PATH=~/.cache/ms-playwright/chromium-1178/chrome-linux/chrome

# 永続化のため.bashrcに追加
echo 'export PLAYWRIGHT_CHROMIUM_EXECUTABLE_PATH=~/.cache/ms-playwright/chromium-1178/chrome-linux/chrome' >> ~/.bashrc
source ~/.bashrc

注意: chromium-1178の部分は実際のバージョン番号に置き換えてください。

ステップ6: Chromium動作確認

# Chromiumが正常に動作するかテスト
$PLAYWRIGHT_CHROMIUM_EXECUTABLE_PATH --version

正常に動作する場合、バージョン情報（例：Chromium 138.0.7204.15）が表示されます。

ステップ7: システムの期待する場所にシンボリックリンク作成

Claude CodeのPlaywright MCPは特定のパス（/opt/google/chrome/chrome）を探すため、シンボリックリンクを作成します：

# ディレクトリ作成
sudo mkdir -p /opt/google/chrome

# シンボリックリンク作成
sudo ln -sf ~/.cache/ms-playwright/chromium-1178/chrome-linux/chrome /opt/google/chrome/chrome

# 動作確認
/opt/google/chrome/chrome --version

ステップ8: Claude CodeでPlaywright MCP実行

環境が整ったら、Claude Codeで以下を実行：

もしくはプロンプトに「google.comを開いてスクリーンショット撮って」でもOK。

playwright - Navigate to a URL (MCP)(url: "https://www.google.com")

トラブルシューティング

パッケージインストールでエラーが出る場合

# パッケージ名を個別に確認
apt search [パッケージ名]

# 例: libasound2が見つからない場合
apt search libasound
# → libasound2t64を使用

sudo権限が必要だがパスワードがわからない場合

# ユーザーにパスワードを設定
passwd

# または管理者としてWSLを起動（Windows側）
# コマンドプロンプトを管理者として実行 → wsl

Ctrl+Cが効かない場合

# 別ターミナルから強制終了
pkill -9 -f playwright
pkill -9 -f npm

# ロックファイル削除
rm -rf ~/.cache/ms-playwright/__dirlock/

依存関係エラーが続く場合

# より包括的な依存関係インストール
sudo apt install -y \
    libasound2-dev \
    libatk1.0-dev \
    libc6-dev \
    libcairo2-dev \
    libcups2-dev \
    libdbus-1-dev \
    libexpat1-dev \
    libfontconfig1-dev \
    libgcc1 \
    libgconf-2-4 \
    libgdk-pixbuf2.0-dev \
    libglib2.0-dev \
    libgtk-3-dev \
    libnspr4-dev \
    libpango1.0-dev \
    libpangocairo-1.0-0 \
    libstdc++6 \
    libx11-dev \
    libx11-xcb1 \
    libxcb1-dev \
    libxcomposite1 \
    libxcursor1 \
    libxdamage1 \
    libxext6 \
    libxfixes3 \
    libxi6 \
    libxrandr2 \
    libxrender1 \
    libxss1 \
    libxtst6

予防策

定期的なメンテナンス

# システム更新
sudo apt update && sudo apt upgrade

# 不要なパッケージクリーンアップ
sudo apt autoremove
sudo apt autoclean

環境の確認

# WSLバージョン確認
wsl --list --verbose

# WSL2推奨（WSL1では制限あり）

まとめ

WSL環境でPlaywright MCPを使用する際の主な問題は：

  1. 依存関係の不足 → システムライブラリのインストールで解決
  2. パッケージ名の違い → Ubuntu 24.04では一部パッケージ名が変更
  3. パスの問題 → シンボリックリンク作成で解決
  4. 権限の問題 → 適切なsudo設定で解決

これらの手順を順番に実行することで、WSL環境でもPlaywright MCPを安定して使用できるようになります。

Claude Codeを使ったWebスクレイピングやブラウザ自動化が、WSL環境でもスムーズに実行できることを確認できれば成功です！

参考情報

この記事は実際にWSL環境でPlaywright MCPの導入に取り組んだ経験を基に作成されています。環境によって詳細が異なる場合がありますので、エラーメッセージを確認しながら適宜調整してください。

WSLでSupabase MCPをセットアップする方法

Claude CodeでSupabaseを使用するためのMCPサーバーをWSL環境でセットアップする手順を詳しく解説します。

前提条件

  • WSL（Windows Subsystem for Linux）がインストールされている
  • Node.jsとnpmがインストールされている
  • Supabaseプロジェクトが作成済み

ステップ1: WSLを開く

  1. Windows + Rキーを押す
  2. wslと入力してEnterキーを押す
  3. WSLターミナルが開く

ステップ2: Supabaseの認証情報を準備

まず、Supabaseダッシュボードから必要な情報を取得します：

  1. Supabaseダッシュボードにログイン
  2. プロジェクトを選択
  3. 左側メニューから「Settings」→「API」をクリック
  4. 以下をコピーして控えておく：
    • Project URL: https://your-project.supabase.co
    • anon public key: eCCCCCbGciOiJfdADFIUzIXXXXXXXXXVCJ9...

ステップ3: Claude MCPサーバーを追加

WSLターミナルで以下のコマンドを実行します：

claude mcp add npx @supabase/mcp-server -e SUPABASE_URL=https://your-project.supabase.co -e SUPABASE_ANON_KEY=eCCCCCbGciOiJfdADFIUzIXXXXXXXXXVCJ9...

重要: 上記のyour-projectとeyJh...の部分を、ステップ2で取得した実際の値に置き換えてください。

 

＜私からのアドバイス＞

Claude codeにsupabase mcpを使えるようにする方法は、下記の公式サイトではmcp.jsonを使う方法もありますが、私はステップ3の方法でできまして、jsonだとできませんでした。

Model context protocol (MCP) | Supabase Docs

また、claudeや生成AIにjsonを作成してもらうのはうまくいかないです。公式サイトのjsonと若干違ったりするので。まずは公式サイトのやり方を参考にするのがおすすめです。

ステップ4: インストール確認

# 追加されたMCPサーバーを確認
claude mcp list

Supabaseが一覧に表示されれば成功です。

ステップ5: Claude Codeを起動

# Claude Codeを起動
claude code

これで、Claude CodeでSupabaseの機能を使用できるようになります。

 

＜私からのアドバイス＞

ここで、claude codeに「/mcp」と打つと、使えるmcp一覧が出てきます。

もしsupabase mcpがfailedと書かれていたとしても、

「supabase mcpに接続して」とプロンプトを打つと、うまくいったりします。これでうまくいかない場合は、公式サイトのjsonかステップ３のやり方を再度ためしてみてください。

ここで、claude codeがいろいろ修正を提案しますが、大体うまくいかないです。数回の修正でうまくいかない場合は、アクセスキーが間違ってたりとかが理由です。

Claude sonnet4でさえ、「claude codeでsupabase mcpは利用できないです」とか言ってくるので、AIのいうことは信用しないように。

 

Q: MCPとは何ですか？

A: MCP（Model Context Protocol）は、AIモデルが外部のツールやサービスと連携するためのプロトコルです。Claude CodeでMCPサーバーを追加することで、Supabaseなどの外部サービスと直接やり取りできるようになります。これにより、データベース操作、API呼び出し、ファイル操作などを Claude Code から直接実行できます。

Q: Claude CodeでMCPをダウンロードする一般的なコマンド形式は？

A: 一般的なコマンド形式は以下の通りです：

# 基本形式
claude mcp add [パッケージ名またはURL] [オプション]

# 環境変数を含む場合
claude mcp add [パッケージ名] -e VARIABLE_NAME=value -e ANOTHER_VAR=value

# 具体例
claude mcp add npx @example/mcp-server -e API_KEY=your-api-key
claude mcp add https://github.com/user/mcp-server -e CONFIG_PATH=/path/to/config

よく使用されるオプション:

  • -e VAR=value: 環境変数を設定
  • --name custom-name: カスタム名を指定
  • --help: ヘルプを表示

その他の便利なコマンド:

# インストール済みMCPサーバーの一覧
claude mcp list

# 特定のMCPサーバーを検索
claude mcp search [キーワード]

# MCPサーバーを削除
claude mcp remove [サーバー名]

 

【2025年最新版】SaaS開発に必要な決済システム構築（Stripe編）

必要な3つのキーの取得手順完全ガイド

Claude CodeでStripe決済システムを実装する際に必要な認証情報の取得方法を、最新のStripe UIに対応して詳しく解説します。

必要な認証情報

Stripe決済を実装するには、以下の3つのキーが必要です：

  1. Publishable Key（公開可能キー）: pk_test_... または pk_live_...
  2. Secret Key（シークレットキー）: sk_test_... または sk_live_...
  3. Webhook Secret（Webhookシークレット）: whsec_...

この３つのキーをclaude codeに渡すことで、決済システムを皆さんのSaaSに組み込むことができます。このキーの取得は人間が手動で行う必要があります。

1. Stripeアカウントの作成・ログイン

新規アカウント作成の場合

  1. Stripe公式サイト にアクセス
  2. 「今すぐ始める」をクリック
  3. メールアドレス、パスワードを入力してアカウント作成

既存アカウントの場合

  1. Stripeダッシュボード にログイン

2. Publishable KeyとSecret Keyの取得

テスト環境のキー取得手順

  1. Stripeダッシュボードにログイン
  2. 左上で「テストデータを表示」が選択されていることを確認
  3. 左サイドバーから「開発者」→「APIキー」をクリック
  4. 以下の2つのキーが表示されます：

公開可能キー（Publishable Key）

pk_test_xxxxxxxxxxxxxxxxxxxxxxxxxx
  • フロントエンドで使用
  • 公開しても安全なキー

シークレットキー（Secret Key）

sk_test_xxxxxxxxxxxxxxxxxxxxxxxxxx
  • バックエンドで使用
  • 絶対に公開してはいけない重要なキー
  1. 各キーの「表示」ボタンをクリックしてコピー

3. Webhook Secretの取得

重要な注意点: StripeのUI変更により、Webhook設定の手順が変わっています。

注
ワークベンチは、既存の開発者ダッシュボードの代わりとなり、デフォルトですべての新しい Stripe アカウントで自動的に有効になります。この設定は、ダッシュボードの開発者設定から行います。

（Stripe公式ドキュメントより）

新バージョン（ワークベンチ版）- 推奨

2024年以降に作成されたアカウントのデフォルト設定

  1. Stripeダッシュボードで「ワークベンチ」をクリック

  2. 「Webhooks」タブを選択

  3. 「イベントのリッスン元」は「お客様のアカウント」
  4. 「APIバージョン」はデフォルトのまま
  5. 「イベント」で、システムが把握すべき（リッスンすべき）アクションを選択（何を選べばいいかはclaudeに聞くと良い）
  6. 「続行」をクリック
  7. 「webhookエンドポイント」を選択

  8. エンドポイントURLを入力：

    https://yourdomain.com/api/webhooks/stripe

    ※開発中は一時的なURLでも可。後でEC2のURLに変更

  9. 「署名シークレット」セクションで「表示」をクリック

  10. whsec_... で始まるキーをコピー

旧バージョン（開発者ダッシュボード版）

2024年以前に作成されたアカウントや、ワークベンチを無効にしている場合

  1. 左サイドバーから「開発者」→「Webhook」をクリック
  2. 「エンドポイントを追加」をクリック
  3. 以降の手順は新バージョンと同様

※現在「stripe webhook」で検索すると、この旧バージョンの情報のみが表示されますが、新しいアカウントでは新バージョンの手順が必要です。

4. 取得したキーの確認

以下の3つのキーが取得できているか確認してください：

テスト環境用:
✅ Publishable Key: pk_test_xxxxxxxxxxxxxxxxxxxxxxxxxx
✅ Secret Key: sk_test_xxxxxxxxxxxxxxxxxxxxxxxxxx  
✅ Webhook Secret: whsec_xxxxxxxxxxxxxxxxxxxxxxxxxx

5. セキュリティ上の重要な注意点

絶対に守ること

推奨する管理方法

EC2での環境変数設定例：

# .envファイルに記載
STRIPE_PUBLISHABLE_KEY=pk_test_xxxxxxxxxxxxxxxxxxxxxxxxxx
STRIPE_SECRET_KEY=sk_test_xxxxxxxxxxxxxxxxxxxxxxxxxx
STRIPE_WEBHOOK_SECRET=whsec_xxxxxxxxxxxxxxxxxxxxxxxxxx

Node.jsでの使用例：

const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);

// 設定確認用のテストコード
stripe.customers.create({
  email: 'test@example.com',
})
.then(customer => console.log('Stripe接続成功:', customer.id))
.catch(error => console.error('接続エラー:', error));

6. Claude Codeでの実装準備

取得した3つのキーを準備できたら、Claude Codeに以下の情報を提供して決済システムの実装を開始できます：

必須情報:
- Stripe Publishable Key: pk_test_...
- Stripe Secret Key: sk_test_...
- Stripe Webhook Secret: whsec_...
- プラットフォーム手数料率: 3.5%（例）

まとめ

Stripeの最新UI（ワークベンチ）に対応した手順で、決済システム実装に必要な3つのキーを取得できました。セキュリティを最優先に、環境変数として適切に管理してClaude Codeでの実装を進めましょう。