← 事例一覧へ
導入事例 · クライアント開発 / 可視化

AIとの対話が、そのままナレッジグラフになる。

AIとの対話からリアルタイムにノード・エッジを生成するナレッジグラフエディタを、COCONはOKIと共同でクライアント向けに継続開発・納品しています。117チケット・10万行超の実装を、品質テストを積み重ねながら丁寧にロールアウトし続ける納品パートナーシップの実例です。

https://davinci.cocon-inc.co.jp — 本番稼働中(Keycloak認証付き)
117
Jiraチケット(本プロジェクト)
19
Playwright E2E pass(0 fail)
48
全48チケットを体系調査
0
本番データ変更(undo-safe運用徹底)
課題 · THE CHALLENGE

求められたのは完成品ではなく、「信頼できる継続デリバリー」。

OKI(パートナー企業)は、ユーザーがAIと会話するだけでナレッジグラフが自動構築されるプラットフォーム「Da Vinci Graph」を構想していました。グラフドキュメントの同時編集、RAG連携のナレッジベース、Keycloak SSO認証——これらすべてを一つの製品体験にまとめる。しかも要求仕様は変化し続け、バグ修正・新機能・UX改善が並走します。

複雑なリアルタイム同期

React Flowによるグラフキャンバスと、Yjs WebSocketによるリアルタイム共同編集を同一UIに統合する必要があった。

多層エコシステム

フロントエンド(COCON管理のApache静的サーブ)とバックエンドREST/Keycloak/Yjs WS(OKIインフラ)の2クラスター構成で、デプロイ管理が分断されていた。

多段ゲートの品質担保

117件のJiraチケット(バグ・タスク・エピック)を、クライアントレビュー→PMレビュー→完了という多段ゲートで着実に通過させる必要があった。

テスト基盤の不在

アプリにdata-testidがほぼ存在せず、React Flow+MDXEditorというキャンバスドリブンなUIを外部から自動検証するには相当な工夫が必要だった。

解決 · WHAT COCON DID

触らず守る。E2Eで納品品質を証明する。

COCONはOKIのGitLab開発フロー(SemanticAuthoring/davinci/davinci-ui2)に連携しながら、次を担いました。

01
フロントエンドの継続的出荷

Next.js 14.2.4 + TypeScript + React Flow + Tailwind/DaisyUIの静的エクスポートビルドを維持しながら、UIX改善・バグ修正・新機能を週次でリリース。

02
Playwright E2Eスイートの独自構築

Da Vinciリポジトリに一切手を加えず、外部ブラックボックスとしてステージング(davinci-stage.cocon-inc.co.jp)に対して実行するスイートを独立構築。Keycloak SSOログイン・グラフキャンバス表示・ツールバー操作・テキスト検索(Ctrl+F)・ノード編集・アンドゥ/リドゥなど主要ユーザー動線を網羅。

03
RAG連携サポート + ドキュメント整備

OKIブランドのRAGナレッジベースをフロントエンド側で統合。production.env設定ガイドを英日バイリンガルREADMEに統合し、PMレビューブロッカーを解消。

実現の裏側 · WHAT IT TOOK
コードに触れずにテストを書く技術

PlaywrightがシステムChromeを使えないUbuntu 26.04環境、npmが壊れたsandbox、React Flowのoff-canvasエッジ(高さ3000〜8000px)——それでも19チケットを自動検証できる現実的なスイートを完成させた。

OKIインフラの深い理解

API/WebSocketパスに「semgraph」(OKI内部コードネーム)が使われていることに気づき、2クラスター構成・GitLab主体のワークフロー・Keycloakショートセッションなど実態を逆引きしてドキュメント化。

スプリント並走

セッション切れ→ログインリダイレクト、アンドゥ/リドゥ無効状態、グラフ検索→キャンバスパン、ノードツールチップなど、マージ済みチケットをstagingで即検証しフィードバックループを最小化。

READ-ONLY規律の厳守

Da Vinciリポジトリへの書き込みを一切行わず、クライアントの成果物に意図せぬ変更を与えることなく支援を継続。測れないもの(edge drag合成マウス限界など)はfixme明記で正直に報告し、真に合格したチケットのみをpassとした。

スクリーンショット · SCREENSHOTS

実物で、お見せします。

Da Vinci Graph — AIスレッドとグラフキャンバスが並ぶエディタ画面
AIとの対話とグラフ文書が並走するエディタ画面
COCON製 Keycloak 認証テーマ — ようこそ画面(英語/日本語 切替)
COCON製 Keycloak認証テーマ — ようこそ画面(英語/日本語 切替)
成果 · THE RESULTS

測れないものは誤魔化さない。正直なE2E報告。

納品品質 / E2E合格率 手動確認のみ・チケット網羅が困難 → Playwright E2E 19pass・継続自動検証
導入前 40% 導入後 92%+
19
E2Eテストpass(0 fail・2026-07-03実行)
36
マージ済みチケットを開発ブランチでread-only確認
2,234
Jiraステータス変更記録(117チケット中45件完了)
0
本番データ変更(undo-safe運用徹底)

本番URL https://davinci.cocon-inc.co.jp はKeycloak認証付きで稼働中。独自Playwrightスイートは主要チケット群を実機検証し、19 passed / 0 failed(2026年7月3日実行)。全48チケットの体系調査では、pass / cannot / gated / not-E2Eを明確に分類し、false positiveを排した誠実な合格率を報告しています。

※ 達成度イメージ(導入前 40% → 導入後 92%+)は、自社評価による代表値です。E2E合格数・マージ確認数・Jiraステータス変更数は実測値です。

← 前の事例 StudyLap 事例一覧 次の事例 → Keiyaku AI

この事例に近い課題をお持ちですか?

まずは、いま向き合っている課題をお聞かせください。実装まで責任を持って伴走します。

課題をお聞かせください