LoginSignup
358
423

More than 1 year has passed since last update.

@KenRoda(Ken Roda)

VueとFirebaseで爆速でチャットサービスを作ろう

Last updated at Posted at 2019-02-09

こんにちは、ネコチャ運営者の炉田謙(@ToshioAkaneya)です。
3日で作成したチャットサービスネコチャが好評をいただき、Twitter上で多数のつぶやきをいただきました。
##どんなサービスか
ネコチャは、とくめいチャットをすることが出来るサービスです。
仕組みは質問箱(Peingなど)と似ていて、自分のリンクをSNSで共有することでフォロワーがそのリンクから匿名でメッセージを送ることが出来るというものです。
質問箱と違うのは、会話を続けることが出来る点です。
話しかける側を匿名にすることでコミュケーションのハードルを下げることが可能になっています。
Screen Shot 2019-02-09 at 8.22.34.png
ネコチャトップページ

開発の経緯

2018年に流行ったとくめいチャットアプリのNYAGOがありました。
急激なユーザーの増加に対し、開発体制が整っておらずやむなく一時停止を発表しました。
匿名チャットアプリ「NYAGO」が一時停止を発表、公開1週間で1万ユーザー突破も課題を痛感

僕はNYAGOの再開を心待ちにしていたのですが、待てども待てども発表はなく...
***「じゃあ作ろう」***と思ったのが始まりでした。
(ネコチャのことはUNDEFINEDの方にもお話しているのでご安心を。)

構成

構成はサーバーレスで、Firebase Realtime DatabaseとVue.jsを使用しています。
Firebase Realtime Database は、リアルタイムにデータを保存およびユーザー間で同期できる、クラウドホスト型 NoSQL データベースです。
リアルタイムチャットをもっとも簡単に実現出来る構成だと思います。
(現在のネコチャはリニューアルをしたもので、Ruby on Rails APIとNuxtを使用したものに変わっています。こちらについてもまた記事にできればと思います。)

コード

完成品

完成するのは、こちらのリニューアル前のネコチャになります。ぜひ試しに僕にメッセージを送ってみて下さい。(「新しいバージョンのネコチャに移動しますか？（推奨）」でキャンセルを選択するとアクセス出来ます。)
なおリリース後の3日で約２００名のユーザー登録を達成し、送られたメッセージ数は1500件以上にもなりました。
Screen Shot 2019-02-09 at 9.32.51.png
Screen Shot 2019-02-09 at 11.07.36.png
リニューアル前のネコチャ

Firebaseプロジェクトの設定

mioさんの認証付きの簡易チャットを作る！を参考にしてFirebaseプロジェクトを設定して下さい。
なお、TwitterログインではなくGoogleログインを使用するのでAuthenticationタブではGoogleログインを有効にして下さい。
また、データベースのルールでは次の内容をコピペして下さい。(「公開」ボタンを押すのを忘れずに！)

{
    "rules": {
        "chats": {
            "$chatUid": {
                ".write": "auth!=null",
                ".read": "
          root.child('chats/'+$chatUid+'/expireAt').val()> now
          &&root.child('members/'+$chatUid).child(auth.uid).exists()",
            }
        },
        "users": {
            "$userUid": {
                ".write": "auth!=null",
                ".read": "true",
            }
        },
        "messages": {
            "$chatUid": {
                ".write": "
          root.child('chats/'+$chatUid+'/expireAt').val()> now&&
          (root.child('members/'+$chatUid).child(auth.uid).exists())",
                ".read": "
          root.child('chats/'+$chatUid+'/expireAt').val()> now
          &&root.child('members/'+$chatUid).child(auth.uid).exists()",      
            }
        },
        "members": {
            "$chatUid": {
                ".write": "auth!=null",
                ".read": "
          root.child('chats/'+$chatUid+'/expireAt').val()> now
          &&root.child('members/'+$chatUid).child(auth.uid).exists()",      
            }
        }
    }
}

ネコチャを作るにあたり。このチュートリアルはとても参考になりました。mioさんありがとうございます。

準備

次のコマンドを実行して下さい

npm install -g firebase-tools @vue/cli
vue init webpack necocha #基本的にエンターでOKですが、以下の質問にはNoと答えて下さい。
? Install vue-router? No
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No

cd necocha
firebase login
firebase init
# Hostingをスペースバーで選択してエンター。
# Firebaseコンソールで作成したプロジェクトを選択。
# 残りはあとで設定ファイルを編集するので、エンターを押していけば大丈夫です。
npm install axios crypto-js express firebase firebase-admin firebase-functions jquery moment vue vue-axios vue-clipboard2 vue-cookie vue-meta vue-moment vue-nl2br

そしてfirebase.jsonを以下のように編集してください。これがfirebaseの設定ファイルです。

firebase.json
{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

コード

index.html src/main.js src/App.js src/components/TheRoot.jsの3ファイルを編集(なければ作成)します。
まずはコピペして動作させてみることをオススメします。

まずはindex.htmlを次のように作成・編集します。

index.html
<!DOCTYPE html>
<html>

<head>
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta property="og:description" content="ネコチャはとくめいのネコになりチャットすることができるサービスです。">
  <meta property="og:title" content="ネコチャ|とくめいチャットサービス">
  <meta property="og:image"
    content="https://firebasestorage.googleapis.com/v0/b/necocha-me.appspot.com/o/Screen%20Shot%202019-01-14%20at%200.36.18.png?alt=media&token=96df5db8-ed00-44b3-9e97-8e11160093e2">
  <meta property="twitter:card" content="summary_large_image">
  <link rel="shortcut icon" type="image/png"
    href="https://firebasestorage.googleapis.com/v0/b/necocha-me.appspot.com/o/animal_mark04_neko.png?alt=media&token=4bd55443-839a-4bd9-bcd6-6f56cf7353c4" />
  <link href="https://fonts.googleapis.com/earlyaccess/nikukyu.css" rel="stylesheet">
  <title>ネコチャ|とくめいチャットサービス</title>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
    integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>

<body>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>

</html>

src/main.jsではVueインスタンスの初期化を行います。var config =にはFirebaseコンソールで取得した値をペーストして下さい。

src/main.js
import firebase from 'firebase'
import("firebase/functions");
import Vue from 'vue'
import App from './App'
import axios from 'axios'
import VueAxios from 'vue-axios'
import VueClipboard from 'vue-clipboard2'
import Meta from 'vue-meta'

// Vue.use(Meta)
VueClipboard.config.autoSetContainer = true // add this line

Vue.use(VueClipboard)
Vue.use(VueAxios, axios)
var VueCookie = require('vue-cookie');
// Tell Vue to use the plugin
// import moment from 'vue-moment'
// moment.locale('ja');
Vue.use(VueCookie);

// Vue.use(moment);

Vue.config.productionTip = false

// Initialize Firebase
var config = {
 // ここにFirebaseから取得したconfigをペースト
};
firebase.initializeApp(config);
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

src/App.vueは次のようにして下さい。これがrootコンポーネントになります。

src/App.vue
<template>
  <div id="app">
    <header class="header">
      <h1>
        <a href="/" style="font-family: Nikukyu; color: white;">ネコチャ</a>
      </h1>
    </header>
    <section v-if="isChat">
      <!-- 入力フォーム -->
      <form action @submit.prevent="sendMessage" class="form">
        <textarea v-model="input" :disabled="!user"></textarea>
        <button type="submit" :disabled="!user" class="send-button">送信</button>
      </form>
      <transition-group name="chat" tag="div" class="list content">
        <section v-for="{ key, name, image, message, isFromGuest } in chat" :key="key" class="item">
          <div class="item-image">
            <img
              :src="image"
              width="40"
              height="40"
            >
          </div>
          <div class="item-detail">
            <div class="item-name"></div>
            <div class="item-message">
              <nl2br tag="div" :text="message"/>
            </div>
          </div>
        </section>
      </transition-group>
    </section>
    <section v-else>
      <the-root :user="user" :chats="chats" :authPending="authPending" :clickHandler="signInTwitter"></the-root>
    </section>
  </div>
</template>

<script>
// firebase モジュール
// 改行を <br> タグに変換するモジュール
import firebase from "firebase";
import Nl2br from "vue-nl2br";
import TheRoot from "./components/TheRoot";

export default {
  components: { TheRoot, Nl2br },
  data() {
    return {
      authPending: true,
      user: null, // ユーザー情報
      chats: [], // 取得したメッセージを入れる配列
      chat: [],
      input: "",
      isChat: false, // 入力したメッセージ
      isGuest: false,
      key: ""
    };
  },
  mounted() {
    const authUser = Object.keys(window.localStorage)
      .filter(item => item.startsWith('firebase:host:necocha-me.firebaseio.com'))[0]
    if (!authUser) {
      this.authPending = false;
    }
  },
  beforeCreate() {

    firebase.auth().onAuthStateChanged(async user => {
      this.authPending = false
      this.user = user;
      if (user) {
        const refUser = firebase
          .database()
          .ref("users/" + this.user.uid)
        await refUser.child('name').set(user.displayName)
        const userSnap = await refUser.once('value');
        this.user.chats = userSnap.val().chats
      }
      const url = new URL(location.href);
      this.chatUid = url.searchParams.get("chatUid"); // "/ca
      this.isChat = !!this.chatUid;
      for (let chatUid of Object.keys(this.user.chats)) {
        const refChats = firebase
          .database()
          .ref("chats/" + chatUid);
        refChats.once('value', (snap) => {
          const newChat = snap.val()
          this.chats.push(({...newChat, uid: chatUid, isCreator: this.user.chats[chatUid] === 'creator'}))
        });
      }
      if (!user) {
        if (this.isChat) {
          alert('ログインして下さい')
          return this.signInTwitter()
        }
        return;
      }
      if (!this.isChat) {
        return;
      }
      const ref_messages = firebase
        .database()
        .ref("messages/" + this.chatUid);
      this.chat = [];
      const refUsers = firebase
        .database()
        .ref("users/" + this.user.uid + '/chats/' + this.chatUid);
      refUsers.once('value', (snap) => {
        this.isGuest = snap.val() === 'guest'
      })
      ref_messages.limitToLast(100).on("child_added", this.childAdded, e => {
      });
    });
  },
  created() {
    const url = new URL(location.href);
    this.chatUid = url.searchParams.get("chatUid"); // "/ca
    this.isChat = !!this.chatUid;
    if (!this.isChat) {
      return;
    }
    if (+url.searchParams.get("expireAt") < Date.now()) {
      alert("有効期限が過ぎています");
      return (window.location = "/");
    }
  },
  methods: {
    // ログイン処理
    // スクロール位置を一番下に移動
    scrollBottom() {
      this.$nextTick(() => {
        window.scrollTo(0, document.body.clientHeight);
      });
    },
    sendMessage() {
      firebase
        .database()
        .ref("messages/" + this.chatUid)
        .push({
          image: (this.isGuest ? 'https://firebasestorage.googleapis.com/v0/b/necocha-io.appspot.com/o/animal_mark04_neko.png?alt=media&token=ba4e9920-bf1f-45ea-a3e6-0a34e3a85b21' : this.user.photoURL),
          message: this.input,
          isFromGuest: this.isGuest
        }, () => {
          this.input = ""; // フォームを空にする
        });
    },
    childAdded(snap) {
      const message = snap.val();
      this.chat.push({
        key: snap.key,
        name: message.name,
        image: message.image,
        message: message.message,
        isFromGuest: message.isFromGuest
      });
      this.scrollBottom();
    },
    signInTwitter() {
      const providerTwitter = new firebase.auth.GoogleAuthProvider();
      firebase.auth().signInWithRedirect(providerTwitter);
    }
  }
};
</script>
<style>
* {
  margin: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

section {
  text-align: center;
}
.header {
  background: #3ab383;
  margin-bottom: 1em;
  padding: 0.4em 0.8em;
  color: #fff;
}
.content {
  margin: 80px auto 0;
  padding: 0 10px;
  max-width: 600px;
}
.form {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 50px;
  height: 80px;
  width: 100%;
  background: #f5f5f5;
}
.form textarea {
  border: 1px solid #ccc;
  border-radius: 2px;
  height: 4em;
  width: calc(100% - 6em);
  resize: none;
}
.list {
  margin-bottom: 100px;
}
.item {
  position: relative;
  display: flex;
  align-items: flex-end;
  margin-bottom: 0.8em;
}
.item-image img {
  border-radius: 20px;
  vertical-align: top;
}
.item-detail {
  margin: 0 0 0 1.4em;
}
.item-name {
  font-size: 75%;
}
.item-message {
  position: relative;
  display: inline-block;
  padding: 0.8em;
  background: #deefe8;
  border-radius: 4px;
  line-height: 1.2em;
}
.item-message::before {
  position: absolute;
  content: " ";
  display: block;
  left: -16px;
  bottom: 12px;
  border: 4px solid transparent;
  border-right: 12px solid #deefe8;
}
.send-button {
  height: 4em;
}
/* トランジション用スタイル */
.chat-enter-active {
  transition: all 1s;
}
.chat-enter {
  opacity: 0;
  transform: translateX(-1em);
}

a {
  text-decoration: none;
}
</style>

TheRootコンポーネントをsrc/components/TheRoot.vueに次のように定義します。

src/components/TheRoot.vue
<template>
  <section>
    <img width="100%" src="https://firebasestorage.googleapis.com/v0/b/necocha-me.appspot.com/o/logo.png?alt=media&token=e84771e8-f590-4a4b-a2f9-06dca4712490">
    <div v-if="authPending">
      <img style="margin: 0 auto;" src="https://loading.io/spinners/palette-ring/index.svg">
    </div>
    <div v-if="creator">
      {{creator.name}}にとくめいでチャットしますか？
      <button type="button" @click="createChat">チャットする</button>
    </div>
    <div v-if="user">
      <a
        :href="'https://twitter.com/intent/tweet?text=だれかとくめいのネコになってお話ししてくれませんか？送る側だけとくめいのチャット、ネコチャしよう！%20%23とくめいチャット%20%23ネコチャ&url=' + encodeURIComponent(
         `https://${window.location.host}/?creatorUid=${user.uid}`)"
      >あなたのリンクをTwitterで共有する</a>
      <div v-for="{uid,creatorName,expireAt,isCreator} in chats">
        <a :href="`./?chatUid=${uid}&expireAt=${expireAt}`">
          {{isCreator ? 'とくめいのネコ':creatorName}}さんとのチャット
          あと{{computeDate(expireAt).slice(0,computeDate(expireAt).length-1)}}
        </a>
      </div>
    </div>
    <div class="description">
      <p>ネコチャはとくめいのネコとチャットすることができるサービスです。</p>
      <p>ルームを作成してリンクを共有すると、みんなはあなたととくめいでチャットすることができます。</p>
      <p>ルームは6時間で誰もアクセス出来なくなります。</p>
      <button type="button" @click="clickHandler">Googleではじめる</button>
      <p>とくめいのネコを募集して、エモいひとときをお楽しみ下さい。</p>
    </div>
    <img width="100%" src="https://firebasestorage.googleapis.com/v0/b/necocha-me.appspot.com/o/sample.png?alt=media&token=66991375-4adc-44cb-8e48-6ed5469cf712">
    <button type="button" @click="clickHandler">Googleではじめる</button>
  </section>
</template>

<script>
import $ from "jquery";
import firebase from "firebase";
import "moment/locale/ja";

import moment from "moment";
// import 'moment/locale/ja'

function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive
}

export default {
  name: "TheRoot",
  props: ["chats", "user", "authPending", "clickHandler"],
  data() {
    return {
      creator: null,
      window: {}
    };
  },
  computed: {
    chatData: () => {
      this.chats.map(chat => {
        return { uid: Object.keys(chat)[0], ...Object.values(chat) };
      });
    }
  },
  created: async function() {
    this.window = window
    const url = new URL(location.href);
    const creatorUid = url.searchParams.get("creatorUid"); // "/ca
    if (creatorUid) {
      const creatorSnap = await firebase
        .database()
        .ref("users/" + creatorUid)
        .once("value");
      this.creator = creatorSnap.val();

      this.creator.uid = creatorUid;
    }
    const refChats = firebase.database().ref("chats");
    refChats.on("child_added", snap => {
      // if (!this.user.chats) {
      //   return
      // }
      // const newChat = snap.val()
      // if (this.user.chats[snap.key] === 'creator') {
      //   this.chats.creator.push(newChat)
      // } else if (this.user.chats[snap.key] === 'guest') {
      //   this.chats.guest.push(newChat)
      // }
    });
  },
  methods: {
    createChat: async function() {
      if (!this.user) {
        alert("Googleログインが必要です(名前は相手には分かりません)");
        return;
      }
      if (!(this.user && this.creator)) {
        return;
      }
      const refChats = firebase.database().ref("chats");
      const expireAt = Date.now() + 1000 * 60 * 60 * 6;
      const chatUid = refChats.push().getKey();
      const refUser = firebase.database().ref("users");
      const updateObj = {};
      updateObj["name"] = this.user.displayName;
      updateObj["chats/" + chatUid] = "guest";
      refUser.child(this.user.uid).update(updateObj);
      await refChats
        .child(chatUid)
        .set({ creatorName: this.creator.name, expireAt });
      delete updateObj.name;
      updateObj["chats/" + chatUid] = "creator";
      await refUser.child(this.creator.uid).update(updateObj);
      const refMembers = await firebase
        .database()
        .ref("members/" + chatUid)
        .set({ [this.user.uid]: "guest", [this.creator.uid]: "creator" });
      await firebase
        .database()
        .ref("messages/" + chatUid)
        .push({
          image:
            "https://firebasestorage.googleapis.com/v0/b/necocha-io.appspot.com/o/animal_mark04_neko.png?alt=media&token=ba4e9920-bf1f-45ea-a3e6-0a34e3a85b21",
          message: "こんにちは！とくめいのネコさんが入室しました！By運営",
          isFromGuest: true
        });
      return (location = `/?chatUid=${chatUid}&expireAt=${expireAt}`);
    },
    computeDate(timestamp) {
      return moment(timestamp).fromNow();
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
section {
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
}
.description {
  margin-top: 10px;
  line-height: 30px;
  padding: 0 50px;
}
button {
  border: none;
  border-radius: 2px;
  margin: 10px 0;
  color: white;
  font-size: 20px;
  background-color: #3ab383;
}

p {
  margin-bottom: 5px;
}
.ribbon11 {  
  margin-bottom: 30px;
  display: inline-block;
  position: relative;
  height: 45px;
  vertical-align: middle;
  text-align: center;
  box-sizing: border-box;
}
.ribbon11:before {
  /*左側のリボン端*/
  content: "";
  position: absolute;
  width: 10px;
  bottom: -10px;
  left: -35px;
  z-index: -2;
  border: 20px solid #6cbf86;
  border-left-color: transparent; /*山形に切り抜き*/
}

.ribbon11:after {
  /*右側のリボン端*/
  content: "";
  position: absolute;
  width: 10px;
  bottom: -10px;
  right: -35px;
  z-index: -2;
  border: 20px solid #6cbf86;
  border-right-color: transparent; /*山形に切り抜き*/
}

.ribbon11 h3 {
  display: inline-block;
  position: relative;
  margin: 0;
  padding: 0 20px;
  line-height: 45px;
  font-size: 15px;
  color: #fff;
  background: #42bc8e; /*真ん中の背景色*/
}
.ribbon11 h3:before {
  position: absolute;
  content: "";
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 10px transparent;
  border-right: solid 15px #318c69; /*左の折り返し部分*/
}
.ribbon11 h3:after {
  position: absolute;
  content: "";
  top: 100%;
  right: 0;
  border: none;
  border-bottom: solid 10px transparent;
  border-left: solid 15px #318c69; /*右の折り返し部分*/
}
</style>

デプロイ

最後にデプロイです。

npm run build
firebase deploy

表示されたURLにアクセスすると、デプロイの完了が確認できます。
いかがでしたでしょうか。ご感想などをぜひコメントして下さると幸いです。

終わりに

私は現在、Web3のサービスの開発をしています。詳しくはこちらの記事をご覧下さい。
無料でイーサリアムが当たる、Web3時代の寄付サイトを作った話

358
423
6

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
358
423