みんなの「作ってみた」

Firebase+Nuxt.jsでともだちのSNSリンクを一カ所で管理できるサービスを作ってしまった......【個人開発】

2019/02/28

jyouj__
jyouj__
2001年生まれ

じぇいです！

今回僕は、Firebaseの勉強にサービスを一つリリースしました。

それは！

ともだちのSNSリンクを一カ所で管理できる「ともだちびお」というサービスです。

Firebase+Nuxt.jsで作りました！Firebaseは初めての挑戦です。

リリースツイートはこちらです！え、リツイートしてくれますよね...？

サービス内容

サービス内容はともだちのSNSリンクを一カ所で管理できる連絡帳サービスです。

Twitter, Facebook, Instagram, Githubなどのリンクを登録できます！

使ったもの

Nuxt.js

Vue.jsをさらに便利に活用できるフレームワーク。SPAもSSRもどっちも来い！っていうなんでもできちゃう感。SPAで今回は作りました！

Firebase Authentication

Twitter認証に使いました(後述)。

Firebase Realtime Database

基本的なCRUDを実装しました（後述)。ルール定義で自分の保存データしかアクセスできないようにすることで連絡帳サービスを実装しています。Firestoreも興味深かったのですが、学習コストがたかそうだったので、まずはRealtime Databaseからにしました。

Firebase Hosting

デプロイもものすごく簡単！カスタムドメインにもSSL接続を無料でできてハッピー！

FontAwesome

最初、CDNで使ってたんですが速度が遅かったので最終的にはnpmパッケージで使うことにしました。使うアイコンだけlibrary.add()すれば、読み込みも遅くなりません。

nuxt-buefy

BulmaのVueに最適化したフレームワーク。細かい部品は頼りきりでした。

vue-lazyload

画像の遅延読み込みに使いました。少しは速度は改善したはず......。

vue-burger-menu

おしゃれなバーガーメニューを実装できます。

vue-tags-input

タグの入力に使いました。

@nuxtjs/pwa

PWA対応を簡単にできます。ただTwitter OAuthを使っているので一度Safariに遷移してしまってあまりうまく使えてません。Androidはできてるのかな？

@nuxtjs/google-analytics

Google Analyticsの設定が楽々！

Firebaseの認証・CRUD

認証

Twitterログイン

methods: 
  twitterLogin () {
    var provider = new firebase.auth.TwitterAuthProvider()
      firebase.auth().signInWithPopup(provider)
    }
  }

ログアウト

logout: function() {
   firebase.auth().signOut();
},

ログインしてるかのチェック

firebase.auth().onAuthStateChanged(user => {
      if (user) {
        this.isLogin = true
        this.user = user
      } else {
        this.isLogin = false
        this.user = null
      };
    })

CRUD

Create(投稿)

var newLinkKey = firebase.database().ref().child('posts').push().key;
firebase
  .database()
  .ref('posts/' + this.user.uid + '/' + newLinkKey)
  .set({
     content: this.content,
     // 省略
  })

Read(読み取り)

firebase.database().ref('posts/' + this.user.uid).on('value', function(snapshot) {
   this.posts = snapshot.val()
})

Update(更新)

var newPost = {
   content: this.content
   // 省略
}
var updates = {}
updates['/posts/' + this.user.uid + '/' + key] = newPost
firebase.database().ref().update(updates)

Delete(削除)

firebase.database().ref('links/' + this.user.uid + '/' + key).remove();

最後に

Firebaseはこれだけでマイクロサービスを作り上げることができます。

Nuxt.jsと組み合わせることでサービスの幅も広がって良き良き。

Twitterフォローしてねー！