OpenCode on Web + GLM-4.7 + GitHub Codespaces でスマホから触れるバイブコーディング環境を構築してみた

OpenCode on Web と GLM-4.7 を GitHub Codespaces で動かして、Claude Code on Web 相当の環境を構築する方法をご紹介します
2026.01.29
こんにちは。リテールアプリ共創部マッハチームのきんじょーです。
最近 Claude Code on Web がすごく便利です。Claude のモバイルアプリからも起動でき、GitHub リポジトリを連携するとサンドボックス環境でガリガリ開発してくれます。指示を出して放っておき、上がった Pull Request を GitHub 上で確認して問題なければマージ、というサイクルをスマホだけで完結して回せます。
自分一人が使うためのアプリやモックアップ、プロトタイプ作成では機能要件通りに動けば良いのでバイブコーディングがマッチします。それがスマホ一台で完結できるようになり、すごい時代になったと感じています。
しかし、Claude のサブスクリプションプランによってはすぐにレートリミットに達してしまい、Weekly リミットまでかかってしまうと数日間触れなくなってしまうことに悩んでいました。
そこでオープンソースの AI コーディングエージェント OpenCode と、Z.AI 社が提供するコストパフォーマンス最強モデルと呼ばれる GLM-4.7 を利用して、Claude Code on Web 相当の環境を自前で構築する方法を探ってみました。
 OpenCode とはOpenCode は、オープンソースの AI コーディングエージェントです。Claude Codeと同じようにターミナルベースのインターフェースと、デスクトップアプリ、IDE 拡張が提供されている他、サーバーを立ち上げて Web ブラウザから触れるモードも提供されています。
主な特徴は以下の通りです。
複数の AI プロバイダーに対応
OpenAI、Anthropic、Google、AWS Bedrock など主要なプロバイダーをサポート。好きなモデルを選べる

Claude Code と同等のエージェント機能
シェルコマンドの実行、ファイル検索、コードの閲覧・編集など、Claude Code でできることが一通りできる

オープンソース
特定のプロバイダーにロックインされず、自分の環境で動かせる

インストールは curl、npm、brew など複数の方法に対応しています。
# curl
curl -fsSL https://opencode.ai/install | bash

# npm
npm i -g opencode-ai@latest

# macOS/Linuxの場合
brew install opencode-ai/tap/opencode

# 起動
opencode
起動するとこのようなイメージです。
 Web 版の起動-W オプションを付けて起動すると、ブラウザから操作可能な Web 版が立ち上がります。
opencode -W
Claude Code on Web のような Web インターフェースから、コーディングエージェントを操作できるようになります。

Web 版のインタフェースが用意されているのはスマホから触る前提だととても助かります。
Build と Plan モードが選べたり、ターミナルの表示、接続先サーバーを選択できるなど、OpenCode on Web ならではの仕様も組み込まれています。
 GLM-4.7 とはGLM-4.7 は、Z.AI 社が 2025 年 12 月にリリースしたオープンソースの大規模言語モデルです。

ベンチマークでは Claude Opus 4.5 や GPT-5.2 などに匹敵する性能を示しながら、 コーディングのサブスクリプションプランは 初月3ドルから利用可能で、圧倒的にコストパフォーマンスに優れています。
OpenCode 自体は Anthropic でも OpenAI でも利用可能ですが、Claude Pro プランがリミットに達してしまうことが課題だったので、 GLM-4.7 を試してみます。
 環境構築先の検討Claude Code on Web 相当の環境をどこに構築するか、いくつかの選択肢を比較検討しました。
 ローカル端末ローカル端末で動かす場合、TailScale などの VPN を繋げばリモートから接続でき、端末を立ち上げていれば特段費用がかからないのが良い点です。

ただ、事前に端末を立ち上げておく必要があり、端末に何かあると出先から手が出せなくなります。また、サンドボックス環境ではないので、Dev Container を使うなど自分で安全対策が必要です。
 EC2などのIaaSEC2 であればクラウド上に開発環境を構築でき、スペックも柔軟に変更できます。クラウド上の IDE でインフラを抽象化した Cloud9 は サービスを終了してしまったので、自前でインフラを管理する必要があり、環境の作成・起動・削除なども GitHub Codespaces に比べ手間がかかります。
 GitHub CodespacesGitHub Codespaces は GitHub が提供するクラウド上の開発環境で、リポジトリごと、ブランチごとに開発環境を作成・起動・削除が容易です。

Codespaces 内で立ち上げたサーバーはポートフォワーディングされてインターネット経由でアクセスでき、ポートフォワーディングされた環境にアクセスする際に自動的に GitHub の OAuth 認証が走ります。月 120 コア時間（2 コアで 60 時間）+ 15GB ストレージの無料枠があるのも助かります。
クラウド上に開発環境の構築や管理が容易な点と、OpenCode の Web 版を開く際の認証を GitHub に寄せられる点から 今回は GitHub Codespaces を選びました。
 やってみた今回作ったものはこちらのリポジトリに格納しています。
https://github.com/joe-king-sh/opencode-web-in-codespaces
試してみたい方は Clone して GitHub Codespaces 環境を立ち上げてみてください。
 DevContainer の設定GitHub Codespaces は Dev Container を用いて環境構築が可能です。
Codespaces の起動時に OpenCode をインストールし Web サーバーを立ち上げ、それ以降の操作は OpenCode on Web から行います。

このdevcontainer.jsonを配置したリポジトリをテンプレートリポジトリとしておくことで、新規リポジトリ作成時にも Codespaces 経由で OpenCode on Web を起動できるようになります。
.devcontainer/devcontainer.json
{
  "name": "OpenCode Web Environment",
  "image": "mcr.microsoft.com/devcontainers/base:ubuntu",
  "features": {
    "ghcr.io/devcontainers/features/node:1": {
      "version": "lts"
    }
  },
  "forwardPorts": [3000],
  "portsAttributes": {
    "3000": {
      "label": "OpenCode Web",
      "onAutoForward": "notify",
      "visibility": "private"
    }
  },
  "postStartCommand": "bash ${containerWorkspaceFolder}/scripts/start-opencode-web.sh",
  "customizations": {
    "vscode": {
      "settings": {
        "terminal.integrated.defaultProfile.linux": "bash"
      }
    }
  }
}
OpenCode のスタートアップスクリプトを配置します。
#!/bin/bash

# OpenCode Web Startup Script for GitHub Codespaces

set -e

# Build the access URL
if [ -n "$CODESPACE_NAME" ] && [ -n "$GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN" ]; then
    ACCESS_URL="https://${CODESPACE_NAME}-3000.${GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN}"
else
    # Fallback for local development or missing env vars
    ACCESS_URL="http://localhost:3000"
fi

# Display startup message
echo ""
echo "============================================"
echo "🚀 OpenCode Web is starting..."
echo ""
echo "📱 Access URL:"
echo ""
echo "$ACCESS_URL"
echo ""
echo "============================================"
echo ""

# Set working directory (Codespaces-only)
# Determine repo root from this script location to avoid depending on environment variables.
WORKSPACE_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"

# Create workspace directory if it doesn't exist
mkdir -p "$WORKSPACE_DIR"

# Start OpenCode Web
cd "$WORKSPACE_DIR"
exec npx -y opencode-ai@latest web --mdns --port 3000
 スマホから起動してみるGitHub にアクセスし ブラウザから Codespaces を起動します。
環境が立ち上がると先ほどのシェルが実行され OpenCode on Web が起動します。

Codespaces のポートフォワーディング機能により、https://<codespace-name>-3000.app.github.dev のような URL でブラウザからアクセスできます。
スマホからAIに指示出しができるようになりました！
GLM-4.7 は GLM Coding Plan からサブスクライブできます。

払い出したAPIキーを OpenCode Webから設定可能です。
 月 3 ドルで Claude Code on Web 相当の環境が構築できましたOpenCode で GLM-4.7 を利用し、GitHub Codespaces上で動かすことで、Claude Code on Web 相当の環境をクラウド上のサンドボックス環境に構築できました。
Claude Code on Web は Pro プランから月 20 ドルで利用可能ですが、本格的に開発をしようとするとすぐにレートリミットに達してしまいます。

個人で Claude Max プランを契約するのもコストが高くなかなか踏み切れないでいましたが、スマホからバイブコーディングのサブ環境として今後は OpenCode on Web を使っていきたいと思います。
同じようなお悩みを感じている方は、ぜひ試してみてください！
この記事がどなたかの役に立つと幸いです。
以上。リテールアプリ共創部マッハチームのきんじょーでした。