イベントの紹介

イベント自体は弊社とゆめみさんが共催して開催したものでして、某国民的アニメの道具をバイブコーディングで再現してみようというものでした。
詳しいレポートは弊社テックブログにあがっています。

このレポートの最後の方に書かれている「40分じゃ終わらなかった人たち」のうちの一人が自分でした。
アイデア自体はイベントの企画段階で思いついていたのですが、AIにテストまで書かせていたら全然終わらなかったという次第です。

ただその後格闘を続け、イベントの翌日には無事完成させることができたのでそれについて話します。

どんなアイデア？

イベントのコンセプト的に身の回りの困りごと、ではなく、ひみつ道具が着想の最初なのですが、それはさておき...

重たいフォルダを送信するとき、みなさんは何をしますか？そうです。圧縮ですね。
でも圧縮って地味に面倒じゃないですか？右クリックして圧縮をクリックして...2クリックもしなきゃいけません。面倒ですね。

え？楽でしょって？

いやいや、2回もクリックするなんて大変ですよ。なんとかアクション数を減らさないと。

そこで登場するのがあの道具、小さくするといえば、そう、スモールライトです。
というわけで自分はたった1アクションでフォルダを圧縮できるアプリを作ることにしました。

どうなったか？

というわけで完成品はこちらです。当時のツイートをご覧ください。

アプリを起動するとマウスに灰色の丸が追従します。それを圧縮したいフォルダのところに持っていき、Altキーを押すだけ。
ビッグライトとしての解凍操作にも対応しています。macOS向けです。

実際のコードなどはこちらのリポジトリから見れるので興味のある方はぜひ触ってみてください。

どう作ったか？

ツイートや冒頭に書いた通りこのmacOSアプリはイベントの時間中には開発が終わりませんでした。そういったところも含めて作っていった経緯を紹介します。

今回使ったのはVS CodeのCodex拡張と途中からGitHub Copilotです。どちらもモデルは10月末ごろだったのでGPT-5 Codexを使っています。

イベントでの挑戦では一応先に仕様書としてまとめさせて、それを元に完全自律型で作らせる形をとりました。普段だとCopilotのスタイルが好きで大体自分が主体になるのですが、せっかくのバイブコーディングイベントなのでこのスタイルをとった形です。

動くのはAIだけなので、40分制限でも大丈夫だと思っていたのですが、いつもの手癖で「t-wadaのTDDに従う」という指示が入っていた結果永遠と試行錯誤を続けていて結果処理が終わりませんでした。

その後も適宜続けていたのですが、自分はこの他にも少し失敗をしていました。

そもそもこのアプリ、どう実現するつもりだったかというとmacOSのアクセシビリティAPIをハックする形で作れるのではないか？というのが当初の着想でした。
iOSDC2024の岸川さんの発表のかすかな記憶がその根拠です。

ここからあるアプリが他のアプリのUI表示を起点に処理ができるはずと思ったわけです。
そのためマウス追従を常にしていて、特定のキーが押された際にその場所にあるフォルダの情報をとって圧縮・解凍できないかなというイメージを渡していたわけです。
ですが、これは一部できるもののマウスに常に追従するというあたりが実はあまり実現性のないアイデアになってしまっていました。

そのためしばらく謎のエラーに苦しめられることになります。何往復も動かないプログラムを修正させました。

結果うまくいきませんでした。が、ここであるものを思い出しました。OpenAIのChatGPT Atlasや、Dia/Arcなどがインストール時に採用している技術、そう、透明ウィンドウです。

先ほどあげたアプリは透明ウィンドウを活用することであたかも動いているウィンドウの外側にまで影響しているかのようなエフェクトを実現しています。

そこで自分は「マウスに追従する何か」が難しいなら、「透明ウィンドウ内をマウス追従して動く要素」であればいけるのではないか？と思いました。
そうなると残る課題は透明ウィンドウがある時にその配下の要素を取れるのか？というところですが、これはAIに相談したところいけそうだったのでこのアイデアでまるっと修正させることにしました。

最後座標系が変になったり外部ディスプレイだとこれまた座標の計算がおかしかったりと何往復かはやはり必要だったのですが、こうして無事ツイートにあげた状態ができたわけです。

学び

今回の制作を通じての学びを最後にまとめておきます。

やはりmacOSアプリなどWeb技術以外へのバイブコーディングは難しい
時間制限がある時に丁寧さを求めるといくらAIとはいえ時間オーバーする
マウス追従する何かを作りたい時は透明ウィンドウを敷く
知見が少ない領域のバイブコーディングはなかなかに大変、いかに何ができるかを知っているかがやはり肝

あれから時がたち、今ではGemini 3 ProやGPT-5.1 Codexが出ているのでまたここら辺の感覚も変わっている、、、のかもしれませんが、こういう遊び心のあるものこそバイブコーディングでやっていて面白いことなのかなーと感じています。

というわけで、困りごとだったかどうかはみなさんの判断にお任せするとして、少なくとも楽しい解決法を実現できたのではないでしょうか！
アプリ自体はアクセシビリティAPIをちょっと変な使い方していたりでリリースすることはできないと思うのですがもしよければぜひ手元で動かして楽しんでみてください🙌