JICUG あなたのAI駆動開発パートナー IBM Bob を使ったアプリ開発 vol.5

JICUG あなたのAI駆動開発パートナー IBM Bob を使ったアプリ開発 vol.5「IBM Cloud Code Engine での Web 3D + IoT な仕組みを IBM Bob に併走してもらったよもやま話」の登壇資料です。

◆スライド内の素材は以下を使用させていただいております。ありがとうございます！

・シルエットデザイン http://kage-design.com/
・human pictogram 2.0 http://pictogram2.com
・ICOOON MONO http://icooon-mono.com/
・Adobe Stock https://stock.adobe.com/jp

Transcript

1. 20260925_JICUG 1 IBM Cloud Code Engine での Web 3D + IoT な 仕組みを IBM Bob に併走してもらったよもやま話 ワンフットシーバス 田中正吾
2. 私の話はスライドを後ほど共有します。 話す内容に注力いただいて大丈夫です！ 2
3. 15 分くらいで話します！ 3
4. 田中正吾（たなかせいご） 屋号ワンフットシーバス 代表 2004年よりフリーランス転向以後、FLASH 制作を中心にイ ンタラクティブコンテンツを主に行い現在に至る。最近では WEBフロントエンドをベースにしながらも、情報とインタ ーフェースが合わさるアプローチという視点で 生成 AI ・ IoT ・ XR といった技術も取り入れながら活動しています。 ウォンバットが好き。 4
5. IBM Cloud Code Engine での Web 3D + IoT な仕組みが Bob と一緒にできました！ Hono + Vue + Bootstrap + Babylon.js + MQTT/WebSocket でできてます 5
6. このような仕組みです IBM Bob で開発した今回の仕組みから IoT ライトが操作できる そもそも話で IoT や 3D までついて Bob がこれるのか不安だった 6
7. ひとまずライブデモしてみます 3D 立方体と連動して光るよ 7
8. よもやま話 IBM Bob と一緒にどう動けたか！ 8
9. 経緯をしっかり残す仕組みは基礎として大切 https://github.com/1ft-seabass/my-ai-collaboration-patterns/tree/main/patterns/docs-structure 9
10. 出口のセキュリティチェックも大事 今回は Code Engine が公開リポジトリでとるのでなおさら気をつける必要あり https://github.com/1ft-seabass/my-ai-collaboration-patterns/tree/main/patterns/setup-pattern/setup-securecheck 10
11. IBM Code Engine の指示書でうまくスタートできた 今まで実験した Bob による初期構築・デプロイフローをまとめて仕様書にしたらすんなり！ 11
12. フロントエンドと 3D まわりも得意分野なので しっかり仕様書にしてバッチリ動いてくれた Vue リアクティブと 3D 部分は丸投げできないので、なるべく細かく指示を固めたらうまくやってくれる！ 12
13. IoT 面や Code Engine 側の環境変数扱いも しっかり指示書で伝えたら動いてくれた IoT は迷わせやすくトークンの消費のもとなのでしっかり。環境変数の扱いも丁寧に。 13
14. ちょっと経緯ノートからもふりかえってみる 時間があればエクストラで話してみます！ちなみに、一連の開発で約 40 コイン消費で良い感じ。 https://github.com/1ft-seabass/ibm-bob-codeengine-sample-02/tree/main/docs/notes 14
15. まとめ Bob に IoT も 3D も丸投げせず丁寧に仕様書で伝える とちゃんと動いてくれた！ Code Engine のデプロイも今まで得た知見を込めた指 示を出せば迷いなく Bob が自走！ 技術を組み合わせるプロトタイプでも指示書で Bob が併走できた！たのしい！ 15