00:07
michiru_da
マヂカル.fmは関西人のプロダクトマネージャー道裏と関西人のソフトウェアエンジニアのヨーバミンが週2で配信するザサンポッドキャストです。お願いします。
うぱ / upamune
お願いします。
年末年始の思い出
michiru_da
今日のテーマは、年末年始に作ったものについて話そうよ。
うぱ / upamune
また年末年始の話してる。
michiru_da
まだしてんのか、こいつら。
うぱ / upamune
これ近づくと終わるぞ。
michiru_da
てか何も、今日4本目の収録なんですけど、ずっと年末年始の話してる。3時から。
うぱ / upamune
気が狂いそう。
michiru_da
もう19時になりそうなのに。あとお菓子。はい。
うぱ / upamune
はい。急に切り替え早く。
michiru_da
私はちょっとだけ作ったものがあるんですけど、うぱさんなんかすごいたくさん作ってたんで。
うぱさんから。
いい?
どうぞ。
私もおまけ的に最後にちょちょちょって話します。
うぱ / upamune
じゃあちょっとしたやつから。
michiru_da
何個作ったの?
うぱ / upamune
ちょっと待って。3、4、5。
5.5ぐらいですか。
まずあのしょぼいやつから行くと、向こうでいるときに、え、寒ってなったんですよ。
michiru_da
年始に離島を滞在してたときに。
うぱ / upamune
実家にいるときから寒いなって思って。
で、もともと私あの天気、みんな大好き天気あるじゃないですか。
天気ってベース、晴れとか雨とか、あとその今日の気温は何度みたいな。
私あの絶対気温もうなんですよ。
その気温が何度って言われても、そのわかんないんですよ。
michiru_da
もうって四季猛とかの。
うぱ / upamune
そうそうそうそう。
michiru_da
盲目の。
うぱ / upamune
左右盲みたいな。左右がわかんない人。
絶対その道さんが明日何度だってみたいな。
でもそれがなんかそのあったかいのか寒いのかわかんないですよ。
だから常に相対温度を出す。
昨日より何度っていうやつを。
その、もともとこれがですね。
あの気象庁の2週間天気予報っていうやつがありまして。
これが割とね。
あれ?
そのこれはその平年より比べて、その日付ごとにかなり高いとか高いとか。
平年でも低いかなり低いみたいなのがあって。
これ結構わかりやすいけど、その今日わかんないとかいうのがあって。
でこのデータをもとにバイブコーディングをして。
これがね。
michiru_da
こうやって今いる場所でってこと?東京は?
うぱ / upamune
ああそうです。なんで例えば秋田。
だったらこれがロケーション秋田になってこのページを共有したら最初から秋田になってるって感じですね。
michiru_da
なるほど。昨日よりマイナス5度。
うぱ / upamune
で平年かなり寒い。
michiru_da
平年並みの寒さだよって。
うぱ / upamune
そうそうそう。
でこれがその絶対絶対オンラインかなりどうでもいい。
私にとってかなりどうでもいい情報なんで。
もう昨日と比べてどうやねんっていうのを知りたいなと思って作ったやつが最初のやつですね。
これはエグゼデブっていうちょっとバツってたやつで。
michiru_da
これ何?
うぱ / upamune
作りましたね。
これはバーチャルマシンっていう仮想環境。
もう実質なんかそのMacの中身をクラウド上に作りますと。
でそこの上でバイブコーディングしますっていう。
michiru_da
でってMacじゃない仮想環境だったら何がいいんですか?
うぱ / upamune
例えばMacとかだったらどっか移動中だったら閉じるから動かないじゃないですか。
じゃなくてこれはクラウド上なんでスマホとかからこれ何とかしてってやったらずっと動き続けてくれますと。
でも他のなんかバイブコーディング系のツールと何が違うのっていう感じだと思うんですけど。
これはもう本当にそのマシン。
もうこのMacが入ってるようなもんなんで。
別にその何だろうな。
自分のクラウドコードとかコーデックスとか自分の好きなものを何でも使うことができるんで制約がない。
michiru_da
本当にじゃあVMの環境だけがある。
うぱ / upamune
そうです。でまぁちょっと優しいやつがこのなんかシェリーっていうエージェントがあって。
これを使ってもそのクラウドコード直接使わなくてもこのスマホビューとかでこのこれを使って。
何とか何とか作りたいよーみたいな感じで言ったらその実装してくれるエージェントもついてるって感じですね。
michiru_da
今映してるのはExeDevの画面ですか?
そうです。全部ExeDevの画面です。
うぱ / upamune
私が作ったわけではないやつですね。
でこれは本当のターミナル。
michiru_da
ExeDevのターミナル?
そうです。なんでここでクラウドコードをインストールしてクラウドとか使ったら使えるっていう感じですね。
他にもこのExeDevみたいなサービスもあるんですか?
うぱ / upamune
このVMっていうそのバーチャルマシンを提供するサービスあったらまぁ古来からいろんなサービスがありますけど、
これはまぁなんだろうそのシェリーっていうエージェントを提供していたりとかこの作ったやつが簡単にこの
外に共有できるっていうところと、あとは
何も難しいことしなくてもこの認証がかかってるっていうところですね。
自分だけのViveコーディングアプリを安全に開発できるっていう。
michiru_da
Exe、さっきの天気のやつのURLはExe.Devですか?
うぱ / upamune
そうですそうです。
michiru_da
で、それは公開できる設定にしてるってこと?
うぱ / upamune
あれもね、別に公開はしてないです。
自分の、はい。
michiru_da
ああ、なるほどですね。
うぱ / upamune
感じですね。
なので別にこのポート番号とかも入れられるんで、
michiru_da
この一つのVMから別に100個のアプリを公開することも別にできる。
ポート番号とかあったな。
いやなんか本当に開発、システム開発ってマジ覚えることが多すぎるんだよな。
VMも新卒の時にも習ったけど、
別になんかローカーと何が違うんって感じですし、
ポート番号の何番とかも、何?
多いんだよね、ちょっと覚えることが。
え、もうすごいなっていう感じですか?
エンジニアの人。いやそれ元から覚えてわかんない。
うぱ / upamune
なんで逆に。
michiru_da
いやでもよく全部覚えてやってるよって感じですよ、ほんと。
うぱ / upamune
ほんとに、AIない時代はね、そこだったんですよね。
michiru_da
いや本当にすごいですね。
なんか、なんだろう、その、
なんかあんまり汎用的な能力、
汎用的になるために覚えることがほんと多いですねっていう。
すごいよ。
よく覚えてますね、ほんと。
なんか、
だからうぱさんがよく、いや私、なんでその、なんか、
うぱさんの言葉を引用すると、
すごいなんか貧寂の低い大学に行ってたとか、
だから勉強ができないみたいな論理構造で喋ってるけど、
いやめっちゃ勉強できるじゃんって思う。
うぱ / upamune
記憶じゃないんですよ。
michiru_da
よく覚えてるなって感じだから。
絶対覚えらんないもん、そんな。
うぱ / upamune
記憶じゃないの?
概念をただ理解しとけば、あれはどこにあるの?みたいな。
michiru_da
それが勉強なんだから。
そう。
苦手なことが多い、
苦手な人が多い感じのジャンルじゃん。
とっつきづらいものを、
そうやってなんか汎用的に学習してるのってめっちゃ勉強できるなって思いますよ。
うぱ / upamune
どうした今日。
michiru_da
すごいよ、どうした今日、いつも言ってるだろ。
うぱ / upamune
キレながら褒めるってなんか新しいですね。
いつも言ってるだろ。
はい。
michiru_da
はい。
うぱ / upamune
ありがとうございます。
で、次はですね、ちょっと作ってる人がいたんで、私も。
michiru_da
よかった、その褒められてるって認識してて、よかった。
そう、いつもね、褒めてますって言わないと褒めがないっていう、
記憶に自動化してるから。
うぱ / upamune
私もみちるださんのこといつも褒めてますもんね。
michiru_da
どうかな。
うぱ / upamune
どうかな、さっきも褒めてた。
はい。
ステータスページの開発
うぱ / upamune
これは、よくSaaSとかであるステータスページ。
michiru_da
はいはい、そのサービスがちゃんと動いてるかとか、
そう。
なんかここで障害が起きてるよっていうのを教えてくれるページですね。
そうそう。
うぱ / upamune
で、今日私死んでねみたいなことがわかるサイトですね。
michiru_da
助かる。
うぱ / upamune
ステータスセリザーミーっていうやつが、
これはデータの元がオーラリングなんですけど、
この日のスコア何パーでみたいな、
today's scoreがなかったらこいつなんかもう寝てるかよ、死んでるか。
なんかしばらく。
michiru_da
逆にもうスコアが構成されてないってことは、
オーラリングにデータがないってことね。
うぱ / upamune
そうそうそう。
過去分、自由化分ぐらいも入れるようになってる。
michiru_da
もしそういう見方するんだったら、
なんかただ同期されてないだけなのか、
同期されてるけどデータがないのかわかるようにしてほしい。
うぱ / upamune
それがわかんないんですよね。
オーラリングが直接Wi-Fiにつかながってるわけじゃないから、
iPhoneと初めて同期されてデータが出てくるんで、
オーラリングにデータはあるのか、
本当にデータがないのかの区別がつかないんですよ。
michiru_da
なるほど。難しい。
うぱ / upamune
そう。
これはね、最初に、
例えばダークモードに対応してるんですけど、
これを作ったのは、
普通にステータスページもやってみたいなっていうのもあったんですけど、
クロードのスキルで、フロントエンドデザイナーだっけ?
あれで、これを入れるだけでまともなデザインになったみたいなのがあって、
どんなもんなのか見たら、
最初なんか普通に何も言わずに作ったんですよ。
そうじゃなくて、
ザ・バイブコーディングみたいな画面が出てきたんですけど、
michiru_da
グラデーションついててみたいな。
うぱ / upamune
ボタンとかにね、謎のグラデーション。
michiru_da
紫ベースのグラデーションついてる。
うぱ / upamune
好きですよね。
なんですけど、このさっきのフロントエンドスキルみたいなやつを使ったら、
かなりまともな、こんな荒れた。
しかも気が利いてて、
さっきやったみたいに、ダークモードを自動で判別する。
これよくある機能なんですけど、
普通にクロードコードとかに実装させるとできるんですけど、
最初ライトモードになって一瞬パッとダークモードになるみたいな、
実装とかになっちゃうんですけど、
これ最初に途中で切り替わっても、
最初チラつきがないっていう。
michiru_da
確かに。
うぱ / upamune
素晴らしい感じにしてくれてますね。
michiru_da
さっきのフロントエンドをいい感じにするやつって、
クロードコードの中の人が最近うちらの声作ったんだけど、
みたいなのをツイッターで言ってたやつですよね。
うぱ / upamune
え、なんだろう。
michiru_da
違うやつかな。
自分それ設定しようとしたけど、
なんかうまく動かなかったんだよな。
うぱ / upamune
ダウンミディナーすぎて。
michiru_da
あ、ツイッターソースじゃないんだ。
スキルなんだ。
iOSアプリの開発
michiru_da
なんか違うかも。
うぱ / upamune
この42行を、スキルを設定してもいいし、
私が外からワイブコーディングするときは、
このコピーローファイルして、
この丸ごとペタッて貼り付けたりしました。
michiru_da
なるほど。
なんかフロント、
自分もツイッターで似たようなことを言っている投稿があったんで、
それをインストールするみたいなやつだったんで。
へー、そうなんだ。
で、うまく動かせませんでした、私は。
うぱ / upamune
はい、って感じですね。
僕は初めてiOSアプリを作ってみました。
これは、我々日記書き族じゃないですか。
もしかしたら、あんまりみちるださんは書き溜めることないから、
あれかもしれないですけど、書き溜めたときの問題点って、
まず写真をね、この日何やったんだろうって思い出すと、
写真がすごい有効なんですけど、
写真はアップロードしたいんですよ。
けどiPhoneの標準のアプリって、
この写真が何日に属するのかが全く分からないんですよね。
困りますね。
で、それを解決したいなと思ってて、
で、なんで、最初のビューが全部日付で写真がグループバイされている状態から始まって、
で、その中でポコって開いたらその日の写真が出てきて、
で、それを全部並列でポポポポってアップロードして、
その一つずつコピーもできるし、まとめて全部のURLをコピーできるんで、
コピーAll URLsを押してScrapboxに貼り付けたら、
全部画像がバーって出るっていう感じですね。
これが初めてiOSアプリをやったんですけど、
グループバイしてるトグルのリストとかをポチポチとか押すときに、
このiOSのHaptic Feedbackブックっていう、
あれとか付けたらめっちゃネイティブっぽくなって楽しいってなりました。
michiru_da
こうやって元々、このアプリに写真は同期をする必要があるみたいな。
うぱ / upamune
これは別にiPhoneのフォトライブラリを見てるだけなんで、
これ表示されてるのは別にこのアプリにインポートしたわけじゃなくて、
ただフォトライブラリにあるだけです。
あとここに載ってないですけど、もう一つ押し機能がこの写真あるじゃないですか、
これ長押ししたら左か右に90度回転できますよ。
iPhoneのやつで撮ってたら、
michiru_da
めっちゃ直したい。
うぱ / upamune
そう。だからポコって押してそのままアップロードしたら、
ちゃんとどっちかに。
michiru_da
便利ですね。
うぱ / upamune
そうそう。っていうやつをiOSアプリ作ったんですけど、
ちょっとストアに公開するのがだるくて、
ストアに公開しないと自分も使えないっていう。
めんどすぎてやってないっていうやつですね。
でも結構今はリアクトネイティブってやつで作ったんですけど、
フロントエンドの技術で使えるんで、
今までやってるViveコーディングの延長線上で作れるんで便利ですね。
やつやね。
音楽ビートのプログラミング
うぱ / upamune
最後は多分何言ってばわかんないと思うんですけど、
でもScrapboxを使ってたら共感してくれると思うんですけど、
このScrapboxで何かを書いてるときに、
例えばURLを貼るとするじゃないですか。
貼ったらシンプルURLかコマンドシフトVのこの、
今URLですけどカードが出ない。
OGPのカードが。
michiru_da
で、それを出したいなーってなって作ったやつがこれです。
うぱ / upamune
えーすげー。
なんかシンプルな仕組みで、
そのOGPの画像とか、
OGPはこの画像を使ってねーとか、
OGPのタイトルはこれにしてねーみたいなのって全部そのページに書いてあるんですね。
なんでその画像とかタイトルとかを、
このやつにアクセスした瞬間に全部取り出してきて、
SVGの画像として書き出すことで、
Scrapboxではこれただの画像として見なされてるみたいな感じのやつですね。
なんで。
michiru_da
すげー。
うぱ / upamune
これが、こっちのほうがわかりやすいか。
あるその貼り付けたいなーっていうリンクがあったら、
その先頭に今回作ったやつのこのURLをつけるみたいな、
なんかこのガッチャンコする。
そしたらこれにアクセスしたら、
こうやって画像が返ってくるっていう感じですね。
これSVGなんで画像なのにテキスト選択とかリンクが押せるっていう。
すごい。
というやつを作ったりしました。
最後に、
ラップスターを見て、
michiru_da
ラップより先にまずビートがないとダメじゃないですか。
ビートって何?
背景、後ろで流れてるメロディーですか?
そうっすね。
メロディーなの?
そのリズムだけ?
うぱ / upamune
いや、リリック以外の全部。
そうなん。
michiru_da
じゃあドラムの音もあればコードとかも鳴ってるみたいな感じですか。
うぱ / upamune
そうですそうです。
なのでそれを私がガレージバンドとかロジックでプロで書くっていうか作るのは無理だと思ったんで、
michiru_da
ビートをコードで書く方式あんじゃね?と思って探したら結構あったんですよ。
コードってプログラミング言語ってことで。
コードは何?
Aマイナーみたいな音楽のコードもあるからね。
うぱ / upamune
なんでそれを1からクロードコードと、
これはクロードコードのiOSから全部やったんですけど、
それをね、やってドキュメントも全部書いてもらって。
michiru_da
これ今映しているのはうぱさんが作った?
そうですそうです。
うぱ / upamune
なんで、例えばこの入門編とかだったら、
このBBMって何?とかビートって何?小説って何?みたいな。
michiru_da
すごいね。音楽に必要な知識がまとまっている。
うぱ / upamune
で、例えばこんな感じのコードみたいな感じじゃないですか。
BPM120でみたいな。パターンを定義してパターンを4回繰り返すみたいな。
michiru_da
逆に音楽をやっている人向けに説明すると、
ドラムのリズムを再現したいですと。
バスドラムの音とか、スネアとかハイハットの音の全部組み合わせたものを再現したいですと。
なので小説の中のどこで何の音を鳴らすかって、
タイミングを定義するためのプログラムみたいなのを作ってて、
音が鳴るところはXみたいなので示して、
それ以外の休符のところはドットみたいなのが書いてあって、
それがカギ括弧の前1小節目はバスドラムは1個目と5個目のところにXを書いて、
休符はドットが書いてあってみたいな感じのことが記載されています。
うぱ / upamune
そうですね。ありがとうございます。
またこれがプレイグラウンドもございまして、今コードで書いたやつがどう音になんねんみたいなのがあると思うんですけど、
流れるのかな?このコードからこのビートが出てくるんですよね。
でも結構いろいろできまして、上級編になったら、
キックとかスネアとかハイハットっていうのはどうでもいいというか。
それも変えれるんですか?
例えばミッチールーダーみたいなのを定義して、ミッチールーダーに対応する音声ファイルを置けば、
michiru_da
すげー音色も変えれるんですか?
変えれます。
なんで作ったんだこれ。最初に発明した人。なんでだよ。
うぱ / upamune
あとはこのエフェクトとか、
エフェクトとその構文一緒すぎてわからなくない?って私が突っ込んだやつがあるんだけど、
なんだろうな。
michiru_da
すごいね。今ちょっとヒップホップだったらこういう感じで構成するといいよみたいな。
なんかテンプレートがいっぱい書いてある。
うぱ / upamune
例えばこのローファイ、こいつがローファイと認識しているローファイヒップホップは、
michiru_da
ちょっとなんかローファイかどうかわかんないけど、ノイジーな音が壊れてる。
うぱ / upamune
これなんて言うんだろう?これかな?ビニールノイズ的なリムショットっていうやつが、
定義してこのフィルターをかける。
michiru_da
今はバスドラとスネアとハイハットで構成されてるんですけど、
多分リムショットっていうのは追加されてますね。
うぱ / upamune
そうです。なんでここはもう定義し放題ですね。
このX0.2みたいなやつは、Xって書いたら音量が0.8なんですけど、
ビッグXにしたら一番中は1なんですけど、XとビッグXも書けるし、0.2みたいな手動で変えれます。
変数もできるし、ドラムとパーカッションで別々定義して、それをプラスで合成して再生するみたいな。
逆に弾くみたいなこともできるっていう感じですね。
私が知らなかったポリリズムって何ですか?みたいな感じになったやつも対応してて、最小公倍数で1パターンになるようになってる。
michiru_da
ポリリズムは違うリズムを一度に鳴らすやつですね。
うぱ / upamune
なんでその…
michiru_da
さっきの言いかけてたやつなんですが、これとこれ一緒やんけみたいな。
うぱ / upamune
それね、ちょっと待ってくださいね。
多分これ行き過ぎで…これ入門書いてあるんで、ドキュメント読むと多分全部のやり方が書いてて。
これね、これ面白くないですか?確率的ヒットみたいなやつがあって、このXXXXで2個目と4個目のXがハテナついてるんですけど、
これが鳴る確率が50%なんですよ。
で、こっちも確率視点もできて、これが70%になる、30%になるみたいな。
だから毎回同じじゃないビートに人間味を変えられますっていうやつ。
これがエフェクトですね。リバーブ0.2とかディレイ。
高度な音楽プログラミング
うぱ / upamune
で、このエフェクトは何個もチェーンできて繋げられるっていう感じで、
michiru_da
で、エフェクトじゃないやつが、あ、で、IFとかも使える。
うぱ / upamune
ランダムも使える。あ、これか。変換関数ですね。
これはその、何これ縦棒って何て言うんだろうね。
michiru_da
縦棒ね。円マークと一緒に同居している縦棒ね。
うぱ / upamune
これはなんかその、あるこの一つの、なんていうの、このシーケンスを、
michiru_da
小説かな。
うぱ / upamune
何かしらをできるんですよ。
そしたら例えばシーケンスを逆順にするリバースとか、
全体をN倍速にするやつとか、ランダムにするシャッフルとかいうやつがありますね。
Euclid Rhythmって何だこれ。
っていうやつを作ってましたって感じですね。
これまだ試してないですけど、これVSコード、カーソルでも使えますけど、その拡張機能も作ってて、
マークダウンって左で書いたら右にプレビューされるじゃないですか。
あれと同じように左でこのコードを書いたら右の再生が途中で変わるみたいな、
ライブコーディングオーディオ機能を理論上搭載しているっていう、
ちゃんとLSPって言われる、ランゲージサーバーの機能も搭載してるんで、
音楽制作と技術の進展
うぱ / upamune
そのコードの補完とかエラーとか、それもちゃんと途中で出るっていう感じになって。
michiru_da
コード補完ってどうなるの?ただ繰り返してくれるのかな。
うぱ / upamune
例えばBPMの後ろには数字しか取らないとか、
すでに変数を定義したらその変数が出るとか、感じですね。
なんでこれを作って満足しました。
michiru_da
なんで?曲を作れる?
うぱ / upamune
これね、ちゃんとシェア機能もあります。
michiru_da
これすごいな。
うぱ / upamune
ちゃんと整形機能もある。
michiru_da
なんかうぱさんが最初に送ってくれたやつにそのスイングの設定とかがあって、
ガレージバンドとか使わずにこのコードで作曲する、
なんかを作るところまでは100歩譲って理解できるとしても、
最初からスイングの機能とかついてるの好奇のすぎんだろって。
うぱ / upamune
スイングは私も何がよくわかってないけど、最初からつけてきた。こいつが。
最初からあったのはBPMとスイングですね。
そうなんだ。
michiru_da
リズムでちょっとジャズっぽいリズムに変わってるやつのことをスイングって言うんですけど。
うぱ / upamune
確かにどっかで言われてましたね。スイングのことは。
自分で作ったソフトウェアではないけど、あ、これだ。
michiru_da
ちょっと遅れて。
うぱ / upamune
作ったソフトウェアのドキュメントを書かせるってすごい面白い。
その入門ガイドを作れるのがすごい面白い。
プロのチップとか書いてるしね。
しかも地味に大変だったのが、今道谷さんにそのドキュメントを見せてるんですけど、
このコードあるじゃないですか、このBPMとか。
これ色ついてるじゃないですか。これ大変でしたね。
普通の語言語とかJavaScriptって一般的に知られた言語だから、
このシンタックスハイライトって呼ばれるものが用意されてるんですよ。
これって自分で勝手に作った言語だから、ないじゃないですか。
それも生成したり。
これは言語としてあるわけじゃないの?
この公文も全部自分で。
michiru_da
そうなんだ。
そうですそうです。
うぱ / upamune
これはさっきの縦棒とこっちのエフェクトみたいなのあるじゃないですか。
公文的に似たり寄ったりすぎるけど、最初同じだったんですけど、
私が逆の方がいいよみたいな感じで言って、完成したのがこれです。
こういうのやってる人もいるんですか?
こういうのがあってみたいな。
michiru_da
そういうのもすでに他のいろんな言語とかであったりするんですけど、
うぱ / upamune
みんな公文はまちまちっていう感じなんで、
市場を調査させて、どういう機能があるのかってどういう機能があるのかって、
それぞれのメリットデメリットみたいなのを挙げさせて、
初心者にこれで十分ないい感じのやつを公文だけ定義して教えてみたいな。
それで私が、これはいろいろいらない。
誰だよ。
自分語が必要。
誰だよ。
michiru_da
絶対初心者にいらないんだよ。
ってのをやりましたね。
うぱ / upamune
これね、だいぶ楽しかったですね。
でも確かに初心者の定義が難しいな。
michiru_da
めちゃくちゃ音楽好きだけど、
うぱ / upamune
その曲を作るのは初めてみたいな人、
michiru_da
スイングはいるのか。
うぱ / upamune
あるいは、
michiru_da
たぶん音楽好きだけれども、
スイングを作るのは初めてみたいな人、
スイングはいるのか。
あるいは、
音楽好きだけれども作曲をやったことないアンドエンジニア。
うぱ / upamune
急に狭なる。
演奏するプログラミング、ライブコーディングの思想と実践。
誰に書いてるの?
ソニックパイかなっていうやつが多分めちゃ有名。
michiru_da
パイは演習率のパイなんだ。
うん、ほんとだね。
コード、エブリッシング。
うぱ / upamune
ここで実際にコードを編集しながら、
michiru_da
おもろー。
うぱ / upamune
舞台で演奏するっていう。
michiru_da
おもしろいっすね。
うぱ / upamune
これが一番有名なやつかな。
全然違いますよね、公文が。
さっきの私のやつと。
michiru_da
確かに。
うぱ / upamune
たぶん、私のやつは他にあった、
視覚的に分かりやすいような公文を採用してるみたいな感じですね。
michiru_da
結構楽譜っぽい感じですね。
小説のどのタイミングで何が起きるかがパッと見て分かるような書き方になっています。
うぱ / upamune
さっき言ってたのは、このキットみたいな定義すれば、
このキックはここのWAVファイルに対応するみたいなのを書けばいけるっていう感じですね。
なんでこれをね、使ってちょっと頑張ろう。
頑張ってください。
私、そんな感じです。
だいぶマジで本当に私もヤックシェービングだなって思いましたよ。
michiru_da
そうですね。
うぱ / upamune
ヤックシェービングすぎる?
michiru_da
そうすぎる。
うぱ / upamune
そうすぎる。
michiru_da
それで満足してるから。
高機能すぎるヤックシェービングにしては。
うぱ / upamune
そうなんだよ。やっぱね、ソフトウェアの作る難しさを感じました。
どんどんこれもあったほうがいいんじゃね?これもあったほうがいいんじゃね?みたいな感じになるにつれて、
もとからあった機能がぶち壊れたりとか、なんか一回も鳴らなくなったりとか、
テストも書いてるんですけど、音声のテストで、コード的には割と正しいんだけど、
最終的に正しい音が鳴ってるのか鳴ってないのかっていうテストがちょっと無理すぎて、
しかも私も分かんないし。
michiru_da
そうね。
うぱ / upamune
結構大変でした。
ディープリサーチの構築
michiru_da
確かに音楽に詳しい人にテストしてもらう。
うぱ / upamune
本当だよ。
はい、面白かったです。
これ全部iOSだけでぽちぽち押しながら作ったんで、
なんかおもろい時代やねっていう感じですね。
michiru_da
すごいね。
ちょっとうぱさんと比べるとだいぶ私は何も作ってないんですけど。
私は大きく2つのことをやりまして、
1個目はですね、年末にやってたことでも言ったんですけど、
ディープリサーチを手元で作っていました。
これはやり方が、
私はオープンAIのドキュメントを見ながらやったんですけど、
オープンAI cookbook っていうところに、
ディープリサーチ API with Agents SDK とか、
LLM だけを使って作るみたいな、
2パターンのやり方が書いてあったので、
ちょっとどっちもやってみました。
社内でもディープリサーチを手元で動かしたよみたいなのを、
発表している人がいて、
自分も年末にやってみようと思いました。
AI に聞いたら、まずは AI SDK を使わずに、
Snow LLM でやる方がいいよみたいなのを教えてくれたので、
どっちものパターンをやったっていう感じですね。
やったことはもう本当に cookbook に書いていることをそのまま、
説明を読み、コードを1行ずつコピーをして、
動かしてみるみたいな感じですね。
LLM ベースの方は、
ディープリサーチのモデルみたいなのを使って、
リーズニングを有効にし、
ウェブサーチのツールみたいなのを定義して、
動かしてみるみたいな感じでした。
この推論とか調査そのものよりも、
調べたものをナンバリングして、
このことはここに書いてあったよみたいなのの、
引用ができるみたいな、
サイテーションだ、
それも実装する方法が後ろに書いてあって、
そっちの理解に時間がかかったというか、
それも一緒にできるようにしてくれる、
ドキュメントでございました。
それで、LLM ベースで1回作った後に、
AISDK の方では、
そのエージェントを複数定義して、
リッチに作るみたいな、
最初、ユーザーが、
これについて調べてくれみたいに言われた時に、
質問が追加で必要かとか、
このまま調査できるかを判断するエージェントと、
曖昧な依頼だった時に、
質問リストをまたこっちで生成して、
ユーザーに確認するエージェントと、
実際調査に必要な手順を整理するエージェントと、
実際に操作をするエージェントみたいな、
4つに分けて作ってみるみたいな感じで、
こんなに分けないといけないんだ、
すごいみたいなことが書いてありますね。
MockAnswersみたいな便利機能みたいなのがあって、
それは実際にLLMのモデルを動かすと、
お金がかかっちゃったりするので、
APIを呼び出さずに、テストとか開発のために、
用意したダミーの回答を生成して、
テストできる機能みたいなのが定義すれば使えるみたいなのがあって、
すごい優しいなみたいな。
うぱ / upamune
これ実際になぞってみると、
さっきのディープリサーチのことかと思いきや、
サイテーションのやり方ってどうやるんだっけとか、
Mockってソフトウェア開発の他にある機能なんですよ。
そういうところの気づきを得られるのがすごいいいですよね。
michiru_da
そうですね。サイテーションも確かにそう言われると結果に出てるなってなって、
それは別で書かないといけないのかみたいなのも言われると確かに。
うぱ / upamune
最初の100文字目までをどうやって使いますみたいなのとかを書いてました。
あとね、このエージェント分けとかね。
michiru_da
そうですね。
うぱ / upamune
分担。
michiru_da
うん。
自分で多分書いてたら、
調査可能か質問可能かを仕分けるやつとか、
調査に必要な手順を再生成するやつとかは結構スキップして最初作りそうだなと思ったんで、
今の最新のモデルで必要かわかんないんですけど、
分けるとしたらこうなんだみたいなふうに思いました。
クックブックは初めて見たんですけど、
他にもいろんな作るものの例とかが載っているので、
参考になりそうだなという感じでした。
うぱ / upamune
みちるださんのブックマックバー、クックブックしかない。
アプリケーションの開発
michiru_da
そうです。
うぱ / upamune
オープニングでクックブックしかないというすごい後半。
michiru_da
普段使わないから。
あとは年始にやったことの乖離も喋りましたが、
丸の内線、他の駅を徒歩で歩くということをやりましたので、
またそれに必要なアプリケーションを作りました。
上に路線図が載ってて、出発駅、到着駅、出発時刻を入れると、
距離と歩く速さから到着時間を予測してくれるやつというか、
結局間に合ったのは前までに作ってた機能とそんな変わらないなという感じなんですけど、
この後、到着した時間を一覧で出したいみたいなのはずっと思っていて、
撮影した写真のデータを撮って、そこからこの写真が撮れたのはいつなので、
駅に着いたのはいつだよみたいな結果が分かるような機能を作ろうと思って、
今プロトタイピングをしています。
別に充電が潤沢にあれば、ストラバとかスマートボチとかで測ればいいんですけど、
私はそれを有効にするとすぐ電池がなくなっちゃうので、
撮影した写真ベースでそれを記録として残せるといいなと思っています。
うぱ / upamune
これに限らないですけど、このウォーキングアプリって、
そこそうじゃないんだよみたいなのが出るじゃないですか。
なので、自分が考えた完璧な仕様書を用意しておいて、
新しいコーディングエージェントが出たら一発でどこまで作れるようになるのかっていう、
なんかおもろいベンチにはなりそうだなと思いました。
私地味に感動したのが、これどうやってホスト、どうやってデプロイしたんですかこれ。
michiru_da
どうやって?
うぱ / upamune
みちるださんが一人でやったんですか?
michiru_da
そう、でもクラウドフレアを使ってて、
これ回答がちょっと合ってるかもわかんないんですけど、
うぱ / upamune
試してない。
前のミチュラアップありましたよね。
michiru_da
そう、この山手線アプリとか大江戸線アプリもあって、
全部クラウドフレアで取ったドメインで管理をしてます。
静的なページの公開の仕組み、ワーカーズ&ページズっていうやつに新しいアプリケーションを追加して、
そこでGitHubの連携をして、そのままデプロイできました。
一回失敗して、リストの設定みたいなやつをやらないといけなかった。
うぱ / upamune
確かにリストのディレクトリどこに掘られるのか。
michiru_da
そこで普通にやると失敗しちゃうんで、
それもエラーの内容とかをフロードコードに聞いたら、
そのリストの設定をGitHubの方に一個ファイル追加して、
混ぜてすればうまくいきますよって。
言われてその通りにやったらできました。
うぱ / upamune
すごい時代だよ。
やりたいですよ本当。
私もさっきのTenkeyアプリ、Exe、Dev以外全部同じ方式でクラウドフレアでやってますね。
michiru_da
素晴らしい。
うぱ / upamune
すごいね。
これ地味にプルリクエスト出してる段階でプレビュー環境立つからすごいですよ。
マージしなくても分かる。
分かるっていうのは。
プルリクエストを出すじゃないですか、
新しい機能を追加しました。
で、本番環境は、
ここがあるんじゃね?
michiru_da
ほらほら。
どうやって見るの?
うぱ / upamune
下のコミットプレビューURL。
michiru_da
これか。
これ押したら、
うぱ / upamune
URL見てください。
専用の本番環境に影響を与えない。
michiru_da
なるほどね。
このパサに教えてもらった、
フロードコードのギタバクションズみたいなやつで、
自分も修正してたんですけど、
どこでプレビューするんだってなってたけど、
ここでできるのか。
なるほどね。
基本ブランチのプレビューURLをクリックしておけば。
うぱ / upamune
これめっちゃ便利でした。
さっきのiOSでしかないときに。
michiru_da
ここで見ればいいのか。
うぱ / upamune
これすごいよね。
michiru_da
便利だ。
マジで感謝。
自分はパサに文字でそう言われてもあんま分からなかったんで、
どうすればいいんだと思って、
とりあえずノールックで一旦全部マジしちゃって、
本番で全てを確認してました。
うぱ / upamune
しかもこれクラウドフレアページで、
年末年始の振り返り
うぱ / upamune
ドメインをクラウドフレアで管理している場合は、
カスタムドメインをすげえ簡単に、
Mitchell.appにすげえ簡単につなげられるから、
そこもまたグッドですね。
michiru_da
グッドですね。
カスタムドメインの編集みたいなやつで、
すぐに作りました。
うぱ / upamune
これすごいよね。
本当はもっとめんどくさいんですよ。
そうなんだ。ありがとう。
こんなのできない。
michiru_da
そうなんだ。ありがとう。
うぱ / upamune
わざわざDNS設定しに行って、
michiru_da
また覚えることが多すぎて離脱するところだった。
うぱ / upamune
すごいな。マジで。
michiru_da
すごい時代だ。ありがたい。
うぱ / upamune
結構バイブコーディングみたいなのは、
知ってる人いるけど、
ホストするところまで、
ちゃんとやってる人って、
そんなに多くないんじゃないとは思ってるんですよね。
エンジニア以外で。
michiru_da
そうね。
ドメイン撮るってどうしたらいいか分かんないしね。
うぱ / upamune
よかったですね。あの時ドメイン撮っておいて。
撮っておいて。
michiru_da
ちょうど1年前ですよね。
ちょうど1年前ですね。
1年前にご飯食べた時に撮ってました。
うぱ / upamune
すごいな。
michiru_da
ありがたい。絶対もっと活用した方がいいんだよな。
もうちょっと作ろう今年は。
うぱ / upamune
あら。バイブコーダーとして。
これmitchell.appですもんね。
もうアプリを作るために生まれたドメインだもんね。
しかもこれ無料って恐ろしいよね。
michiru_da
恐ろしいね。
でもすごいいっぱい機能あるけど、
ワーカーズ&ページズしか使ってない。
うぱ / upamune
それでいいんだよ。
michiru_da
ありがたい。
うぱ / upamune
すごいな。
michiru_da
はい、そんな感じでした。
マジで何時間年末年始の話してるんだよ。
うぱ / upamune
喋らなかった時の不在を。
michiru_da
この2週間の秋よね。
こんな感じか。
じゃあちょっとようやく年末年始の出来事と
見たコンテンツと作ったものを話し終えたので、
ちょっと2026年もやっていきましょう。
はい。
そんな感じで。
ようやく終わった。
4時間半の収録。
うぱ / upamune
すごいな。ようやるな。
michiru_da
本当ですよ。
でもこれで在庫が増えたから1週間分。
うぱ / upamune
潤沢。
どっちかがバスに引かれても大丈夫な。
michiru_da
大丈夫じゃないだろ。
1週間で戻ってこれない可能性が高いから。
確かに。
フワフワのマイクで。
うぱ / upamune
うるさいぞ。
michiru_da
じゃあそんな感じで。
感想・質問・フィードバックは
Xのハッシュタグ、マヂカル.fm全部小文字、
また概要欄のお便りフォーマでお寄せください。
Spotifyのベルマークを押すと更新通知が届きますので、
そちらもお願いします。
ありがとうございます。
うぱ / upamune
ありがとうございました。
