初めてなら: 1行インストール
herdr・Bun・Nodeがなくても大丈夫
curl -fsSL https://herdrweb.dev/install.sh | sh足りないherdr（0.9.0以降）・Bun（1.4以降）・Nodeをsudoなしで自分のアカウントに入れ、アプリをherdrプラグインとして追加します。Tailscaleが動いていれば、スマホ用のアドレスとQRコードまで表示します。
インストール前の試食 · ログイン不要
devswha/herdr-web-ui 開発・リモート作業
PCに任せたAI作業を、スマホから確認
決済画面の修正をAIに任せたまま、外出する時間になったら？PCのherdrで動く同じ作業をスマホで読み、質問に答え、必要ならターミナルを開けます。接続のしくみ、通知の条件、動かし続けるものを確認します。
68秒の動画説明図3枚選び方01 · 動画でひと目に
PCに任せたAI作業を、スマホから確認
Google Flowの韓国語ナレーション・韓国語字幕による解説動画です。公開リリースv0.4.8の機能をもとにした架空の作業例で、実際にPCを操作した録画ではありません。
02 · 実際のアプリ画面
元リポジトリの実際の録画で見てみる
herdr web uiのREADMEに掲載されている実際の操作録画です。1つ選んで再生を押すと動きます。
録画: devswha/herdr-web-ui README（v0.4.12時点）、MITライセンス。ギット飯が作った映像ではありません。
03 · すぐに始める
インストールは1行、スマホ接続はQRを1回
herdrを初めて使う場合と、すでに使っている場合に分けました。コマンド横のコピーを押して、PCの端末に貼り付けてください。
元リポジトリv0.4.12の文書に基づく · 2026-10-19確認 · ギット飯では実際にインストールしていません。下の分析はv0.4.8時点です。
macOS・Linuxでインストール
herdrをすでに使っているなら: プラグインだけ
herdr 0.9.0以降・Bun 1.4以降・Node 18以降があるとき
herdr plugin install devswha/herdr-web-uiherdrがリポジトリを取得してビルドし、プラグインとして登録します。古いherdrは先に更新して再起動してください。
Windows x64（PowerShell）
irm https://herdrweb.dev/install.ps1 | iexGit for Windowsが必要です。スマホ接続はherdrのPhone setupから行い、端末はサイズ固定の画面ミラーで表示されます。
インストールしたあと
PCのブラウザで開く
herdrが動いている状態で http://127.0.0.1:7317 を開きます。デスクトップのあるPCではインストーラーが開いてくれます。アプリはこのアドレスに結びつくので、localhostではなくこのアドレスを使い続けてください。paneを選ぶか、New workspaceでエージェントを始めます。
正しく動いているか確認
応答に "ok":true があればサーバーは動いています。
curl -s http://127.0.0.1:7317/api/healthスマホをつなぐ
インストーラーが表示したQRをスマホで読み取り、Safariは共有 → ホーム画面に追加、Chromeはアプリをインストールを押します。プラグインで入れた場合は、TailscaleでHTTPSのアドレスを作ります。自分のTailscale端末はコードなしで入れます。
tailscale serve --bg --https=443 http://127.0.0.1:7317通知をオンにする
スマホアプリの右上 ⋯ → Alerts を押します。iPhoneはiOS 16.4以降、ホーム画面に追加したアプリでのみ通知が届きます。
使う前に知っておくこと
- 既定ではこのPC（127.0.0.1）からしか開けません。他人が届くアドレス（0.0.0.0、LANのアドレス、公開プロキシ）にトークンなしで開くと、自分の端末に入力できるようになってしまいます。
- 1行インストーラーは、Tailscaleが動いているとtailscale serveで自分のtailnetにアプリを公開します。望まない場合はプラグイン方式で入れてください。
- TailscaleがなくてもSSHトンネル・VPN・HTTPSプロキシで接続できます。ただしホーム画面への追加と通知にはHTTPSが必要です。
- スマホは画面にすぎないので、PCとherdrが動いている間だけ続きを見られます。
コーディングツールにインストールを任せるなら
元リポジトリには、コーディングエージェント向けのインストール手順書（INSTALL.md）が別にあります。下の指示文をClaude CodeやCodexに貼り付けると、その手順書どおりに確認 → インストール → 検証を進め、危険な手順の前には先に確認します。
コーディングツールに貼り付けるインストール指示文
READMEのインストール ↗INSTALL.md（コーディングエージェント向け） ↗スマホ設定ガイド ↗アクセスと安全 ↗ライセンス: MIT ↗
仕組みの図3枚を開く
同じセッションに接続する構成、チャット・端末・質問の役割、通知の条件を分けて見ます。以下は公式資料に基づくギット飯の説明図です。図内の表記は韓国語です。
01 / PCの作業をスマホで読む
実行はPCで、読む・答えるのはスマホからも
- 簡単にいうと
- Webサーバーがherdrの作業状態とエージェントの元の会話を読みます。スマホのメッセージは同じ稼働中のペインへ送られます。
- 自分の条件では
- 外出先で新しい作業を作らず、進めていた作業を確認したいとき。
- 知っておくこと
- herdr web ui自体がAIの実行をホストしたり、スマホへ移したりはしません。実行PC・herdr・Webサーバーが引き続き必要です。
説明図は公開リリースv0.4.8（cb65ecb9）が基準です。開発ブランチの未公開動作は含めていません。
根拠: devswhaおよび貢献者のherdr web ui v0.4.8公式資料。説明図・モーション: ギット飯。音声: Google Flow。コードのライセンス: MIT。確認: 2026年10月15日。 原本のライセンスを見る ↗
04 · 選び方
自分の条件なら、どちらを選ぶ？
3つの質問で結論まで
答えを選ぶと、下の比較と判断の根拠をもとにギット飯がまとめた結論がすぐに表示されます。
3つ選ぶと結論が表示されます。
結論は、下の比較と「条件が変わったら」の判断（v0.4.8の文書に基づく）、元のREADME FAQをそのまま反映したものです。 README FAQ ↗
ひと目で比較
スマホで実行中の作業を確認する方法を、拡張なしの基本構成どうしで比べました。
| 基準 | herdr web ui + herdr | 通常のSSH + tmux接続 |
|---|---|---|
| 会話と作業の見つけ方 | 作業一覧＋読みやすいチャット | セッション・ウィンドウを選び端末出力を読む |
| 質問への回答と入力 | 承認・質問カード、端末にも切替 | 端末でキー・コマンドで応答 |
| 席を離れたときの通知 | 入力待ち・完了時にWebプッシュ（HTTPS必要） | 標準ではなし、別途構成 |
| 維持する環境 | herdr＋Webサーバー＋アクセス権限 | リモートPC＋tmuxセッション |
こんなときは herdr web ui + herdrherdrの作業をスマホで探し、会話・承認・通知を通して確認したいとき。
こんなときは 通常のSSH + tmux接続tmuxに慣れていて、端末を直接読み、入力できれば十分なとき。
基準ごとの詳しい説明と出典
会話と作業の見つけ方
- herdr web ui + herdr
- herdrのワークスペース・タブ・ペインと状態を選び、対応エージェントの会話を読みやすいチャットで見ます。
- 通常のSSH + tmux接続
- SSHで接続し、tmuxのセッション・ウィンドウ・ペインを選んで端末出力を読みます。
作業が多く、会話を読み返すことが多いほど、整理された一覧とチャットが役立ちます。
質問への回答と入力
- herdr web ui + herdr
- 対応する承認・質問はカードで回答でき、同じペインのターミナルにも切り替えられます。
- 通常のSSH + tmux接続
- 端末に出る質問を読み、キーやコマンドで答えます。基本構成にはエージェント別のチャット・承認カードはありません。
長いコマンドや複雑な変更は、どちらもスマホでは判断しにくい場合があります。
席を離れたときの通知
- herdr web ui + herdr
- 入力待ちや完了時のWebプッシュに対応します。HTTPS・通知の許可と端末ごとの条件が必要です。
- 通常のSSH + tmux接続
- 通常のSSH + tmux自体には、同じWebプッシュの流れはありません。必要なら別途通知を構成します。
画面を開き続けるか、通知を受けて戻るかで考えてみます。
維持する環境
- herdr web ui + herdr
- herdr・Webサーバー・実行PC・アクセス権・接続経路を維持します。AIモデルや契約の費用は別です。
- 通常のSSH + tmux接続
- リモートPCとtmuxセッションは維持し、確認するときにSSHで再接続します。慣れたターミナル環境を続けられます。
herdr利用者には自然な追加ですが、tmux利用者には環境を移す手間が生じます。
試す前に確認する3つ
インストール前に確認しておくと、無駄足を減らせます。チェックはこの画面でのみ表示されます。
合わないときは 未対応の操作はターミナルで確認するか、既存の接続方法を維持します。
合わないときは 権限を説明できる端末から接続し、不要な端末は解除します。
合わないときは テストが確認できるまでは、重要な承認待ちを通知だけに任せません。
ギット飯が想定した例と根拠
herdrのAIに決済画面の修正を任せた開発者が外出します。スマホでは進捗と短い承認依頼を確認し、最後の変更レビューはPCで続けられます。
- 作業はPCのherdrペインで始め、PCを動かし続けられます。
- スマホでは主に進捗・質問・短い入力が必要です。
- 最後のコード・テスト結果は自分で確認できます。
公開リリースv0.4.8（cb65ecb9）の資料・コードとSSH・tmuxの公式資料を確認しました。図と決済画面修正の話は説明用で、ギット飯が導入・成功率・性能を測定した結果ではありません。
使いどころがわかる解説
外出先から、PCで進めていた作業へ戻る
herdr web uiはスマホでAIを新しく実行するアプリではなく、PCのherdr作業をブラウザーやスマホから読んで操作する画面です。
任せる部分と、自分で担う部分
herdr web ui に任せる
- herdrの作業一覧・状態と、対応エージェントの元の会話を表示します。
- 同じペインへメッセージ・キー入力・対応カードへの回答を送ります。
- 設定した端末へ入力待ち・完了の通知を送ります。
自分たちで準備・運用する
- 実行PC・herdr・Webサーバーと接続経路を維持します。
- 接続する端末と権限、AIモデル・契約を決めます。
- 承認依頼を読み、コード変更と実際のテスト結果を確認します。
最初は小さな一作業と自分の一端末で、同じ会話・入力・通知から確かめてみてください。
さらに詳しく：原作の読み方と確認事項
PCのherdr内でClaude CodeやCodexを使い、外出先では進捗や短い質問だけを確認したい状況を想定します。公開リリースv0.4.8の資料・コードに基づく解説で、決済画面の修正は説明用の架空例です。
自分のスマホで、同じ一作業を最後まで確かめる
以下は自分の条件に照らして確認するための手順です。ギット飯による実行結果ではありません。
版・OS・対応エージェントを確認
残すものv0.4.8と自分のherdr・エージェントの版、対応するチャット・端末モードの一覧。Windowsでは画面ミラー方式の違いも残します。
ローカルURLとスマホの接続経路を確認
残すもの接続URL、許可した端末、ログイン・ペアリング方法。単にポートをインターネットへ公開して代用しません。
小さな作業でチャット・端末・応答を比較
残すものPCとスマホで同じペイン名・会話・出力・送信した回答を確認した記録。
テスト通知の後で、実際の入力待ちを確認
残すものHTTPS・権限・インストール状態と通知の到着記録。アプリが前面で使用中の間は通常の通知が抑制される場合があります。
次へ進める条件
同じペインを正しく開いて応答を確かめ、自分の環境でアクセス制限と通知が期待どおり動けば、範囲を広げます。
立ち止まる条件
会話の紐付けや権限が不明、または承認内容をスマホで読みづらい場合は、PCへ戻って確認します。
判断の根拠と確認項目を詳しく読む
同じ作業を二つの画面で読む
- 公式資料で確認
- チャットはエージェント自身のセッションファイルを読み、入力は同じ稼働中のペインへ送ります。プロセスとターミナル履歴はherdrが管理します。
- ギット飯の解釈
- スマホ側に複製した新しいAI作業を始める構成ではありません。チャットとターミナルは、同じ作業の別の見え方です。
- 導入前の判断
- 最初に、スマホで選んだワークスペース・タブ・ペインがPCと同じか確かめます。
承認カードは判断を代行しない
- 公式資料で確認
- 対応する承認・質問メニューはカードになり、回答前に現在のターミナルメニューと一致するか再確認します。すべてのプログラムの質問がカードになるわけではありません。
- ギット飯の解釈
- 小さな画面でも答えやすくなりますが、実行するコマンドと変更範囲は自分で読みます。
- 導入前の判断
- 内容が十分に見えない場合や未対応のメニューはターミナルで確認し、判断が難しければPCで続けます。
接続経路とアプリへのアクセス権を決める
- 公式資料で確認
- サーバーの既定待受は127.0.0.1です。Tailscale所有者のログイン、ペアリングした端末、設定したトークンでアクセスを区別します。公開プロキシでは先にトークンを設定する指示があります。
- ギット飯の解釈
- URLを開けることと、自分の端末だけが操作できることは別の条件です。ターミナルの入力権限は実際のPCへ影響します。
- 導入前の判断
- 初めは既定のローカル待受とTailscaleのHTTPS経路を使い、端末一覧と実際のアクセス権を確認します。
向いている場面
- herdrで複数の作業を動かし、スマホで進捗・質問・短い入力を確認したい人。
- 実行用PCと接続経路を維持し、重要な結果を自分で確認できる人。
別の選択肢も比べたい場面
- PCを切っても、スマホだけで同じAI作業が続くと期待するとき。
- 現在のtmux環境で、ターミナルを簡単に確認できれば十分なとき。
試す前に確認すること
- 外出中もPC・herdr・Webサーバーが動き続けますか？
- スマホで同じペインを開き、閲覧・入力の権限を確認しましたか？
- 通知の条件を整えて、テスト通知を受け取りましたか？
選んだ理由：AIの実行と、離れた場所から読む・入力する画面を分けて理解できます。herdrを使う人が、スマホでも同じセッションを確認するか考えるために選びました。
出典と確認範囲
公式資料とコードをもとに、ギット飯が説明図と動画を制作しました。実機を操作した録画や、新しく動作・導入効果を測定した記録ではありません。
- 作者
- devswha and herdr web ui contributors
- 確認日
- 2026-10-15
- ライセンス
- MIT ↗