RAKUS Developers Blog | ラクス エンジニアブログ

株式会社ラクスのITエンジニアによる技術ブログです。

トップ > Vue.js > Vue.jsのプロジェクトでGoogleアカウントのログイン機能とメモ機能を作成する方法

Vue.jsのプロジェクトでGoogleアカウントのログイン機能とメモ機能を作成する方法

Vue.js

こんにちは。y_kwmtです。

はじめに

昨年にVue.jsの学習を行うためにこちらの書籍を読みました。

https://www.amazon.co.jp/Vue-js%E3%81%A8Firebase%E3%81%A7%E4%BD%9C%E3%82%8B%E3%83%9F%E3%83%8BWeb%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9-%E6%8A%80%E8%A1%93%E6%9B%B8%E5%85%B8%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA%EF%BC%88NextPublishing%EF%BC%89-%E6%B8%A1%E9%82%8A-%E9%81%94%E6%98%8E/dp/4844398350www.amazon.co.jp

こちらの書籍を参考に、Googleアカウントでログインする機能とmarkdown書式でメモを作成する機能を作成しました。昨年のラクスアドベントカレンダーにVue.jsのプロジェクトをFirebaseでデプロイする方法について記事を投稿したので、本記事を閲覧する前にご確認いただけると幸いです。

qiita.com

ログイン機能

srcディレクトリの下にcomponentsディレクトリを作成し、そこに「Home.vue」と「Editor.vue」を作成してください。

mymarkdown ― src ― components ― Home.vue（ログイン画面）
                 |            |
                 |            └ Editor.vue（メモ作成画面）
                 |
                 └ App.vue（画面切り替え）

まずはGoogleアカウントでログインする機能を作成します。ログインする前の画面「Home.vue」を実装します。

Home.vue

<template>
    <div id="home">
        <h1>{{ msg }}</h1>
        <button>Googleアカウントでログイン</button>
    </div>
</template>
<script>
export default {
    name: 'home',
    data() {
        return {
            msg: "Welcome to MyMarkDown"
        };
    }
};
</script>

ログイン状態によって画面を切り分ける「App.vue」を作成します。 createdでログイン状態を確認しています。 この画面で「Home.vue」と「Editor.vue」を読み込んで、ログイン状態により表示を変えています。

App.vue

<template>
  <div id="app">
    <Home v-if="!isLogin"></Home>
    <Editor v-if="isLogin" :user="userData"></Editor>
  </div>
</template>

<script>
import Home from "./components/Home.vue";
import Editor from "./components/Editor.vue";
export default {
  name: 'app',
  data () {
    return {
      isLogin: false,
      userData: null
    }
  },
  created: function() {
    firebase.auth().onAuthStateChanged(user => {
      console.log(user)
      if (user) {
        this.isLogin = true;
        this.userData = user;
      } else {
        this.isLogin = false;
        this.userData = null;
      }
    });
  },
  components: {
    Home: Home,
    Editor: Editor
  }
}
</script>

<style lang="scss">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

まだログイン機能が実装されていないので、初期表示はこちらの画面（Home.vue）となります。ログイン機能を実装するためにまずFirebaseの「Authentication」の「sign-in method」でGoogleアカウントでのログインを有効に設定します。「Google」をクリックし、「有効にする」ボタンをクリックし、プロジェクトのサポートメールを設定します。「Googleが有効になりました」と出ればOKです。

f:id:y_kwmt:20200330113042p:plain

続いて「Home.vue」でログイン機能を実装します。methodsにログイン機能を追加します。

Home.vue

<template>
    <div id="home">
        <h1>{{ msg }}</h1>
        <button @click="googleLogin">Googleアカウントでログイン</button>
    </div>
</template>
<script>
export default {
    name: 'home',
    data() {
        return {
            msg: "Welcome to MyMarkDown"
        };
    },
    methods: {
        googleLogin: function() {
            firebase.auth().signInWithRedirect(new firebase.auth.GoogleAuthProvider());
        }
    }
};
</script>

「Googleアカウントでログイン」ボタンをクリックするとGoogleアカウントの認証画面に移動し、 ここで承認すればログインすることができます。すると次のような画面が表示されます。 見出し「エディター画面」の下にはアカウント名とログアウトボタンが表示されます。（アカウント名は伏せさせていただきます）

f:id:y_kwmt:20200331195049p:plain

また、ログアウト機能をこの後作成するメモ機能の画面「Editor.vue」に追加します。

Editor.vue

<template>
    <div id="home">
        <h1>エディター画面</h1>
                <p>
            <span>{{ user.displayName }}</span>
            <button @click="logout">ログアウト</button>
        </p>
    </div>
</template>
<script>
export default {
    name: 'editor',
    props: ["user"],
    data() {},
    methods: {
        // ログアウト機能
        logout: function() {
            firebase.auth().signOut();
        }
    }
}
</script>

ログアウトを実行するとログイン画面が表示されます。

f:id:y_kwmt:20200331194937p:plain

メモ機能

続いて入力内容をmarkdown書式でプレビューを表示する機能を作成します。 そのためにマークダウン用のライブラリをインストールします。 次のコマンドを実行してインストールしてください。

npm install --save-dev marked

これはmarkedというmarkdown書式をHTMLに変換するnpmモジュールです。

続いてEditor.vueを編集します。

Editor.vue

<template>
    <div id="home">
        <h1>エディター画面</h1>
        <p>
            <span>{{ user.displayName }}</span>
            <button @click="logout">ログアウト</button>
        </p>
        <div>
            メモリスト
            <div v-for="(memo, index) in memoList">
                <div v-if="index!=0" v-html="displayMemo(memo.markdown)"></div>
            </div>
            <textarea class="markdown" v-model="memoList[memoIndex].markdown"></textarea>
            <div><button v-on:click="addMemo">メッセージ追加</button></div><br>
            プレビュー<div v-html="preview()"></div>
        </div>
    </div>
</template>
<script>
import marked from "marked";
export default {
    name: 'editor',
    props: ["user"],
    data() {
        return {
            memoList: [
                {
                    markdown: "",
                }
            ],
            memoIndex: 0
        };
    },
    methods: {
        // ログアウト機能
        logout: function() {
            firebase.auth().signOut();
        },
        // markdown書式でのプレビュー表示
        preview: function() {
            return marked(this.memoList[this.memoIndex].markdown);
        },
        // メモを追加
        addMemo: function() {
            this.memoList.push({
                markdown: marked(this.memoList[this.memoIndex].markdown)
            });
        },
        // 作成したメモを一覧表示
        displayMemo: function(text) {
            return text.split(/\n/)[0];
        }
    }
}
</script>

実行して、プレビューに入力内容がリアルタイムでmarkdown書式で表示されていればOKです。

f:id:y_kwmt:20200331195205p:plain

大見出しで「メモ」、中見出しで「ブログを書く」「メモ機能を実装する」、小見出しで「メモを追加」「マークダウン記法でメモを表示する」というメモを追加しています。 プレビューには小見出しで「マークダウン記法でメモを表示する」と表示しています。

おわりに

今回はVue.jsでGoogleアカウントのログイン機能とmarkdown書式のメモ作成機能を紹介しました。今度はチャットができるようになるなど機能の拡張を行い、記事を作成していきたいと思います。

  • エンジニア中途採用サイト
    ラクスでは、エンジニア・デザイナーの中途採用を積極的に行っております！
    ご興味ありましたら是非ご確認をお願いします。
    20210916153018
    https://career-recruit.rakus.co.jp/career_engineer/

  • カジュアル面談お申込みフォーム
    どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。
    以下フォームよりお申込みください。
    forms.gle

  • イベント情報
    会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ rakus.connpass.com

ラクスの技術 / デザイン情報サイト
Copyright © RAKUS Co., Ltd. All rights reserved.