Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

じぇいです!

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

それは!

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

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

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

サービス内容

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

intro.png

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フォローしてねー!

jyouj__
2001年生まれ
https://youj.work/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away