最近のCosenseの面白い開発とAI
こんにちはshokai.icon
shokaiです
https://gyazo.com/554ef51a0667521be9137fef58a92f27
Cosenseを開発しています
右側のメニュー内のStart presentationを押すとスライドになります
Cosenseを9年作り続けて煮詰めたプロダクト設計の極意
という話をしようと思っていたけどshokai.icon
ユーザー観察や意思決定の話は社外に出しにくい
どうにも説教くさくなる
なにより、最近は開発が楽しすぎて、それどころではない！！
というわけでいつも通り近況を話します
1. 最近開発したもの
2. 年始からDevinを使い始めた
3. Smart Context
このサービスです
1ページ1トピックで書いたページをリンクさせ合って、複雑な情報を表現できる
51万ユーザー
2000万ページ
約9年開発してる
最近の導入事例
shokai.iconが最近やってる事
1. WiKiとしてのCosenseの機能開発
2. Business plan向けの機能開発
3. KCSの機能開発
4. HelpfeelのFAQシステムとの連携
5. Cosenseのインフラのメンテナンス、運用、アップデート
6. AIを開発に活用していくぞ
最近の開発
https://gyazo.com/f4235ad44fd8eaeee99f49c7701e26de
すごい勢いで実装してくれる
https://gyazo.com/fff4b319f306af02fb502ba0b9450792
$1.99
Smart Contextという新機能を使っていますshokai.icon
ここまで掴みの話
1. 最近開発したもの
2024年のtech confからの差分
https://gyazo.com/796f0614371349905de16ef3feeadd6e
お互いの言及箇所までスクロールしてハイライトする
ページの下の方で相互にリンクしあっているページ同士を行ったり来たりしやすくなった 銀行のコールセンター向け問い合わせ対応画面
https://gyazo.com/2907b24e84f2a16fcdc170ed3dc8bdac
電話オペレーターがすごく知的な作業をする
問題解決した後、それをドキュメントにする
作業内容の正しさや速度が評価項目になっている
https://gyazo.com/091f1573bfa77583b8c708e5644314c1
member全員の合計閲覧時間が長いページ
ユニーク閲覧者数が多いページ
member毎のページ検索・閲覧・編集・作成回数
https://gyazo.com/b11f133837e85fd2b1da1d9c9fdf1776
左上のメニューから見れる
https://gyazo.com/105eb0b6e49dd85819a81ebbc50c8018
普通のBusiness projectではない
private projectのデータを読み書きできる
もうちょっと調整したらドキュメント書きますshokai.icon
でもAIコーディングエージェントを使っていきたい。楽しいので
適切にコンテキストを与えると、まあまあ良い感じのコードが出てくる事がわかってきた
2. 年始からDevin.iconDevinを使い始めた AIさんには、創造的な作業は一旦やめていただく
新機能の開発しようとしたら、わりとハチャメチャな事になったので
Dependabot.iconが作る無味乾燥なプルリクをDevin.iconにいい感じにしてもらう
ライブラリのバージョンだけ上げて
CIが落ちてても何もしてくれない
Devin.iconが教えてくれるようになった
どんなnpmなのか
何が変更されたのか
https://scrapbox.io/files/67f2c9f98dbb52077b50b20e.png
npm同士の依存関係
Cosense内のどこで、何のために使われているのか
https://scrapbox.io/files/67f2c95c6c8786e0e2405ce9.png
Devin.iconがGitHubにあるリリースノートの原文を読むようになった
https://scrapbox.io/files/67f2c9cbdb7a0b52286e4367.png
Devin.iconがプルリクしてくれるようになってきた
https://scrapbox.io/files/67f2c7426e773ff09fde87c3.png
どんなライブラリがプロダクト内のどこで使われてて、バージョンアップで何が変わったのか認識できているのだから、プロダクト側のコードも変更できる
Devin.iconがリリースノートに書かれていないライブラリ内部の変更を見つけるようになった
https://gyazo.com/398e9cbb12e66b8b149e9269832f4d2c
だんだんshokai.iconが人力でやってた事を、Devin.iconがやってくれるようになってきたな
ドキュメントちゃんと読ませる
読み方を指示する
コードとドキュメントを読み比べさせる
しっかり読ませて頭を温まるとまともになってくる
もっとDevin.iconにドキュメント読んでもらおう
pull requestへのコメントから、Devin.iconにコーディングガイドラインを作ってもらう
https://gyazo.com/dd2c207102ff775a1cd8dbcff5e59b85
shokai.iconが直接書くのではなく
日常的な振る舞いを見てDevin.iconに書いてもらう
人間のpull requestを、コーディングガイドラインを元にDevin.iconがレビューしてくれる
https://gyazo.com/9a442dd38044d52afa0cbaa6fcdb1152
プログラムとして問題ない事は結構レビューしてくれるが
まあそれだけでも結構ありがたいshokai.icon
コーディングガイドラインに書かれてないコンテキストが見えてない
機能のコンセプトがおかしい、みたいな指摘はしてくれない
https://gyazo.com/5399c0716667a348fcbb5d9b55c05fd5
こういうAI使いこなしテクニックがいつまで必要なのかは不明だが
コードレビューの都度対応していた知識が言語化されて
いろんな環境のAIで実行できる
自分が解体されていく感
楽しいshokai.icon*5
@shokai: 9.5万行 9年間ぐらい開発してるプロダクトでClaude Code使ってるけど、高速に動く腕がもう1本生えてさらに分身もできるようになった気分で良い感じです 完成形のイメージだけでなくプロセスのイメージも説明・共有できる人なら楽しく便利に使えるツールだと思う
@shokai: 眼の前の作業が、さらにAIに食わせてスケールさせる事を前提とした、もう1つ新しい意味を持った作業になる。 作業を分析させてガイドライン生成し、人間が監修し、それを元に他の人の手元でも作業させる
Devinのようなみんなで共有してSaaS上で動くAIも併用した方が面白い
意識が高まってきたshokai.icon
完璧ではないけど、労力の50%ぐらいは助かる品質のものが出てくる印象ですshokai.icon
知見
Devin.iconの挙動
完成形の表現からプランのリストを生成して
各プランをさらに分解して
そこからUNIXコマンドを生成して
中間ファイルをつなぎあわせて
最終出力する
最初のプランのリスト生成の時点で間違えて、うまくいかない事が多い
とんでもない方向に飛んでいってしまう
完成イメージとプラン立案の間のジャンプ方法は、本当に色々な流儀があるのだろう
例： 依存ライブラリの探し方
「package.jsonを読め」ではなく
「 git grep -C15 ライブラリ名で探せ」
ここまでの詳細ログ
プロンプトなども全部あります
よし、新機能開発に使っていくぞshokai.icon
LLMからどのようにサービスを扱われるかを記述するファイル <Plan type="enterprise"></Plan>の中にエンプラ用機能を書いていたりしている
XMLとしてはvalidだが、そのXMLの読み方の定義は書かれていない パラメータを代入できる箇所の示し方も{id}だったり<TOKEN>だったり、カッコの形式はなんでもいい
なんとなく雰囲気でLLMに伝われば良い
あるいはLLMが最初にllms.txtを読んだ時点で理解してなくても、利用側のプロンプトで調整できそう
って事なんだなと理解したshokai.icon
諸説ある
1ファイルにまとまってると便利
これたぶん重要
好きなAIサービスに持って来やすい
LLMから外部サービスを呼び出せる
普通にMCP使うと、現状のCosenseと相性悪い
大抵のMCP server
Cosenseでの理想的なページ検索
ブラウザ側でのあいまい検索
Cosenseは小さいページがたくさんできる
1トピック1ページで書き、リンクさせあって複雑な情報を説明させる
100ページ読むのに100回HTTP requestが必要
AIエージェントとして現実的な速度で動作させれるのか？
Cosense projectすぐ数万ページ超える
デカすぎて無理
一旦こういう方針になったshokai.icon
100ページ読むのに100回HTTP requestしないで済む方法で、Project内の一部を取り出したい
というわけで最初に戻る
3. 最初に見せたClaude Codeへのフンワリ指示の裏側
まずページを書きます
https://scrapbox.io/files/67f817fdbd74c05dde8c588d.png
Export for AIする
https://gyazo.com/00166ac051dcc224d45c46a21b02d1e0
1 hop / 2 hopが選べる
1ファイルにまとまる
https://gyazo.com/c6d88e85a3839a18b6c49f80ee057b1b
Claude Codeが読める位置にコピーする
1ファイルにまとまる
機能の概要や、将来の目論見などを書いたページ
https://scrapbox.io/files/67f818c44e1d03c99bdac9b6.png
その関連ページリストの本文全て
https://scrapbox.io/files/67f8192f810cb39765363ab2.png
https://scrapbox.io/files/67f8189d623909ffe10c1cb4.png
ページリンクのネットワーク構造から、AIに与えるコンテキストができる https://gyazo.com/f4235ad44fd8eaeee99f49c7701e26de
文脈わかってくれる
https://gyazo.com/fff4b319f306af02fb502ba0b9450792
すごい勢いでちゃんと作業してくれてヤバイshokai.icon*5
あと安い
$1.99
中身
https://gyazo.com/f1d3b5e972ac026f45559509f587bd2a
雰囲気でやっている
あるページを起点に1ファイルにまとめてexportできる
100回HTTP requestせず100ページ読める
ファイルに含まれる情報をコントロールしやすい
足りなければリンクすればいい
余計な情報入れるとAIはバグりはじめる
1ページ1トピックで書くとメンテしやすい
フィルタもほしいshokai.icon（未実装）
日時・タイトル・編集者
最終的に
Cosenseに合うのは
なんじゃないか？という気がしているshokai.icon
https://gyazo.com/a520f8401c3cb2fd7dc0e0399b26859f
複数のSmart Contextをあわせて読んでくれる
https://gyazo.com/c96c891063ae5537bbc4d24d634ff60f
この次の日、public projectならmemberでなくてもexportできるようにしましたshokai.icon
最後に
みんな自分のお気に入りのAIを見つけ始めている
Cosenseのリンクと関連ページは、かなり相性良いと思う
サラッと書いた小さなドキュメント同士をリンクで説明しあわせれば、重複や矛盾なく、複雑な情報を表現できる
AIが処理できる現実的なサイズで切り出せる
懇親会などでAI驚き話をしましょう