FirebaseStorageの画像をSDWebImageで表示しようとして詰まった話 #Swift

自己紹介

筋肉エンジニアとしてSpajamで頭角を表す
JX通信社でNewsDigestというニュースアプリを作っています
個人でもアプリ作ります

最近作ったアプリ(個人)

ダイエット動画で継続できる！習慣化アプリ-Lily

Firebase

Firebaseを使う理由

個人開発なのでmBaas
RealtimeDatabaseなのでFirebase
Cloud Functionでプッシュ通知打てそうなのでFirebase

しかし、画像の処理で少し詰まる。。。

いつもやる画像処理

imageView.sd_setImage(with: thumbnailUrl)

FirebaseStorageではこれができなかった

理由

ファイルのダウンロードURLしかわからない

Firebase Console

ダウンロードURLを叩いてみると

jpgファイルがダウンロードされてしまった。

ちなみにこのURLをSDWebImageの以下でいう　thumbnailUrl にセットしても画像が表示されませんでした。。

imageView.sd_setImage(with: thumbnailUrl)

＿人人人人人人人人人＿
＞ SDWebImageが使えない ＜
￣Y^Y^Y^Y^Y^Y^Y^Y^Y￣

しかし、FirebaseUIがあった

FirebaseUI

cocoapods

pod 'Firebase/Storage'
pod 'FirebaseUI/Storage'

import Firebase
import FirebaseStorage

static func setImage(uid: String, imageView: UIImageView?){
        let storageRef = Storage.storage().reference()
        let ref = storageRef.child("profile/\(uid).jpg")
        imageView?.sd_setImage(with: ref, placeholderImage: nil)
    }

SDWebImageが拡張されていて、firebaseStorageの参照を引数にあげたら、よしなにやってくれる

imageView?.sd_setImage(with: ref, placeholderImage: nil)

ここまでのまとめ

SDWebImageネイティブなので、画像の処理方法、それしかない僕
FirebaseStorageだとファイルをダウンロードしちゃうURLしかないからいい感じでキャッシュするのは無理かと思ったけど
FirebaseUIというライブラリがなんとかしてくれた

追記(ここで急展開)

Twitterの様子

Firebase Storage、アクセス許可周りをpublicにすればパーマリンク得られたような気がする #potatotips
— 🙌🐼ひらり🐼🙌 (@hiragram) 2017年8月28日

FirebaseStorage に上げた画像が簡単に取ってこれない話、自分のアプリでは「別に public でもいいじゃんこれ」と結論付けて、FirebaseStorage の設定自体を変えたなぁw そうすると楽勝でした。 #potatotips
— tsuyoyo (@tsuyogoro) 2017年8月28日

なんやて！？

downloadURLがダメなのではなかった

原因

ファイルのタイプが application/octet-stream だったこと

この場合のdownloadURLは飛んでみるとわかりますが、ファイルをダウンロードしちゃいます。

→ これが image/jpeg になってれば、downloadURLはSDWebImageで使える形になる。

アップロードするときのTips

アップロードするときにやることがあった！

meta.contentTypeを指定する

let ref = storageRef.child(key)
let meta = StorageMetadata()
meta.contentType = "image/jpeg" // <- これ！！
ref.putData(data, metadata: meta) { metadata, error in
    metadata!.downloadURL()! // このURL
}

タイプが image/jpeg になるとFirebase StorageのConsoleに以下のように表示されます。ここで画像も見れるようになるんですね！

リンクを押すとダウンロードされずに、そのままブラウザで見れます。

ということで

ブラウザでURL叩いても見れた！

これでSDWebImageにurlをセットしていつも通りに画像が見れました！

みなさんご指摘ありがとうございます。Tipsが得られました！

結論

firebaseUIを使ってRefで画像を表示してもいいし、
アップロード時の指定に注意していつも通りSDWebImageを使って表示することもできる

知って入れば後者の方が簡単な気がします。

FirebaseStorageの画像をSDWebImageで表示しようとして詰まった話

目次