MANA-DOT

PIXEL ART, PROGRAMING, ETC.

Claude Codeのお陰で積ん趣味プロが一週間で片付いた

ここ1~2週間ほど Claude Code が非常に盛り上がっています。 かく言う自分もこの火曜日から利用をはじめ、その自走力の高さに惚れ込んで毎日使い倒しています。 どのくらい使うかわからなかったのでクレジット課金にしていたんですが、追加購入しまくっててやばい。 というかここ数年平日は疲れ果てて趣味プロとか全然できなくなってたんですけど、Claude Codeのおかげで平日から趣味プロが捗りまくってます。すごい。

趣味プロというのはそもそも、最初にアイデアを思いついて熱量があるうちはいいんですが、次第に熱量が落ちて未完成のままGithubリポジトリの隅っこで埃を被るものだと思うんですよね。 自分はいくつもそういう状態のプロダクトが眠っているんですが、それらがここ一週間の間にClaude Codeの力で「とりあえず完成」と呼んでも良い状態まで持って行けています。

この記事ではそんなAIの力で完成した趣味プロダクトたちを紹介します。

履歴無限保存Chrome拡張 Eternal History

https://github.com/manaten/eternal-history

Eternal History

概要

その名のままで、 通常90日で消える Chrome 履歴を無期限に保存する拡張 です。保存先にブックマークを利用しているところがユニークです。 また、新しいタブを置き換えて、履歴表示+全文検索を提供します。

もともと会社で「会社で扱うドキュメントって社内からしかアクセスできない色んなところにあって、すぐ『あのドキュメントどこだっけなあ』ってなるなあ」という問題に対し、 「そもそも履歴が無限に残れば履歴からいくらでも探せるのでは?」という思いつきからスタートしたプロダクトです。

自分の場合はもともと、またアクセスしそうなドキュメントは雑にブックマークしておきChromeの検索バーから検索してアクセスしていました。 それであればそもそも全ての履歴を保存してしまい、かつある程度使いやすい検索機能があればこの問題は解決するのではないかと考えていました。

開発の背景

Chromeの履歴を無限化する拡張は実はストアに存在し、 History Trends Unlimited なんかは人気もあり自分も使っていたんですが、検索が英単語検索(スペース区切りの分かち書き?)しかできず、日本語の検索が全くできないどころか英語であっても単語が完全一致してないと検索できないという欠点がありました。 先述の用途で使いたい自分としては、記憶にかすかに残る曖昧なキーワードで検索したいため、完全一致しないと検索が成立しないのでは不十分でした。

そこで「すでに拡張があるのだから技術的には作れるはずなので、日本語検索できるものを自分で簡単に作ってしまおう」、として作り始めたのがこのプロダクトです。 実際「既存の履歴をこのUIで表示する」ところまではさっさと作ってしまっていたんですが、履歴の永続化先が決まらずに悩んでるうちに熱が冷めてそのまま放置していました。 Chrome拡張って標準的な保存先がStorageAPIかIndexedDBしかなく、ただ直列に永続化するだけなら十分なのですが、全文検索したいとなるとエントリ数が増えたときに不安が残るんですよね。 一番最初はsqliteを組み込んだりできないかと考えていたんですが、Chrome拡張でsqliteを扱う方法も乏しく、行き詰まっていました。

そこで「ブックマークに永続化したらいいのでは?」というアイデアが浮かびます。ブックマークはChrome純正の検索機能もついてるので、この用途で前者のアプローチよりはベターなのではないかと。このことは早い段階で同僚と会話してる中で思いついてはいたんですが、熱が冷めかけておりそこから手が動かせなかったんですね。

今回Claude Codeに頼んだら、書きかけのStorage周辺の関数を意図通りのブックマークによる実装にリライトしてくれ、あっけなく動く状態になりました。 その後細かいUI(日付でグルーピングするとか、ハイライトするとか)も全て任せきり、テストやREADMEも書かせて完成としました。 ちなみにREADMEを書かせると、ものすごく素晴らしいプロダクトかのように誇張して記述されてしまいますので、手動でのナーフが必要でした。

この拡張は日常使いするつもりなので、不満が出るたびにClaude Codeに直させようかなと思っています。 Githubで公開もしているので、使ってみたい方はご利用ください。

画面共有向け画面マネージャ Paneorama

https://manaten.github.io/paneorama/

Paneorama

概要

ブラウザの Screen Capture API を用いて実装された、 ブラウザで動く超廉価版OBSのようなWebアプリ です。会社の会議で画面共有時に、ブラウザの窓を共有するとブラウザとその他のウィンドウを切り替える際にいつも手間取り、かといってデスクトップ全体を共有すると不意にDMの通知が晒されてしまったりする可能性があり不便に感じており、会社でインストールせずに使えるOBSのようなアプリケーションが欲しくて作りました。

Paneorama という名前は、chatGPTが pane + panorama から命名してくれました。

開発の背景

ブラウザでの会議画面共有でもよく使われるScreen Capture APIを、配信のためではなく「ただ自分のDOM上にキャプチャを流すために」「複数個、好きな位置に表示」することで、OBSのようなアプリケーションをブラウザの機能で簡単に作れるのではないか、という発想をベースに開発を始めました。表示して並べるところまでは作っていたんですが、それだけだと意外と使い勝手が悪く完成度を上げるのが面倒で積んでいました。

今回Claude Codeに頼んで「共有中のスクリーンの上下入れ替え」「共有している画面の切り替え」「スクリーンごとに色を設定」などを実装してもらいました。いったんそこまでで完成としています。 Claude Codeに頼むとこういった「アイデアとしては自然に出てくる追加機能だけど、自分で実装するとなると面倒」ものを雑に投げこむことができるのが非常に良いです。意外と無茶振りだと思ったものが、書いてもらうとそうでなかったり、そうでないとわかると自分でもいじってみたりできる。

こちらもGithubで公開してるほか、Github Pages上でホスティングもしているため、使ってみたい人は是非使ってみてください。

株を毎日chatGPTに分析してもらうbot

KabuBot

j-quants API から毎日最新の値動きを取得した後、テクニカル指標から重み付けをし、 明日有望そうな株をchatGPTに絞り込んでもらったのちに、絞り込んだ銘柄それぞれの個別分析をしてSlackに通知してくれるbot です。

こちらは毎日jQuants APIを呼び出しローカルのsqliteに蓄積するところまでは実装済みだったのですが、トレードにつなげるための応用を実装せねばというところで積んでいました。 昨今ならとりあえずchatGPTに分析させたらいいじゃないというところで、Claude Codeにお願いしたら数分でその通りに実装してくれました。

これを用いたトレードはこれからなのでなんともですが、Claude Codeにお願いすれば戦略変更は比較的簡単に行えるのが良いところです。

雑感

趣味プロが楽しくなった

これまで趣味プロが楽しくなかったかといえば嘘になるのですが、このコンテンツ供給過多の時代に他のコンテンツを差し置いて趣味プロするには自分とってにはそれなりの覚悟とエネルギーが必要でした。 プログラミング自体は好き、むしろコードを拘って書くのは大好きですが、そういうところも相まって「細かいところに拘りすぎてしまい、なおのこと完成が遠のく」ことで、より億劫になって完成させずに積み趣味プロにしてしまう、ということをこれまでよく繰り返してきました。実際今回完成させた3つ以外にもたくさんプライベートリポジトリに積まれています。

Claude Codeはある程度の自走力をもって爆速で実装してくれるため、「コーディングが億劫で趣味プロできない」という問題を一気に解決してくれました。 億劫でもとりあえずプロンプトを投げ込んで放置すれば進捗するし、進捗すると自分の方もやる気を取り戻していくので、完成まで導けるという良いサイクルになります。 なんか一行「これして・この機能作ってみて」みたいなプロンプトでも案外うまくいくんですよね。どのプロダクトも途中まで作ってあり、コードスタイルや完成形への道筋がある程度見える状態なのも大きいのかもしれません。

趣味プロというものはだいたい、アイデアを思いついて熱があるうちに3割ほど完成して、次第に熱が冷めたり次のアイデアが浮かんだりして放置されていくものだと思っていますが(自分比)、そういったアイデアたちを熱の冷める前に形にしてしまえるのでAI様々ですね。 他にも積んでるアイデアたちがnotionに打ち捨てられているので、どんどん形にしていきたい。

自我をどこまで出すか

正直、プログラマとしての自分が自我を出さなければ、ここで紹介したプロダクトはもっと短い時間で完成したと思います。 ただ、自分の場合は「念の為差分をコードレビュー」「気に食わない所があれば、直してもらえそうなら直してもらう。自分で書くほうが確実そうなら自分で書く」という過程を経ていて、それで所要時間を倍化させている印象があります(それでも一番面倒なところを一気に書いてくれるため、普通に書くよりめちゃ早いし精神的にも楽)。

これを一切自我を出さずに(それこそ昨今バイブコーディングを紹介するエントリなどでは、あえて人は司令しかしない、などを実践されている方もいますし)行えれば本当にこの程度のものならすぐに仕上げられるわけですが、それ故にどのくらい自我を出すべきか、自我を出しすぎてはAIに任せているのに本末転倒なのでは、と思うこともあります。 特に、「ここは自分なら抽象化するのに」などは、AIが一瞬で書いてくれる時代にどこまで必要なことなのか、というのも悩ましいです。

ただ、自分の場合は「AIが書いたものを鵜呑みせずに全部目を通す」「そのうえで自分で触って、気になるところは直す」という過程を経ることで、自身が「コードを書く」ということを一切せずに完成させることを防いでいるような気もします。人間が「コードを書く」ということは近い将来一切不要になる可能性はあるものの、AIが行うのもプログラミングである以上は全く気にしなくて良くなる、にはまだならない気がします。普通に効率悪いことをするし、lintを通すためにズルしたりもする。また、こうしてAIの書いたコードを自分も触ることで、自分にも発見があり最低限、コードを書かないことによる感覚の衰えを防いでいる、ような気もします。

少なくとも趣味プロである以上は、「自分が満足する」ことが目的の一つでもあるので、非効率でも満足できないなら人の手をいれるのも一興、というところなのかなと思います。

AIコーディングとのつきあいかた

今回、どのプロジェクトも、Claude Codeを入れる前からある程度形になっていたためか、とくにclaude向けのドキュメントを用意しなくても、ほとんど意図通りの実装をしてくれました。 ただ、細かい処理には不満があって、同様処理の関数の抽象化や、mutableな変数の多様などは気にはなりました。後者に関しては eslint-plugin-functional nono-let immutable-data だけ入れて機械的に守ってみています。先述の「自我」を出すのに時間をかけすぎないためにも、機械的に守れるものはガンガン機械的に守っていくのが安心のためにも大事そうです。AIとはいえコードベースの肥大化は望ましいはずはなく、個人的には「コードは書けば書くだけ、行数が増えれば増えるだけ、バグが混入する確率が増える」と思っているので、このあたりを人間が押さえつけてあげるのも、AIのコードを信じやすくするためにも大事なのかなと思います。

他にも、テストコードはお願いすれば勝手にすべての境界条件を満たしたテストケースを書いてくれるため、適切に関心事で関数を分割させてその関数の単体テストを書かせる、というのも意識的にやりました。今まで趣味プロだとテストはサボりがちだったので、これもAI様々という感じ。

これから

アイデアをほぼノーストレスで形にできるのが、AIでイラストを描けるようになったときもですがそれ以上に楽しいですね。自分のnotionには「作りたいゲーム」みたいなアイデアがたくさん溜まっていますが、時間のなさを言い訳に積んであるというどうしようもない状態なので、これも少しずつAIで消化していきたい。

ゆくゆくはAIがコーディングしてる裏で、自分がドット絵を描く、みたいなスタイルも試せたらと思います。 そこまで来ると「画像素材もAIにやらせたら?」となりかねないですが、どこを自分がやってどこはAIに任せるのか、その線引がこれからの創作になるのではないかと思ったりします。