10年欲しかった音楽管理アプリを、AIと一緒に作りはじめた

#macosnative
https://macos-native.github.io/

Transcript

1. 10年欲しかった 音楽管理アプリを、 AIと一緒に作りはじめた log5 macOS native symposium #12
2. log5 • 分類的にはソフトウェアエンジニアのなかま • 趣味は作曲。オーケストラ向けの楽曲も • 今回が初めてのm cOSアプリ開発 a • log5.jp 来てね
3. SimpleMediaPlayer
4. ことのはじまり • 2000年代のはなし a a a • 音楽管理は Windows Medi Pl yer, Win mp, iTunes などで並行管理
5. a a 当時の Windows Medi Pl yer
6. 当時の Win mp (のスキン) a a https://skins.web mp.org/
7. 当時の iTunes a a https://pc.w tch.impress.co.jp/docs/2003/1031/ pple.htm
8. ことのはじまり • 音楽管理は Windows Medi Pl yer, Win mp, iTunes などで並行管理 • iPodを使い始めたのがきっかけで iTunes に一本化 a a a a a a https://j .wikipedi .org/wiki/IPod_cl ssic
9. a a a https://pc.w tch.impress.co.jp/docs/2003/1031/ pple.htm https://skins.web mp.org/
10. ことのはじまり • 音楽管理は Windows Medi Pl yer, Win mp, iTunes などで並行管理 • iPodを使い始めたのがきっかけで iTunes に一本化 • 隣の芝生が青すぎる a a a a • アプリのデザインを Win mp とかと比べてしまう
11. 2014年、iTunes M tch 開始 a a a https:// v.w tch.impress.co.jp/docs/review/review/647266.html
12. ことのはじまり • 音楽管理は Windows Medi Pl yer, Win mp, iTunes などで並行管理 • アプリのデザインを Win mp とかと比べてしまう a a a a a • iTunes M tch を契約したあたりからいろいろトラブルが続く
13. ある日、ライブラリから一部の音楽が消えた • アルバムを表示すると番号が飛んでいる • 間違いなくすべてインポートしたはずなのに…
14. ある日、ライブラリから一部の音楽が消えた
15. おわかりいただけただろうか
16. 曲名が長すぎて末尾が消えた！！
17. ことのはじまり 塵も積もれば山となる • 音楽管理は Windows Medi Pl yer, Win mp, iTunes などで並行管理 • アプリのデザインを Win mp とかと比べてしまう • iTunes M tch を契約したあたりからいろいろトラブルが続く • 例：ライブラリの同期に失敗し、ファイルの拡張子にも異常 • これ自体は iTunes M tch の問題だが… a a a a a a • こうした色々なことが重なって、別のアプリでライブラリを管理することを考えはじめた
18. せっかく使うなら、見た目も自分好みにしたい a https://skins.web mp.org/
19. 代替を探す…も、見つからず • 自分に合う音楽管理アプリが見つからない • 当時探した範囲ではM cで使いたいものが見つからなかった • Win mpのためにWindowsに戻るのもなぁ… a a a a • （余談）Win mp はかつてM c版があったらしい（が探していた時はなくなっていた記憶）
20. (余談) Winamp 復活してた…? a a a a https:// pps. pple.com/jp/ pp/win mp/id1664497725
21. 自作にも踏み出せず • m cOSアプリを自作する知識も、勉強から始める時間も意欲も足りなかった a • あの頃って普通に終電帰りが普通だったし、何なら日曜朝出勤の月曜終電帰宅
22. 10 years later
23. a a https://open i.com/j -JP/codex/
24. a a a https://cl ude.com/j /product/cl ude-code
25. a https://cl ude.com/product/design
26. 今ならもしかすると…
27. とはいえ、いきなり全部任せるのは不安…
28. 最初に頼んだのは、HTMLのデザイン 使用したツール：Cl ude design → Codex (GPT-5.5 high) 「音楽を管理できて、LEDがあり、スペクトラムも表示でき るソフトを作りたい。」 「まずHTMLでデザインを作ってほしい。」 a 依頼の要旨。実際のプロンプトの引用ではない（忘れました…そしてなぜか履歴には残っていないという）
29. HTMLをもとに、macOSアプリを実装 使用したツール：Cl ude design → Codex (GPT-5.5 high) 「このデザインをもとに実装してほしい」 1. HTMLでデザインを作る 2. そのデザインをもとに実装を依頼する a 3. 出来上がったアプリを確認する
31. レビューは大事 実装計画を先に作らせてからGOするのが理想 • SwiftUI と AppKit をうまく組み合わせて作ってはくれているが… • デザインがAppleっぽくないのを作ろうとする（最新モデルは違うかもしれない） • ビジュアライザー（スペクトラム）をダミーで作ろうとしていたので阻止
32. • ビジュアライザー（スペクトラム）をダミーで作ろうとしていたので阻止 a a ff a ff a a a https://fortee.jp/iosdc-j p n-2024/propos l/452c6 0-677 -4 8-9363-c7e8 f278 60
37. デモ：スペクトラムとVUメーター お披露目タイム • 音楽を再生する • スペクトラムの動きを見る • VUメーターの動きを見る
38. 自分の「こうしたい」が 実現する楽しさ • LED部分やスペクトラムは、実装して特に面白かった • 欲しかった見た目を、自分のアプリに入れられる
39. もう全部AIでいいんじゃないかな (画像略)
40. もう全部AIでいいんじゃないかな (画像略) 割とそうもいかない
41. ある日、Codexにイコライザーを実装してほしいと依頼した a a https://j .wikipedi .org/wiki/イコライザー_(音響機器)
42. できたもの:
43. NSSlider の isVertical が 0 だとこうなる
46. こういうわかりやすいものはまだ良くて…
47. 性能問題 アプリが処理落ちする • AIコーディングエージェントはケアしてくれないことも多い • 最近のF bleやAstr などは違うかもしれないが… a a • 改善案自体は出してくれるが、効果がないこともしばしば
48. イコライザーを開くと処理落ちする件 性能問題 • イコライザーを開いた瞬間にアプリの描画がカクカクに • ただ「解決して」と言っても難しそうだった • SwiftUI の処理が怪しかったので、具体的に場所を示して確認してもらった
49. イコライザーを開くと処理落ちする件 原因 1. ビジュアライザが60fpsで更新 2. ウィンドウの最小サイズ算出でレイアウトを再測定 3. ViewThatFits が候補レイアウトを測定（して応答カーブの表示可否を制御） 4. 非表示候補にある NSSlider 11本を繰り返し生成・破棄 つまり、パネルを開いているだけで、メインスレッドに負荷
50. ViewThatFits(in: .horizontal) { "# 第1候補：スライダー群とカーブを横に並べる HStack(spacing: 12) { equalizerControls Divider() EqualizerCurveView(settings: player.equalizer) .frame(minWidth: 150, idealWidth: 210, maxWidth: 260) } "# 第2候補：スライダー群だけを横スクロールで表示する ScrollView(.horizontal) { equalizerControls } .scrollIndicators(.hidden) } .padding(.horizontal, 12) .padding(.vertical, 8)
51. 「改善して」と依頼 ViewThatFits で候補を測定 ↓ onGeometryChange で幅を取得し、条件分岐
52. 幅を測って、必要なレイアウトを選ぶ • 修正前: ViewThatFits で候補を測定 • 修正後: onGeometryChange で幅を取得し、条件分岐 • フレームレートが改善して、カクつきも起きなくなった 本当にこれが望ましいかは不明だが、まあ、動いてるのでヨシ👉
53. ビート表示の遅れ Music Underst ndingの解析結果を使い、 再生位置に合わせてLEDにビートなどを表示。 • 症状：ビートドットと再生時刻が遅れて更新される • 主因：共通で参照する PlayerViewModel.currentTime の更新が0.5秒ごと • 120 BPMでは1拍も0.5秒。更新タイミングによって、点灯が拍から遅れる a • スペクトラムは別経路で更新している
54. 更新を30 Hzに変更 音と画面の同期は別途確認 • 再生中の時刻更新を0.5秒間隔から30 Hzへ • P ceの表示用データを事前計算 a • 拍検索を二分探索に変更
55. 人力でチェックもしよう • AIが計測し、原因を調べ、修正する…が理想ではあるが… • 人間が修正後の動作をダブルチェックする • 計測結果と、実際に使った感触を照らし合わせる
56. 細かく指定しないほうがいいことも • UIは当初細かいところまで指示していた • 設定画面のUIなど、AIに自由に作らせたほうがよいケースもあった • おもに自力で言語化や設計が難しい画面とか • 出来上がった画面を見て判断する
57. こだわる場所と、任せる場所 場面 今回の進め方 欲しい画面のイメージがある HTMLでデザインを作り、実装の参照にする 自力で設計が難しいUI 細かく指定せず、AIの案を見て体感でチェック 不具合を調べる AIが計測・調査・修正し、人間がダブルチェック が理想だけど普通に介入は必要
58. 今後の課題 • できていること • スペクトラムやVUメーターなど、欲しかった表示の実装 • これから • 大量ファイルの管理には、未検証のところが多い • 今のライブラリが3000曲くらあるが、全部扱えるのか…. • ミュージックアプリの代替にはまだほど遠い
59. 楽しい！ macOSの、普段使うアプリの見た目を、自分で作れる
60. まとめ 10年欲しかったものを、自分で育てられる楽しさ • AIコーディングエージェントの普及で、m cOSアプリを自作するハードルは下がった • 誰でも今日からスタートは切れるが、知識がないと遠回りになる a • Apple プラットフォーム、Swift、ソフトウェア関連技術を知る努力は大事