こんにちは、職業「戸倉彩」です。
IBM Bob を使ってWebアプリケーションを開発していると、「作成した画面をすぐに確認したい」、「ローカルで起動したアプリをそのまま見たい」 と思う場面がよくあります。
IBM Bobでは、統合ブラウザー（Integrated browser）機能を使うことで、IBM Bobの画面内にブラウザを埋め込み表示 できます。外部のブラウザアプリを別途開く必要なく、Webページやローカルアプリケーションの画面をその場で確認できる便利な機能です。なお、アプリ開発中でなくても、URLを入力するだけで任意のWebページを表示 する通常のブラウザとしても利用できます。
この記事では、IBM Bobの統合ブラウザー機能を使ってブラウザ表示する方法をステップごとにまとめます。IBM Bobを使い始めたばかりの方もぜひ参考にしてください。
※本記事は、IBM Bob 2.0（macOS Tahoe）での動作確認をもとに作成しています。記事内のスクリーンショットも同環境で取得しています。
この記事で学べること
この記事では、以下の内容を確認します。
- 統合ブラウザー機能とは
- 事前に確認すること
- IBM bobの中でブラウザを表示する方法
- うまく表示されない場合の確認ポイント
1. 統合ブラウザー機能とは
統合ブラウザーとは、IBM Bobの作業画面の中にブラウザ（Webページを表示するウィンドウ）を埋め込んで表示できる機能です。
通常、Webアプリケーションの動作確認を行う場合は、Google ChromeやMicrosoft Edgeなどの外部ブラウザを別途開いてURLを入力します。一方、統合ブラウザーを使うと、IBM Bobの作業画面内でそのままWebページを確認できるため、画面を何度も切り替える手間が省けます。
たとえば、以下のような場面で便利です。
- 作業中にドキュメントや参考サイトをIBM Bob内でさっと確認したい
- IBM Bobで作成したWebアプリケーションの画面を確認したい
-
localhost（ローカル環境）で起動したアプリケーションをすぐ表示したい - コード修正後に画面の変化をその場で確認したい
- Bobに修正を依頼しながら、同じ画面内で動作確認したい
💡 Hint:
Integrated browserを使うと、コード編集・Bobへの指示・画面確認をすべてIBM Bobの中で完結させやすくなります。ハンズオンやデモのように、画面を切り替える回数を減らしたい場面でも特に有効です。
2. 事前に確認すること
統合ブラウザー機能でWebアプリケーションを表示する前に、以下を確認しておきます。
- IBM Bobが起動していること
- Webアプリケーションを表示する場合は、先にアプリケーションを起動していること
- 表示したいURLを手元に控えておくこと
ローカルアプリケーション（自分のPCで動かしているアプリ）の場合は、以下のようなURLを利用することが多いです。
http://localhost:3000
http://localhost:5173
http://127.0.0.1:8000
📝 Note:
localhostとは「自分のPC」を意味するアドレスです。後ろの数字（例：3000、5173）はポート番号と呼ばれ、アプリケーションやフレームワークによって異なります。ターミナルに表示される起動メッセージで確認できます。
3. IBM Bobの統合ブラウザーを開く
IBM Bobの中でブラウザを表示するには、以下のいずれかの方法で開けます。
方法1：メニューから開く
画面上部のメニューバーから [表示]メニュー → [ブラウザー] を選択します。
方法2：コマンドパレットから開く
-
[表示]メニュー → [コマンドパレット] を開く
⌨️ショートカットキー 💻Windows：[Ctrl]+[Shift]+[P] / 💻MacOS: [Cmd]+[Shift]+[P] -
「ブラウザー：統合ブラウザーを開く (Browser: Open Integrated Browser)」 を検索して選択する
統合ブラウザーが開いたら、以下の手順でページを表示します。
- ブラウザ画面がIBM Bob内に表示される
- アドレスバー（URLを入力する欄）に表示したいURLを入力する
- Enterキーを押してページを表示する
方法3：HTMLファイルを右クリックして開く
- エクスプローラーでhtmlファイルを選択する
- 右クリックし、[統合ブラウザーで開く] を選択する
4. 統合ブラウザーの開発ツール「F12」 (おまけ)
統合ブラウザーのURLバーの右側にある >_ のような記号が描かれたターミナル風アイコンをクリック、または「F12」キーを押すと 開発者ツール を開くことができます。
開発ツールでは、ページ内の要素の検査、コンソール出力の表示、ページの問題のデバッグを行うことができます。
5. うまく表示されない場合
統合ブラウザーでページが表示されない場合は、以下のチェックリストを順番に確認してください。
アプリケーションが起動しているか
ローカルアプリケーションを表示するには、先にアプリケーションを起動しておく必要があります。
ターミナルでエラーが出ていないか確認してください。npm run dev などのコマンドを実行していない場合は、まず起動してください。
URLが正しいか
localhost の後ろのポート番号が違うと、ページは表示されません。
たとえば、アプリケーションが以下で起動している場合、
http://localhost:5173/
統合ブラウザーにも同じURLを入力します。
3000、5173、8000 など、利用するポート番号はアプリケーションによって異なります。ターミナルの出力で確認しましょう。
起動に時間がかかっていないか
アプリケーションによっては、起動完了まで数秒〜数十秒かかる場合があります。
ターミナルに起動完了のメッセージ（例：ready in XXXms、server running）が表示されてから、統合ブラウザーでURLを開いてください。
まとめ
この記事では、IBM Bobの統合ブラウザー機能を使って、IBM Bobの中でブラウザ表示する方法を紹介しました。
統合ブラウザーを使うことで、IBM Bobの画面内でWebページやローカルアプリケーションを確認でき、外部ブラウザを行き来する手間を大幅に減らせます。
開発中のWebアプリケーションを確認する基本的な流れは以下の通りです。
- IBM Bobでプロジェクトを開く
- ターミナルでWebアプリケーションを起動する（例：
npm run dev） - ターミナルに表示されたURLを確認する
- Integrated browserを開く
- URLを入力してEnterを押し、画面を確認する
コード修正・Bobへの指示・画面確認を同じ作業環境で進められるため、Webアプリケーション開発の流れがよりスムーズになります。IBM Bobを使い始めたばかりの方も、ぜひこの機能を試してみてください。
参考リソース
これからIBM Bobを使い始めたい方は、無料トライアル登録とインストール手順をまとめた過去記事もあわせて参考にしてみてください。
今回は以上となります。
Have a Bob-tastic day! Bobと一緒に素敵な一日を！
※X (旧Twitter)で最新情報配信中 @ayatokura