じぇい👨‍💻Hundread運営&Punizm開発中の投稿 - Crieit

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

2019-03-01T17:00:36+09:00

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

それは！

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

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

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

🎉友人などのSNSリンクを一箇所管理できる「ともだちびお」をリリースしました！㊗️㊗️㊗️Firebase×Nuxt.jsでつくりました！Firebaseをはじめて使ったんですが、便利で感動しました！ぜひ触ってみてください！https://t.co/msQC3Z9F2w
— じぇい👨‍💻 (@jyouj__) February 28, 2019

サービス内容

サービス内容はともだちの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フォローしてねー！

ニュースをランダムにガチャで読める「ガチャっとニュース」を4時間でリリースした話【個人開発】

2018-12-01T14:27:52+09:00

じぇいです！こんにちは。

ニュースをガチャすることで、ニュースをランダムに読める「ガチャっとニュース」をリリースしました！

https://gachat-news.herokuapp.com/

【拡散希望】ニュースをランダムにガチャして見れる「ガチャっとニュース」をリリースしました㊗️情報の偏りが問題になるこの世の中でランダムにニュースを見れたなら、偏りも減るのでは？と思って作りました楽しめるようにガチャ風にニュースが出るようになってますhttps://t.co/95AlF0d9Tr
— じぇい👨‍💻 (@jyouj__) November 29, 2018

ぜひいろんな人に触ってもらいたいのでリツイートしてもらえると泣いて喜びます:stuck_out_tongue_closed_eyes:

作った背景

上のツイートにも書いてあるように、情報の偏りを無くそうと思いました。ただランダムにニュースを閲覧できるようにしても面白くないので、ガチャというエンターテイメント性を入れました。

ガチャしてニュースを読むという新たなアプローチ方法です！

製作期間

水曜日3時間、木曜日1時間の計4時間で完成させました。

水曜日にメインの機能であるNewsAPIでニュースをランダムで取得するコードや大まかなサイトのレイアウトを作成しました。

木曜日はTwiiterでシェアされる画像の設定や細かいレイアウトを作成しました。

ガチャっとニュースってどんなサービス？

「ガチャっと」というボタンを押すとランダムでニュースが一つガチャされます。

1ページで完結している、シンプルなサービスです。

もちろんスマホ対応してます。

使ったもの

Django
- 使い慣れているから、サクッとできる
- Flaskとかでもよかったかも
Bulma
- 1ページだけだけどレイアウトはそれなりには整えたかった
- サクッとCSS適用できて便利
- モーダルウィンドウやボタン、画像サイズの部分で活躍しました
jQuery
- モーダルウィンドウの表示の部分で活用しました
- 小さな機能ならjQueryで十分
News API
- 国別、カテゴリー別など様々なニュースを取得できるAPI
- newsapi-pythonというパッケージがあってよかった
- 最新のニュースを常に取得できるのもいい！

NewsAPIについては僕自身が使い方をブログに記事書いてます(笑)

［Django］NewsAPIを使ってニュースサイトを作ってみる
 ［Django］NewsAPIを使って色々なニュースを取り出してみよう

Github
- 使わない選択肢がなかった
Heroku
- とりあえず無料のを使った
- サーバーの知識なくてもOKなのありがたい

最後に

今回で二つ目のサービスのリリースとなります。個人で色々開発する上のメリットは思い立ったらすぐ形にできたり、自分の気分の乗るときに作れるところだと思います。

まだまだ開発するぞ！

Qiitaにいいねくれたら舞って喜びます:sunglasses:

お読みいただきありがとうございました！

【個人開発】リレー式小説投稿サービス"Hundread"をリリースしました！

2018-11-03T22:40:22+09:00

じぇい(@jyouj__)です！

一週間ちょっとでリレー式小説投稿サービス"Hundread(ハンドレッド)"をリリースしました！

このサービスはもともと6月に行われたStartup Weekend Okayamaにて発表し、優勝したものです。

その後、別のサービスの開発で全然作れていなかったのですが、急に作りたくなってきてデザインを考え直し、急遽一週間ちょっとで作りリリースすることができました！

リレー式小説サービス"Hundread"をリリースしました！！Hundreadは自分が投稿した小説をツイッターにシェアして続きを他の人に書いてもらうことができます！もちろん、他の人の小説の続きを書くこともできちゃいます！ぜひ、使って拡散してください！https://t.co/qEbytWUukM
— じぇい👨‍💻Punizm作ってます (@jyouj__) October 31, 2018

個人開発ではあるものの、様々な方にDMでわからないことを教えていただき無事リリースしました。本当にありがとうございます。