外出先や別室で、少しだけ自宅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 で切り分ける。今回やってみて、ここを先に見るのが一番早かったです。
コメント