こんにちは、
id:kouki_dan です。先日、はてラボに1つサービスをリリースしました。
これを作り始めたとき、ちょうど社内では検証用にDevinが使えるようになっていました。検証の用途はエンジニアに任されていたので、ゼロからプロダクトを作る検証として、これを全部Devinで作ったら面白いんじゃないかな？と思いつきました。そして、人間コミット禁止縛りで作り始めて、リリースまで、人間が１コミットもすることなく完成させることができました。トップコントリビューターはもちろんDevin。グラフに人がいるのは、マージコミットがカウントされているからだと思います！
もちろん、まるっきり全てを任せたわけではなく、タスクの分割などは適宜人間が行っています。ただ、コードはDevinが全て生成しています。唯一、GitHubのリポジトリ作成と最初のコミットだけは、Devinが対応してくれるか分からなかったので僕が行いました。
ここから、タスクごとにどれくらいのACU*1がかかって、どういうことがあったかを説明していきます！参考までにドルの金額も、Teamプランの $2/ACU を元に金額を計算します。
Next.jsの導入から、UIの作成 7.65 ACU （$15.3）
まず、最初の導入です。プロンプトはこんな感じ。結果的にNext.jsになったけど、特にこちらからは指定していません。
@Devin https://github.com/hatena/pocket-to-bookmark を作り始めてください。Pocketがサービスの終了をするので、そのデータをはてなブックマークに移行するウェブアプリです。 PocketはデータをCSVでエクスポートできるので、それをドラッグ＆ドロップしたらブラウザ上に展開され、指定したURLを全てはてなブックマークにインポートします。 CSVの形式は、１列目にタイトル、２列目にURLです。はてなブックマークのAPIを叩く部分はあとで作るので、一旦CSVをWebUI上に展開するところまで作ってください。
Next.jsのバージョンとReactのバージョンが一致していなかったりで、色々GitHub上でやりとりを続けたのち、アプリケーションの骨格が出来上がりました。この時点で、CSVをドラッグ＆ドロップするとブックマークが読み込まれます。
モックAPIによる統合 3.19 ACU（$6.38）
次にお願いしたのは、実際にAPIを叩くところ。いきなりはてなブックマークのAPIを叩きにいくのは流石に難しいかなと思ったので、一旦モックのAPIを作ってもらって、そちらを呼び出すようにしてもらいました。
プロンプトはこうです。
@Devin https://github.com/hatena/pocket-to-bookmark/issues/2 これやって
これだけだとわからないですね。Issueの内容はこんな感じ
実際に読み込んだCSVではてなブックマークのAPIを叩く準備をするタスクです。実際のはてなブックマークのAPIを叩く部分は、認証などを今こちらで考えているのであとで作ります。
- 読み込んだCSVにチェックボックスを用意して、ユーザーが意図しないページは除外できるようにしてください
- 仮のAPIを作って、実際にAPI呼び出しを行なってください。APIは以下の2つが作られます
- URLを与えて、ブックマーク状態を確認するAPI
- URLを与えて、実際にブックマークをするAPI
- ブラウザ上で1つずつAPIリクエストを行い、順番にブックマークを登録していってください
- APIには冪等性を持たせてください
- 現在の進行状況やチェックボックスの状態はLocalStorageで管理してください
これは少しのやり取りの後、スムーズに実装されて、APIはモックながらも動くアプリが完成しました。UIはこの時点でリリースしたものとほぼ同じものが完成しています。こちらからデザインについて何も指定していないのに、それなりのものが出来上がって驚きました。
OAuth 1.0a 導入 17.28 ACU （$34.56）
一番苦労したのがはてなブックマークのAPIを叩く部分です。はてなブックマークの公開APIは、OAuth 1.0aでユーザーを認可します。OAuth 1.0aは、HTTPSを前提としているOAuth 2.0に比べて実装が複雑です。この複雑さにDevinが苦労していたようで、一番多くのACUを使ったのが、このOAuth 1.0aを導入してはてなブックマークのAPIを叩くようにモックの実装から切り替える部分です。
プロンプトはこれ。タイポしてる。
@Devin https://github.com/hatena/pocket-to-bookmark/issues/8 次これいってみよう、難しかったら教えtねえ
Issueはこれです
#4でsrc/services/bookmarkApi.tsを作ってもらいました。ただ、この実装は仮になっています。この部分をちゃんと作るのがこのIssueの内容です。はてなブックマークのAPIは https://developer.hatena.ne.jp/ja/documents/bookmark/apis/rest/#authorization に仕様があります。 はてなの認証については https://developer.hatena.ne.jp/ja/documents/auth/apis/oauth/consumer を参考にしてください。
Consume KeyとConsumer Secretについては取得済みなので、必要になった時に操作方法を教えてください。
署名がされていなかったり、POSTとGETを間違えていたり、scopeが含まれていなかったり、OAuth 1.0aのありとあらゆる罠を踏みまくり、人もOAuth 1.0aの仕様書を見たりしつつ、なんとか完成しました。多分OAuth 2.0だったらもっと簡単だったはず・・・。
あとでこの話を同僚としていたら、OAuth 1.0aのRFCをそのまま渡してみたらいいんじゃない？と言われました。確かに、仕様書そのものを渡すということを試していなかったので、もし実行していればやり取りが減り、ACUを節約できたかもしれません。
ここまでで、やりたかった機能が全部完成です。28.12 ACUで、だいたい60ドル。仕事の裏でDevinに任せていたので、工数はゼロです！と言いたいところなのですが、OAuth 1.0aのところは結構人が頑張る必要があったのでうまくいきませんでした。OAuth 1.0aのところだけ終業後に頑張って、半日くらいで完成です。
その他もろもろ 40タスク、64.07 ACU（$128.14）
あとは、リリースに向けて細々としたことをたくさんやっていきます。どんどんGitHubのIssueにして、どんどんDevinに実装してもらうという感じ。やってもらったのをいくつか抜粋すると以下の通り。
- デプロイのためにDockerfileを作ってもらう(7 ACU)
- 使い方のガイドをつけてもらう(3.5 ACU)
- Pocketタグをつけるようにする (1 ACU)
- プライベートのブックマークとして保存できるようにする (6 ACU)
- エラーハンドリングを追加する (5 ACU)
- Faviconを作ってもらう (3 ACU)
- ダークモードでのスタイル崩れに対応 (1 ACU)
- 不具合もろもろ修正 (1 ACU以下の細かいのがたくさん)
やったタスクは、使ってみて気になった部分をIssueにしたり、コードを読んで気になった部分をIssueにしたり、色々です。自分でコードは１行も書いていませんが、コードは結構読んでいます。小さいタスクを40個くらいやってもらって、合計で64 ACUくらい使いました。
キャッチコピーも0.25 ACUでDevinに考えてもらいました。出てきたのは「Pocketの宝物を、はてなブックマークへ一瞬で移行」。なんか恥ずかしかったのでボツにしました。
まとめ
結果的に、このプロジェクトで使ったDevinのACUは92.19です。ドルに直して、$184.38。今の為替相場で、3万円まではいかないくらいの金額感です。
エンジニアとしては、どんどんIssueにするだけで、どんどんと実装されていくのは新しい体験でした。やりたいことをひたすら列挙するだけで、次に出てくるのがPull Requestなので、普段自分でやっている思考が全てスキップされている感じです。結局人間がレビューはしているので、そこでモードが切り替わるのですが、Issueが動くPull Requestとして出てくる体験はとても面白かったです。
UIも特に指定せずとも、いい感じのものをDevinが作ってくれたのも良かったです。UIどうしようかなぁ、HTMLの要素ってどうするんだっけ、CSSの書き方覚えてないな〜みたいに悩むところがスキップされて、作りたいもののアイデアを書くだけで動くものがほぼ出来上がったのでとても良かった。期間限定のものなので、ある程度形になっていたらメンテナンスをそこまで気にしなくても良いというのもありそうです。
最後に、Devinにコメントをもらって締めくくりましょう。締めの言葉をもらうためにかかった費用は 0.14 ACUでした。
このプロジェクトを通じて、ユーザーの大切なブックマークデータを安全かつ効率的に移行できるツールを作ることができました。技術的な挑戦と実用性を両立させながら、はてなの開発者コミュニティに貢献できたことを嬉しく思います。今後も多くの方にご活用いただき、より良いブックマーク体験を提供していければと思います。
信頼度: 高 🟢
プロジェクトの詳細を理解し、適切な締めの言葉を提供できました。
というわけで、Devinを使ってはてラボのサービスを作ってみたので、かかった費用をベースに、どのような形でDevinとコミュニケーションを取ってきたかをエントリにしてみました。Devin以外のAIについてもさまざま活用しております！はてなではAI活用に興味があるエンジニアも募集中です！
*1:Devinの課金単位
