非エンジニアがワークショップで学んだ、アイデアを形にするIBM Bob活用Tips

■ 初めに

先日IBM Bob（IDE版）を使ったコーディングエージェントのワークショップに参加しました。
私自身、このようなワークショップへの参加は初めてだったことに加え、今回はアプリを企画・実装する参加者でありながら、必要に応じて進行や他の参加者のサポートも行う、「半分参加者、半分運営」のような立場だったこともあり、多くの学びがありました。
そこで、この記事ではワークショップにおいてBobをどのように使うと効率的に進められるかについて学びになった部分を、いくつかピックアップしてご紹介したいと思います。

■ この記事の前提・想定読者

前提

今回のワークショップは、IBM Bobでアプリを作ろうというもので、どちらかというと「コーディングに詳しくない人でも、IBM Bobでアイデアを形にしてみる」という想定がありました。そのため以下の様な前提がありました…

• 目的は短時間で簡易的なモックアップを作ること
• 利用するPCは開催者側で用意したデモ用
• Node.jsやGit等の開発ツールは今回は使わない
• 成果物はHTMLファイル・Markdownが中心

そのため当記事は、短時間でモックアップを作成する中で「この使い方は便利だった」「こう進めるとうまくいきやすかった」と感じたTipsをまとめたものとしてお読みいただけると幸いです。

想定読者

この記事は、エンジニアの方だけではなく、普段コードを書く機会があまりない以下の様な方にも読んでいただける内容を想定しています。

• IBM Bobがどのようなツールなのか、実際の使用感を知りたい方
• AIコーディングエージェントに興味はあるものの、「エンジニア向けの難しいツールなのでは？」と感じて、まだ触ったことがない方
• IBM Bobを使い始めたものの、どのように指示を出せばよいのか分からない方
• プログラミング経験は少ないものの、自分のアイデアを簡単な画面やモックアップとして形にしてみたい方

■ IBM Bob とは

さて、ここで今回使ったIBM Bobについて簡単に紹介しておきたいと思います。
IBM Bobは、IBMが提供するAIコーディングアシスタントです。
公式ドキュメントでも「AI SDLC（ソフトウェア開発ライフサイクル）パートナー」と説明されている通り、コード生成にとどまらず、要件定義や設計、実装、テスト、レビューまでソフトウェア開発ライフサイクル全体を支援することが強調されているのが特徴的です。
IDE利用できるものの他に、コマンド・ラインから利用できるBobShellというものがあります。

• IDE版ドキュメント：https://bob.ibm.com/docs/ide
• Shell版ドキュメント：https://bob.ibm.com/docs/shell

本記事では IDE 版の IBM Bob を中心に紹介します。Bob Shell は取り扱いません。

■ 学んだこと①：決めたことを会話ではなくファイルに残す

今回参加したワークショップではアイディアを考えるところからアプリを作ったのですが、この様にゼロから何かを作る場面では、アプリの目的や前提条件、実装する内容など、最初はBobとの会話の中で徐々に決まっていくことが多いと思います。
この様な実装の前段階で意識したいのが、決めたことをBobとの会話の中だけに残しておかないことです。

実装が始まれば、特に意識しなくてもBobが勝手にファイルを作り始めますが、ディスカッションの段階では指示しないとファイルを作らないことが多いです。特にChatGPTなどの対話型AIに慣れていると、つい会話の中に重要なことを溜めがちです。
ですが作業が長くなったり、セッションを切り替えたりすると、以前の会話内容のそのままを前提に、Bobと会話することはできません。

190Kトークン程度使うと自動でそれまでの会話内容が要約されます。（要約後は細かいことは覚えていない…）　
https://bob.ibm.com/docs/ide/core-concepts/context-window-management#token%E3%81%AE%E5%88%B6%E9%99%90

そのため、例えば今回のワークショップでは、主催者から説明された内容や、参加者同士で話し合った内容などをMarkdownファイルとして整理して残しました。

この様なMarkdownファイルを作っておくと、人間が後から「何を作ろうとしていたのか」を確認しやすくなるだけでなく、Bobが参照するAGENTS.md（※後述します）を作る際の材料としても使えます。

つまり、ディスカッションの内容を一度ファイルとして整理しておくことで、人間にとってもAIにとっても、プロジェクトの前提を共有しやすくなります。
感覚としては、「会話は一緒に考える場所、ファイルは決まったことを残しておく場所」くらいに使い分けると分かりやすいと思います。

特に今回のワークショップでは、ホワイトボードを使って参加者同士でアイデアを出す場面も多くありました。こうしたディスカッションの結果も、最終的にはBobが参照できるファイルとして残しておくと、その後の実装につなげやすくなります。

■ 学んだこと②：独立した作業は別セッションで並列に進める

もう一つ意識したのが、独立したタスクとして切り出せる作業は、別のセッションを開いて並列にBobへお願いすることです。
AIコーディングエージェントを使っていると、つい一つのセッションですべての作業を順番に進めたくなります。ただ、実際にはメインの実装を進めている間にも、別で進められる作業は意外とあります。

例えば、今回のワークショップでは以下のような作業をメインのアプリ実装とは別のセッションで進めました。

• ディスカッションの整理
• アイディアの裏付けに必要なWebリサーチ
• 発表資料の作成

このように、お互いの作業結果を待たなくても進められるタスクであれば、複数のセッションを開いて同時にBobへお願いできます。
やり方は簡単で、以下の通り[新規セッション開始]を押すだけ。並列で並べているセッションはタスク一覧から確認できます。また、ツール承認などのユーザー側の入力が必要なセッションに関してはアラートが出るようになっています。

エージェント停止時など、Bobのセッションの特定のタイミングでシェルコマンドを実行できるLifecycle hooksという機能が、26年8月の更新で追加されました。
https://bob.ibm.com/docs/ide/configuration/lifecycle-hooks

このLifecycle hooksの Stop フックを使って処理終了時に通知や音を出すようにしておくと、複数セッションを並列で動かしている場合でも完了に気づきやすくなり、より効率よく作業を進められます。

人間側としても、限られた時間の中で複数の作業を同時に進められるため、かなり便利でした。
ただし、並列化するタスクはできるだけ独立させるのがポイントです。同じ成果物を扱う作業は一つのセッションにまとめ、独立して進められる作業だけを別セッションに分けるようにしました。
「会話を並列にする」というより、作業を分解して、それぞれのBobに担当を持たせるイメージで使うと分かりやすいと思います。

ここで紹介したのは、独立した作業を人間側で切り分けて複数セッションに任せる方法です。この他に、複数のタスクに関連性があり、AI同士で情報を引き継ぎながら処理を進めたい場合には、「Subagent」と「Subtask」という機能があります。
分かりやすい解説：https://qiita.com/yanagih/items/bf93d65a1ab1f6eeeb10

今回は実装内容が比較的シンプルだったため、これらの機能を使う場面はほとんどありませんでしたが、大規模で複雑なコードベースを扱う場合には有用だと思います。

■ 学んだこと③：ホワイトボードは画像で渡す ― 文字起こしから画面化まで

ワークショップにおいてホワイトボードで議論した内容を文字起こしするのは画像入力が楽でした。IBM Bobではコンテキストメンションで画像ファイルを参照できる他、以下の赤丸部分のようにスクショをそのまま貼り付けできます。

上記のように文字起こしができる他、手書きの図表なども、画像と簡単な指示を入力するだけでHTMLにしてくれます。例えば以下の画像のように「IBM Bobの4象限マトリクス」の画像を入力すると、見た目そのままに再現してくれます。

この様な「構造をもった図」のコード化は、図の種類や複雑さによって難易度が異なります。（例えば複雑なフローチャートなどは難しい）
こうした場合は、①画像から要素や階層構造を推定 → ②レイアウトのプランニング → ③再現実装 の様な感じで分解してBob再現させるとうまくいく場合があります。
参考：https://arxiv.org/html/2507.22827v2#S3

■ 学んだこと④：AI向けオンボーディング資料の作成は /init コマンド

上記の「ディスカッションの内容」などを元にIBM Bobにアプリを作ってもらうのですが、Bobに常に意識してほしいことはAGENTS.mdとして作る必要があります。こうしたBob向けのオンボーディング資料であるAGENTS.mdを作る時に /init コマンドを使うのが非常に楽です。

使い方は簡単で「/init」と打つだけ。以下の様な形で既存のファイルを元にAGENTS.mdを自動で作ってくれます。

プロジェクト全体で守って欲しいルールはルート直下のAGENTS.md、モード毎のルールは.bobの各モードのフォルダ直下にAGENTS.mdを作ってくれるので、モードごとの挙動も制御できます。

このinitコマンドの良いところは、「/init」を打つ度にプロジェクトのファイルを読んで各AGENTS.mdを追加・修正してくれるところです。プロジェクトが進んで状況が変わったとき、こまめに実行しておく事で、ユーザーがプロンプトに書かなくても、bobがプロジェクトの状況を把握しておいてくれます。

使い方は以下で詳しく解説されています。

注意点として、このAGENTS.mdはセッションを切り替えても常にプロンプトに入るため、無意識のうちにコンテキストウィンドウを圧迫するの原因になります。
AGENTS.mdの規模が大きくなってきたら一度見直して、ファイルを切り分けて参照するなどコンパクトに保つことを心がけましょう。AGENTS.mdの規模や運用については以下が参考になります。
https://qiita.com/dai_chi/items/61019c602c2c40dade07

■ 学んだこと⑤：BobにWeb検索させたいならMCPを使う

現時点(2026年8月時点)で、Bob自体にweb検索機能はありません。Bobで出来るのはユーザー側が「＠URL」で指定した、特定のWebページのコンテンツを取得する程度です。

ですが今回のワークショップでは、ディスカッションの中でBobに不特定多数のサイトをweb検索をさせて、アイディア出しの時のリサーチや、情報の裏どりなどに活用したい場面が多々ありました。そこで役立ったのが、web検索用のMCPです。

MCPとはAIエージェントと外部ツールをつなぐための共通規格で、これによりIBM Bobがコーディングだけでなく、Webリサーチや社内ツールの操作なども可能になります。

このMCPは、IBM BobのようなMCP Clientから、ツールを提供するMCP Serverへ接続して機能を利用します。MCP Serverの利用方法には、PC上でMCP Serverを起動して接続する方法のほか、インターネット上で提供されているMCP Serverへ接続して利用する「Remote MCP Server」というものがあります。

今回は主催者側で用意したデモPCを使用しており、各PCへのMCP Serverの導入や実行環境の準備にできるだけ時間をかけたくなかったため、Remote MCP Serverを提供している＆Web検索ができるものとしてTavilyMCPを採用しました。

TavilyはLLM向けに設計された、リアルタイムのウェブ検索およびコンテンツ抽出を行えるサービスです。1000クレジット/月 分の無料枠があります(2026年8月現在)。

TavilyMCPのセットアップの手順

ここからはTavilyMCPをIBM Bobで利用できるようにするまでの手順を簡単に紹介します。今回は安全にRemoteMCPを利用する為、OAuth認証の仕組みをつかって設定をしていきたいと思います。

１．Tavilyアカウントを作成、OAuthで利用するAPI Keyを設定する

まず、Tavily公式サイトにアクセスしてアカウントを作成します。アカウント作成後、以下の流れでAPIKeyを発行します。

❶Overview画面を開く
❷APIKeyを新規作成
❸Key Nameに mcp_auth_default と入力
❹「Create」をクリック

以下のTavilyの公式ドキュメントによると、OAuth認証を利用する場合、mcp_auth_default という名前のAPI Keyがあると、そのキーが認証後のAPIリクエストで使用されます。
https://docs.tavily.com/documentation/mcp?ref_domain=www.google.com&landing=docs.tavily.com%2Fdocumentation%2Fmcp#oauth-authentication

２．IBM BobのワークスペースにMCPの設定ファイルを作る

IBM Bobを起動し、Web検索を使いたいワークスペースの配下に.bobフォルダを作成。続いて.bobの配下にmcp.jsonを作成し、以下の接続設定を記述します。

mcp.json

{
  "mcpServers": {
    "tavily-remote": {
      "type": "streamable-http",
      "url": "https://mcp.tavily.com/mcp/",
      "disabled": false
    }
  }
}

OAuth対応MCP Serverでは、基本的にURLだけ設定すれば IBM BobがOAuthの必要性を自動検出 します。
https://bob.ibm.com/docs/ide/configuration/mcp/mcp-oauth

こちらは2026年8月5日のアップデートから提供された機能になりますので、不具合が生じる方はIBM Bobのバージョンアップを試してみてください。

３. IBM BobのMCP設定画面から認証へ

mcp.jsonが正しく読み込まれていれば、設定したtavily-remoteが設定画面に出てくるので、そこから認証をします。IBM Bobで以下の流れで進めましょう。

❶IBM Bobの設定を開く
❷MCPの設定画面に移動
❸tavily-remote のステータスに表示されている「認証」をクリック

４. ブラウザでTavilyにログイン

手順「３．」で「認証」をクリックすると、ブラウザ上でTavilyのOAuth認証画面が開きます。ここでは手順「１．」で作成したTavilyアカウントでログインし、IBM BobからTavily Remote MCP Serverへのアクセスを許可します。流れは以下の通り。

❶ブラウザ上でTavilyアカウントにログイン
❷OAuth認証が完了すると「Authentication complete」とでます
❸IBM BobのMCP設定画面に戻り、tavily-remoteのステータスが「接続済み」になっていれば成功！

初回接続時はブラウザ上でOAuth認証を行いますが、認証後はIBM Bobがアクセストークンとリフレッシュトークンの保存・更新を自動的に行います。
そのため、通常はTavilyへ接続するたびにログインや認証操作を行う必要はありません。
https://bob.ibm.com/docs/ide/configuration/mcp/mcp-oauth

---

TavilyMCPのセットアップは以上です。ここまで設定できれば、あとはIBM Bobとのチャットの中でWeb検索をお願いするだけです。

今回使ったのはWeb検索ですが、それ以外にも必要な外部ツールをMCP経由で追加できることを知っておくと、Bobの活用範囲を広げるうえで役立ちそうです。
因みに用途に合わせてMCPを検索するときは以下が便利です。

■ 学んだこと⑥：Webアプリの簡易公開＆QRコード共有

今回のワークショップでは最後に、作成したアプリを発表する時間がありました。せっかくなのでアプリを投影するだけでなく、他の参加者にも手元で実際に触ってもらいたかったため、簡易的に公開して、発表時にQRコードで投影し参加者に共有するところまで行いました。

ただし、今回使用したデモPCには開発・公開用の環境は用意されていなかったため、ブラウザだけで手軽に利用できる Netlify Drop を使ってWebアプリを簡易公開しました。

このNetlify Dropは、作成したWebアプリのファイルをブラウザ上にドラッグ＆ドロップするだけで、公開用URLを発行できるサービスです。さらに、制限付きですがアカウント登録をしないでもアプリの公開ができるため、今回はこのNetlify Dropを選びました。

今回は Netlify Drop で発行されたURLをQRコードに変換し、参加者に読み取ってもらうことで、その場でアプリを体験してもらいました。

因みに…このNetlify Dropは、TavilyMCP経由でIBM Bobが探してくれ、使い方もBobが教えてくれました！！

Netlify Dropで任意のパスワードを設定して公開＆共有する場合は、有償のProプランが必要です。
https://docs.netlify.com/manage/security/secure-access-to-sites/password-protection/

無償版で利用する場合は、個人情報・機密情報・APIキーなどを含むファイルはアップロードしないよう注意が必要です。

Netlify Dropでの公開＆QRコード共有の流れ

それでは実際の流れを紹介していきます。この記事では、とにかく手軽に試せることを重視して、Netlify Dropを使ってアカウント登録なしでアプリを公開します。
そしてQRコードの表示については、「PCでアプリを開くと、そのページのURLからQRコードを自動で作って表示する機能」をIBM Bobに作ってもらいたいと思います。

１．作ったアプリにQRコード表示機能を追加してもらう

まずNetlifyで公開する前に、これはIBM Bobに作成アプリを修正させて、発表用のQRコード表示機能を追加してもらいましょう。アプリ修正後のイメージは以下画像の通りで、追加する機能は主に三つ。

❶現在ブラウザで開いているページのURLを取得する
❷上記のURLをQRコードを生成する
❸Netlify Dropへのアクセス時に必要となるパスワードを、QRコードと一緒に表示できるようにする

アカウント登録なしの場合、Netlifyのページを開く際にパスワードの入力を求められます。❸は参加者がスマートフォンでQRコードを読み取った際にパスワードを入力できるよう、QRコードの近くに表示しているだけです。
口頭や別の方法でパスワードを伝える場合などは追加で作る必要はありません。

機能追加をするといっても元のアプリ（以下例ではapp.html）を参照して、以下のようにIBM Bobにお願いするだけです。

@app.html
以下の注意点を守って上記のアプリを修正し、PC表示時に既存のスマホ風UIの右側へQRコードパネルを追加してください。

• 既存のスマホUI・JavaScript・機能は崩さない
• QRコードには、そのHTMLを現在ブラウザで開いているページのURLを自動的に反映する
• QRコード生成に必要な処理は、利用するPCに開発環境や追加ソフトが入っていなくても、HTMLをブラウザで開くだけで動作する形にする
• 必要なライブラリ等がある場合は、HTML側から読み込める方法を採用する
• QRパネルはPCのみ表示し、スマホでは非表示
• パネル幅は発表時に見やすい余白・文字サイズにする
• QRコードの下に「アクセスパスワード」を大きく表示し、パスワードは画面上の「✏️ 編集」から変更できるようにする
• 入力したパスワードはブラウザに保存し、再読み込み後も保持する
• 未設定時は「発表前にアクセスパスワードを設定してください」と表示する

IBM Bobに修正をお願いしたところ、この例では単一のHTMLファイルでアプリを作成していたこともあり、ページのURL取得にはHTML内のJavaScriptを使い、QRコード生成用のライブラリはインターネット経由で読み込む形で実装してくれました。この方法であれば、発表に使うPC側に開発環境や追加ソフトをインストールしておく必要はありません。

これで、あとはNetlify Dropにアップロードして、発表用PCでURLを開くだけでQRコードが表示されるので、参加者はスマートフォンからすぐにアクセスできる形になります。

2．Netlify Dropで公開する

次にアプリをWeb上へ公開します。流れとしては以下の通り

❶アプリをNetlify Dropにアップロード
❷アップロード完了後に表示されるアクセス用パスワードをコピー
　※アカウント登録なしの場合パスワードは「My-Drop-Site」で固定
❸Openをクリックして発行されたURLにアクセス
❹パスワード入力画面が表示されたら、❷のアクセス用パスワードを入力
　※参加者がQRコードからアクセスした場合、同じくこのパスワードの入力が必要
❺パスワード❷を、QRコードパネルの「✏️ 編集」から登録＆表示しておく
　※口頭等、別の方法でパスワードを伝える場合は、表示の必要はありません

---

手順は以上で終わりで、あとはブラウザで発行されたURLを開きながらアプリの紹介をするだけです。
参加者には、スマホでQRコードからこのURLにアクセス＆パスワードは投影しているもの（ここでは「My-Drop-Site」）を入力してもらうだけで、アプリを手元で触っていただけます。

注意点としては、アカウントなしで作成した一時プロジェクトは、1時間以内にアカウントへ紐付けない場合、削除されるため、発表の直前にセットする必要があります。

これを避けたい場合は、Netlifyのアカウントを作って、以下のクイックスタートの通りに進めるのが良いと思います。
https://docs.netlify.com/start/quickstarts/netlify-drop-quickstart/

■ 学んだこと⑦：IBM Bob拡張機能

IBM Bobには拡張機能があり、これを入れることで日本語対応や編集機能の強化などができます。IBM Bobの拡張機能の概要や仕組み、使い方については以下の記事で詳しく解説されています。

ワークショップ当日は使わなかったのですが、後日試してみて便利だったものをいくつか紹介します。

１．Office Viewer

Word、Excel、PowerPoint、PDFなどのファイルを、エディター上でそのまま表示・確認できる拡張機能です。Excelファイルの編集・保存や、Markdownのプレビュー・編集などにも対応しています。

IBM Bobを使ってドキュメントやCSV、Markdownなどを作成・編集した際に、別のアプリケーションへ切り替えることなく、その場で内容や見た目を確認できるのがメリットです。 「Bobに作ってもらう → すぐ確認する → 必要ならBobに修正を依頼する」 という流れを一つの開発環境の中で完結しやすくなります。

２．Open in External App

エディター上のファイルを、PCにインストールされている外部アプリケーションから簡単に開くための拡張機能です。ファイルの種類に応じて、ChromeやFirefoxなど複数のアプリケーションを指定して開くこともできます。

IBM Bobで作成・修正したHTMLや各種ファイルを、実際に利用するブラウザーや専用アプリですぐ確認したい場合に便利です。Bobによるコーディングと、外部アプリでの表示・動作確認をスムーズにつなげられるため、確認作業の手間を減らすことができます。
特に私はSPSSModelerやCPLEXといったソフトウェアを触ることが多いため、IBM Bobから直接それらを開くうえで便利でした。

■ まとめ

ワークショップを通じて学びになったことを、雑多に書いてみましたが、いかがでしたでしょうか。
今回初めてIBM Bobを長時間使ってみて、単にコードを書いてもらうだけではなく、アイデア整理、情報収集、実装、確認、発表準備まで、作業全体を支援してもらえるツールだと改めて感じました。

また、非エンジニアである私でも日常業務に活用できそうな部分が多くありました。そのためこの記事でも、「コード生成」というより、もう少し広い意味での「資料作成やアイデアを形にするための活用」という観点から、便利だと感じた使い方を中心に紹介しました。

そのうえで個人的に特に印象に残ったのは、Bobとの会話だけで作業を進めるのではなく、適宜ファイルに落とし込む、作業を複数のセッションに分けるといった運用を工夫するだけでも、作業をより効率よく進められるという点です。
ChatGPTのような会話型AIと比べても、ユーザー側の使い方や運用によって活用の幅が大きく変わるため、こうした点は意識しておくとよいと感じました。

今回はワークショップを通じて感じたことを中心にまとめましたが、私自身も引き続きIBM Bobでいろいろ試しながら、便利だった使い方があれば紹介していきたいと思います。

■ 参考文献

・IBM Bob IDE Documentation

・「Subagent」と「Subtask」

・画像 → HTML

・AGENTS.mdの運用

・Model Context Protocol Documentation

・Tavily

・Netlify Drop

・IBM Bob拡張機能

・Open VSX