Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Firebaseでのファイルアップロード処理と便利ライブラリの紹介

1,530 views

Published on

【MT東京−31】バレンタインデー1ヶ月前から始めるSwift×MT Data APIでのLT登壇資料になります。

Firebaseを使用したサンプル作成にあたり、ファイルアップロード処理の際に実装に詰まった経験やデータ設計の整理に苦労しました。

その経験からFirebaseを扱いやすくするライブラリ「Salada」を導入してサンプルアプリを作成した際の知見や実装ポイント等をまとめました。

Published in: Technology
  • Be the first to comment

Firebaseでのファイルアップロード処理と便利ライブラリの紹介

  1. 1. Firebaseでのファイルアップロード処理 と便利ライブラリの紹介 【MT東京−31】バレンタインデー1ヶ月前から始める Swift×MT Data API 2017/01/14 Fumiya Sakai
  2. 2. 自己紹介と簡単な経歴など ✦ 今までの仕事履歴(本業) 石川県金沢市生まれ 本業はサーバーサイドのプログラマ ※Rails&PHP使い 26歳〜32歳: Webプログラマ(PHP & Rubyがキャリア長い) 23歳〜25歳: Webデザイナー兼ディレクター チャンスがあればiOSアプリ開発も絶賛やってみたい! 趣味:シルバーアクセサリー集め・スイーツ作り・アプリ開発 女子向け・グルメ・エンタメ関連のお仕事が多い Qiita : http://qiita.com/fumiyasac@github Github : https://github.com/fumiyasac ✦ 酒井文也(さかい ふみや) 東京(大塚)住まいの32歳 こんな格好を普段からしているので 遊び人に見られますがエンジニアです。 文系卒に思われますが 実は数学科で理系卒です。 めっちゃお酒好きそうに見えますが ビール苦手でお酒も超弱いです。 今でもたまにUIまわりとか触りたく なることがあったりなかったり 今年の4月からフリーランスです。 (割とお堅い感じの会社にいます) 最近のはまっている食べ物は カボチャと担々麺と甘栗です。 最近はSwift以外ではRailsやLaravel・CakePHP・Node.jsなんかも
  3. 3. これまでに作ったもの(ネイティブアプリ) ① 簡易家計簿アプリ「Coffre」 ② ゲームアプリ「10秒虫食い算」 ・カレンダーを自作しています ・シンプルなお小遣い帳感覚で支出管理できます ・全問正解者ほとんどいません… ・不定期ですがコラムも書いています ・サーバーサイドはRuby on Railsを使用 http://www.coffre.me/ ・デザインにもこだわってみました(特にグラフ) ・実はちょっとバグがあります。 ・問題は今後追加予定(現在110問収録) 個人的にはなりますが、他にもアプリ・Webサービスなど開発中です(2016年も宜しくお願いします) ・サイト等は次回のアップデートで公開予定 http://blog.just1factory.net/services/284 ・若干の中毒性を含みます
  4. 4. カレンダーが好きでライブラリを作りました 日本の祝祭日を計算で出してくれる ・カレンダーアプリ等での活用を想定 ・シルバーウィーク・ゴールデンウィークも対応 ・ハッピーマンデー法の施行も対応 ・春分の日・秋分の日にも対応 ・過去の祝祭日もおおむね考慮はしている 構想や基本実装は僕ですが、他に4名のContributorのお力添えがあり実運用できるレベルになりました! CocoaPods & Carthage & 手動で導入可能 ・HTTP(HTTPS)通信は不要 ★CalculateCalendarLogic ver0.1.2 【2017年】Swift3系への正式対応をしていますので是非README等を参考に導入してみてください! ・Github: https://github.com/fumiyasac/handMadeCalendarAdvance ・実装解説: http://qiita.com/fumiyasac@github/items/33bfc07ad36dfffcdf8f ・Github: https://github.com/fumiyasac/handMadeCalendarOfSwift 新機能や運用保守は継続しています
  5. 5. ✦ Database / Storage / Auth / Notification等の便利機能 Firebaseには便利機能がいっぱい アプリ開発において導入したいであろう機能が用意されている JOINをする形ではなく相互に関連データを持つような形にしてデータ設計をすると良い データの持ち方や設計思想の部分はRDBとは異なることを押さえた上でのデータ設計と実装が必要と感じた。 ★ドキュメントも充実&サンプル解説記事も多い ・CocoaPodsでのインストール&設定ファイル導入でできる ・導入サンプルのQiitaや技術ブログ記事が多い ★データの持ち方や設計の参考資料 ・Firebase Realtime DBの実践投入するにあたって考えたこと http://qiita.com/1amageek/items/64bf85ec2cf1613cf507 【MySQL等のRDBでの設計思想とは異なる点に注意する】 ・RealtimeDB.Firebase.ebisu ・公式のドキュメントに関しても充実している MySQL等のRDB の構成とは そもそも違う 最初のとっかかり 部分ではつまずく 点は少ない印象 https://speakerdeck.com/1amageek/realtimedb-dot-firebase-dot-ebisu
  6. 6. ✦ 特に複数の画像をアップロードをする際には下記の考慮が必要 特にハマったのはファイルのアップロード Storageへのアップロード処理は自前で実装すると考慮すべき事項が多くて結構大変な処理なので注意を。 ★画像の画質はできるだけ落としておく ★並列にファイルをアップロードする処理にする この部分を考慮しないとアップロード・ダウンロード処理時に明らかに遅い サンプルコード: 複数のファイルアップロードが全て完了したタイミングで次の処理に移るようにする イメージ図: //第2引数の値は小さめにしておく(JPGデータへの変換処理) let photoData: Data = UIImageJPEGRepresentation(targetImage, 0.1)! 画像1のアップロード 画像2のアップロード 画像3のアップロード 3つの処理が完了 次の処理へ進む ・DispatchQueueや並列処理用ライブラリ併用 ※この処理をしないとアップロード時の不具合が… ・アップロード時のCallbackへの処理 <ポイント>
  7. 7. ✦ 詳細解説に関しても下記の文章にまとめていますので併せてどうぞ 今回のサンプルと詳細解説はこちら Salada内の処理ポイントの抜粋及び実装に関しましてはQiita記事内でより詳細に解説を行なっています。 詳細解説及びサンプルはこちら Github:https://github.com/fumiyasac/FirebaseSimpleTodo 【サンプルはSwift3.0で作成しています】 今回のサンプルについて http://qiita.com/fumiyasac@github/items/3218c35de5e59f3bfafa 後述するFirebaseを扱いやすくしたライブラリ(Salada)を利用した処理 複数の画像をFirebaseのStorageにアップロードする際の処理 自分のフォトライブラリーから画像の一覧を取得して画像を選択するUI部分 上記に挙げたFirebaseでの処理及びデータ設計での参考になればとても嬉しく思います。 Firebaseとそのデータを扱いやすくするライブラリ(Salada)を用いたToDoリストの簡易サンプル 実際のサンプルに関してはQiita記事の解説と併せてデモを行います Thanks and enjoy!
  8. 8. Firebaseを扱いやすくするライブラリ紹介 Firebaseでの処理に疲れていた時にこのライブラリに巡り合うことができて本当に嬉しい&感動しました! テーブルのデータの項目を1つのクラスで管理 → 項目と型をまとめておくことができる ActiveRecordやRealmのような感覚でデータの取得や保存 → 普段扱い慣れている書き方にも近しい部分があった ファイルアップロード時の処理に関する考慮 → ライブラリ内ですでに並列処理が施されている 自分がハマっていた処理の部分に関してのソリューションが揃っていて本当に助かりました。 【本サンプルの実装や記事作成にあたっては作者様(1amageek様)にアドバイスを頂き本当に感謝しております】 https://github.com/1amageek/Salada 【Salada】This is a library of firebase for iOS. You can make architectures very easily. ✦ 今回の処理では「Salada」というライブラリを使いました!
  9. 9. ✦ Firebaseからのデータ取得の基本部分と取得条件指定の例 データの取得や値の条件ないしは取得数等を定義して、その後にobserve(observeSingleEvent)を実行する。 (補足1) Firebaseでのデータ取得に関して //Firebaseからのデータ取得処理に関するパターン let ref = FIRDatabase.database().reference() let query = cafeData.queryOrdered(byChild: "create_date").queryLimited(toLast: 10) query.observe(FIRDataEventType.value, with: { (snapshot) in //正常時の処理 if snapshot.exists() { //取得した情報を一旦クリアする self.cafeList.removeAll() //再度配列に格納する for (_, value) in snapshot.value as! [String : AnyObject] { self.cafeList.append(value as! [String : AnyObject]) } } self.reloadTableView() }) (Case1)最後から10件のデータを取得(最新10件) cafeData.queryLimited(toLast: 10).observe(FIRDataEventType.value, with: { (snapshot) in ... (Case2)オフセット値を指定して、指定した位置から10件のデータを昇順で取得 let query = cafeData.queryOrderedByKey().queryStarting(atValue: AbstractConvertTypes.convertIdToString(2)).queryLimited(toFirst: 10) uery.observe(FIRDataEventType.value, with: { (snapshot) in ... (Case3)完全一致検索 let query = cafeData.queryOrdered(byChild: "flag").queryEqual(toValue: "private") query.observe(FIRDataEventType.value, with: { (snapshot) in (Case4)部分一致検索 ※SQLのlike文みたいな検索 いまのところAPIは見当たらない感じ(もうちょっと深堀りして調べてみたけど今はまだ実装されていないみたい) 定義したカラムの条件や順番・個数の指定 → 取得前に条件指定のメソッドをつなげる形 クロージャーになっている → この中でUIの更新等データを絡めた処理を記載
  10. 10. ✦ 下記の参考URLを元に実装すると実現ができるかと思います 自前の実装だと難しい部分のソーシャルメディアの認証を利用する部分も考慮されているのでありがたい! ★Firebaseを利用したTwitterログイン実装の参考資料 (補足2) Facebook / Twitter認証について https://fabric.io/kits/ios/twitterkit/install ・(重要) Fabricの導入画面 ★Firebaseを利用したFacebookログイン実装の参考資料 https://fabric.io/kits/ios/twitterkit/install ・(公式) iOSでTwitterログインを使用して認証する http://qiita.com/eKushida/items/f3ae462538e7c700fe91 ・(導入手順)[Swift版] 今さら聞けないFirebase③ Authentication (認証) Twitter編 https://fabric.io/kits/ios/twitterkit/install ・(公式)iOSでFacebookログインを使用して認証する https://firebase.google.com/docs/auth/ios/facebook-login?hl=ja ・(導入手順)FirebaseでのFacebookログイン動作の解説画像 http://grandbig.github.io/blog/2016/05/14/facebook-login-for-swift/ ・(参考)SwiftでFacebookログインを始めよう!
  11. 11. ✦ Firebaseは導入もしやすくて便利だけども考慮すべき点には注意 今回のまとめ ご清聴ありがとうございました!またこのような機会があった際には是非ともよろしくお願い致します! ★RDBでのデータ設計の思想との違いを押さえてのデータ設計がポイント ネストを深くしすぎないことや双方向で同じデータを持たせる等設計上での工夫が必要 ★ファイルアップロード等の考慮及びデータ取得や追加に関しても処理の整理を ファイルアップロード時の並列処理やデータ設計と処理の連携については整理を(今回はSaladaを活用) ★便利機能が一通り揃えられている部分はとても良いメリット データベースやストレージ機能だけでなく認証・プッシュ通知・分析等もあるので活用の機会は多いかも ★自分ルール 【良いアウトプットのために】 発表・登壇時はこの中のいずれか2つを 絶対に準備するルールを設けています!

×