TequilaBell アップデート情報 (v1.2.0になる予定)

アップデート情報

・WidgetKitを使用して、Widgetに表示できるように！・iOS版のみカウントが可能に！・好きな写真をベルにできるように！

特に「好きな写真をベルにできる」部分を解説

2023.08.05 開発合宿にて・・・・・・

PhotosPicker

SwiftUIから直接写真選択ができるすごいやつ。個人的にWatchOSにも反映させることができるのがすごい。

iOS16~ 対応なので、マジで新しいやつです。

WWDC2022で登場！サンプルコードも見れるぞ！

さぁ実装！

まずはシンプルなテキーラベルのViewの実装をみて！

defaultTequilaBell.swift
import SwiftUI

struct defaultTequilaBell: View {
    
    let soundPlayer = tequilaPlayer()
    
    @State var bellCount: Int = 0
    
    var body: some View {
        VStack {
            Image("tequilaBell")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .onTapGesture {
                    soundPlayer.musicPlay()
                }
        }
        .frame(maxWidth: .infinity,
                   maxHeight: .infinity
            )
        .background(Color.black)
        .ignoresSafeArea()
    }
}

特にImageを表示する部分だけであれば

defaultTequilaBell.swift
var body: some View {
        VStack {
            Image("tequilaBell")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .onTapGesture {
                    soundPlayer.musicPlay()
                }
        }
}

これだけ。

ではここにPhotosPicker(画像選択できるやつ)を追加してみる。

originalTequilaBell.swift
import SwiftUI
import PhotosUI

struct originalTequilaBell: View {
    @State var selectedItems: PhotosPickerItem? = nil
    @State var image: UIImage?
    
    let soundPlayer = tequilaPlayer()
    
    var body: some View {
        VStack {
            if let image = image {
                Image(uiImage: image)
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(height: 400)
                    .onTapGesture {
                        soundPlayer.musicPlay()
                    }
                    .padding()
            } else {
                Text("ベルにしたい画像を選択してね！")
                    .padding()
            }
            PhotosPicker(
                selection: $selectedItems,
                matching: .images,
                photoLibrary: .shared()) {
                    Text("写真を選択")
                }
                .onChange(of: selectedItems) { pickedItem in
                    Task {
                        guard let imageData = try await pickedItem?.loadTransferable(type: Data.self) else { return }
                        guard let uiImage = UIImage(data: imageData) else { return }
                        image = uiImage
                    }
                }
        }
        .frame(maxWidth: .infinity,
                   maxHeight: .infinity
            )
        .background(Color.black)
        .ignoresSafeArea()
    }
}

ちょっと増えましたね。追加した部分を抜粋すると、

//使うためにimport
import PhotosUI 

//ピッカーで選択したものを入れる変数
@State var selectedItems: PhotosPickerItem? = nil 
//ベル画像を入れる変数
@State var image: UIImage?

この辺準備して、

VStack {
    if let image = image {
        Image(uiImage: image)
            .resizable()
            .aspectRatio(contentMode: .fit)
            .frame(height: 400)
            .onTapGesture {
                soundPlayer.musicPlay()
            }
            .padding()
    } else {
        Text("ベルにしたい画像を選択してね！")
            .padding()
    }

ベルにするImageを準備。 if let image = imageとすることでimageの中に画像がある時しか表示しないのがテクい。出してない時はelseでText表示したりするといいね。

PhotosPicker(
    selection: $selectedItems,
    matching: .images,
    photoLibrary: .shared()) {
        Text("写真を選択")
    }
    .onChange(of: selectedItems) { pickedItem in
        Task {
            guard let imageData = try await pickedItem?.loadTransferable(type: Data.self) else { return }
            guard let uiImage = UIImage(data: imageData) else { return }
            image = uiImage
        }
    }

PhotosPickerでPickerを用意できます。 matching: .imagesにすると写真だけを対象にします。と言うことは動画とかもここの設定次第でいけるってわけだ。 .onChangeで画像選択を監視してます。 selectedItemsを配列にすると複数選択もできる！！！ほんで選択された画像が uiImageに入って、それをimageに入れてるってわけでですね。

思ったより簡単！何よりSwiftUI単体でこれを書けるのが革命なんです！！！

WatchOSはどうやって実装するの？

WatchOSはこんな感じ！

TequilaBellWatchApp/originalTequilaBell.swift
import SwiftUI
import PhotosUI

struct originalTequilaBell: View {
    @State var selectedItems: PhotosPickerItem? = nil
    @State var image: UIImage?
    
    let soundPlayer = tequilaPlayer()
    
    var body: some View {
        VStack {
            if let image = image {
                Image(uiImage: image)
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .onTapGesture {
                        setAudioSession()
                        soundPlayer.musicPlay()
                    }
                    .padding()
            } else {
                Text("ベルにしたい画像を選択してね！")
                    .padding()
            }
            PhotosPicker(
                selection: $selectedItems,
                matching: .images) {
                    Text("写真を選択")
                }
                .onChange(of: selectedItems) { pickedItem in
                    Task {
                        guard let imageData = try await pickedItem?.loadTransferable(type: Data.self) else { return }
                        guard let uiImage = UIImage(data: imageData) else { return }
                        image = uiImage
                    }
                }
        }
    }
}

お気づきですか？

そう！iOSと同じ実装でできちゃうんです！感動🥺

これでイキれますね。

おまけ

開発合宿スタート時、過去の亡霊に取り憑かれていました。

＊ここからの話は古い実装なので試す必要はないです。

UIImagePickerController で実装！

どりー「ImagePickerといえばUIImagePickerControllerやんね。」・・・ググる。どりー「お〜出てきた出てきた。2021年の記事やけどまぁいけるか。」

どりー「Controller作って〜〜〜SwiftUIから呼び出して〜〜〜そうそう！こんな感じだった！」・・・実装完了！どりー「よーし！できた！ビルド！」どりー「やった動いた！！！よっしゃぁ〜〜〜〜！！！！！！」

どりー「いや〜いい記事だったな。最後の備考も見とこ」・・・ファッ？！？！？！？！