--- title: SwiftUIでオーディオアプリパーツを自作してみよう tags: #ios #swift #swiftui #hakodate.swift #カスタムui author: [masacom](https://www.docswell.com/user/masacom) site: [Docswell](https://www.docswell.com/) thumbnail: https://bcdn.docswell.com/page/LE3WNWW4E5.jpg?width=480 description: ■Hakodate.swift #1 のLT資料 Hakodate.swift #1 https://japan-region-swift.connpass.com/event/371217/ この資料は、SwiftUIを使用したDAW風カスタムUIパーツの作り方にフォーカスし、ノブ・垂直スライダー・ボタンの3つのUIが同じ値を@Bindingで共有して連携する仕組みを中心に解説しています。 ■ GitHub SwiftAudioControls https://github.com/masaconm/SwiftAudioControls ■ 内容 ・SwiftUIでオーディオアプリパーツUI（ノブ／縦スライダー／アクションボタン）を構築する設計 ・ノブ操作の中核となる、極座標変換による角度算出と値マッピング（ドラッグ時のジャンプ抑制・スムージングを含む） ・MUTE / FLAT の状態遷移ロジック（最終有効値の保持と復帰）の実装方針 ・Reducer を中心にした状態管理（Action -> State）と、UI層からの責務分離 ・@Binding / @Published を使ったノブ・スライダー・数値表示のリアルタイム同期 ・Assets.xcassets の colorset を使ったデザイントークン管理とテーマ変更手順 ■ 本資料で解説をした技術： ・Swift ・SwiftUI ・MVVM + Clean Architecture（Reducerパターン） ・Gesture処理（DragGesture） ・ButtonStyle / Slider のUIカスタマイズ ・Asset Catalog（colorset）を使ったデザインシステム運用 ■ 備考：デモアプリケーション全体で使用しているが解説を省略した技術 ・Combine（@Published の通知基盤として利用） ・DIコンテナ実装の詳細（AppDependencyContainer） ■ 参考ドキュメント 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 published: February 24, 26 canonical: https://www.docswell.com/s/masacom/K9MEY1-2026-02-22 --- # Page. 1 ![Page Image](https://bcdn.docswell.com/page/LE3WNWW4E5.jpg) SwiftUIでオーディオアプリパーツを 自作してみよう masacom @masacom 2026/02/22 Hakodate.swift #1 # Page. 2 ![Page Image](https://bcdn.docswell.com/page/8EDKWKK57G.jpg) 自己紹介 Swift での開発を始めて1年目になります。 主に音 響アプリの個人開発をしています 職業：WEBフロントエンドエンジニアやってます masacom @masacom 本日のオーディオパーツサンプル masaconm / masacom SwiftAudioControls https://github.com/masaconm/SwiftAudioControls.git # Page. 3 ![Page Image](https://bcdn.docswell.com/page/V7PK9KKDJ8.jpg) 本日は UIパーツの作り方にフォーカス 対象 ー SwiftUI を使用したDAW風カスタムUIパーツを自作してみたい方 今日のサンプル: UIパーツの作り方にフォーカス ー ノブ / 垂直スライダー / ボタン 3つのUIが 同じ値 を共有して連携 備考： 本資料は SwiftUI によるUI実装と状態管理（MVVM + Reducer）を中心 に解説しており、DSP処理, Combine, DIコンテナ詳細は含みません。 # Page. 4 ![Page Image](https://bcdn.docswell.com/page/2JVVMVVGJQ.jpg) オーディオアプリUIの課題 課題 一般アプリ オーディオアプリ ON / OFF の2択 連続した細かい増減 タップ中心 ドラッグ・ノブでの回転操作 標準コントロールで足りる カスタムUIが必要になる ノブやスライダーで "繊細な調整感" を出したい！ # Page. 5 ![Page Image](https://bcdn.docswell.com/page/5EGLGL1DJL.jpg) 本日のサンプルの全体像 MiniAudioDemoScreen ├── AudioKnob ドラッグで回転するノブ ├── VerticalLinkedSlider 縦向きスライダー └── AudioActionButtonStyle MUTE / FLAT ボタン ノブとスライダーは 同じ値を Binding で共有 MUTE / FLAT ボタンを押しても値が変わる 全部つながっている # Page. 6 ![Page Image](https://bcdn.docswell.com/page/4JQYXYDX7P.jpg) まずボタンから見てみよう ButtonStyle を使うとここまでできる Point isActive を外から渡すだけで ON/OFF の見た目が切り替わる # Page. 7 ![Page Image](https://bcdn.docswell.com/page/K74W6WZ2E1.jpg) ButtonStyle の使い方 ボタン本体は Text("MUTE") だけ 見た目はすべて ButtonStyle 側に閉じ込める 再利用しやすい / テストしやすい # Page. 8 ![Page Image](https://bcdn.docswell.com/page/LJ1YVYRKEG.jpg) スライダー Point 縦向きスライダーは rotationEffect だけ # Page. 9 ![Page Image](https://bcdn.docswell.com/page/GJWGLG1P72.jpg) メインのノブを作る AudioKnob の構造（すべて ZStack で重ねる） AudioKnob (ZStack) LinearGradient で金属感 ├── ② 目盛り 9本の Capsule を rotationE ect で配置 ├── ③ 発光アーク 現在値と中央値の差分を視覚化 ├── ④ 内側コア RadialGradient でくぼみ感 └── ⑤ ポインター Capsule + rotationE ect で角度表示 ff ZStack に重ねていくだけ、難しい描画APIは使わない ff Point ├── ① 外周リング # Page. 10 ![Page Image](https://bcdn.docswell.com/page/4EZLMLP673.jpg) ノブ：ポインターの回転 値が変わる angle が変わる ポインター回る # Page. 11 ![Page Image](https://bcdn.docswell.com/page/Y76WNWML7V.jpg) ノブ：ドラッグの全体フロー XY座標 指の位置 極座標 atan2(dy,dx) 角度差分 Δθ 差分が大き過ぎたら除外 ジャンプ禁止 値の更新 value Δ # Page. 12 ![Page Image](https://bcdn.docswell.com/page/G75M5MZM74.jpg) ノブ：ドラッグジェスチャーのフロー XY座標 → 極座標 指の位置 (x, y) とノブ中心の差分を計算 atan2(dy, dx) で角度 θ を求める # Page. 13 ![Page Image](https://bcdn.docswell.com/page/9J29N9RRER.jpg) ノブ：ドラッグジェスチャー Step 2 角度差分 1フレームごとの角度の 変化量 を計算 差分が大きすぎたら ジャンプとして除外 # Page. 14 ![Page Image](https://bcdn.docswell.com/page/DEY4P4D5JM.jpg) ノブ：ドラッグジェスチャー 備考 角度と値の対応 (サンプルでの設定値) # Page. 15 ![Page Image](https://bcdn.docswell.com/page/VJNY5Y6478.jpg) ノブ：発光エフェクト KnobContinuousGlowArc は Shape を継承したカスタム図形 0 dBからのずれが大きいほど glowStrength が上がる 操作中 (isInteracting) はさらに明るくなる # Page. 16 ![Page Image](https://bcdn.docswell.com/page/YE9PYPL4J3.jpg) 色の責務分け AudioUIColorToken ＋ Assets.xcassets の2段構成 テーマカラー変更も Assets 一箇所でOK # Page. 17 ![Page Image](https://bcdn.docswell.com/page/GE8D6DXVED.jpg) 3つのUIの値連携 Point どちらのUIを操作しても viewModel.Value が変わる → 逆側のUIも自動で追従する # Page. 18 ![Page Image](https://bcdn.docswell.com/page/LELM9M8R7R.jpg) 値連携：ViewModel 側 Point 入力元 (source) を持たせると、将来スムージングの強さを変える など拡張しやすい # Page. 19 ![Page Image](https://bcdn.docswell.com/page/4JMYZY6PJW.jpg) まとめ UIパーツ 実装のポイント ボタン ButtonStyle で見た目を閉じ込める 縦スライダー 標準 Slider + rotationE ect(-90 ) ノブ 極座標変換 + rotationE ect + Shape 共通の設計方針 ff ff 色は ColorToken → Assets の2段構成で責務分離 値の更新は ViewModel の1点を通す @Binding を分けることで入力元を識別できる # Page. 20 ![Page Image](https://bcdn.docswell.com/page/PJR969PY79.jpg) 利用をした技術 ・Swift ・SwiftUI ・MVVM + Clean Architecture（Reducerパターン） ・Gesture処理（DragGesture） ・ButtonStyle / Slider のUIカスタマイズ ・Asset Catalog（colorset）を使ったデザインシステム運用 ・Combine（@Published の通知基盤として利用） ・DIコンテナ（AppDependencyContainer） ※本資料ではCombine / DI の詳細解説は省略しています # Page. 21 ![Page Image](https://bcdn.docswell.com/page/PEXQMQ34JX.jpg) 参考ドキュメント 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 # Page. 22 ![Page Image](https://bcdn.docswell.com/page/3EK9G9YPED.jpg) 本日のサンプルコード リポジトリはGitHubで公開しています。 masaconm / masacom SwiftAudioControls https://github.com/masaconm/SwiftAudioControls.git