📤

SwiftUiでfirebase Storageに画像を保存する

2023/11/02に公開

Firebase

Swift

SwiftUI

tech

Swiftuiでfirebase storageに画像を保存することを久しぶりにやったので
その時のことをまとめておきます。

主の開発環境

os
mac os Sonoma 14.0

Xcode
Version 15.0.1

SwiftUiで最低限の画面を実装する

本当は写真フォルダから画像を選択してFirebaaseに上げる感じにしたいんですが、めんどいのでAssetsの画像を使います。

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Image("IMG_1161")
            Button(action: {
                print("アップロードした")
            }){
                Text("画像をアップロードする")
            }
        }
    }
}

#Preview {
    ContentView()
}

そうするとこのようにButtonとImageが実装できています。
今回アップロードするのは自分の3分で作って気に入っているヨダレの垂らしているキャラクターです。

Firebase SDKの設定

FirebaseをSwiftのプロジェクトで使うためには

Cocoapodsを使う方法
Swift Package Managerを使う方法

の2つがありますがSwift Package Managerの方が個人的に簡単で好きなので今回は
Swift Package Managerを使います。

Xcodeを開いて
File → Add Package Dependencies

そうするとこのような画面が出てくるので検索欄に
github.com/firebase/firebase-ios-sdk
このURLを貼り付けると Firebase-ios-sdkというものが出てくると思うのであったら選択して右下の
「Add Package」を押してTwitterでも見て少し待つと

これが出てくるので Add Packageを押せば Firebase ios sdkの設定は完了です。

ここからはノリノリでFirebaseでiOSのプロジェクトを作りましょう。アプリの登録→設定ファイルのダウンロードまでは指示に従って行なってください。

Firebaseの初期化コードを初期生成されているファイルに追記する必要があります。

import SwiftUI
import FirebaseCore

class AppDelegate: NSObject, UIApplicationDelegate {
  func application(_ application: UIApplication,
                   didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
    FirebaseApp.configure()

    return true
  }
}


@main
struct Firebase_Storage_appApp: App {
    @UIApplicationDelegateAdaptor(AppDelegate.self) var delegate
    
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

SwiftUIプロジェクトでFirebaseを使うための初期設定が完了しました。
続いてStorageの設定をしていきます。

私は書いているこの記事だけでしかプロジェクトを使用しないので本番環境モードですが、
必要に応じてテストモードを使い分けてください。

よくわかりませんがasia-northeast1が東京らしいです。

ルールというところに行ってtrueに変えてコードを公開してください
trueにしないと画像をアップロードしたりダウンロードできません

これでFirebaseの設定が完了です。

SwiftUIの実装

import SwiftUI
import Firebase
import FirebaseStorage

struct ContentView: View {
    var body: some View {
        VStack {
            Image("IMG_1161")
            Button(action: {
                UploadImage()
            }){
                Text("画像をアップロードする")
            }
        }
    }
    //画像をアップロードする関数
    func UploadImage(){
        let storageref = Storage.storage().reference(forURL: "gs:").child("Item")
        
        let image = UIImage(named: "IMG_1161.png")
        
        let data = image!.jpegData(compressionQuality: 1.0)! as NSData
        
        storageref.putData(data as Data, metadata: nil) { (data, error) in
            if error != nil {
                return
            }
        }
    }
}

#Preview {
    ContentView()
}

forURLのところはコピペした自分のURLを入れてください。

うまくいくと画像のように「Item」という名前でアップロードされています。ダウンロードしてみるとしっかりと画像をアップロードすることができていることがわかります。

最後に

自分が久しぶりにやったことを一部参照して書いただけなので、プログラムの解説はないです。
Firebaseの公式ドキュメントを読んだ方がアップロード周りは理解できるかなと思います。環境構築や設定方法など少しでも参考になれば嬉しいです。

最後まで読んでいただきありがとうございました

主の開発環境

SwiftUiで最低限の画面を実装する

Firebase SDKの設定

SwiftUIの実装

最後に

Discussion