システム開発＜基本編＞SwiftUIで色（HSB）のスライダ調整アプリ：Slider

Swift
2025.11.28
システム開発＜基本編＞SwiftUIで色（RGB）のスライダ調整アプリ：Slider
今回は、SwiftUIで、Slider を利用して、光の三原色（RGB）で色を調整するアプリケーションを開発する記事を紹介します。 色（RGB）のスライダ調整（Slider）や画面サイズの取得（GeometryReader）で、 UIの部品の幅や高さの設定が出来ます。
www.stella-karin.website
2025.11.27

前回は、SwiftUIで、Slider を利用して、色（RGB）をスライダ調整が出来る

アプリケーションを開発する記事を紹介しました。

 

 

今回は、SwiftUIで、Slider を利用して、色（HSB）をスライダ調整が出来る

アプリケーションを開発する記事を紹介します。

SwiftUIで色（HSB）のスライダ調整アプリ：Slider

 

 

習得内容

今回、SwiftUIで色（HSB）をスライダ調整が出来るアプリケーションを生成する事で、

下記の内容を習得する事が出来ます。

  • スライダ：SwiftUIで色（HSB）のスライダ調整（Slider）
  • 画像の回転・反転：rotationEffect()、rotation3DEffect()、axis で、画像（Image）を回転させたり、向きを変更します。
  • 画像の拡大・縮小：scaleEffect() で、画像（Image）の拡大・縮小が出来ます。

 

色の三属性：HSB

色の三属性（HSB）は、下記で構成されています。

  1. 色相（hue）：赤、緑、青などの色合いの事。0～360度の角度で表現します。
  2. 彩度（saturation）：色の鮮やかさの度合いの事。0～100％で表現します。
  3. 明度・輝度（brightness）：色の明るさの度合いの事。0～100％で表現します。

 

光や色の三原色と色の三要素の詳細については、下記を参照してみて下さい。

 

色彩の基本をわかりやすく解説！色の三属性・色相環・三原色とは？｜イニシャルギャラリー
色の3属性（色相、明度、彩度）や色相環は、デザインやアートの分野だけではなく日常生活にも役立てることができます。本記事では色の3属性、色相環、三原色色彩の基本であるそれぞれの特性について簡単に解説します。[IncludeShortcode ...
ig.initialsite.com

 

動作環境

今回も、アプリが動作する環境は下記になります。

  • mac OS：Sequoia 15.6.1
  • iOS：26.0
  • Xcode：26.0.1
  • Swift：6.2.1

 

 

色（HSB）スライダ調整アプリ

では、色（HSB）スライダ調整アプリを作成していきます。

 

Xcode の上部タブメニューより、File → New → File from Template を選択します。

 

SwiftUI View を選択します。

 

名称は、ColorSliderHSBView を入力してみます。

 

Create ボタンを押して、ColorSliderHSBView.swift を作成します。

 

ContentView：メインメニュー（ランチャー）

前回の記事で作成したメインメニュー（ランチャー）：ContentView を確認します。

 


import SwiftUI

struct ContentView: View {

    @State var isPopupView_1 = false
    @State var isPopupView_2 = false
    @State var isPopupView_3 = false

    var body: some View {
        
        VStack{
            Button {
                self.isPopupView_1.toggle()
            } label: {
                Text("QRCodeView")
                    .font(.title2)
            }
            .fullScreenCover(isPresented: $isPopupView_1, content: {
                QRCodeView(isPopupView_1: $isPopupView_1)
            })
            .padding()

            Button {
                self.isPopupView_2.toggle()
            } label: {
                Text("ColorPickerView")
                    .font(.title2)
            }
            .sheet(isPresented: $isPopupView_2, content: {
                ColorPickerView(isPopupView_2: $isPopupView_2)
            })
            .padding()

            Button {
                self.isPopupView_3.toggle()
            } label: {
                Text("ColorSliderRGBView")
                    .font(.title2)
            }
            .sheet(isPresented: $isPopupView_3, content: {
                ColorSliderRGBView(isPopupView_3: $isPopupView_3)
            })
            .padding()
        }
    }
}

#Preview {
    ContentView()
}

 

メインメニュー（ランチャー）は、以下の内容です。

  • QRCodeView
  • ColorPickerView
  • ColorSliderRGBView

 

モーダル表示：sheet()

先程、作成した ColorSliderHSBView を ContentView のメニューに追加します。

 


import SwiftUI

struct ContentView: View {

    @State var isPopupView_1 = false
    @State var isPopupView_2 = false
    @State var isPopupView_3 = false
    @State var isPopupView_4 = false

    var body: some View {
        
        VStack{
            Button {
                self.isPopupView_1.toggle()
            } label: {
                Text("QRCodeView")
                    .font(.title2)
            }
            .fullScreenCover(isPresented: $isPopupView_1, content: {
                QRCodeView(isPopupView_1: $isPopupView_1)
            })
            .padding()

            Button {
                self.isPopupView_2.toggle()
            } label: {
                Text("ColorPickerView")
                    .font(.title2)
            }
            .sheet(isPresented: $isPopupView_2, content: {
                ColorPickerView(isPopupView_2: $isPopupView_2)
            })
            .padding()

            Button {
                self.isPopupView_3.toggle()
            } label: {
                Text("ColorSliderRGBView")
                    .font(.title2)
            }
            .sheet(isPresented: $isPopupView_3, content: {
                ColorSliderRGBView(isPopupView_3: $isPopupView_3)
            })
            .padding()

            Button {
                self.isPopupView_4.toggle()
                
            } label: {
                Text("ColorSliderHSBView")
                    .font(.title2)
            }
            .sheet(isPresented: $isPopupView_4, content: {
                ColorSliderHSBView(isPopupView_4: $isPopupView_4)
            })
            .padding()
        }
    }
}

#Preview {
    ContentView()
}

 

ColorPickerView、ColorSliderRGBView と同様に ColorSliderHSBView を呼び出す際、

モーダル表示をさせる sheet() を指定しました。

 

ColorSliderHSBView：色スライダ調整アプリ

色（HSB）スライダ調整アプリを作ってみます。

 

ソース例：ColorSliderHSBView

次に、ContentVeiw（親画面）から呼び出される ColorSliderHSBView（子画面）の

ソースを紹介します。

 


import SwiftUI

struct ColorSliderHSBView: View {

    @Binding var isPopupView_4: Bool
    @State private var color: Color = .white

    @State private var hueRatio = 0.7  // 色相
    @State private var saturationRatio = 1.0  // 彩度
    @State private var brightnessRatio = 1.0  // 輝度
    @State private var opacity = 1.0  // 不透明

    var body: some View {
        ZStack {
            Color(red: 1.0, green: 0.75, blue: 1.0, opacity: 0.2)
                .edgesIgnoringSafeArea(.all)

            VStack {

                HStack {
                    Image(systemName: "thermometer.variable.and.figure")
                        .font(.system(size: 100))
                        .foregroundColor(Color(hue:hueRatio, saturation: saturationRatio, brightness: brightnessRatio, opacity: opacity))
                        .scaledToFill()
                        .rotationEffect(.degrees(hueRatio * 360))
                        .padding()

                    Image(systemName: "tortoise.fill")
                        .font(.system(size: 100))
                        .foregroundColor(Color(hue:hueRatio, saturation: saturationRatio, brightness: brightnessRatio, opacity: opacity))
                        .scaledToFill()
                        .rotation3DEffect(.degrees(180), axis: (x: 0, y: 1, z: 0))
                        .scaleEffect(opacity)
                        .padding()
                }

                VStack {
                    AdjustView(parameterName: "Hue", parameterColor: .cyan, parameterConst: 360.0, parameterUnit: "度", parameter: $hueRatio)

                    AdjustView(parameterName: "Saturation",parameterColor: .indigo, parameterConst: 100.0, parameterUnit: "%", parameter: $saturationRatio)
                    
                    AdjustView(parameterName: "Brightness", parameterColor: .brown, parameterConst: 100.0, parameterUnit: "%", parameter: $brightnessRatio)

                    AdjustView(parameterName: "Opacity", parameterColor: .purple, parameterConst: 100.0, parameterUnit: "%", parameter: $opacity)
                }
                .padding()

                Spacer()

                let adjust_color: Color = Color(hue:hueRatio, saturation: saturationRatio, brightness: brightnessRatio, opacity: opacity)

                Text("HEX : #\(adjust_color.hex)")
                    .font(.system(size:20))
                    .foregroundColor(.green)
                    .padding()

                Button(action: {
                    withAnimation {
                        self.isPopupView_4.toggle()
                    }
                }, label: {
                    Text("Close")
                        .font(.title2)
                        .foregroundColor(.black)
                })
                .padding()
            }
        }
    }
}

#Preview {
    ColorSliderHSBView(isPopupView_4: .constant(false))
}
  • ZStack { Color(red: 1.0, green: 0.75, blue: 1.0, opacity: 0.2) ：メインメニューから呼び出されて、覆い被さるので、メインメニューと区別する為、画面の土台となる部分にピンクを設定しています。
  • Image(systemName: “thermometer.variable.and.figure“)：システムシンボル（SF Symbols）より、温度計のアイコンを設定しています。
  • .foregroundColor(Color(hue:hueRatio, saturation: saturationRatio, brightness: brightnessRatio, opacity: opacity))：アイコンの色や明るさを設定している部分です。
  • Slider で色や明るさを調整すると、同時に温度計のアイコンの色や明るさが変わります。
  • .rotationEffect(.degrees(hueRatio * 360))：hueRatio の Slider で、温度計のアイコンを回転させます。0 → 360度で、時計回りの角度になります。初期値は、252.0度で左下の向きまで回転します。
  • Image(systemName: “tortoise.fill“)：システムシンボル（SF Symbols）より、カメのアイコンを設定しています。
  • .foregroundColor(Color(hue:hueRatio, saturation: saturationRatio, brightness: brightnessRatio, opacity: opacity))：アイコンの色や明るさを設定している部分です。
  • Slider で色や明るさを調整すると、同時にカメのアイコンの色や明るさが変わります。
  • .rotation3DEffect(.degrees(180), axis: (x: 0, y: 1, z: 0))：.rotation3DEffect で画像の向きを回転させる事が出来ます。degrees で回転角度を設定します。
  • axis は回転軸で、どの方向に回転させるかを指定します。x: は上下、y: は左右、z: は奥行です。カメのアイコンは、左向きに変更しています。
  • .scaleEffect(opacity)：opacity の Slider で、カメのアイコンの大きさを縮小しています。0 % ← 100 %で縮小しますが、0 % → 100 %で拡大して元の大きさに戻ります。

 

こちらは、SF Symbols で、thermometer.variable.and.figure のアイコンを表示した

画面です。

 

こちらは、SF Symbols で、tortoise.fill のアイコンを表示した画面です。

 


                VStack {
                    AdjustView(parameterName: "Hue", parameterColor: .cyan, parameterConst: 360.0, parameterUnit: "度", parameter: $hueRatio)

                    AdjustView(parameterName: "Saturation",parameterColor: .indigo, parameterConst: 100.0, parameterUnit: "%", parameter: $saturationRatio)
                    
                    AdjustView(parameterName: "Brightness", parameterColor: .brown, parameterConst: 100.0, parameterUnit: "%", parameter: $brightnessRatio)

                    AdjustView(parameterName: "Opacity", parameterColor: .purple, parameterConst: 100.0, parameterUnit: "%", parameter: $opacity)
                }
                .padding()
  • AdjustView：下記で記載している共通スライダ（View）を呼び出しています。
  • parameterName：対象となるスライダの名称を設定しています。
  • parameterColor：対象となるスライダの色（Color）を設定しています。
  • parameterConst：対象となるスライダの倍率（定数）を設定しています。
  • parameterUnit：対象となるスライダの単位を設定しています。
  • parameter：対象となるスライダのswift内部で保持している値（割合）を設定しています。

AdjustView については、前回の記事で紹介していますので、今回は省略します。

 


                let adjust_color: Color = Color(hue:hueRatio, saturation: saturationRatio, brightness: brightnessRatio, opacity: opacity)

                Text("HEX : #\(adjust_color.hex)")
                    .font(.system(size:20))
                    .foregroundColor(.green)
                    .padding()
  • let adjust_color: Color =：adjust_color（Color：拡張版）へ、スライダで調整した色や明るさ（情報）を代入しています。
  • Text(“HEX : #\(adjust_color.hex)”)：ColorExtensions で拡張した16進数（HEX）表現を呼び出して、Textで表示しています。

 

アプリ実行：シミュレータ起動

では、実際にアプリを実行してみます。

Xcode の上部タブメニューより、Product → Run を選択するか、command + R を

押してみて下さい。

 

エラーが無ければ、iPhoneシミュレータが起動します。

 

ContntVeiw（メインメニュー）に追加した ColorSliderHSBViewボタンが

表示されている事が確認出来ました。

 

ColorSliderHSBView：起動画面

では、ColorSliderHSBViewボタンを押してみます（タップします）。

 

初期値で、温度計（左下）とカメ（左向き）のアイコンの色（HSB）が青で表示されています。

Hue：252.0 度 / swift：0.70

Saturation：100.0 % / swift：1.00

Brightness：100.0 % / swift：1.00

Opacity：100.0 % / swift：1.00

HEX：#3300FF

 

前回、作成した ColorSliderRGBView（色スライダ調整アプリ）と同様に、

ContntVeiw（メインメニュー）の上に ColorSliderHSBView（色スライダ調整アプリ） が

重なって、表示された事が確認出来たと思います。

 

ColorSliderHSBView：スライダ調整

では、実際にスライダを移動させて、色（HSB）を調整してみます。

 

スライダを移動させて、温度計（左上）とカメ（左向き、縮小）のアイコンの色（HSB）が

薄いピンクで表示されました。

Hue：310.7 度 / swift：0.86

Saturation：74.7 % / swift：0.75

Brightness：88.8 % / swift：0.89

Opacity：58.5 % / swift：0.58

HEX：#E239C4

 

更に、スライダを移動させて、別の色（HSB）を調整してみます。

 

 

スライダを移動させて、温度計（右上）とカメ（左向き、縮小）のアイコンの色（HSB）が

薄いレモン色で表示されました。

Hue：58.8 度 / swift：0.16

Saturation：72.2 % / swift：0.72

Brightness：89.0 % / swift：0.89

Opacity：38.8 % / swift：0.39

HEX：#E3E03F

 

まとめ

今回は、SwiftUIで、Slider を利用して、色の三属性（HSB）で色や明るさを調整する

アプリケーションを開発する記事を紹介しました。

 

次回は、SwiftUIで、NavigationStack を利用して画面遷移を行うアプリケーションを

開発する記事を紹介しようと思います。

コメント

タイトルとURLをコピーしました