IBM Bob と一緒にオフィス在席確認アプリ「ここいる」を作った話【実行編】

はじめに

仕様編 と 実装編 では、IBM Bob と会話しながらアプリを設計・実装していくプロセスを紹介しました。

この記事では、実際にスマートフォンで動かしてみた様子をスクリーンショットとともに紹介します。
最後に今後の改善点もまとめました。

実際に動かしてみる

（１）QRコードを読み取る

アプリへのアクセスはとても簡単です。表示されているQRコードをスマートフォンのカメラで読み取るだけです。

インストール不要です。QRコードを読み取るとそのままブラウザでアプリが起動します。

（２）ログイン画面

QRコードを読み取ると、ログイン画面が表示されます。

シンプルな画面で、名前を入力して「ログイン」ボタンを押すだけです。
「※ 位置情報の使用許可が必要です」と表示されているように、ログインボタンを押すと位置情報の許可ダイアログが表示されます。

（３）名前を入力してログイン

名前を入力してみます。今回は「織田信長」でログインします。

名前はなんでも入力できます（プロトタイプのためログイン認証はありません）。
「ログイン」ボタンをタップすると位置情報の使用許可を求められます。「許可」を選択するとマップ画面に移動します。

（４）フロアが表示され、現在の位置と名前が表示される

ログインすると、自動的に現在いるフロアのオフィスレイアウトが表示されます。

注目ポイントはこちらです：

• マップ上のオレンジのピン（🟠） が自分の現在地です。「織田信長」と名前が表示されています
• 画面左上のフロアタブが 「6F」 になっており、自動的に現在のフロアに切り替わっています
• 画面下部の「自分の情報」欄には以下が表示されています：
  • 名前：織田信長
  • 階数：6F
  • 高度：56.0m（気圧センサーで取得）
  • 精度：±18m
• 「● WebSocket 接続中」 と表示されており、リアルタイム通信が確立されています

GPS精度は最初±18mでしたが、しばらく経つと±3mまで向上しました（次のキャプチャ参照）。

（５）他の人がどこにいるか検索する

「メンバー」タブの「名前で検索」に「豊臣」と入力してみます。

検索ボックスに「豊臣」と入力すると、リアルタイムで絞り込まれ「豊臣秀吉」が6F・14:46にいることが分かります。

自分の情報欄を見ると、GPS精度が ±3m まで向上しているのが確認できます。屋内でもしばらく待つと精度が上がることがわかります。

（６）フロアマップを見ると「豊臣秀吉」が表示されている

「マップ」タブに戻ると、フロアマップ上に「豊臣秀吉」のピン（青）が表示されています。

• オレンジのピン（🟠）：自分（織田信長）の現在地
• 青のピン（🔵）：豊臣秀吉の現在地

2人ともオフィスレイアウト上の正しいエリアにピンが表示されています。同じフロアに複数人がいる場合も、それぞれのピンが表示されます。

動かしてみての感想

よかった点

位置精度が想定より良かった
スマートフォンの屋内GPSは精度が低いと聞いていましたが、しばらく待つと ±3m まで向上しました。オフィス内のどのエリアにいるかを把握するには十分な精度です。

フロア自動判定が正確に動いた
高度56.0mを取得し、自動的に6Fと判定されました。階段やエレベーターで移動すれば自動的にフロアが切り替わる（初回のみ）のも便利です。

WebSocketのリアルタイム性が高い
5秒ごとに位置情報が更新されるため、移動した場合も素早く反映されます。「● WebSocket 接続中」の表示でリアルタイム通信の状態が一目でわかります。

操作がシンプル
QRコードを読み取る → 名前を入力する → ログインする、の3ステップだけです。アプリのインストールも不要なため、誰でもすぐに使い始めることができます。

課題に感じた点

GPS精度の初期値が低い
最初は±18mの誤差がありました。しばらく待つと±3mになりましたが、すぐに正確な位置が必要な場合は手動設定で補う必要があります。

建物の高度と実際のフロアのずれ
高度56.0mと表示されましたが、仕様では6Fの閾値を49.0m以上としているため問題なく動作しています。ただし、気圧の変動（天気・エアコン等）により高度の計算値がずれる場合があります。

今後の改善点

今回はプロトタイプとして作成しましたが、実際の運用に向けていくつか改善したい点があります。

1. フロア判定精度の向上（WiFi連携）

現状は気圧センサーの高度値でフロアを判定していますが、エアコンや天気の影響で誤差が出ることがあります。

改善案：WiFiのIPアドレスでフロアを補正する

フロアごとにサブネットが分かれている場合、サーバー側でクライアントのIPアドレスからフロアを判定できます。IPアドレスからフロア判定することにより精度が上がります。

2. データ永続化（IBM Cloudant の導入）

現状はサーバーのインメモリにデータを保持しているため、サーバーが再起動するとデータが消えます。

IBM CloudantをCode Engineにバインドすることで、再起動後もデータが保持されます。

# Cloudant サービス作成
ibmcloud resource service-create kokoiru-cloudant \
  cloudantnosqldb lite jp-tok

# Code Engine へのバインド
ibmcloud ce app bind --name kokoiru \
  --service-instance kokoiru-cloudant

3. ログイン認証の追加

現状は名前入力だけなので、なりすましが可能です。

改善案：

• 社内メールアドレスでのログイン
• IBM App IDとの連携によるSSO認証

4. 通知機能

「〇〇さんが近くにいます」「〇〇さんが△Fに移動しました」といったプッシュ通知があると、さらに便利になります。

5. 在席履歴・統計機能

「今日何時から何Fにいたか」「よく使う席はどこか」といった履歴・統計機能があれば、オフィス利用の最適化にも活用できます。

6. ルーム機能（応用編）

現状はログインした全員が同じマップで位置情報を共有していますが、ルーム機能を追加することで、特定のメンバーだけで位置情報を共有することができます。

例えば、プロジェクトチームごとにルームを作成すれば：

• チームAのルーム：Aプロジェクトのメンバーだけが見える
• チームBのルーム：Bプロジェクトのメンバーだけが見える
• 全社ルーム：全員が見える（現在の動作）

実装イメージ：

ログイン時にルームIDを選択（または入力）
  ↓
同じルームIDのユーザーだけをマップに表示
  ↓
WebSocketの接続もルームごとに分離

ログイン画面にルーム選択を追加するだけで実現できるため、比較的シンプルに実装できる機能です。来客対応チームや特定プロジェクトなど、用途に応じたグループでの活用が広がります。

まとめ

IBM Bobを使って作った「ここいる」を実際にスマートフォンで動かしてみた結果、プロトタイプとして十分な動作を確認できました。

プログラムをほぼ書いたことがない私でも、IBM Bobとの会話だけでスマートフォンで動くリアルタイムWebアプリを作ることができました。コードの中身を完全に理解していなくても、「こういうものを作りたい」「ここを直してほしい」「これはどういう動きですか？」という会話を重ねるだけで、アプリが出来上がっていく体験は非常に新鮮でした。

AIコーディングアシスタントは「プログラマーが使うもの」というイメージがあるかもしれませんが、アイデアと目的さえあれば誰でも活用できるツールだと感じています。

最後まで読んで頂きありがとうございました。

この記事はシリーズの第3弾です：

• 仕様編 — Bobと会話しながら仕様を決めた話
• 実装編 — 実際にコードを書いてデプロイした話
• 実行編（本記事） — 実際に動かしてみた話

本記事に記載のURL・アカウント情報はマスクしています。