Claude3でNightEagleを作ったときのおはなし
Chrome拡張のNightEagle -NovelAI to Eagle-をリリースしました。
今日は、これを開発した時の事を記事にします
いきさつ
という発言を見て、自分がNAI使ってた時にも欲しかった機能だったなぁ…と思いながら今ならClaudeが作ってくれそう！と気楽に始めたのがきっかけでした
開発はじめ
最初は、質問から始めました
私:NovelAIで生成した画像を自動的にEagleに登録する方法はありますか？
Claude:はい、NovelAIで生成した画像を自動的にEagleに登録する方法はいくつか考えられます。
以下に一般的なアプローチを説明します
フォルダ監視:
NovelAIが画像を保存するフォルダをEagleに監視させることができます。新しい画像が追加されると、自動的にEagleのライブラリに取り込まれます。
スクリプトの利用:
NovelAIの出力フォルダを監視し、新しい画像が生成されたらEagleのAPIを使用して自動的に登録するスクリプトを作成できます。これにはプログラミングの知識が必要です。
バッチ処理:
定期的にNovelAIの出力フォルダ内の新しい画像をEagleに一括登録するバッチ処理を設定する方法もあります。
サードパーティツールの利用:
自動化ツール（例：Zapier、IFTTT）を使用して、NovelAIとEagleを連携させる方法もあるかもしれません。ただし、両方のサービスの対応状況を確認する必要があります。
これらの方法の実装には技術的な知識が必要な場合があります。具体的な手順についてさらに詳しく知りたい場合は、お聞かせください。また、NovelAIとEagleの最新バージョンの機能や制限について確認することをお勧めします。と、幾つかの手段を具体的に提示してくれたんですが、私が欲しいのはChrome拡張でNAIの生成ページを監視しeagleに画像を転送する機能だったのでそのままリクエストしてみました
私:ブラウザ監視の方法はありませんか？
Chrome拡張でNovelAIのページを監視し生成されたらその場でeagleに転送してくれる機能を実現させたいです。
Claude:はい、ブラウザ監視による方法は確かに効果的なアプローチです。Chrome拡張機能を作成してNovelAIのページを監視し、生成された画像をEagleに転送する方法は実現可能です。
以下に、そのような拡張機能の基本的な設計と実装のアイデアを示します：
NovelAI to Eagle Chrome ExtensionClick to open code(ここにコード)
この拡張機能の基本的な仕組みは次のとおりです：
content.jsスクリプトがNovelAIのページを監視し、新しい画像が生成されたときを検出します。
新しい画像が検出されると、その画像のURLをbackground.jsスクリプトに送信します。
background.jsスクリプトは、EagleのローカルサーバーのAPIエンドポイントに画像のURLを送信し、Eagleのライブラリに画像を追加します。
実装する際の注意点：
EagleのローカルサーバーのエンドポイントとAPIの仕様を確認し、適切に設定してください。
セキュリティの観点から、必要最小限の権限のみを要求するようにしてください。
エラーハンドリングを適切に行い、ユーザーに問題が発生したことを通知する機能を追加するとよいでしょう。
NovelAIのウェブサイトの構造が変更された場合、拡張機能の更新が必要になる可能性があります。
ユーザーがEagleのフォルダを選択できるようなオプション画面を追加すると、より柔軟な使用が可能になります。
この基本的な実装をもとに、必要に応じて機能を拡張したり、ユーザーインターフェースを追加したりできます。実際に開発を進める際は、Chrome拡張機能の開発ガイドラインを参照し、最新のベストプラクティスに従うことをお勧この時点でベースとなる部分が出来ていたので、更に…
私:では、この内容を60点とし100点を目指して完成度を向上させてください。
なお、機能についてはNovelAIの生成画像を監視しEagleに転送する事だけに特化させること。
Claude:承知しました。NovelAIの生成画像を監視しEagleに転送する機能に特化し、完成度を向上させた拡張機能を作成します。以下に、改善したバージョンを提示します。
Enhanced NovelAI to Eagle Chrome ExtensionClick to open code
この改善版の拡張機能には以下の特徴があります：
Manifest V3対応: 最新のChrome拡張機能の仕様に準拠しています。
画像処理の改善: blobURLを使用した画像の処理に対応し、Base64エンコードしてEagleに送信します。
重複防止: 同じ画像が複数回処理されないよう、最後に処理した画像を記録しています。
エラーハンドリング: Eagleへの送信に失敗した場合のエラーハンドリングを実装しています。
通知機能: 画像の送信成功時やエラー時にユーザーに通知を送ります。
メタデータの充実: Eagleに送信する画像に、生成日時やタグなどのメタデータを付加しています。
ユーザーインターフェース: 簡単なポップアップUIを追加し、拡張機能の状態を確認できるようにしました。
アイコン: 拡張機能のアイコンを追加しました（実際のアイコンファイルは別途作成が必要です）。
実装する際の注意点：
icon16.png, icon48.png, icon128.pngの各サイズのアイコンファイルを作成し、拡張機能のディレクトリに配置してください。
NovelAIのウェブサイト構造が変更された場合、content.jsの画像検出ロジックを適宜更新する必要があります。
EagleのローカルサーバーのエンドポイントやAPI仕様が変更された場合、background.jsのsendImageToEagle関数を更新してください。
ユーザーのプライバシーとセキュリティを考慮し、必要最小限の権限のみを要求しています。
将来的な拡張性を考慮し、popup.jsにさらなる機能（例：Eagleのフォルダ選択、タグのカスタマイズなど）を追加できます。
この実装により、NovelAIで生成された画像を効率的にEagleに転送する機能に特化した、より完成度の高い拡張機能が実現できます。実際の使用時には、Chrome拡張機能のデベロッパーモードでローカルにロードしてテストを行い、必要に応じて微調整を行ってください。この時点で画像の生成を検知しEagleへ転送する挙動は完成しました。
ここからデバッグ作業に移ります
ここからは、chrome上で実際に動作させて、エラーコードとエラーに引っかかってそうな部分をchrome内で調べられる部分を提出して対処してもらう…という事の繰り返しで、Eagleへ転送する事に成功しました
基本的にはやって欲しい事を明確にすると上手く行きやすいと思いました。
コード部分に関してはほぼ正確に記述してくれます
大切なこと
結局デバッグを含めて5時間くらいでchrome拡張が出来上がったんですが、ここから得られた知見をまとめたいと思います
メジャーではないAPIやプラグイン等、独自の仕様がある場合は必ず公式ドキュメントを添付すること
そうでないと仮のAPIが仮の引数を渡せば動作するものと決めてコードを生成し始めます
作りたいコードの仕様を決めるために企画用のセッションを一度通した方がいい
後々響いて来る
今回のような割と小さなコードでも、実現したい機能をまとめて一度セッションをやり直したくらいなのでもっと大きなアプリの場合は細かく決めた方がいいかも
コード生成を行う場合、最初の出力の時点でそれなりの完成度が見られない場合はプロンプトから見直した方がいい
NightEagleを作っていた当時の事ですが、エラー対応や足りない機能を後付けしていると最初の頃の内容を忘れている事が多く、フォローのやり取りを行う必要が出て来たりします。
artifactを使っても結構忘れるので注意
Claudeの性能としては概ね500行くらいのコードで頭打ちが見えて来ます
対策としてはクラスやメソッド単位で生成するのもアリだと思います。
雑な内容ですが、大体こんな所感です。
もうちょい上手な使い方もあると思いますが、割と簡単なソフトウエアならClaudeに全部お任せで作れるよ！というお話でした。
2024/9/30
o1ヤバいよ
あいつ普通に900行くらいのコードをエラーなく吐いてくる、claudeくんが息してないレベル