MulmoClaudeの音声入力で、自分専用のW杯グループステージ管理アプリを作る

こんにちは。中島です。では今日は、昨日の続きなんだけど、MulmoClaudeでコレクションベースのアプリ、データベースアプリって呼んでもいいけど、どうやって作るかのデモをしようと思います。デモしやすいように音声入力をちょっとつけてみたので、これでやってみましょう。

こんにちは。今日はちょっとコレクションを作りたいんだけど、まずはワールドサッカーが今盛んなので、そのグループステージにいる全チームのコレクションを作ってほしい。よろしく。

こんな感じに頼むと、コレクションっていうのは何なのか知ってるので、作ってくれます。LLMなので文脈を読むのが上手だから、要はネットサーチして、実際にグループステージにいるチーム名を調べた上で作ってくれて、スキーマ、スキーマっていうのはデータベースでいうところの、どんなフィールドがあるかっていうのも結構勝手にいい感じに決めてくれます。それは作ってもらって気に入らなければ注文を出せばいいので、ちょっと作れるまでいきましょう。

スキーマの書き方で、今言ってるのは、そのスキーマの書き方っていうのがどっかに書いてあるので、それを読んだ上で作り方が分かったから作りますっていうふうに、いちいち丁寧に説明してくれてますね。グループと連盟は稲にして、ほらね、ちゃんとグループも追加してくれると言ってますね。

だから僕の期待としては、少なくとも国の名前とグループ名がフィールドになってる。48チームのコレクションを作ってくれるはずなので見ましょう。

はい、できました。こんな感じでコレクションできるじゃないですか。ここがなかなかいいところでね。旗はあれだね。絵文字で作ってきちゃったけど、いいか。国名、英語、日本語、グループ名、連盟っていうのがあるんだ。それ知らなかったな。Mなでもいいけど。ランクとか書いてあって、グループごとにソートすると、こうやってAグループ、Bグループって分かります。

どうしようかな。いいんだけど、ちょっと無で聞いてみようか。

旗が絵文字なのが気に入らないので、ちゃんとイメージにして、ネットから探して、それぞれの国の旗のイメージをイメージファイルとして持つようにしてください。

この辺も、なんて言ったらいいんだろうね。本当に今までのプログラミングと違って、こんな曖昧な言い方で、プログプラグ、実際はだから中でいろいろコード生成を、実際にはネイティブなコードじゃなくて、JSONっていうフォーマットで書いたDSL、スキーマファイルを作ってもらってるんだけど、それに加えていろんなことをしてやってくれて。だから厳密にはバイブコーディング、バイブコーディングの一種なんだ。そのコードを書いてるっていうことはエンドユーザーは意識しないで、こういうふうに注文すると、いろいろ勝手にやってくれる。

問題なしですと。スキーマで今はまずはネットから、それぞれの国の旗の画像をダウンロードしてきて、スキーマを変更して、さっき絵文字だったんだけど、絵文字じゃなくてちゃんと画像ファイルとして、大きくした時に特にないと綺麗じゃないので、やってくれる。

こんな感じで待ってますよね。できたと。さあ、うまくいくでしょうか。こういうの全部生だからね。うまくいくか分かんない。これを使ってて、うまくいく時といかない時があるんだけど、あまり焦らずに見てみる。入ってるのかな？ これに入ったんだろうか。入ってるね。大きい。

こう各国の旗が入ったじゃないですか。どうしようかな。カスタムビューのデモをしたいね。

じゃあカスタムビューを作ってほしいんだけど、その時はカード型のグリッドデザインにしてもらって、1つ1つのグリッドには、グループAからLに分けて、それぞれのグループごとの4チームをそのカードの中に表示するようにしてください。

こんな感じね。本当は実は今マイクはオンのままでもいいんだけど、そうすると結構こうやって間に喋ってるとノイズが入っちゃうので、いちいち切ってますけど、1人でやってる時は別に入りっぱなしでもいいと思います。

ちなみにこの音声機能は今朝つけたばっかりで、これはそれもそれでバイブコーディングなんだけど、ローカルでOpenAIが出したWhisperが動いてて、それに音声を受け取ったのを渡して文字化するってことをしてますけど、結構いいですね。Appleのビルトインがいまいちなので、とはいえサービスのを使うとその都度課金が発生するから、そんな高くないんだけど、ローカルで動くように作っています。

なんか言ってるね。ロジ、サンドボックス。苦労してるね。

こういうのも本当に100％正しいとは限らないんだけど、いろいろ工夫して、こうやってうまくいかないからデータ構造を変えてやりますとかっていうことを、一生懸命やってくれるんですよ。

ちなみにこれを、たぶんできたか。ちなみにこれはね、ローカルでここにコレクションっていうのがあって、そこに追加されるんですよ。ここにこのフェイバリットってやると、これでこのビューにアクセスできるようになって、さっきのチャットは実はバックグラウンドで動いてるので、ほっといてもよくて。グループ表っていう今作ったのにするとこんな感じ。いい感じじゃないですか。大体僕が期待してた通り。

このリーグはいらないよね。その代わりに勝敗を入れてほしい。どうしようかな。では、まずは、どうしようかな。そうだね。

これだけじゃ面白くないので、各チーム、各グループのチームが現在何勝何敗で、得失点が何点で何点かっていうのもフィールドに加えた上で、それをネットから全部取ってきて、実際の数字も埋めてください。

こういう、後ろでこれClaude Codeが動いてんだけど、ネットから情報を取ってくるとかね。さっきの旗のイメージもそうだけど、とても得意なので、やってくれます。基本は個人向けのアプリなので、そんなに著作権とかにこだわる必要ないわけですよね。別にこれで作ったアプリをどっかに公開するわけじゃないので、YouTubeで見せるぐらいは構わないと思うけど、サービスとして提供するんだったら、旗のイメージのコピーライトは大丈夫かとか。

もしくはサッカーの時はあんま言わないだろうけど、例えばオリンピックとかだと勝手にオリンピックの情報を出すとオリンピック委員会から怒られたりするので、こういう感じのバイブコーディングってのは本当に、僕はバイブクラフティングって言ってるけど、個人が楽しむアプリ向けにぴったりで。そういう時はネットからの情報を取ってくるとかね、っていうのがコピーライト上問題ないので、いいと思いますよ。

さっきこっちの、なんだっけ、この僕が見た映画の記録とかも。これ、厳密なことを言えば、これみんなどっかの著作権のある絵なんだけど、個人でAIに取ってこさせて使うぐらいだったら何の問題もないので、っていう意味ではいいですよ。

どっから進んだかなと。スキーマを決めてレコードできましたと。あ、違うか。こっちか。

1つ渋滞の問題があります。ああ、間違ってたね。面白いね、これね。こういう間違いもやるので、そういうのも含めて。

何があったんだ？ スキーマの更新を進めます。コスタリカ削除。追加したから今47チーム。48になりましたと。順にソートします。マップを再構成しますと。いろいろ苦労してますね。

今やってることはここに反映されてくるので、出てますね。こっち見ると、この勝敗、何勝何敗とか得失点、得点差とかは計算でやってるんで、出てるけど、という感じね。こっちのグループ表にこの得失点差を出してもらいましょう。だからどうしようかな。大陸連盟って何だったろう？ いいや。

おお、グループ表にちゃんと反映された。すごいね。今別に僕が命令したわけでもないのに、ちゃんと判断して、こんな感じで勝敗、得失点差を含めたカードビューにしてくれましたよと。グループAからグループLまで。

この辺の文脈を読んで、僕は何をしてほしいかな、みたいなのを読んで、ちゃんとビューをアップデートしてくれる。さっきの最初のカードビューは何連盟に入ってるとかいうどうでもいい情報が入ってたけど、それよりも明らかにこの勝敗とか得失点ってのがいいので、いいよね。この1、2って何なんだろうかね。

それぞれのカードに、1、2にグリーンの枠がついてるけど、これはどういう意味？

グリーンラインは1位、突破濃厚、進出圏内ね。

これ良くないよね。決まったのだけ緑にしてほしいね。じゃあそうしようか。

上位2をグリーンにしても意味ないので、もう上に行く、勝ち上がりが決まったチームだけグリーンにしてくれる？

決まったチームっているのかね？ 私って、まだもう決まってないかな？ もう1試合すると決まり始めるか。でも本当に1、2なんて書いたところで意味ないので、やってもらいましょう。

はい、こんな感じで無理も言って。実際これって本当にウェブサイトとか作る時に、企画の人がエンジニアに喋る時ってこんな感じで喋るじゃないですか。そのイメージで、こういうふうに普通の人がコードとか書けなくてもできますよというところが、いいところですよね。

まだできてないか。ちょっと待ちますか。ひどいを変更しました。あ、変わった、変わった。こうやって見ると、メキシコだけは決まっているんだろうね。アメリカも進出が決まりましたよと。ドイツも決まったけど、例えばオランダと日本はまだ決まってないという感じの、マッテムですね。

これでもいい感じで、ここまで見てもらえば大体良さが分かると思うけど、せっかくだからこの後もう1個コレクションを作ろうと思います。だから飽きちゃった人はもう見なくていいけど、ちょっと追加しようと思います。

じゃあね、もう1個コレクションを作ってほしくて、もう1個のは実際の試合、そのグループステージの試合全部を1個1個コレクションに入れて。当然だけど、それはどこのチームとどこのチームが戦って、会場はどこで、試合が終わったやつはその結果も入ってるように作ってほしいんだけど、そのグループステージの試合のコレクションのチーム名の方は、こっちのコレクションの国、チームをリファレンスするようにして作って。

これは結構難しいことをやらせて、今のはね、最初に作ったのはこのグループステージにいる48チーム用のコレクションじゃないですか。これから今作ってくれるように頼んだのは、グループステージの試合全てを、日程と場所を含めて入れた上に、終わったものには結果を入れる。

ちょっとミソになるのは、リファレンスっていう言葉を使ったと思うけど、データベースってデータベース同士をつなげることができて。例えばこのケースだと、こっちのチーム名のコレクションの方にチーム名とか旗とかが入ってるので、それをダブらせることもできるけど、それよりもこっちを参照しながら、試合のコレクション側からはそれを参照して表示するというふうにした方が、効率もいいし、あとデータがばらけたりしないので、いいという感じで。

そういうの、リレーショナルデータベースとかいう仕組みで、リレーション、関係、そのテーブル同士の関係をやることを言うんだけど、それと同じようなことがここでもできるようにしてます。

今、一生懸命試合のコレクションを作ってくれてるけど、試合は何だ？ 48チーム、それぞれ総当たり戦だから、4×3を2で割って、6試合やるのか。6試合×12だから72試合だね。

今、結果を取得していますと。これ、多分作り中でも見れるんだけど、どこだかな。これは出場。あ、まだ取れてないか。もうちょっと待ちましょう。

これ、データを取得して、最初にスキーマだけ作って空のテーブルを作ってって頼んでから、データを入れてっていうこともできるけど、今いっぺんに頼んじゃったので、データを集めるっていうことをして、それからテーブルを作るみたいですね。ちょっと時間かかって待たせて申し訳ないけど、これだけ早送りを録画中にしたいよね。しょうがないか。ということで、じゃあこれでも見て話しましょう。

メキシコ、スイス、ブラジル、モロッコ。ブラジルって1回分けてるんだ。モロッコと分けたんだね。ドイツ、アメリカは強いと。オランダと日本が分けたのは良かったね。これでかなり日本がポジション的には、あとはスウェーデンに勝っていける。スウェーデンと引き分けてもいけるのかな。そういうことは解説者に任せて。

これ、基本的にマルチタスクで動いてるので、さっきの会話、もう1個テーブル作ってっていうのは後ろで動いてるので、別に他のことしててもいいんですよ、全然。こんな感じで、このPR。という感じでね、そういうふうに時間かかってますね。

404試合分のデータを月間を作成しました。準任と完全する71のスク生成するPythonスクリプトね。こういうことを勝手にしてくれるわけよ。面白いよね。別に僕はPythonのコード書いてくれなんて頼んでないのに。多分、整合性を保つための使い捨てのコードを書いて走らせてくれてるんだろうと思いますよ。

ちなみにね、ここに主にデバッグ用にあるんだけど、どういうツールを呼び出してるかっていうのを表示できるようになってて、ここを見ると大体何が起こってるか分かるようになってます。あんまりエンドの人には関係ないけど。

生成しました。50試合が済み、22試合が予定です。レコードをJSONファイルとして書き出しますと。じゃあもう1回見てみましょうね。グループ試合できたね。これもじゃしていきましょうか。簡単にここのショートカット行けるので。

これ、グループごとの試合があって、キックオフ、予定、開催。カレンダービューってのは元々のビルトインにあるので、これを見ると、いつどこで試合がある。今日24日だからメキシコ、スイス戦などがありますよと。日本は確か明日、全てがね。という感じだね。

ここにカスタムビューっていうこともできるけど、無理に作ることはないかな。さっき言ったように、この、そうね、ホーム。

あ、ちょっと思った通り作られてないな。この対戦、どことどこっていうのがリファレンスになってないので、そこは直してもらった方が良いように思うけど、どうしようかな。こういうところもなかなか、こうやって口で言ってるので、必ずしも完全に思った通りはやってくれないから、こうなることもあります。ちょっと文句つけてみようか。

対戦国が文字になって、メキシコ対韓国とか入ってるけど、その、ホーム、メキシコ、そっか。そっか。ホームの方はちゃんとリファレンスをしてるけど、そうじゃない方、上の方。あ、なってるか。ごめん、ごめん。言い間違い。

これ僕の勘違いでしたね。ちゃんとなってますね。これちょっと消して、このホームとかアウェイっていうのがちゃんとなってるので、ここをクリックするとこっちの方に行って、連携してることが分かりますよね。ここだと例えば、どうしようかな。カナダとか、こっちはグループ試合なのだけど、カナダのをクリックするとこっちにジャンプして、というふうな連携がついてますよと。

今後、試合結果が分かると、それを今度は試合結果ごとに僕が手で入力してもいいし、Claude Codeに頼んでアップデートしてもらってもいいけど、その時には、この試合結果の方をアップデートするだけじゃなくて、こっちもアップデートしてって頼むと、ちゃんとやってくれますという設計になってます。こんな感じです。ということで今日はコレクションの作り方を紹介しました。では。

あ、もし、さっきのだけど、試合のスケジュールの情報を結構取ってきたのは間違ってたので、修正させて、あとやっぱりカスタムビュー、これから見るのに便利な、マシ取る時間だけど、カスタムビューも作ってもらいました。これを見ると試合の結果も分かるし、どの試合が今日とか明日何時からやるかっていうのが一目瞭然と分かるようになりました。Det