はじめに

操作手順の中には、どの画面を開き、何を選べばよいかを実際に示してもらうと覚えやすいものがあります。Codex を使って、ユーザーが自分で Web アプリを操作しながら手順を学べるツアーを作成しましょう。

アプリの操作要素、状態、ドキュメントにアクセスできる WebMCP ツールを用意すると、Codex はユーザーが見ている画面に合わせて次の手順を案内できます。たとえば、まだサービスに接続していないユーザーと、すでにセットアップを終えたユーザーでは、最初に案内する手順が異なります。

ツアーの作成手順

1. Codex でアプリのリポジトリを開き、サービスへの接続やフォルダの追加など、案内したいワークフローを 1 つ選びます。
2. 関連するドキュメントを渡し、ツアーの開始時に想定されるアプリの状態を説明します。
3. このページの開始用プロンプトを実行し、ツアーの案内対象、UI の状態を確認するツール、アプリの操作手順を参照する仕組みを追加します。
4. Codex がアプリの WebMCP ツールを呼び出せるブラウザ環境で、一連の操作をテストします。Codex に案内を頼み、各ステップを自分で実行します。

最初のツアーは対象を絞ります。他のワークフローを追加する前に、セットアップから作業の完了までユーザーを案内できることを確認してください。

例：Runme での Google ドライブのフォルダの追加

Runme では、ユーザーがノートブックを編集したり、ファイルエクスプローラーで Google ドライブのフォルダを追加して中のファイルを参照したりできます。ツアーでは、初めて使うユーザーに操作箇所を示し、一連の手順を案内します。

Runme について詳しくは、Codex を使った OpenAI での定型業務の自動化をご覧ください。

動画では、Codex が Runme の操作要素を強調表示し、それぞれの用途を説明します。その下のスクリーンショットは、Google ドライブのフォルダを追加する手順に絞った別のツアーの例です。

Google ドライブのツアーは、次の依頼から始まります。

Google ドライブへの接続

Codex は Google ドライブに接続済みかどうかを確認します。未接続の場合は Connect Google Drive を強調表示し、それを選択して接続を完了するようユーザーに案内します。

ファイルエクスプローラーの表示

接続が完了すると、Codex はユーザーをファイルエクスプローラーに案内します。このように、アプリの状態が変わると、それに応じて次の手順が決まります。

フォルダの追加

ユーザーがツールバーを展開すると、Codex は Google ドライブのフォルダを追加するための操作箇所を強調表示します。ユーザーは自分で操作しながら、次回どこからフォルダを追加できるかを覚えられます。

ユーザーの案内に必要なコンテキスト

Runme では、ツアーの案内対象、アプリの状態、ドキュメントという 3 種類のコンテキストを Codex に提供しています。以下のツール名は Runme で使われているものです。自分のアプリに合わせて、同じ役割を持つツールを用意してください。

案内対象の登録

ツアーの案内対象には、その役割が分かる固定の data-tour-id 値を割り当て、それぞれにラベルと説明を付けます。Runme では、次の 3 つの WebMCP ツールを通じて案内対象にアクセスできます。

• listTargets は、登録済みの案内対象と、それぞれの ID、ラベル、説明を一覧で返します。
• showTourStep({ target, title?, message, placement? }) は、案内対象を強調表示し、説明を表示します。
• dismiss は、強調表示を解除します。

これにより、Codex はユーザーに代わって操作することなく、操作箇所を特定して使い方を説明できます。

状態の取得とユーザー操作の待機

Runme はツアーに関する状態を React の外部で管理し、コントローラーを通じて参照できるようにしています。getUiSnapshot ツールは、サインイン状況を含む現在の UI の状態を返します。waitForUiChange(...) を使うと、ユーザーが強調表示された要素を選択するなどして UI の状態が変わるまで、Codex が待機できます。

各操作の後に状態を再取得するよう Codex に指示します。手順を表示しただけでツアーを先に進めず、アプリで実際に起きたことを基に、次に進むかどうかを判断するようにします。

アプリへの操作手順の同梱

Runme は Markdown 形式のドキュメントをアプリに同梱し、WebMCP を通じて参照できるようにしています。

• readInstructionsForAIAgents は、Codex がアプリやツールをどのように使えばよいかを説明します。
• listDocumentation() は、参照できるページとその説明を一覧で返します。
• getDocumentation({ name }) は、選択したページを Markdown 形式で返します。

ツアーの手順とツールはアプリに同梱できるため、ツアー専用の Codex プラグインを別途用意する必要はありません。

ツアーの動作確認

アプリの開始時の状態を変えて、同じ依頼を試します。完了済みのセットアップをスキップするか、ユーザーの操作を待つか、UI が変化したときに案内内容が更新されるかを確認してください。

ユーザーが途中で操作をキャンセルした場合や、操作に必要な要素がまだ表示されていない場合もテストします。Codex は、何が足りないかを説明するか、その状態で実行できる次の手順を選ぶ必要があります。ボタンを強調表示しただけで操作が成功したと伝えてはいけません。

認証、権限チェック、ユーザーによる操作には、アプリの既存のフローを使います。ツアーではこれらの仕組みを迂回せず、ユーザーが画面の使い方を理解できるよう案内してください。

次に試せるプロンプト

最初のワークフローが動作したら、同じチャットで次のように依頼できます。

• 「Google ドライブに接続済みで、ファイルエクスプローラーが閉じている状態で、このツアーをテストしてください。」
• 「ユーザーが途中で操作をキャンセルし、その後ツアーの再開を依頼した場合にも対応してください。」
• 「既存の案内対象と状態を確認するツールを再利用して、[next workflow] のツアーを追加してください。」