nikkie-ftnextの日記

イベントレポートや読書メモを発信

スマホからも Claude Code したい！ Claude Code on the Web 設定記

LLM

はじめに

七尾百合子さん、お誕生日 308日目 おめでとうございます！ nikkieです。

いつでもどこでも Claude Code したい！と思ったところ、環境設定につながりました。

目次

スマホからも Claude Code したい！

Claude Code はなかなかに便利です。
PC だけでなくスマホからも使えないかと思い立ちました。

実はスラッシュコマンド/mobileがあります。

Show QR code to download the Claude mobile app （v2.1.12 で確認）

スマホ用 Claude アプリをインストールする QR コードが表示されます。
そして、Pro プラン以上であれば、スマホからも Claude Code にタスクをお願いできます。
Claude Code on the Web https://claude.ai/code を使っているという理解です（Claude Code on the Web を使えるのが Pro プラン以上なんです1）

Claude Code on the Web のドキュメントより

日本語で読めます（英語はこちら）

code.claude.com

何回か使って、フックを使った設定を試しています。
ベストプラクティスにも記載されています2

Claude Codeフックを使用：SessionStartフックを構成して、環境セットアップと依存関係インストールを自動化します。

SessionStart フックの設定例

Oikon さんによる gh-setup-hooks

Claude Code on the Web に GitHub の issue の URL を渡したときに、（現在は）ghコマンドが環境になくて、curlなどの代替手段を講じます。
ghコマンドが使えると便利そうだったので設定することにしました。

(1) SessionStart フックを指定します。
https://code.claude.com/docs/ja/hooks#sessionstart

{
  "hooks": {
    "SessionStart": [
      {
        "matcher": "startup",
        "hooks": [
          {
            "type": "command",
            "command": "bun x gh-setup-hooks",
            "timeout": 120
          }
        ]
      }
    ]
  }
}

startup - スタートアップから呼び出された

ローカルで Claude Code を起動した時も、このフックは実行されています。
ローカルだと何もしません

(2) Claude Code on the Web に環境を追加
「Add environment」（ref: 環境構成）

「カスタム」するとき、「一般的なパッケージマネージャのデフォルトリストも含める」にチェックを入れましょう。
npm や GitHub API へのネットワークアクセスが許可されずにデバッグすることになります3。

GH_TOKENの値は、「Fine-grained personal access tokens」で設定しました。
https://github.com/settings/personal-access-tokens

  • Repository access: Only select repositories
    • （不慣れなので安全側に倒して）Claude Code on the Web に触らせるリポジトリを1つだけ選択
  • Permissions（作業内容によってはもっと必要になります）
    • やりたいこと：Claude Code on the Web が gh コマンドから issue を読んで作業して PR を作らせたい
    • 以下3つの Read/Write を許可しました
      • Contents
      • Issues
      • Pull requests
    • （Metadata read も勝手に有効になりました）

(3) CLAUDE.mdにghコマンドの-R指定について追加

注意点としてはサンドボックスのプロキシの設定の関係で、ghコマンドを使う場合は -R owner/repo フラグが必要です。
(略)、CLAUDE.mdに一言書いておくとスムーズです。（Oikon さん記事より引用）

以上の設定で Claude Code on the Web が PC の Claude Code 同様、issue を見て作業できるようになりました。

Python の仮想環境構築もやらせよう

Claude Code on the Web へのタスク依頼を繰り返す中で、Python の環境構築が下手らしいことに気づきます。
CLAUDE.mdに仮想環境を使う手順を書いているんですが、無視してサンドボックス内の環境の Python を直に使ってきます。
今回のケースは transitive な依存4が古いために、仮想環境を使わないとインストールできません

私が用意したCLAUDE.mdの記載の伸びしろもあると思うのですが、ベストプラクティスに沿って SessionStart フックで環境構築することにしました。

SessionStartフックを使用して自動依存関係インストールを構成します。（依存関係管理）

CLAUDE_CODE_REMOTE環境変数を見て、Claude Code on the Web 環境でのみ環境構築するように実装しました。
（上で示したのと同様に）フックの matcher を startup にしているので、resume などでは実行されません。

同種の体験として過去に Devin をオンボーディングしました。
コーディングエージェントが介入することなくフックで決定的に環境構築できるのは、私にはしっくりきます。

pip だと環境構築に時間がかかるので、uv を使って起動待ち時間が減らせそうです5

終わりに

「スマホからも Claude Code したい！」から始めて、Claude Code on the Web を少し整えました。
SessionStart フックでghコマンドを入れたり、Python の仮想環境を構築したりしています。

機能追加のアイデアが浮かんだら issue を追加し、Claude Code on the Web で実装をお願いするという形で開発しているリポジトリはこちらです。

  1. ウェブ上のClaude Codeは誰が使用できますか？↩
  2. ベストプラクティスには全2点記載があり、今回取り上げないCLAUDE.mdも効果を感じています↩
  3. 俺みたいになるな！ ↩
  4. 具体で言うと、（プロジェクトが直接依存する）feedparser が依存する sgmllib3k が古いです（sdist しかなく、15年前で止まってます）↩
  5. AI にとってはスピードが大事 ↩