SwiftUIでオーディオアプリパーツを自作してみよう

SwiftUIでオーディオアプリパーツを 自作してみよう masacom @masacom 2026/02/22 Hakodate.swift #1

自己紹介 Swift での開発を始めて1年目になります。 主に音 響アプリの個人開発をしています 職業：WEBフロントエンドエンジニアやってます masacom @masacom 本日のオーディオパーツサンプル masaconm / masacom SwiftAudioControls https://github.com/masaconm/SwiftAudioControls.git

• https://github.com/masaconm/SwiftAudioControls.git

本日は UIパーツの作り方にフォーカス 対象 ー SwiftUI を使用したDAW風カスタムUIパーツを自作してみたい方 今日のサンプル: UIパーツの作り方にフォーカス ー ノブ / 垂直スライダー / ボタン 3つのUIが 同じ値 を共有して連携 備考： 本資料は SwiftUI によるUI実装と状態管理（MVVM + Reducer）を中心 に解説しており、DSP処理, Combine, DIコンテナ詳細は含みません。

オーディオアプリUIの課題 課題 一般アプリ オーディオアプリ ON / OFF の2択 連続した細かい増減 タップ中心 ドラッグ・ノブでの回転操作 標準コントロールで足りる カスタムUIが必要になる ノブやスライダーで "繊細な調整感" を出したい！

本日のサンプルの全体像 MiniAudioDemoScreen ├── AudioKnob ドラッグで回転するノブ ├── VerticalLinkedSlider 縦向きスライダー └── AudioActionButtonStyle MUTE / FLAT ボタン ノブとスライダーは 同じ値を Binding で共有 MUTE / FLAT ボタンを押しても値が変わる 全部つながっている

まずボタンから見てみよう ButtonStyle を使うとここまでできる Point isActive を外から渡すだけで ON/OFF の見た目が切り替わる

ButtonStyle の使い方 ボタン本体は Text("MUTE") だけ 見た目はすべて ButtonStyle 側に閉じ込める 再利用しやすい / テストしやすい

スライダー Point 縦向きスライダーは rotationEffect だけ

メインのノブを作る AudioKnob の構造（すべて ZStack で重ねる） AudioKnob (ZStack) LinearGradient で金属感 ├── ② 目盛り 9本の Capsule を rotationE ect で配置 ├── ③ 発光アーク 現在値と中央値の差分を視覚化 ├── ④ 内側コア RadialGradient でくぼみ感 └── ⑤ ポインター Capsule + rotationE ect で角度表示 ff ZStack に重ねていくだけ、難しい描画APIは使わない ff Point ├── ① 外周リング

ノブ：ポインターの回転 値が変わる angle が変わる ポインター回る

ノブ：ドラッグの全体フロー XY座標 指の位置 極座標 atan2(dy,dx) 角度差分 Δθ 差分が大き過ぎたら除外 ジャンプ禁止 値の更新 value Δ

ノブ：ドラッグジェスチャーのフロー XY座標 → 極座標 指の位置 (x, y) とノブ中心の差分を計算 atan2(dy, dx) で角度 θ を求める

ノブ：ドラッグジェスチャー Step 2 角度差分 1フレームごとの角度の 変化量 を計算 差分が大きすぎたら ジャンプとして除外

ノブ：ドラッグジェスチャー 備考 角度と値の対応 (サンプルでの設定値)

ノブ：発光エフェクト KnobContinuousGlowArc は Shape を継承したカスタム図形 0 dBからのずれが大きいほど glowStrength が上がる 操作中 (isInteracting) はさらに明るくなる

色の責務分け AudioUIColorToken ＋ Assets.xcassets の2段構成 テーマカラー変更も Assets 一箇所でOK

3つのUIの値連携 Point どちらのUIを操作しても viewModel.Value が変わる → 逆側のUIも自動で追従する

値連携：ViewModel 側 Point 入力元 (source) を持たせると、将来スムージングの強さを変える など拡張しやすい

まとめ UIパーツ 実装のポイント ボタン ButtonStyle で見た目を閉じ込める 縦スライダー 標準 Slider + rotationE ect(-90 ) ノブ 極座標変換 + rotationE ect + Shape 共通の設計方針 ff ff 色は ColorToken → Assets の2段構成で責務分離 値の更新は ViewModel の1点を通す @Binding を分けることで入力元を識別できる

利用をした技術 ・Swift ・SwiftUI ・MVVM + Clean Architecture（Reducerパターン） ・Gesture処理（DragGesture） ・ButtonStyle / Slider のUIカスタマイズ ・Asset Catalog（colorset）を使ったデザインシステム運用 ・Combine（@Published の通知基盤として利用） ・DIコンテナ（AppDependencyContainer） ※本資料ではCombine / DI の詳細解説は省略しています

参考ドキュメント SwiftUI - Apple Developer Documentation https://developer.apple.com/documentation/swiftui/ DragGesture | Apple Developer Documentation https://developer.apple.com/documentation/swiftui/draggesture Binding | Apple Developer Documentation https://developer.apple.com/documentation/swiftui/binding ButtonStyle | Apple Developer Documentation https://developer.apple.com/documentation/swiftui/buttonstyle Slider | Apple Developer Documentation https://developer.apple.com/documentation/swiftui/slider

• https://developer.apple.com/documentation/swiftui/
• https://developer.apple.com/documentation/swiftui/draggesture
• https://developer.apple.com/documentation/swiftui/binding
• https://developer.apple.com/documentation/swiftui/buttonstyle
• https://developer.apple.com/documentation/swiftui/slider

本日のサンプルコード リポジトリはGitHubで公開しています。 masaconm / masacom SwiftAudioControls https://github.com/masaconm/SwiftAudioControls.git

• https://github.com/masaconm/SwiftAudioControls.git