はじめに
SwiftUIの勉強のためにアプリを作ろうと思い、muupa（読み方：ムーパ）を作成しました。
この記事では、主な3つの機能についてと私のこだわりについてを書いていこうと思います。
参考にしたサイトや実際のコードを記載するので、誰かの役に立てれば嬉しいです！
（技術的内容は薄めで私のこだわりが9割占めます）
主な機能
①色辞書
色の追加や削除、名称変更、お気に入り登録、色の詳細情報の表示などができます。
②カラーピッカー
画面中央にある十字線と画像の交点のカラーコードを抽出します。
実はこの機能、未完なんです。正確なカラーコードが抽出できないんです。。。
これは残課題として後々改修します。
実際のソースコードを置いておくので「こうしたらどう？」みたいなご意見あればコメントお願いします！
実際のコード（ColorPicker）
import SwiftUI
// TODO: 抽出色がおかしい。
// TODO: 画像の縦幅が画面より大きいとタブバーに重なる。
struct ColorPicker: View {
@State private var image: UIImage = UIImage(named: "AppIcon")!
// リサイズ後の画像サイズ
@State private var resizedImageSize: CGSize = .zero
// 画像の可動域
@State private var rangeOfMotionX: CGFloat = .zero
@State private var rangeOfMotionY: CGFloat = .zero
@State private var rValue: Int = 0
@State private var gValue: Int = 0
@State private var bValue: Int = 0
// 移動中の座標
@State private var dragOffset: CGSize = .zero
// 移動開始前の座標
@State private var dragStartPosition: CGPoint = CGPoint.zero
@State private var isDragging: Bool = false
var body: some View {
GeometryReader { geometry in
VStack {
ZStack {
Image(uiImage: image)
.resizable()
.scaledToFit()
.offset(dragOffset)
.background() {
GeometryReader { geometry in
Path { path in
let size = geometry.size
DispatchQueue.main.async {
if resizedImageSize != size {
resizedImageSize = size
let offsetX = (geometry.size.width - resizedImageSize.width) / 2
let offsetY = (geometry.size.height - resizedImageSize.height) / 2
dragOffset = CGSize(width: offsetX, height: offsetY)
}
}
}
}
}
// 縦線
Rectangle()
.frame(width: 1, height: 100)
// 横線
Rectangle()
.frame(width: 100, height: 1)
// 透明なカバー
Color.clear
.contentShape(Rectangle())
.gesture(DragGesture()
.onChanged { gesture in
if isDragging == false {
dragStartPosition = CGPoint(x: dragOffset.width, y: dragOffset.height)
isDragging = true
}
dragOffset = CGSize(width: gesture.translation.width + dragStartPosition.x
, height: gesture.translation.height + dragStartPosition.y)
rangeOfMotionX = ceil(resizedImageSize.width / 2 * 10) / 10
rangeOfMotionY = ceil(resizedImageSize.height / 2 * 10) / 10
dragOffset.width = min(max(dragOffset.width, -rangeOfMotionX), rangeOfMotionX)
dragOffset.height = min(max(dragOffset.height, -rangeOfMotionY), rangeOfMotionY)
(rValue, gValue, bValue) = getRGBFromImage(in: image.resize(to: resizedImageSize)!, at: CGPoint(x: dragOffset.width + rangeOfMotionX, y: dragOffset.height + rangeOfMotionY)) ?? (red: 0, green: 0, blue: 0)
}
.onEnded { gesture in
isDragging = false
}
)
}
PickedColor(rValue: $rValue, gValue: $gValue, bValue: $bValue, image: $image)
}
}
}
}
実際のコード（getRGBFromImage）
func getRGBFromImage(in image: UIImage, at point: CGPoint) -> (red: Int, green: Int, blue: Int)? {
guard let cgImage = image.cgImage else {
return nil
}
let width = cgImage.width
let height = cgImage.height
// ピクセルデータの取得
guard let dataProvider = cgImage.dataProvider,
let pixelData = dataProvider.data,
let data = CFDataGetBytePtr(pixelData) else {
return nil
}
// 指定座標の画像内での位置を計算
let x = Int(point.x)
let y = Int(point.y)
// 画像内での座標が有効か確認
guard x >= 0 && x < width && y >= 0 && y < height else {
return nil
}
// ピクセル情報の取得
let bytesPerPixel = cgImage.bitsPerPixel / 8
let bytesPerRow = cgImage.bytesPerRow
let pixelInfo = y * bytesPerRow + x * bytesPerPixel
// RGB値の取得
let red = Int(data[pixelInfo + 2])
let green = Int(data[pixelInfo + 1])
let blue = Int(data[pixelInfo])
return (red, green, blue)
}
参考にしたサイト
③カラーパレット
SwiftDataを利用して、保存した色を画面にむわむわと表示します。
ファイルサイズの影響で添付ができなかったので、AppStoreで確認するか、実際にアプリを触ってみてくださいm(._.)m
私のこだわり
ここからは私のこだわりについて書いていきます。
⭐️神は細部に宿る⭐️
SwiftUIでリスト表示をすると、下の画像のように区切り線の左端が途切れてしまいます。
私はこれが気に食わなかったんです。
幅いっぱいにできないか探したらこちらでちょうどそのことを解説していたので参考にしました。
結果、下の画像のように表現することが出来ました！
⭐️あなたの事を想って⭐️
検索バーって画面下部にある方が良くないですか？
もし上部にあると私の場合、
- 親指を上の方に持っていって、検索バーをタップする
- 画面下部に出てきたキーボードを親指で操作する
親指が上に下にと忙しいですね。
これ常々思っていたんですよね、なのでmuupaでは下の画像のように検索バーを画面下部に設置しました。
こうする事で指の操作範囲が狭まり、ユーザ負担の削減になると考えています。
⭐️秩序ある自由⭐️
カラーピッカー機能にて、特に制限をしないと画像の可動域がどこまででも広がってしまいます。
それだと不親切かなと思ったので、muupaでは画像の各辺が十字線までしか移動できないように制限してあります。
カラーピッカーの「実際のコード（ColorPicker）」に移動制限を実現するコードが書かれているので参考にしてみてください！
（画像の左頂点が十時線まで）
（画像の上辺が十時線まで）
（画像の右頂点が十時線まで）
⭐️願いが叶うなら、それでいい⭐️
muupaを作るにあたって似たようなアプリをいくつかダウンロードして、使ってみました。
カッコよく言うと”市場調査”ってやつですかね！
そうしたら、こういうの↓がまぁよくある
これと同じものを作っても存在意義がないなと思ったのと、こういうのが使いたいなら他のアプリを使えばいいじゃないと思い、muupaでは必要かどうかは分からないけど、カラーパレットを動かしてみました。
下のライブラリを参考にSwiftDataで色を管理できるように修正を加えました。
SwiftDataについては色々知見が貯まったのでそのうち記事を書こうと思います。
⭐️何事もほどほどに⭐️
”ムーパ”という響きから私は紫色をイメージしました。また、カラーパレットがむわむわ動くので雲もイメージして、アイコン案をいくつか作成しました。
採用したのはアイコン案③です。
本番用は文字サイズを大きくしてあります。
結局、雲感は他と比べると薄いですね。
私は凝り性なので、このアイコン作成にめっちゃ時間を掛けてしまいました。
でもそのおかげもあり、自分で納得のいくアイコンを作成することが出来ました！
アイコン案①
アイコン案②
アイコン案③
アイコン案④
アイコン案⑤
まとめ
今回は「マネタイズが〜」とか「他のアプリとの差別化を図り〜」云々は考えず、SwiftDataというフレームワークに手を出したり、SwiftUIの最初から用意されている機能に満足せず、もっとこうしたいという願望を叶えられないかと孤軍奮闘しました。
私は結構怠惰な人間だと思っていたので、リリースまで出来たのは自分でも驚きです。
きっと、楽しかったのでしょうね。
muupaを作成したことでiOSモバイルアプリやSwiftui、SwiftDataなどの知見を貯めることが出来たと思います。
まだ成長できると思うので貪欲に勉強していこうと思います！
今後もアプリを開発していきます！