はじめに
最近、多くのサービスがサブスクリプション方式になっていますよね。Netflix、Spotify、Amazon Prime、各種SaaSツールなど、私たちの生活や仕事を便利にするサービスが月額や年額で提供されています。これらは確かに便利である一方、気づかないうちに毎月の固定費が増えてしまい、「これ、何の支払いだったっけ？」と明細を見て驚くことも少なくありません。
さらに厄介なのが解約手続きです。サービスごとに解約方法が異なり、以下のような問題が生じています：
- 「解約ページがどこにあるのか見つからない」
- 「解約手順が複雑で、途中で諦めてしまう」
- 「解約しようと思っても後回しにしてしまい、無駄な出費が続いてしまう」
- 「解約ページに辿り着いても、引き止めの策略に引っかかってしまう」
このような悩みをAIの力と最新の自動化技術を使って完全に解決したいと考え、本プロジェクトを立ち上げました。OpenAIが最近リリースしたResponses APIとComputer Use機能を活用することで、ユーザーの手間を最小限に抑えつつ、効率的に不要なサブスクリプションを解約できるサービスの開発に挑戦しました。
何を作ったか？
私たちは、OpenAIがリリースしてわずか二日後のResponses APIを活用し、Computer Use機能と組み合わせた「サブスクリプション自動解約サービス」を開発しました。
本サービスの最大の特徴は、ユーザーが行う操作がとてもシンプルであることです。ユーザーがやることはただ一つ、「クレジットカードの支払い明細をアップロードするだけ」です。
その後のプロセスは以下の通り自動的に進行します：
- 明細のアップロード：ユーザーはクレジットカードの明細書の画像をアップロード
- OCR処理とサブスク特定：AIが明細をOCR処理し、サブスクリプションサービスを特定
- 自動解約ナビゲーション：AIがComputer Use機能を使って各サービスの解約ページにアクセス
- ログインと解約の自動実行：ユーザーの指示に従って、ログインから解約までの操作を半自動で実行
ユーザーインターフェース
シンプルで直感的なUIを実現しました。明細のアップロード、サブスクの確認、解約指示など、ステップごとに明確に分かれた設計となっています。
メイン画面では、スクリーンショットでブラウザ操作の状況をリアルタイムに確認でき、ログイン情報の入力や解約プロセスの進行状況を視覚的に把握できます。また、プログレスインジケーターにより、複数のサブスクリプション解約時の進捗状況も一目でわかるようになっています。
どのような技術を使用したか？
本プロジェクトでは、最新のAI技術と効率的な開発フレームワークを組み合わせました。主要な技術スタックは以下の通りです：
Next.js
ReactベースのフレームワークであるNext.jsを本プロジェクトのフロントエンド・バックエンド実装に採用しました。App Routerを活用し、高速な開発と効率的なルーティングを実現しています。
Playwright
Microsoftが開発したE2E自動化ライブラリであるPlaywrightを使用しました。ブラウザの操作、ログイン処理、ボタンクリックなどの自動化を可能にし、Computer Use機能と連携させるための基盤となっています。
Responses API
OpenAIが新たに提供したResponses APIを活用し、OCR処理やテキスト抽出処理を実行しました。明細画像からサブスクリプションを特定する際に非常に強力なツールとなりました。
Computer Use
OpenAIの注目の新機能である「Computer Use」をPlaywrightと連携させ、実際のブラウザ操作をAIに任せる革新的な仕組みを導入しました。これにより、解約ページの探索や操作の自動化が実現できました。
Zustand
状態管理ライブラリとしてZustandを採用しました。Reduxよりもシンプルな記述で効率的な状態管理が可能になり、サブスクリプション情報や選択状態などを管理しています。
それぞれの技術の詳細な説明
Next.js
本プロジェクトでは、最新版のNext.js ver15でApp Routerを使用して開発を行いました。Next.jsを選定した主な理由は以下の通りです：
- 開発者のReactに対する親和性：チームメンバーがReactに習熟しており、学習コストを最小限に抑えられる
- 迅速な開発環境の構築：「爆速開発」を実現するため、複雑な設定を避け、すぐに開発に着手できる環境が必要だった
- ルーティング設定の簡素化：App Routerによるファイルベースのルーティングで、複雑なルーティング設定が不要
- Tailwind CSSとの統合：CSSフレームワークとしてTailwindを採用し、スタイリングを効率化
- shadcnとの高い互換性：UIコンポーネントライブラリとしてshadcnを使用し、デザイン実装を迅速化
特にApp Routerの採用により、APIエンドポイントの作成やページのレンダリングロジックが簡素化され、短期間での開発に大きく貢献しました。
Responses API
OpenAIのエージェント開発ツールとして発表されたResponses APIは、本プロジェクトの中核を担う技術です。
私たちの開発チームは、次のような理念を掲げて活動しています：
「AI時代のユーザー体験を検証するデザインと開発」
- 小さく始めて、生成AIが必要かどうかも含めた投資効果を検証する
- 既存のユーザーとのハレーションを避ける、滑らかなAI体験をデザインする
Responses APIは、これらの理念に合致した非常に使いやすいAPIだと感じました。その主な利点は：
- シンプルなインテグレーション：単一のAPI呼び出しで、複数のツールとモデルターンを組み合わせて複雑なタスクを処理できる
- 豊富な組み込みツール：ウェブ検索、ファイル検索、コンピュータ使用などの強力な組み込みツールを即座に利用可能
- 統合された機能：これまで別々のAPIを呼び出す必要があった機能（例：Computer Use）が一つのAPIに統合されている
こうした特性により、開発工程が大幅に効率化され、アイデアから実装までのサイクルを迅速に回すことができました。
Computer Use
本プロジェクトの目標である「サブスクリプションの自動解約」を実現するために、Computer Use機能を採用しました。
Computer Useは以下のような流れで動作します：
- モデルにリクエストを送信：ユーザーの意図を伝えるプロンプトを送信
- 提案されたアクションを受け取る：AIが実行すべき操作を提案
- 環境内でアクションを実行：提案されたアクションをブラウザ環境で実行
- 更新されたスクリーンショットをキャプチャ：操作後の画面を取得
- これを繰り返し：目標達成まで上記のサイクルを繰り返す
本プロジェクトでは、この環境としてPlaywrightを使用し、ブラウザの自動操作を実現しました。
Zustand
状態管理ライブラリとしてZustandを採用しました。Reduxと比較して、ボイラープレートコードが少なく、シンプルな記述で直感的に状態を管理できる点が魅力です。
サブスクリプション情報や選択状態などのアプリケーション全体で共有すべきデータの管理に最適でした。
実装
明細からサブスクを抽出
ユーザーがアップロードした明細画像をResponses APIに送り、OCR処理でテキストを抽出します。その後、抽出されたテキストからサブスクと判断される項目をAIが特定し、JSON形式で情報を返します。
サブスク解約(ほぼ)自動化部分
PlaywrightとComputer Useを組み合わせ、サービスのログインページから解約完了までを自動化しています。ただし、個人情報の入力部分（メールアドレス・パスワード）は、セキュリティ面を考慮しユーザー自身に入力してもらっています。
より詳しい技術解説
詳細の実装はNulogicのAIUX Labにて一部取り上げています。
今すぐ詳しく知りたい方は、以下のリンクからアクセスください
詰まったポイントと解決策
-
OCR処理でのサブスク抽出精度のばらつき
- OCRとサブスク特定処理を分割し、役割を明確に分けることで精度を向上。
-
Playwrightによる自動操作の実装方法が不明確
- 公開直後で情報が不足していたため、Pythonの事例を元にJavaScriptで実装しました。
-
ログイン時のAI操作の不安定さ
- メールアドレス入力など初期操作をユーザー側で固定化し、AIには操作が単純なタスクのみ任せることで安定化。
今後の課題
- AI処理精度の更なる向上
- サービス運営コストの削減
- サポート可能なサービスを拡充
開発を通して学んだこと
本プロジェクトを通じて、新たな技術への迅速な適応力と、実際の業務課題をAIで解決する際の可能性と限界を明確に学べました。また、ユーザー目線での設計や安全性の考慮の重要性も改めて感じました。
今後の課題
- AI処理精度の向上（OCRの精度、サブスク特定の正確性など）
- コスト削減と収益化モデルの検討
- 対応可能なサービスの拡大
まとめ
本プロジェクトを通して、AIと自動化技術がユーザーの手間を大幅に削減できる可能性を実感しました。ただ、実用化にはさらなる精度の向上やコスト面の課題があることもわかりました。
とはいえ、OpenAIの新機能をいち早く触れられたことや、実際にプロトタイプを迅速に作成できた経験は非常に貴重でした。引き続きこの分野の進展を注視していきたいと思います。
Discussion