外出先や別室で、少しだけ自宅PCのOpenCode環境を触りたい場面があります。
現時点ではOpenCodeに公式スマホアプリはありません。スマホアプリでログインして、PC側の既存セッションをそのまま開く、という使い方ではありません。
そこで、自宅PC側でOpenCode Webを起動し、スマホからTailscale経由で入る形にします。ここで大事なのは、スマホからPC内フォルダを直接操作する話ではないこと。PC上で動いているOpenCode Webを、スマホのブラウザから開く形です。
この記事で扱う範囲: スマホからPCフォルダを直接触る方法ではありません。自宅PCで動かしたOpenCode Webを、スマホブラウザから開く方法です。
先に整理しておきたいこと
先に整理しておきたいのは、今回の記事で扱う範囲です。
構成としては、次の形です。
スマホ
↓ Tailscale
自宅Windows PCのOpenCode Web
↓
PC上の作業フォルダ・OpenCodeセッション
この構成でやることは、スマホのブラウザからOpenCode Webを開き、OpenCode経由でPC上のプロジェクトやセッションを扱うことです。
実際に見られるのは、既存プロジェクト、過去セッション、新しいセッションの作成あたりです。OpenCodeに依頼する形なら、ファイル確認や修正も進められます。
ただし、これは次のような話ではありません。
- スマホからWindowsのエクスプローラーを直接操作する
- PC内の全ファイルをファイルマネージャーのように自由操作する
- OpenCodeを介さず、スマホから直接ファイルを編集する
ここを混ぜると、期待する動きがずれます。この記事で扱うのは、あくまで「自宅PC上のOpenCode環境をスマホから使う」ための手順です。
今回試した環境
普段使っているWindows PCのOpenCode環境に、OpenCode WebとTailscaleを足す構成です。
- Windows PC
- OpenCode デスクトップアプリ版 / CLI
- OpenCode Web
- Tailscale
- スマホブラウザ
PC側ではOpenCode Webを 4097 番ポートで起動し、スマホのブラウザから次の形で入ります。
100.x.y.z:4097まず自宅PCでOpenCode Webを立てた
ブラウザから使う場合は、opencode serve ではなく opencode web を使います。
opencode web --hostname 0.0.0.0 --port 4097このコマンドで特に見るのは、--hostname と --port です。
localhostのままだとスマホから届かない
127.0.0.1 や localhost のままだと、基本的にPC自身からしか接続できません。
スマホからTailscale経由で入るには、PC外からも届く形で待ち受ける必要があります。ここで 0.0.0.0 を指定します。
4096にこだわらず、4097に逃がした
OpenCodeの例では 4096 を使うことがあります。
ただ、認証キャッシュやWeb UI側の状態が混ざると、原因の切り分けが面倒になります。そんなときは、別ポートの 4097 に逃がして、いったんきれいな状態で見直す方が早いです。
開きっぱなしが嫌でBasic認証を足した
スマホからアクセスできる状態にする以上、認証なしで開くのは避けます。
PowerShellでは、次のように環境変数を設定してから起動します。
$env:OPENCODE_SERVER_USERNAME="your-user"
$env:OPENCODE_SERVER_PASSWORD="your-password"
opencode web --hostname 0.0.0.0 --port 4097この状態でスマホから開くと、ブラウザのBasic認証が出ます。
Tailscale内だけで使う場合でも、OpenCode WebはPC上の作業フォルダやセッションに触れる入口です。開きっぱなしは避けたいので、最低限の認証は入れておきます。
スマホで 100.x.y.z:4097 を開いた
PCとスマホの両方でTailscaleにログインしておきます。
次に、PC側のTailscale IPを見て、スマホブラウザで次のように開きます。
100.x.y.z:4097ここでOpenCode Webが開けば、接続自体は通っています。
スマホから開くと、次のようにOpenCode Webの画面まで入れます。
プロジェクト名やセッション名は伏せていますが、スマホブラウザ上で Projects、Search sessions、新しいセッション が見えている状態です。ここまで表示されれば、少なくとも「スマホ → Tailscale → 自宅PCのOpenCode Web」までは通っています。
接続成功の目安: この画面まで出ていれば、OpenCodeそのものを見る前の接続経路は通っています。次は、プロジェクトや過去セッションがWeb UIに出るかを切り分けます。
開けない場合、私はOpenCodeの中身を見る前に、入口から順に見ます。ここで順番を飛ばすと、OpenCode側の問題なのか、単にPCまで届いていないのかが分からなくなります。
先に見る順番は次です。
- PC側でOpenCode Webが起動しているか
--hostname 0.0.0.0で起動しているか- 指定したポートが合っているか
- TailscaleがPCとスマホの両方で有効か
- Windows Firewallでポートがブロックされていないか
つながっても、プロジェクトは勝手には出てこなかった
OpenCode Webに入れたら、左側の Add project からPC上の作業フォルダを追加します。
今回なら例は次です。
C:\Users\entor\Documents\50.work\12.media_opsここは少し罠です。プロジェクト一覧が空に見えても、Web UIのプロジェクト一覧はブラウザ側にも状態を持っているように見えます。
OpenCodeサーバー側にプロジェクトが存在していても、Web UI上では一度 Add project しないと左側に出ないことがあります。
つまり、スマホから見たときにプロジェクト一覧が空でも、すぐに「サーバー側にプロジェクトがない」とは判断しない方がよいです。
つながったのに過去セッションが見えなかった
今回一番詰まったのはここです。
スマホからOpenCode Webには入れる。既存プロジェクトも追加できる。
それでも、デスクトップアプリ版で作っていた過去セッションがWeb UIに出ないことがあります。
一方で、Web版で新しく作ったセッションはデスクトップアプリ側にも表示されます。
この状態なら、「DBがまったく別」というより、古いセッションだけWeb UIの一覧条件に合っていないのではと考えます。
画面更新では進まなかったので、APIを見た
UIだけを見ていると、プロジェクトがないのか、セッションがないのか、表示だけ失敗しているのか分かりません。
画面を何度も更新しても進まないときは、APIを直接見ます。
PC側で確認するなら次です。
http://127.0.0.1:4097/projecthttp://127.0.0.1:4097/sessionスマホや別端末から見るなら、Tailscale IPを使います。
100.x.y.z:4097/project
100.x.y.z:4097/sessionここでJSONにプロジェクトやセッションが出ているなら、OpenCodeサーバー側にはデータがあります。
その場合、疑う場所は「データがない」ではなく、Web UI側の表示条件や保存状態に寄っていきます。
ここから先は、私の環境固有の話
ここから先は、一般的な手順ではありません。 /project や /session ではデータが見えるのに、Web UIだけがどうしても噛み合わない場合の切り分けとして読んでください。
犯人の一つは、古いローカル版だった
今回の環境では、OpenCodeが2種類入っていました。ここは環境固有の話です。
- グローバル版:
1.15.10 - プロジェクト内のローカル版:
1.4.11
古いローカル版でWebを起動すると、デスクトップアプリ版や新しいCLIと挙動が噛み合わない可能性があります。
これは私のワークスペース構成に依存した問題です。OpenCodeを普通にグローバルインストールして使っているだけなら、同じ問題が起きるとは限りません。
確認には次のようなコマンドを使います。
where.exe opencode
opencode --version
npm ls opencode-ai --depth=0不要なローカル版がある場合は、削除を検討します。
npm uninstall opencode-ai --save-devただし、プロジェクトで意図して固定している可能性もあります。削除前に、そこだけは確認した方がいいです。
DBを触る前に、ここだけは先にやった
ここから先は最終手段です。
DB編集は最後にする: DBを直接触る前に、必ずバックアップを取ります。先に /project、/session、OpenCodeの起動元とバージョンを見てから判断します。
ここを飛ばすと、戻せなくなる可能性があります。
今回のように、過去セッションはAPIに出るのにWeb UIに表示されない場合、旧セッションのmetadataが現行Web UIの期待形式と合っていないことがあります。
私の環境で補完したのは主に次です。
pathagentmodel
さらに、Windowsのパス区切り差分も詰まりどころになります。
C:\Users\...
C:/Users/...この差で、APIでは見えるのにWeb UIのプロジェクト配下に出ない、という状態が起きることがあります。
ただし、これは一般向けの通常手順ではありません。OpenCodeのDB構造はバージョンで変わる可能性があります。安易にコピペでDBを編集するのは避けた方がいいです。
DBまわりを疑う場合でも、次の順で見ます。
- バックアップを取る
/projectと/sessionでデータが存在するか確認する- OpenCodeの起動元やバージョンが想定通りか確認する
- 別ポートでクリーンに起動する
- それでもだめならmetadataとパス形式を確認する
最終的には、3段階で潰した
私の環境では、最終的に次の3段階で見えるようになっています。
1つ目は、入口を通すこと。opencode web --hostname 0.0.0.0 --port 4097 で起動し、Basic認証を入れて、Tailscale IPでスマホから入れる状態にします。
2つ目は、Web UI側で Add project し、画面に出ないものは /project と /session で切り分けること。ここで、データがないのか、表示だけの問題なのかを分けます。
3つ目は、私の環境固有の不整合を潰すことです。古いローカル版OpenCodeを削除してグローバル版に寄せ、旧セッションの不足metadataとWindowsパス区切り差分を補正。ここは通常手順ではなく、環境固有の対応です。
ただし、上のうち「古いローカル版OpenCodeの削除」「旧セッションmetadata補完」「Windowsパス区切り差分の補正」は、私の環境固有の対応です。
記事を読んで試す場合は、まず通常手順だけで解決できるか見てください。DB編集は最後の最後で十分です。
次に同じ状況になったら、この順で見る
同じように詰まった場合は、次の順で見ます。
opencode webで起動しているか--hostname 0.0.0.0を付けているか- スマホからTailscale IPで開いているか
- Basic認証のユーザー名・パスワードが合っているか
- 4096でだめなら4097など別ポートで試す
- Web UIで
Add projectしているか確認する /projectでプロジェクトが見えるか確認する/sessionでセッションが見えるか確認する- それでもおかしければ
opencode --versionや起動元を確認する - 最後に、バックアップ後にmetadataやパス形式を確認する
まとめ
スマホから自宅PCのOpenCode環境を使うこと自体はできます。
ただし、スマホからPC内フォルダを直接操作するわけではありません。自宅PCで動いているOpenCode Webに入り、OpenCode経由で作業フォルダやセッションを扱う形です。
接続だけなら、Tailscaleと opencode web --hostname 0.0.0.0 --port 4097 でかなり近づけます。
詰まりやすいのは、その先です。既存プロジェクトがWeb UIに出ない、過去セッションが見えない、古いOpenCodeの起動元が混ざる、といったところ。
焦ってDBを触る前に、まずは /project と /session で切り分ける。今回やってみて、ここを先に見るのが一番早かったです。
コメント