Firebase RealtimeDatabaseを触ってみた

f:id:yoshitaku_jp:20181128144942p:plain

この記事は、yoshitaku_jpの1人 Advent Calendar 2018 - Adventar の14日目の記事です。

tl;dr

  • Firebase RealtimeDatabaseを触ってみた
  • データの挿入と削除をやってみた

準備

  • ディレクトリの構成
  • Todo.vueのソース
  • router/index.jsのソース

ディレクトリ構成

今回のディレクトリ構成は下記の通りです。Todo.vueを適切に読み込めれば、どのような構成でも大丈夫だと思います。

yoshitaku$ tree -I "node_modules|test|assets|config|static|README.md|build" -L 3
.
├── index.html
├── package-lock.json
├── package.json
└── src
    ├── App.vue
    ├── components
    │   └── Todo.vue
    ├── main.js
    └── router
        └── index.js

Todo.vueのソースコード

<template>
    <div class="todo">
        <h1>タスクの一覧</h1>
        <div>
            <input type="text" v-model="newTodoName">
            <button type="submit" v-on:click="createTodo()">タスクの作成</button>
        </div>
        <ul v-for="(todo, key) in todos" :key="todo.id" >
            <li>
              <input class="toggle" type="checkbox" v-model="todo.isComplete">{{ todo.name }}
              <button type="submit" v-on:click="deleteTodo(key)">タスクの削除</button>
            </li>
        </ul>
    </div>
</template>

<script>
import firebase from 'firebase'

export default{
  name: 'Todo',
  created: function () {
    this.database = firebase.database()
    this.todoRef = this.database.ref('todos')

    var _this = this
    this.todoRef.on('value', function (snapshot) {
      _this.todos = snapshot.val()
    })
  },
  data () {
    return {
      database: null,
      todoRef: null,
      newTodoName: '',
      showTodoType: 'all',
      todos: []
    }
  },
  methods: {
    createTodo: function (newTodoName) {
      if (newTodoName === '') { return }
      this.todoRef.push({
        name: this.newTodoName
      })
      this.newTodoName = ''
    },
    deleteTodo: function (todo) {
      this.todoRef.child(todo).remove()
    }
  }
}

</script>

<style scoped>
ul {
  list-style: none;
}
</style>

Firebase RealtimeDatabaseとの接続

個別に見ていきます。createdでインスタンスを作成したときに、データベースへ接続し保存されているデータを取得してきます。 this.todoRef = this.database.ref('todos')にFirebase Consoleで定義した名前を設定します。(Firebase RealtimeDatabaseの設定の項で再度説明)

  created: function () {
    this.database = firebase.database()
    this.todoRef = this.database.ref('todos')

    var _this = this
    this.todoRef.on('value', function (snapshot) {
      _this.todos = snapshot.val()
    })
  },

Todoの作成と削除

methodsにcreateTododeleteTodoを設定しています。 createTodoは画面上のテキストボックスnewTodoNameに入力された値を引数に、todoRefにpushしています。終わったら、テキストボックスnewTodoNameを空欄でクリアしています。deleteTodoはkeyを引数にremoveしています。

  methods: {
    createTodo: function (newTodoName) {
      if (newTodoName === '') { return }
      this.todoRef.push({
        name: this.newTodoName
      })
      this.newTodoName = ''
    },
    deleteTodo: function (todo) {
      this.todoRef.child(todo).remove()
    }
  }

router/index.jsのソース

これは、

import Vue from 'vue'
import Router from 'vue-router'
import Todo from '@/components/Todo'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/todo',
      name: 'Todo',
      component: Todo
    }
  ]
})

Firebase RealtimeDatabaseの設定

データベースのルールタブを開きます。画像内のtodos".read": "true"".write": "true"と追加します。

todosの名前は好きな名称で大丈夫ですが「Firebase RealtimeDatabaseとの接続」で指摘したように、接続の際に指定するのでそこだけは一致させるようにしてください。

f:id:yoshitaku_jp:20181213150811p:plain

デモ

デモ1

f:id:yoshitaku_jp:20181213173434g:plain

デモ2

f:id:yoshitaku_jp:20181213173928g:plain

まとめ

  • リアルタイムで変化していくのをみるのは業務上ないので新鮮だった。
  • 今後のアプリ作成に生かしていきたい

他のFirebase系

yoshitaku-jp.hatenablog.com

yoshitaku-jp.hatenablog.com

yoshitaku-jp.hatenablog.com

yoshitaku-jp.hatenablog.com

【解決】npm run devでwebpack-dev-serverのエラー

この記事は、yoshitaku_jpの1人 Advent Calendar 2018 - Adventar の13日目の記事です。

tl;dr

  • TypeError: Cannot destructure propertycompileof 'undefined' or 'null'.が発生
  • webpack-dev-server@3.0.0 をダウングレードして解決

エラー内容

TypeError: Cannot destructure propertycompileof 'undefined' or 'null'.が発生しました。

発生の状況

npm run devを実行したらエラー

上記のエラーはnpm run devの実行時に出力されました。

yoshitaku$ npm run dev

> vue_firebase_auth_test@1.0.0 dev /Users/takuyayoshimura/workspace/vue_firebase_auth_test
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

TypeError: Cannot destructure property `compile` of 'undefined' or 'null'.
    at addHooks (/Users/takuyayoshimura/workspace/vue_firebase_auth_test/node_modules/webpack-dev-server/lib/Server.js:114:49)
    at new Server (/Users/takuyayoshimura/workspace/vue_firebase_auth_test/node_modules/webpack-dev-server/lib/Server.js:127:5)
    at startDevServer (/Users/takuyayoshimura/workspace/vue_firebase_auth_test/node_modules/webpack-dev-server/bin/webpack-dev-server.js:355:14)
    at processOptions (/Users/takuyayoshimura/workspace/vue_firebase_auth_test/node_modules/webpack-dev-server/bin/webpack-dev-server.js:309:5)
    at internalTickCallback (internal/process/next_tick.js:77:7)
    at process._tickCallback (internal/process/next_tick.js:47:5)
    at Function.Module.runMain (internal/modules/cjs/loader.js:778:11)
    at startup (internal/bootstrap/node.js:300:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:826:3)

解決までの過程

TypeError: Cannot destructure property compile of 'undefined' or 'null'.で調べる

GithubのWebpackのところへissueが上がっていました。

github.com

1 - Upgrade webpack to v4, you must change the webpack.config.js file for compatibility. or
2 - Downgrade webpack-dev-server to exactly v3.0.0 as @Nufeen said.

「webpackのバージョンを4にあげてwebpack.config.jsを編集するか、3.0.0にダウングレードをしてください」と書いてありました。

解決策

webpack-dev-serverをダウングレード

今回はnpm install --save-dev webpack-dev-server@3.0.0 でダウングレードしてみます。

yoshitaku$ npm install --save-dev webpack-dev-server@3.0.0
npm WARN ajv-keywords@2.1.1 requires a peer of ajv@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-cli@3.1.2 requires a peer of webpack@^4.x.x but none is installed. You must install peer dependencies yourself.
npm WARN webpack-dev-server@3.0.0 requires a peer of webpack@^4.0.0-beta.1 but none is installed. You must install peer dependencies yourself.

+ webpack-dev-server@3.0.0
added 26 packages from 8 contributors, removed 49 packages, updated 10 packages and audited 31156 packages in 22.405s
found 1 high severity vulnerability
  run `npm audit fix` to fix them, or `npm audit` for details

npm audit fixが気になりますが、実行すると再度バージョンが上がってしまうので、一旦思いとどまります

バージョンが下がったので、npm run dev を実行してみます。

yoshitaku$ npm run dev

> vue_firebase_auth_test@1.0.0 dev /Users/takuyayoshimura/workspace/vue_firebase_auth_test
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 95% emitting

 DONE  Compiled successfully in -1970ms                                                                                                                                                                            8:32:14

 I  Your application is running here: http://localhost:8080

無事になおってwebpack-dev-serverを使うことが出来ました。

今年のアウトプットを振り返る

この記事は、yoshitaku_jpの1人 Advent Calendar 2018 - Adventar の12日目の記事です。

かつ、『エンジニアの登壇を応援する会』 Advent Calendar 12日目の記事です。(https://adventar.org/calendars/2993

11日目は、どももさんでした。お疲れ様でした。

LTに初めて申し込むときの不安要素とその取り除き方 - りんごとバナナとエンジニア

さらに「よしたくブログ」の100記事目になります。とうとう3桁のりました。よく続いたなぁ。

今年のアウトプットを振り返るまえに

今年28歳になり社会人としても5年目を迎え、今までのことをザーッと振り返ってみようと思います。

就職して配属した直後ぐらいまで

大学では会計学を学びITと関わる機会はありませんでしたが、ご縁があり中小のIT企業(いわゆるSES企業)に就職しました。 配属されてからは「やさしいJava」を1つ渡され「読み終わったら一人で掲示板を作ってみて」と言われ立ち向かう日々でした。 突然インストールされたEclipseに頭を悩まし、TomcatやDB接続するためのドライバーについてわからないままネットの情報を駆使して生き延びてきました。 土日もほとんどの時間を調べ物に費やし、やっと掲示板が出来たと思ったらSQLインジェクションが考慮されてないねと言われ、「???」が生まれるなかさらに調べ続ける毎日でした。 表現としてインパクトがあるように書いていますが、自分としては「こんな事ができるのか!!!」「こういうようにやれば解決するのか!!!」と毎日楽しかったです。 さらに、情報系卒業でないことを先輩も理解してくれていたので気長に育ててくれたように感じています。

実際の案件にアサインされてから

案件にアサインされてからもSDKの使い方や、ネットワーク、仮想技術など、わからないことが多く常に調べていました。 1個調べると10個わからないことが出てくる状態で、GoogleChromeのタブは常にパンパンでした。 BtoB系の製品だとインターネットに情報が出ていないので、似たような情報を探して、自分なりに考え対応しました。

2年・3年・4年と過ごしてきて

このような感じで、就職してからはわからないことだらけな上に常に調べて対応する日々でした。 もちろん2年・3年・4年と時を過ごすうちに、自分にもわかる・理解できることが増えていきました。それと同時に、こんな気持も芽生えてきました。

自分もなにか周りに貢献したい!!!

今年のアウトプットを振り返る

今年は週1でブログを更新しました。技術のことを中心に書き続けてきました。これには2つの理由があります。

  1. 転職活動でアウトプットの実績として使う
  2. インターネットへの恩返し

転職活動でアウトプットの実績として使う

これは見出しの通りです。

  • 自分はいろいろな技術について調べる意欲
  • 習慣化させ継続する力

を見せられたらいいなと思ってやってきました。 継続してこれたのには自分ひとりの力だけではありません。 3ヶ月間ブログメンターをしていただいたkakakakakkuさんや、write-blog-every-weekのみなさんには感謝しかありません。 加えて、自分のブログにリアクションをくださった方ありがとうございます。 リアクションがあるということだけで、非常にモチベーションが上がります。 ここまで続けてきたブログが今後の転職活動で活かせたら最高だと思います。

インターネットへの恩返し

ここが一番お伝えしたいところです。 「今年のアウトプットを振り返るまえに」で、自分は周りの人に助けられ続けてきました。 それは実際に直接関わっている人や、インターネットの先にいる知らない人にもです。 直接関わっている人には感謝の言葉などをかければいいと思いますが、インターネットの先にいる知らない人にはどうしたらいいでしょうか。 自分が行き着いた先は、「自分もブログを書く」ことでした。 最近聞いた言葉では、「恩送り」という言葉がしっくりきます。

恩送り(おんおくり)とは、誰かから受けた恩を、直接その人に返すのではなく、別の人に送ること。

「誰かが書いてくれたブログの記事で自分が助かり、その恩としてブログを書く。その自分が書いたブログを見て、誰かが助かる。」 そんな循環になったら素敵だなと思っています。

どの世界でも上を見ればキリがないですが、今の自分にしかできないことがあると思います。 技術レベルが低いために自信がなかったり、マサカリが飛んでくるのが怖かったりするかもしれませんが、恐れず自信を持って書いてみてください。 世の中には優しいエンジニアがたくさんいて、あなたのことをサポートしてくれるはずです。

最後に

ダラダラと書いてきてまとまりが無くなってしまいましたが、これで終わりにしようと思います。 要は今年はブログ頑張ったって話でした。来年はLTの回数増やしたり、アウトプットのベクトルをしっかり考えて実践していきたいと思います。それは来年の目標を綴るこちらのアドベントカレンダーで書きたいと思います。

真・エンジニアの登壇を応援する会 Advent Calendar 2018 - Adventar

インターネットへの恩返し」についてはずっと思っていましたが、なかなか言語化する機会がなかったので1年が終わるタイミングでアウトプットできてよかったです。 今後も誰かの助けになればいいなと思い、ブログを書き続けていきたいと思います。

いつか自分のこの記事を読んで、ブログを書くことを決めた人に出会えたら嬉しいです。

おしまい。

CircleCIからFirebase Hostingへデプロイ

f:id:yoshitaku_jp:20181203152044p:plain

この記事は、yoshitaku_jpの1人 Advent Calendar 2018 - Adventar の11日目の記事です。

CircleCIからFirebaseへデプロイ

CircleCIを回してFirebaseへデプロイをしてみたかったので調べてやってみました。

CircleCI上での設定

Environment Variables

まずはCircleCI側に、Firebaseの情報を設定していきます。 CircleCIの設定画面のEnvironment Variablesに

  • FIREBASE_PROJECT_NAME
  • FIREBASE_TOKEN

を設定します。Environment VariablesからAdd Variableをクリックすれば、各値を設定することができます。

f:id:yoshitaku_jp:20181210215307p:plain

FIREBASE_PROJECT_NAME は、今現在取り組んでいるプロジェクトの名前を設定すればOKです。

FIREBASE_TOKENfirebase login:ciコマンドをローカル環境で実行すると、ブラウザでの認証が終わったあとにコンソールるに表示されます。

一部内容を変えて、実行結果を載せておきます。

yoshitaku$ firebase login:ci

Visit this URL on any device to log in:
URLが

Waiting for authentication...

✔  Success! Use this token to login on a CI server:

<FIREBASE_TOKENの内容>

Example: firebase deploy --token "$FIREBASE_TOKEN"

config.ymlの設定

画面上の設定が終わったら、config.ymlの設定です。下はビルドして、デプロイをしている内容です。

version: 2
jobs:
  build:
    docker:
      - image: circleci/node:8

    working_directory: ~/repo

    steps:
      - checkout
      - run: npm install
      - run:
          name: 'Build Client Code'
          command: npx webpack
      - persist_to_workspace:
          root: .
          paths:
            - .
  deploy:
    docker:
      - image: circleci/node:8
    working_directory: ~/repo
    steps:
      - attach_workspace: 
            at: .
      - run:
          name: 'Install Dependecies'
          command: npm install -save firebase-tools
      - run:
            name: 'Deploy to Hosting'
            command: npm run deploy
workflows:
  version: 2
  build_and_deploy:
    jobs:
      - build
      - deploy:
          requires:
            - build

package.jsonのscripts 部分

config.ymlで、command: npm run deployを使いました。package.jsonのscript部分では"deploy": "npx firebase deploy --only hosting --project \"$FIREBASE_PROJECT_ID\" --token \"$FIREBASE_TOKEN\""と記述しています。

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --hot",
    "build": "webpack -p",
    "deploy": "npx firebase deploy --only hosting --project \"$FIREBASE_PROJECT_ID\" --token \"$FIREBASE_TOKEN\""
  },

まとめ

  • CircleCIからFirebaseへデプロイができた
  • CicleCI上でfirebase-toolsをインストールする際に、躓いた
    • グローバルにはインストールできない
    • -saveをつけた
  • builddeployでのattach_workspaceの受け渡しも学べた

#ゆうかねラジオ にゲスト出演してきた

f:id:yoshitaku_jp:20181210001428p:plain

この記事は、yoshitaku_jpの1人 Advent Calendar 2018 - Adventar の10日目の記事です。

anchor.fm

このラジオはパーソナリティの悠とKANEがゲストを招待し、様々なテーマについて話をしながら新しい価値観を開拓するラジオです。 人材のお仕事に携わる僕たち二人が「人」にフォーカスを当てていきます。 また、僕たちはIT業界で働いていますが、IT業界の方々に限らず様々な人と様々なテーマについて話をしていきます。

先日の秋の夜長の自由研究LT大会 でLTしているところを、悠さんに目をつけられ見ていただき、今回呼ばれました。ありがたいです。嬉しい。

yoshitaku-jp.hatenablog.com

yoshitaku-jp.hatenablog.com

yoshitaku-jp.hatenablog.com

まだ公開されていないのでネタバレは避けますが、LTの話とか趣味の話で盛り上がりました。 Podcastの収録は初めてで非常に緊張しましたが、オフラインで顔が見えるところでやったので本当に雑談な感じでやれてよかったです!台本が用意されていないので事前回答が用意できず、その場でどう答えようか考えなければならなかったので瞬発力が要求されるなと思いました。猛スピードで落ちてくるぷよぷよを見つつ、下の土台では連鎖を考えなければいけない感じです。まぁある意味で言えば、瞬発的に答えられないってことは、自分の中でしっかり考えがまとまっていないんだなってことですね。これからも精進したいと思います。

Podcast出演はいい経験でした。ありがとうございました。公開されたらまたブログ書きます。

docker-compose up で driver failed programming external connectivity on endpoint

この記事は、yoshitaku_jpの1人 Advent Calendar 2018 - Adventar の9日目の記事です。

土日なので軽めのエラーが起きたよ記事で...

docker-compose up を実行したら、こんなエラーがでました。

ERROR: for learning_db_1_1e6e8a99351d  Cannot start service db: driver failed programming external connectivity on endpoint learning_db_1_31d4b0903210 (0d3e634a4f03ef01c57cf939de4777446d0635f2665ee57db6db00e0abe64325): Error starting userland proxy: mkdir /port/tcp:0.0.0.0:5432:tcp:172.22.0.2:5432: input/output error

原因はdocker-compose up する以前にdockerで使っていたポートを掴んだままだったからエラーが発生したようです。

調べたら、Docker for Macを再起動すれば直ると書かれていたのでRestartしたら直りました。

Dockerで不具合が出たら「Dockerを再起動をする」。これが一番早い対処法になりつつあります。

yoshitaku-jp.hatenablog.com

docker-compose up で ERROR: An HTTP request took too long to complete.

この記事は、yoshitaku_jpの1人 Advent Calendar 2018 - Adventar の8日目の記事です。

土日なので軽めのエラーが起きたよ記事で...

docker-compose up を実行したら、こんなエラーがでました。

ERROR: An HTTP request took too long to complete. Retry with --verbose to obtain debug information.
If you encounter this issue regularly because of slow network conditions, consider setting COMPOSE_HTTP_TIMEOUT to a higher value (current value: 60).

調べたら、Docker for Macを再起動すれば直ると書かれていたのでRestartしたら直りました。

yoshitaku-jp.hatenablog.com

Parcelをさわってみた

この記事は、yoshitaku_jpの1人 Advent Calendar 2018 - Adventar の7日目の記事です。

気になっていたバンドルツールのParcelを使ってみました。

parceljs.org

比較として並行してWebpackも触りましたが、設定ファイルを書かないお手軽さに完全に負けてしまい、Parcelばかり触ってしまいます。設定ファイルを用いて、開発と本番での使い分けができるのがWebpackのいいところで、Parcelはお手軽に試せるのがいいところでしょうか。

試してみたこと

基本的なことばかりですが、並べておきます。

  • インストール
  • CLI
    • コマンド
    • オプション
      • 出力先の変更
      • 出力ファイル名の変更
      • ブラウザ起動

インストール

グローバルな環境にインストールしています。 このタイミングでのバージョンは、1.10.3 でした。

npm install -g parcel-bundler

yoshitaku$ parcel -V
1.10.3

CLI

コマンド

準備

node.jsを使う前での準備です。実行済みでしたら必要ありません。

npm init -y

今回使用するindex.html です。

<html>
<body>
  <script src="./index.js"></script>
</body>
</html>

今回使用するindex.js です。

console.log('hello world')

ここまでの作業で、下記のディレクトリになっているはずです。

yoshitaku$ tree
.
├── index.html
├── index.js
└── package.json

ここから各コマンドを見ていきます。

serve

parcel index.html コマンドで開発用サーバーが起動します。dist ディレクトリが作成され配下にファイルが出力されます。デフォルトのポートは 1234です。ファイルを変更してもすぐに反映されます。 f:id:yoshitaku_jp:20181206074134p:plain

build

parcel build index.html コマンドでビルドができます。 dist ディレクトリが作成され配下にファイルが出力されます。

f:id:yoshitaku_jp:20181206074522p:plain

watch

parcel watch index.html コマンドで開発用のサーバを立ち上げずにファイルの変更を検知してビルドしてくれます。

f:id:yoshitaku_jp:20181206075200p:plain

オプション

出力先の変更

-d オプションで、出力先を変更できます。 例 parcel build index.html -d build/output

yoshitaku$ tree
.
├── index.html
├── index.js
└── package.json

0 directories, 3 files
yoshitakuMBA:parcel yoshitaku$ parcel build index.html -d build/
✨  Built in 325ms.

build/parcel.cb1a8511.js     1.08 KB    12ms
build/parcel.cb1a8511.map      190 B     6ms
build/index.html                73 B     6ms
yoshitakuMBA:parcel yoshitaku$ tree
.
├── build
│   ├── index.html
│   ├── parcel.cb1a8511.js
│   └── parcel.cb1a8511.map
├── index.html
├── index.js
└── package.json

1 directory, 6 files

出力ファイル名の変更

--out-file オプションで、出力ファイルの名前を変更することができます。

parcel build index.html --out-file output2.html

yoshitaku$ tree
.
├── index.html
├── index.js
└── package.json

0 directories, 3 files
yoshitakuMBA:parcel yoshitaku$ parcel build index.html --out-file output2.html
✨  Built in 315ms.

dist/parcel.cb1a8511.js     1.08 KB    14ms
dist/parcel.cb1a8511.map      190 B     7ms
dist/output2.html              73 B     6ms
yoshitakuMBA:parcel yoshitaku$ tree
.
├── dist
│   ├── output2.html
│   ├── parcel.cb1a8511.js
│   └── parcel.cb1a8511.map
├── index.html
├── index.js
└── package.json

1 directory, 6 files

ブラウザ起動

parcel index.html --open serve のときに使える限定のオプションです。

指定しておくと開発サーバが起動したタイミングでブラウザが起動してくれます。

感想

  • 基本的なコマンドをさわったが、非常に手軽だった。なにより早くビルドされるのが嬉しい。
  • 今度も軽いプロダクトを作るときはparcelを使っていきたい
  • Webpackも比較対象としてさわっておきたい

Chromeでキャッシュを無効にする

この記事は、yoshitaku_jpの1人 Advent Calendar 2018 - Adventar の6日目の記事です。

Parcelを使っていたら、変更した内容が画面に反映されなくなり困りました。原因はbundle.jsと常時同じ名前を使っていたので、ブラウザでキャッシュを持ってしまい変更が適用されなかったようでした。

キャッシュを削除したり持たない方法を探していたら、Chromeでキャッシュを無効化する方法があることを教えてもらいましたのでTipsとしてメモを残しておきます。

デベロッパーツールを開く

f:id:yoshitaku_jp:20181128142949p:plain

Networkタブに移動し、Disable Cacheをチェックする

f:id:yoshitaku_jp:20181128143044p:plain

普段全てのデバイスApple使いの自分にとって、ブラウザもsafariでしたので気づきませんでした。キャッシュが原因じゃないかとご助言いただけたことと、Chromeのキャッシュ無効化を教えていただき感謝でした。

もうキャッシュのせいで半日ムダにすることがないよう気をつけます。

Firebase AuthenticationでGoogle認証をやってみた

f:id:yoshitaku_jp:20181205000333p:plain

この記事は、yoshitaku_jpの1人 Advent Calendar 2018 - Adventar の5日目の記事です。

今回はFirebase AuthenticationでGoogle認証をやってみました。超簡単で便利!これを使えばログイン機能に頭を悩ませる必要ないんだなって思います。

AuthenticationのGoogle認証を有効にする

左側のタブのAuthenticationを選択し、次にログイン方法を選択します。 f:id:yoshitaku_jp:20181204211018p:plain

真ん中のGoogle欄の端にある鉛筆マークを選択肢します。 f:id:yoshitaku_jp:20181205072523p:plain

右上の無効を有効に変更します。 f:id:yoshitaku_jp:20181205072538p:plain

以上です。

ディレクトリと各ファイルの中身

ディレクトリ構成と各ファイルの中身を見ていきます。

ディレクト

.
├── index.html
└── src
    ├── App.vue
    ├── components
    │   ├── HelloWorld.vue
    │   └── Signup.vue
    ├── main.js
    └── router
        └── index.js

各ファイルの中身

src/main.js

main.jsにFirebaseの設定スクリプトを貼り付けます。

import Vue from 'vue'
import App from './App'
import router from './router'
import firebase from 'firebase'

Vue.config.productionTip = false

var config = {
  apiKey: 'your_apiKey',
  authDomain: 'your_authDomain',
  databaseURL: 'your_databaseURL',
  projectId: 'your_projectId',
  storageBucket: 'your_storageBucket',
  messagingSenderId: 'your_messagingSenderId'
}
firebase.initializeApp(config)

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

src/components/Signup.vue

Signup.vueでは、FirebaseでGoogle認証を呼び出し、'Create account: ' + obj.user.displayName と自身の名前をアラートで表示しています。アラートが消されたあとはトップページに遷移しています。

<template>
    <div class="singup">
        <button @click="signUp">登録</button>
    </div>
</template>

<script>
import firebase from 'firebase'

export default{
  name: 'Signup',
  data () {
    return {
    }
  },
  methods: {
    signUp: function () {
      var provider = new firebase.auth.GoogleAuthProvider()
      firebase.auth().signInWithPopup(provider)
        .then(obj => {
          alert('Create account: ' + obj.user.displayName)
          this.$router.push('/')
        })
        .catch(error => alert(error.message))
    }
  }
}

</script>

src/router/index.js

ルーター機能を使っています。URLでsingupにたどり着けれればなんでも大丈夫だと思います。

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Signup from '@/components/Signup'
import Signin from '@/components/Signin'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/signup',
      name: 'Signup',
      component: Signup
    }
  ]
})

デモ

ユーザがいない状況から、登録ボタンを教えて、ユーザが登録されるところまでです。個人情報に黒塗りしています。

f:id:yoshitaku_jp:20181204235124g:plain

まとめ

  • あまりGoogle認証をやってる人がいなくてまとめた
  • 手軽にSNSなどの認証ができてすごい…
  • 他の機能も早くさわってみたい

github.com