IBM Bob でAI駆動開発『QC-Playbook』

IBM Bob を使ってAI駆動開発でQC７つ道具のひとつをつくった。
Quality Control Playbook は、製造現場の担当者による、担当者の目線での、小集団活動としての品質改善を効率よく実行するための品質管理手法です。 担当者の意見をしっかり取り込むことがとても大切です。
QC-Playbookは、メンバー全員の意見を出し合いやすい環境を作ります。このアプリは楽しく、意見やアイディアを引き出すためのツールです。

Transcript

1. JICUG（Japan IBM Cloud User Group） IBM Bob でAI駆動開発 『QC-Playbook』 2026/09/25 鹿野市郎
2. はじめに 今月から IBM Bob を使って、毎月異なるテーマのアプリをAI駆動開発 してみようと思います。 第一弾は・・・
3. カイゼンこそ日本流製造業のチカラ Quality Control Playbook は、製造現場の担当者による、担当者の目線での、小 集団活動としての品質改善を効率よく実行するための品質管理手法です。 担当者の意見 をしっかり取り込むことがとても大切です。 QC-Playbookは、メンバー全員の意見を出し合いやすい環境を作ります。 「それは出来ません」ではなく、「こうすれば出来ます」の声に変えることに挑戦しましょう。
4. 自己紹介 KANO Ichiro ◼ 所属/経歴 鹿野 市郎 • 電機メーカー勤務 1. サーバーのグローバル製造技術/営業 2. データセンター・プロジェクト 3. マネージドサービス（マルチクラウド・ハイブリッドクラウド） ◼ 個人活動 • • • • • • • 副業：FunnyGeek ITサービス（ファニーギーク） ボランティア：CoderDojo青梅（主宰/Champion） IBM チャンピオン：IBM Champion 2018-2026 Datadog アンバサダー：Datadog Ambassador 2024-2026 特定非営利活動法人 青梅こども未来 プログラミング講師 特定非営利活動法人 青梅の虹any, Rainbow Room プログラミング講師 特定非営利活動法人 多摩川流域生活支援ネットワーク, ポラリスキッズ プログラミング講師
5. 私の開発ステップ アプリの 要件定義 基本設計 コーディング 修正 「コーディングする前に、 不足している設計要素 があったら質問せよ」 急いでコーディングに着手せず、丁寧に基本設計すべきです
6. アプリの要件定義 要件定義は、自然言語だが、プログラミングするくらいの気持ちで丁寧に機 能を列挙した方がいい。 このアプリで、できるコトは下記の通り • 複数人が同時に同じ画面を見ながら、アイディアを出し合うことができる（ブレーンストーミング） ✓ （課題）ペンで付箋に書き込んで、ホワイトボードに貼り付けて分類していたが、付箋ゴミが出る。書き直しができない。物理 的に会議室などに集まらないと実行できない。早く書くので字が読みにくい。 ✓ （解決策）オンラインで共同作業できる。テキスト修正が容易。データ化できるので、あとで分析が効率化。見やすい。 • 画面背景を交換して、①ブレーンストーミング(白紙) ②SWOT分析 ③5 forces分析 ④KPT法 ⑤GRID ⑥特性要因図(フィッ シュボーン)の枠で整理できる • データ保存：データをJSONファイル形式でダウンロードできる。同JSONファイルを読み込むことができる。 • 画面下部のテキスト入力BOXでテキストを入力する。 • テキスト入力後[Enter]を押すと、テキストBOXオブジェクトが画面下部から登場し、キャンバスの空いている場所に1秒程度で移動 する。最初は早く移動し、徐々にゆっくりランディングする。 • 作成したテキストBOXは［削除｜テキスト編集｜デザイン変更］ができる • 作業ステップ準備～ステップ８まで、ページ切り替えできる。それぞれのページでテキストBOXの位置や背景などをJSONファイルに記 録する。またヘッダに記録したステップはゲージ表示したい。（イメージ：STEP▪▪▪ □□□）四角形に数字表示
7. アプリのGUIデザイン 画面レイアウトは、メニューの並びやアイコンの指定を画像でプロンプト指示した このアプリのGUIデザインは下記の通り • CSSは Bootstrap を使う • CIカラーは、緑/黄緑 • テキストBOXの色を変更できる［赤/緑/青/灰/白/黒］ • テキストBOXは、コネクタおよびコネクタ接続点を［追加|切り離し|削除］できる • テキストBOXの文字サイズは、［10 / 12 / 14 / 16 / 24 / 32 px］変更できる • コネクタ終端はテキストBOX接続点と繋がる。コネクタ接続点はマウス操作で移動できる • ゴミ箱アイコンでコネクタBOXを削除できる アイコンでも、テキストBOX色を変更できる
8. アプリのインフラ要件 サーバーの指定、およびコード配置、ミドルウェアは設計並みに指定。 コード言語の選定やライブラリ選定に迷ったら質問を加えてみる。 このアプリの実行環境は下記の通り • 設計およびコード保存するディレクトリは </home/kano/qcplaybook> • クライアントアプリのHTML/CSS等は </home/kano/www> に配置し、Nginx のエイリアス設定をする。ユーザーは、 ブラウザで <https://＊＊＊＊.com/qcplaybook/> にアクセスする。 • バックエンドアプリは、python (flask) または javascript (node.js) のいずれかでコーディングする。 • アプリは docker-compose コンテナで稼働させる。 • docker-compose には 他の dockerコンテナアプリ dayport と同様に datadog コンテナと通信できるようにする。ただ し、監視モニタリングはまだ、計装しないこと。 • クライアントアプリは、p5.jsがよいだろうか？他に推奨があれば提案してほしい。 • バックエンドアプリのポート番号は 3001 を使ってよい。コンテナアプリなら自由に定義せよ。
9. IBM Bob の起動からスタート
10. IBM Bob の起動からスタート 要件定義書を作るためのアプリ要求は、画像・画面レイアウトがあったのでPowerPoint ファイルでPDFファイルを出力して、PDFをプロンプトにアップロードした。 アプリ開発の要求.pptxを読んで、 要件定義.mdを執筆してほしい。 pptx形式は読めないが、 PDF形式なら読める
11. 要件定義.md を作成 約 150 ページの要件定義.mdが生成された。ん？ 「5.課題・検討事項」って何だ？ # QC-Playbook アプリ 要件定義書 ## 1. プロジェクト概要 ## 2. 機能要件 ### 2.1 ブレーンストーミング機能 ### 2.2 テキストBOX操作 ### 2.3 コネクタ機能 ### 2.4 背景（分析フレーム）切り替え ### 2.5 作業ステップ管理 ### 2.6 KPT評価（ステップ５） ### 2.7 データ保存・読み込み ### 2.8 効果音 ## 3. 非機能要件 ### 3.1 GUIデザイン ### 3.2 クライアントアプリ ### 3.3 バックエンドアプリ ### 3.4 インフラ・実行環境 ## 4. 用語定義 ## 5. 課題・検討事項
12. ## 5. 課題・検討事項 って何だ!? 設計すべき要素の候補を絞り込んでいなかった。ここでAIに質問させる。 | # | 課題 | 内容 | |---|------|------| | 1 | クライアント技術選定 | p5.jsを採用するか、他のキャンバス系ライブラリ（Fabric.js、Konva.js等）と比較検討が必要 | | 2 | リアルタイム同期方式 | 複数人同時編集の実現にWebSocket（Socket.io 等）の採用を検討する | | 3 | バックエンド言語選定 | Flask（Python）vs Node.js の比較選定が必要 | | 4 | 監視計装 | Datadog による監視計装は将来対応とする | 次に、基本設計.md を作成する。 未定義の要件や考慮すべき設計要素があれば質問せよ。 設計の方向性を決めるための重要 な質問が 4点 あります。
13. 質問に回答する AIが候補から選択できるように、それぞれの候補のメリデメを教えてくれる これらの候補から選択する 同期アプリの実績がある WebSocket にする
14. 質問に回答する どんどん、候補を絞り込んでいく フロントとバックエンドを統一するので Node.js にする
15. 質問に回答する はじめてだけど、コネクタ要件に最適な Konva.js を試す
16. 質問に回答する 最後の、選択絞り込み 複数のテーマを同時並行できるように ルーム機能 を付ける
17. 基本設計書の作成（1分で完成） 基本設計書ができた
18. でも。しつこく検討漏れがないか確認する コーディングの前に、あと何を実行すべきか？
19. 考慮の少ない要件を示唆してくれた コーディングを急がないことが、後戻り作業を生じさせないコツ。 再度、AIに質問させて、人間は選択肢から選ぶだけ。
20. コーディング開始できる 要件定義から、基本設計書を生成した。 レビューもした。コーディングの準備は整った。
21. タスクのtodoツールを承認。 コーディングは、わずか8分で完了。 丁寧に基本設計をしたことで、効率よくアプリ開発。トークン消費を少なく抑えることができた！ 4コイン（10%）消費
22. アプリを起動してみる アイコンやメニューの操作性がイマイチな感じなので、修正したくなる
23. 修正、修正、修正、
24. 修正に要するBobコイン消費は大きい 4コイン（10%）消費 約20コイン （50%）消費 修正の場合も、できるだけ詳細な設計指示をしたほうが良さそうだ
25. 完成品（デモ） みんなで ブレーンストーミング できる キャンバス 。 オンライン で 付箋 に書き出し、ホワイトボード に並べるやつ。
26. まとめ • 小集団活動におけるカイゼン手法に用いるQCツールをデジタル化できた • AI仕様駆動開発でアプリを開発 • 自然言語でしっかり要件定義書と基本設計書をつくることで、トークン消費量 を抑えたコーディングをできることが証明された。 ✓ アプリの全コーディングに トークン相当 4コイン（10%）消費 ✓ アプリの一部修正だけだが、トークン相当 約20コイン（50%）消費 伝えたいこと： AIコーディングは焦って着手せず、基本設計の検討抜け漏れが無いようにしつ こくAIに質問させるとよかったです