こんにちは。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でデプロイする方法について記事を投稿したので、本記事を閲覧する前にご確認いただけると幸いです。
ログイン機能
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です。
続いて「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アカウントの認証画面に移動し、 ここで承認すればログインすることができます。すると次のような画面が表示されます。 見出し「エディター画面」の下にはアカウント名とログアウトボタンが表示されます。(アカウント名は伏せさせていただきます)
また、ログアウト機能をこの後作成するメモ機能の画面「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>
ログアウトを実行するとログイン画面が表示されます。
メモ機能
続いて入力内容を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です。
大見出しで「メモ」、中見出しで「ブログを書く」「メモ機能を実装する」、小見出しで「メモを追加」「マークダウン記法でメモを表示する」というメモを追加しています。 プレビューには小見出しで「マークダウン記法でメモを表示する」と表示しています。
おわりに
今回はVue.jsでGoogleアカウントのログイン機能とmarkdown書式のメモ作成機能を紹介しました。今度はチャットができるようになるなど機能の拡張を行い、記事を作成していきたいと思います。
エンジニア中途採用サイト
ラクスでは、エンジニア・デザイナーの中途採用を積極的に行っております!
ご興味ありましたら是非ご確認をお願いします。
https://career-recruit.rakus.co.jp/career_engineer/カジュアル面談お申込みフォーム
どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。
以下フォームよりお申込みください。
forms.gleイベント情報
会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください! rakus.connpass.com