こんにちは！🐶
前回は、テキストをFirestoreに送信しました！
今回は、画像を送信してみましょう！
#podをインストールしよう！
はい！ではまず,Firestoreに画像を保存するためにはpodをインストールしなければならないので、以下のコードをpodファイルに記入し、
pod 'Firebase/Storage'
そしてターミナルに行き、cdしてからpod updateを書きましょう！👇
#Firebaseに画像を保存できるようにしよう
それでは次に、Firebaseに画像を保存できるようにしましょう！Firebaseのこのアプリのページに行き、左のメニューからStorageを選択しましょう！
そして始めるボタンを選択し、設定画面が出てくるので、次へ＞完了という流れでボタンを押してください！
そうするとStorageが使えるようになりました！
#画像を選べるようにしよう！
次は画像を選んで、それを投稿画面のimageViewにセットするところまでしましょう！
まず、storybordに行って、新しくimageViewと投稿画像を選ぶbuttonをセットしましょう！👇
はい！そして、PostViewControllerに行き、imageViewの@IBOutletと画像を選ぶbuttonの@IBActionを用意しましょう！👇
import UIKit
import Firebase
import FirebaseAuth
class PostViewController: UIViewController {
@IBOutlet weak var postTextView: UITextView!
@IBOutlet weak var postButton: UIButton!
@IBOutlet weak var postImageView: UIImageView!
//Fierestoreのデータベース
let db = Firestore.firestore()
override func viewDidLoad() {
super.viewDidLoad()
}
@IBAction func Post(_ sender: Any) {
//postTextViewにテキストが入っていたら
if let message = postTextView.text {
db.collection("Post").addDocument(data: ["text" : message,"date":Date().timeIntervalSince1970]) { (error) in
if error != nil {
print("送信失敗")
} else {
print("送信成功")
//postTextViewを空にする
self.postTextView.text = ""
}
}
}
}
@IBAction func chooseImageButton(_ sender: Any) {
}
}
はい！では @IBAction func chooseImageButtonの中に画像を選ぶコードを書いていきましょう！
今回はUIImagePickerControllerを使って画像を選んでいきます！そのためにUIImagePickerControllerのdelegate（設定）をできるようにextensionにUIImagePickerControllerDelegateを書いてあげてください！👇
@IBAction func chooseImageButton(_ sender: Any) {
//imagePicerContoeoller で画像を選択できる
let imagePicerContoeoller = UIImagePickerController()
imagePicerContoeoller.delegate = self
imagePicerContoeoller.allowsEditing = true
self.present(imagePicerContoeoller,animated: true,completion: nil)
}
}
extension SignUpViewController:UIImagePickerControllerDelegate,UINavigationControllerDelegate{
}
そして、画像を選ぶようにするには、info.plistの設定も必要なので、info.plistに行き、プラスマークをおし、Privacy - Photo Library Usage Descriptionを選択し追加しましょう！
そうすると、画像が選べるようになりました！
それでは、extensionの中にコードを書いていきます！
extension PostViewController: UIImagePickerControllerDelegate,UINavigationControllerDelegate {
func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
if let choosedImage = info[.originalImage] as? UIImage {
postImageView.image = choosedImage
}
dismiss(animated: true, completion: nil)
}
}
ここれで、画像がちゃんとimgeViewの中に入るようになりました！
#Strageに画像を保存しよう！
それでは次は、FirebaseのStorageに画像を保存したいと思います！
その前にFirebaseStorageをimportしましょう！
そして前回作ったPostViewControllerの @IBAction func Postの中に画像を保存していくコードを書いていきましょう！
全体としては以下のコードになります！
@IBAction func Post(_ sender: Any) {
//画像が入っていたら
guard let postImage = postImageView.image else {return}
//1画像ファイルが大きすぎるので小さくする
let uploadImage = postImage.jpegData(compressionQuality: 0.3)
//2画像の名前を設定
let fileName = NSUUID().uuidString
//3保存する場所を指定
let storageRef = Storage.storage().reference().child("postImage").child(fileName)
//4storageに画像を保存
storageRef.putData(uploadImage!, metadata: nil) { (metadate, error) in
//errorがあったら
if error != nil {
print("Firestrageへの画像の保存に失敗")
}else {
print("Firestrageへの画像の保存に成功")
//5画像のURLを取得
storageRef.downloadURL { (url, error) in
if error != nil {
print("Firestorageからのダウンロードに失敗しました")
}else {
print("Firestorageからのダウンロードに成功しました")
//6URLをString型に変更して変数urlStringにdainyuu
guard let urlString = url?.absoluteString else {return}
}
}
}
}
}
やり方としては、
１そのままの画像ファイルでは大きすぎるのでjpegDataで小さくして保存
２画像の名前を設定(fileNmae)
３保存する場所を設定
ここに関しては、実際にStorageを見てみるとわかりやすいです！👇
Storageを見てみるとpostImageというファイルができています。これを選択し中身を見てみると
投稿した画像が保存されています！最初のchild("postImage")が親ファイルとなり、その下のchild(fileName)が子ファイルとなります。
４保存
５画像のURLを取得
先ほど保存した画像を以前作ったPostコレクションの中に入れます。このとき、画像はURLに直さなければならないので、downloadURLでURLを取得します！
６URLをString型に直す
という流れです！
そして６でゲットしたURLは前回作ったPostコレクションに入れてあげます！こうすることで、投稿した際に画像もPostコレクションに届けてあげることができます！
やり方としては、以前作ったfunc savePost()の（）の中に(postImageUrl:String)と書いてあげることで先ほどのURLを引数として使えるように設定します。
そして、postImageUrlも投稿する際に、Postコレクションに入れたいので新しく"image"フィルターを用意してあげます👇
func savePost(postImageUrl:String){
//postTextViewにテキストが入っていたら
guard let text = postTextView.text else {return}
//imageフィルターを用意し、URLを入れる
db.collection("Post").addDocument(data: ["text" : text,"date":Date().timeIntervalSince1970,"image":postImageUrl]) { (error) in
if error != nil {
print("送信失敗")
} else {
print("送信成功")
//postTextViewを空にする
self.postTextView.text = ""
}
}
}
()の中にpostImageUrl:Stringと書いてあげ、ここに先ほどのURLを入れます！
そしてこの関数を@IBAction func Postの中の画像のダウンロードが終わったタイミングで読んであげましょう！👇
@IBAction func Post(_ sender: Any) {
//画像が入っていたら
guard let postImage = self.postImageView.image else {return}
//画像ファイルが大きすぎるので小さくする
let uploadImage = postImage.jpegData(compressionQuality: 0.3)
//画像の名前を設定
let fileName = NSUUID().uuidString
//保存する場所を指定
let storageRef = Storage.storage().reference().child("postImage").child(fileName)
//storageに画像を保存
storageRef.putData(uploadImage!, metadata: nil) { (metadate, error) in
//errorがあったら
if error != nil {
print("Firestrageへの画像の保存に失敗")
}else {
print("Firestrageへの画像の保存に成功")
//画像のURLを取得
storageRef.downloadURL { (url, error) in
if error != nil {
print("Firestorageからのダウンロードに失敗しました")
}else {
print("Firestorageからのダウンロードに成功しました")
//URLをString型に変更
guard let urlString = url?.absoluteString else {return}
//ここで呼ぶ。postImageUrlにurlStringを入れることで、URLがsavePostに届く
self.savePost(postImageUrl: urlString)
}
}
}
}
}
という流れになります！
少々複雑ですが、基本やり方を覚えるだけなので、あまり頭を使わなくても良いと思います！
これで画像を無事Firestoreに送信することができました！👇
#お疲れ様でした！
今回は、画像の保存について学んできました！これもまた簡単にできちゃいましたね！
次回は、ユーザーのプロフィール設定について学んでいきます！