11
Firebaseでのファイルアップロード処理 と便利ライブラリの紹介 【MT東京−31】バレンタインデー1ヶ月前から始める Swift×MT Data API 2017/01/14 Fumiya Sakai

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

Embed Size (px)

Citation preview

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

Firebaseでのファイルアップロード処理

と便利ライブラリの紹介

【MT東京−31】バレンタインデー1ヶ月前から始める

Swift×MTDataAPI2017/01/14FumiyaSakai

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

自己紹介と簡単な経歴など

✦ 今までの仕事履歴(本業)

石川県金沢市生まれ

本業はサーバーサイドのプログラマ※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なんかも

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

これまでに作ったもの(ネイティブアプリ)

①簡易家計簿アプリ「Coffre」

②ゲームアプリ「10秒虫食い算」

・カレンダーを自作しています

・シンプルなお小遣い帳感覚で支出管理できます

・全問正解者ほとんどいません…

・不定期ですがコラムも書いています

・サーバーサイドはRubyonRailsを使用

http://www.coffre.me/

・デザインにもこだわってみました(特にグラフ)

・実はちょっとバグがあります。

・問題は今後追加予定(現在110問収録)

個人的にはなりますが、他にもアプリ・Webサービスなど開発中です(2016年も宜しくお願いします)

・サイト等は次回のアップデートで公開予定

http://blog.just1factory.net/services/284

・若干の中毒性を含みます

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

カレンダーが好きでライブラリを作りました

日本の祝祭日を計算で出してくれる

・カレンダーアプリ等での活用を想定

・シルバーウィーク・ゴールデンウィークも対応

・ハッピーマンデー法の施行も対応

・春分の日・秋分の日にも対応

・過去の祝祭日もおおむね考慮はしている

構想や基本実装は僕ですが、他に4名のContributorのお力添えがあり実運用できるレベルになりました!

CocoaPods&Carthage&手動で導入可能

・HTTP(HTTPS)通信は不要

★CalculateCalendarLogicver0.1.2

【2017年】Swift3系への正式対応をしていますので是非README等を参考に導入してみてください!

・Github:https://github.com/fumiyasac/handMadeCalendarAdvance

・実装解説:http://qiita.com/fumiyasac@github/items/33bfc07ad36dfffcdf8f

・Github:https://github.com/fumiyasac/handMadeCalendarOfSwift

新機能や運用保守は継続しています

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

✦ Database/Storage/Auth/Notification等の便利機能

Firebaseには便利機能がいっぱい

アプリ開発において導入したいであろう機能が用意されている

JOINをする形ではなく相互に関連データを持つような形にしてデータ設計をすると良い

データの持ち方や設計思想の部分はRDBとは異なることを押さえた上でのデータ設計と実装が必要と感じた。

★ドキュメントも充実&サンプル解説記事も多い

・CocoaPodsでのインストール&設定ファイル導入でできる

・導入サンプルのQiitaや技術ブログ記事が多い

★データの持ち方や設計の参考資料

・FirebaseRealtimeDBの実践投入するにあたって考えたこと

http://qiita.com/1amageek/items/64bf85ec2cf1613cf507

【MySQL等のRDBでの設計思想とは異なる点に注意する】

・RealtimeDB.Firebase.ebisu

・公式のドキュメントに関しても充実している

MySQL等のRDB

の構成とは

そもそも違う

最初のとっかかり

部分ではつまずく

点は少ない印象

https://speakerdeck.com/1amageek/realtimedb-dot-firebase-dot-ebisu

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

✦ 特に複数の画像をアップロードをする際には下記の考慮が必要

特にハマったのはファイルのアップロード

Storageへのアップロード処理は自前で実装すると考慮すべき事項が多くて結構大変な処理なので注意を。

★画像の画質はできるだけ落としておく

★並列にファイルをアップロードする処理にする

この部分を考慮しないとアップロード・ダウンロード処理時に明らかに遅い

サンプルコード:

複数のファイルアップロードが全て完了したタイミングで次の処理に移るようにする

イメージ図:

//第2引数の値は小さめにしておく(JPGデータへの変換処理)letphotoData:Data=UIImageJPEGRepresentation(targetImage,0.1)!

画像1のアップロード

画像2のアップロード

画像3のアップロード

3つの処理が完了

次の処理へ進む

・DispatchQueueや並列処理用ライブラリ併用

※この処理をしないとアップロード時の不具合が…

・アップロード時のCallbackへの処理

<ポイント>

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

✦ 詳細解説に関しても下記の文章にまとめていますので併せてどうぞ

今回のサンプルと詳細解説はこちら

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記事の解説と併せてデモを行います

Thanksandenjoy!

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

Firebaseを扱いやすくするライブラリ紹介

Firebaseでの処理に疲れていた時にこのライブラリに巡り合うことができて本当に嬉しい&感動しました!

テーブルのデータの項目を1つのクラスで管理→項目と型をまとめておくことができる

ActiveRecordやRealmのような感覚でデータの取得や保存→普段扱い慣れている書き方にも近しい部分があった

ファイルアップロード時の処理に関する考慮→ライブラリ内ですでに並列処理が施されている

自分がハマっていた処理の部分に関してのソリューションが揃っていて本当に助かりました。

【本サンプルの実装や記事作成にあたっては作者様(1amageek様)にアドバイスを頂き本当に感謝しております】

https://github.com/1amageek/Salada

【Salada】ThisisalibraryoffirebaseforiOS.Youcanmakearchitecturesveryeasily.

✦ 今回の処理では「Salada」というライブラリを使いました!

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

✦ 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件のデータを昇順で取得letquery=cafeData.queryOrderedByKey().queryStarting(atValue:AbstractConvertTypes.convertIdToString(2)).queryLimited(toFirst:10)uery.observe(FIRDataEventType.value,with:{(snapshot)in...

(Case3)完全一致検索letquery=cafeData.queryOrdered(byChild:"flag").queryEqual(toValue:"private")query.observe(FIRDataEventType.value,with:{(snapshot)in

(Case4)部分一致検索※SQLのlike文みたいな検索いまのところAPIは見当たらない感じ(もうちょっと深堀りして調べてみたけど今はまだ実装されていないみたい)

定義したカラムの条件や順番・個数の指定→取得前に条件指定のメソッドをつなげる形

クロージャーになっている→この中でUIの更新等データを絡めた処理を記載

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

✦ 下記の参考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ログインを始めよう!

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

✦ Firebaseは導入もしやすくて便利だけども考慮すべき点には注意

今回のまとめ

ご清聴ありがとうございました!またこのような機会があった際には是非ともよろしくお願い致します!

★RDBでのデータ設計の思想との違いを押さえてのデータ設計がポイント

ネストを深くしすぎないことや双方向で同じデータを持たせる等設計上での工夫が必要

★ファイルアップロード等の考慮及びデータ取得や追加に関しても処理の整理を

ファイルアップロード時の並列処理やデータ設計と処理の連携については整理を(今回はSaladaを活用)

★便利機能が一通り揃えられている部分はとても良いメリット

データベースやストレージ機能だけでなく認証・プッシュ通知・分析等もあるので活用の機会は多いかも

★自分ルール

【良いアウトプットのために】

発表・登壇時はこの中のいずれか2つを

絶対に準備するルールを設けています!