本文へ移動

モバイルモニター ​

モバイルモニターは、スマートフォン向けのボード表示です。席を離れているときに、進捗を確認したり、エージェントの質問に回答したりするために使います。このページでは、モニターの表示、ngrokでスマホから接続する方法、動作の確かめ方を説明します。

モニターに表示されるもの ​

モニターは、アドレスで指定した一つのプロジェクトを表示します。モニターでは、タスクが未着手・進行中・完了に分かれて表示されます。AI担当のタスクにはエージェントの状態が表示され、未着手または進行中で回答待ちの質問がある場合は、タスク上に回答フォームが表示されます。モニターからは、この質問への回答と、言語・テーマの変更ができます。タスク・プロジェクト・接続の設定は変えられません。

タスクをタップすると、画面下部から詳細パネル(ドロワー)が開きます。本文・受入条件・履歴・エピックの4タブがあり、左右のスワイプでも切り替えられます。受入条件タブには、そのタスクの条件だけが表示されます。エピックの参考条件は詳細本文で確認します。エピックタブでは、ほかの場所に表示済みのラベルやタイトルを繰り返さず、エピックの詳細を表示します。

受入条件タブを開いたタスクのドロワーと、4つのタブを表示したモバイルモニター

各タブは個別にスクロールできます。横スワイプでは、タブの内容と選択中のタブを示す下線が一緒に動きます。タブ内の操作が、外側の画面の操作を引き起こすことはありません。ドロワーを閉じるには、タブより上の領域(ハンドルとヘッダー。閉じるボタンを除く)を下へドラッグします。ドロワーはドラッグに追従して動きます。

タスクを開くと、本文・受入条件・履歴・エピックを一度に読みます。タブを切り替えても、読み直すことはありません。読み取りに失敗した場合は、そのタブの再試行ボタンを使えます。

モニターは、PCで変更が保存されると自動で更新されます。最新のデータをすぐに読むには、ヘッダーの最新の状態に更新ボタンを選びます。読み直している間も、ページは直前に読めたデータを表示したままです。

モニターのHTMLとAPIレスポンスはキャッシュされません。スクリプトとスタイルはブラウザに保存されるため、2回目以降はページとデータだけを取得します。オフライン用のスナップショットキャッシュやService Workerはありません。

新しいバージョンをインストールしてagboard serveを再起動すると、開いているモニターは自動で再読み込みし、新しい画面に切り替わります。回答を入力している間やタスクのドロワーを開いている間は、送信するか入力を消すまで、またはドロワーを閉じるまで待ちます。切断中は接続状態を画面に表示します。

始める前に ​

ngrokのアカウントと、そのauthtokenが必要です。モバイル接続のダイアログには、トークンをコピーするngrokのページを開くボタンがあります。Agent Boardは、ngrokのTraffic Policyの機能(無料のアカウントでは使えないGoogleサインイン(OAuth)を含む)を一切使わずにアドレスを開きます。そのため、無料のアカウントでもモニターを動かせます。そのほかのngrokのプランの上限や規約は引き続き適用されます。

Agent Boardは、ngrokを使って、モニターだけにつながる公開のHTTPSアドレスを開きます。ボード全体は127.0.0.1のままです。ボードをインターネットに公開したり、ルーターのポート転送を使ったりしてはいけません。HTTPSはngrokで終端されるため、ngrokは通信の内容を処理できます。PCとスマホの間のエンドツーエンドの暗号化ではありません。

合言葉でモニターを守る仕組み ​

モニターは、4桁の合言葉で守られます。Agent BoardはGoogle認証もngrokのサインインも使わず、許可するアカウントの一覧も持ちません。

  • 接続を開始するたびに、OSの乱数源から0000〜9999の新しい合言葉を作ります。合言葉はメモリーだけに置かれ、ファイルへの保存、ログへの出力、モニターのページへの埋め込みは行いません。
  • 合言葉を見られるのはPCだけです。モバイル接続のダイアログの手順2「合言葉を入力する」と、agboard serve --monitor ngrokの起動行に表示されます。
  • スマホはアドレスを開くと合言葉を求められ、合言葉が正しくなるまでボードの内容は何も表示されません。接続は最長12時間続き、それを過ぎるとスマホはもう一度合言葉を求めます。
  • 続けて5回間違えると、モニターは正しい合言葉も含めて、それ以上の合言葉を受け付けなくなります。接続を停止してもう一度接続する(またはserveを再起動する)と、新しい合言葉になり、間違いの回数も数え直されます。

4桁の合言葉は10,000通りしかないため、アカウントでのサインインより弱い守りです。5回までという制限、ngrokがランダムに選ぶアドレス、開始ごとに変わる合言葉で当て推量を難しくしていますが、アドレスを秘密にしておくことの代わりにはなりません。アドレスと合言葉は、パスワードの組のように扱ってください。

  • アドレスやQRコードを、人目のある場所で共有しないでください。
  • 使わないときは接続を停止してください。
  • アドレスは、ngrokがランダムに選んだものです。見つかりにくくなりますが、それを秘密として頼ることはできません。

ngrokはAgent Boardが確認できるものを何も付けないため、モニターは自分で二つを確認します。要求が公開アドレスとちょうど一致していることと、合言葉です。ngrokはHTTPS接続を終端して通信の内容を見られるうえ、ngrokアカウントの管理者はアドレスの提供方法を変更できます。合言葉は、これらに対する守りにはなりません。

すでにPC上で動いているプログラムは、ngrokを通さずに、モニターのローカルのポートへ直接要求を送れます。何かを読むには合言葉が必要ですが、5回の試行を使い切ることで、停止してもう一度接続するまで、スマホからモニターを使えなくできます。Agent BoardはPCを使う人を信頼する前提のため、これに対する追加の防御は設けていません。信頼できるPCでだけ接続を動かしてください。

PCから接続する ​

  1. ボードを開き、設定を開きます。モバイル接続で接続設定を選びます。設定のダイアログが閉じ、「未接続」と表示されたモバイル接続のダイアログが開きます。
  2. 手順1「トークンを取得する」で、トークンの取得ページを開くを選びます。ngrokにログインして、authtokenをコピーします。
  3. 手順2「貼り付けて接続する」で、ngrok認証トークンにトークンを貼り付けます。
  4. このPCにトークンを保存するで、トークンを保存するかどうかを決めます(トークンの保存先を参照)。
  5. 保存して接続を選びます。

接続中は、ダイアログの2つの手順の代わりに「ngrokに接続しています…」と表示されます。準備ができると、「接続を受け付けています」と表示されます。手順1「QRを読み取る」にはQRコードと、アドレスをコピーするURLをコピーがあります。手順2「合言葉を入力する」には4桁の合言葉が表示されます。QRコードが運ぶのはアドレスだけです。アドレスには、PCで選択しているプロジェクトが含まれます。別のプロジェクトを見るには、PCでそのプロジェクトを選び、新しいQRコードを読み取るか、URLをコピーし直します。スマホでは合言葉の入力が引き続き必要で、PCで端末を承認する操作はありません。

合言葉が表示されるのは、接続が動いている間だけです。接続を開始するたびに新しくなるため、停止中や失敗したときの接続には合言葉がありません。

ngrokに接続できなかった場合は、その旨と理由がダイアログに表示されます。トークンとインターネット接続を確認して、もう一度保存して接続を選んでください。PC上のボードは引き続き使えます。

トークンの保存先 ​

  • 入力したトークンは、Agent Boardが動いている間だけ使われ、保存されません。
  • 保存するには、接続の前にこのPCにトークンを保存するを選びます。トークンは、OSが用意するこのPCの安全な保管場所に保存されます。データフォルダには書き込まれません。
  • 環境変数NGROK_AUTHTOKENが設定されていれば、保存済みのトークンより優先されます。そのときダイアログには環境変数を使うことが表示され、トークン欄は空のままで構いません。
  • 保存済みのトークンは、このPCの安全な保管場所に保存済みと表示されます。保存したトークンを削除を選ぶと削除できます。
  • このPCで使える安全な保管場所がない場合は、「このPCでは保存できません(都度入力)。」と表示され、保存の選択はできません。接続のたびにトークンを入力してください。

接続を有効にしたままかどうかは、Agent Boardの内部領域に保存されます。ファイルを編集する必要はありません。合言葉はどこにも保存されません。

スマホで開く ​

  1. スマホで、URLを開くかQRコードを読み取ります。
  2. 「合言葉を入力」の画面が表示されます。PCに表示されている4桁の合言葉を入力して、接続するを選びます。
  3. モニターが開きます。接続は最長12時間続きます。それを過ぎた場合や、PCで接続を止めて開始し直した場合は、もう一度合言葉を求められます。

アドレスにプロジェクトが含まれていない場合は、プロジェクトが指定されていませんと表示され、ページはデータを読みません。PCの接続設定を開いて、現在のQRコードを読み取り直してください。

モニターは、PCに保存された言語とテーマで開きます。スマホでモニターのヘッダーの設定から変えると、その選択はPCにも保存されます。そのため、ボードや別のブラウザ・スマホにも同じ設定が反映されます。PCで変えた内容は、開いているモニターにもすぐ反映されます。

ngrokの無料プランでは、スマホから初めて開くときにngrokの警告ページが表示されます。「Visit Site」を選ぶと、モニターが開きます。ngrokの警告は、訪問者ごとに一度だけ表示されます。

アドレスを知っているだけではボードを読めません。間違った合言葉は、残り回数を示さずに拒否されます。続けて5回間違えると、「間違いが続いたため受け付けを止めました」と表示され、それ以上は受け付けられません。PCで接続を停止してからもう一度接続すると、新しい合言葉になります。接続が停止中と表示された場合は、PCを確認してください。

停止と再接続 ​

ダイアログで接続を停止を選ぶと、接続を閉じます。ダイアログには「接続停止中」と表示され、保存したトークンはこのPCに残ります。スマホはボードを読めず、回答も送れなくなります。次にAgent Boardを起動したときも、接続は始まりません。保存したトークンで再び接続するには再接続を選びます。別のトークンを使うには接続設定を変更を選び、トークンを貼り付けて保存して接続を選びます。

PCがスリープした、ネットワークが変わったなどで接続が切れたときは、停止してからもう一度接続してください。接続中に別のトークンを使うには、トークン再設定で設定をもう一度表示し、新しいトークンを入力して保存して接続を選びます。接続が作り直されるため、スマホは新しい合言葉を入力する必要があります。代わりにダイアログを閉じると、接続はそのままです。

接続したままにしていた場合は、次にAgent Boardを起動したときに、環境変数かこのPCの安全な保管場所からトークンを使えるかぎり、自動で接続が始まります。トークンがなければ、ダイアログがトークンの入力を求めます。

ngrokが通信の内容を残さないことを確認する ​

アカウントでFull Captureが有効だと、ngrokのTraffic Inspectorがリクエストの詳細を保持することがあります。Agent Boardがこれを無効にすることはできません。ngrokのダッシュボードでSettings → Observabilityを開き、Full Captureが無効であることを確認してください。モニターを使う前に確認します。

コマンドラインで起動する ​

サーバーの起動と同時に接続を始めるには、環境変数にトークンを設定します。

sh
export NGROK_AUTHTOKEN=<your authtoken>
agboard serve --monitor ngrok

コマンドは、ローカルのアドレスと一緒にスマホ用のアドレスと合言葉を出力します(例: Serving at http://127.0.0.1:7420/; mobile monitor at https://… with passcode 4821。--jsonではmonitorフィールド)。合言葉はサーバーを起動するたびに変わります。接続を開始できないときは、serveは終了コード1で止まります。そのほかのオプションはCLIガイドを参照してください。

コンピューターがスリープしたりサーバーが止まったりすると、サーバーと接続が再び動くまで、モニターは使えません。

スマホで確認する ​

レスポンシブなブラウザテストは狭い画面幅をカバーしますが、ソフトウェアキーボードは実機での確認が必要です。スマートフォンのブラウザでモニターを開き、待機中の質問を持つ未着手または進行中のタスクを探します。キーボードが出ても回答欄と送信ボタンを操作できることを確認し、回答を送信してください。あわせて、長い本文、受入条件、エピックのタブでのスクロール、タブの横スワイプ、ハンドルとヘッダーからの下方向の閉じ操作も確認します。ブラウザのエミュレーションだけでは、Safariのキーボードの挙動は確認できません。

次に読む ​