差分

このページの2つのバージョン間の差分を表示します。

--- z_blog:2018:index.html [2018/12/15] – [Vue.jsアプリの新規作成] adash333
+++ z_blog:2018:index.html [2018/12/24] (現在) – [Vue.jsとFirebaseの参考リンク] adash333
@@ 行 1: / 行 1: @@
-===== 181215 改訂新版　Vue.jsとFirebaseで作るミニWEBサービスをCodeSandboxで写経してみる =====
+===== 181215 改訂新版　Vue.jsとFirebaseで作るミニWEBサービスをCodeSandboxで写経してみる（１） =====
 Vue.jsの入門のために、以下の本を写経しているが、面白い！Vue.jsってどんな感じなのかな？とか、WEBアプリを作ってみたいと願う初心者の方に、本当におすすめです。
@@ 行 10: / 行 10: @@
 CodeSandboxは、無料のオンラインWEBアプリケーション開発環境です。2017年にサービスが開始され、2018年12月現在、React.js、Angular、Vue.jsなどのJavascriptフレームワークを用いたプログラミングを、登録無しに瞬時に行うことができます。nowというサイトの連携で、無料で公開することもできます。
+===== リンク =====
+[[z_blog:2018:181216_nuxt_firebase|z_blog:2018:181216_nuxt_firebase]]
+[[z_blog:2018:181219_windows10_config|z_blog:2018:181219_windows10_config]]
 ===== 開発環境 =====
@@ 行 66: / 行 72: @@
 {{:z_blog:2018:pasted:20181215-213026.png}}
-===== Vueアプリにfirebase =====
+===== Vueアプリにfirebaseをインストール =====
+通常の開発環境では、ターミナル画面で、npm install firebase --saveと打ち込みますが、CodeSandboxでは、以下のように行います。
+Dependencies　をクリック
+{{:z_blog:2018:pasted:20181215-213855.png}}
+Add Dependency をクリック
+{{:z_blog:2018:pasted:20181215-213932.png}}
+Search or ...のところに、firebaseと入力して
+{{:z_blog:2018:pasted:20181215-214010.png}}
+firebaseのnpmをインストール
+{{:z_blog:2018:pasted:20181215-214044.png}}
+これで、Dependenciesのところに、firebaseが追加されました。
+===== Googleアカウントでのユーザー登録と、ログイン状態の判別 =====
+コンポーネントの作成
+src/commponents/Home.vueと、Editor.vueを以下のように作成。
+{{:z_blog:2018:pasted:20181215-214830.png}}
+{{:z_blog:2018:pasted:20181215-214848.png}}
+src/App.vue　の編集
+(変更前)
+{{:z_blog:2018:pasted:20181215-214933.png}}
+(変更後)
+{{:z_blog:2018:pasted:20181215-221301.png}}
+===== Firebaseでログイン前とログイン後でページ遷移 =====
+App.vueにおいて、isLoginがtrueかfalseかで、v-ifを使用し、ログインの有無により表示するページを変える。
+<code>
+<div id="app">
+  <Home v-if="!isLogin"></Home>
+  <Editor v-if="isLogin"></Editor>
+</div>
+</code>
+Firebaseの管理画面でAuthenticationタブを開き、「ログイン方法」で、GoogleのステータスをONにする。
+{{:z_blog:2018:pasted:20181215-222600.png}}
+Googleログインの実装
+components/Home.vueを編集
+(変更後)
+{{:z_blog:2018:pasted:20181216-184536.png}}
+App.vueを編集
+{{:z_blog:2018:pasted:20181216-184629.png}}
+これで、CodeSandboxではうまくいかなくて悩んだ。
+→firebaseのアプリの画面で、Authentication > ルール　の下の方で、codesandbox.io (できれば、サブドメインまで入れた方が安全)を、承認済みドメインに追加する必要があった。
+{{:z_blog:2018:pasted:20181216-164037.png}}
+すると、Googleログインできるようになり、ログイン後は、Editor画面に移動された。
+{{:z_blog:2018:pasted:20181216-184755.png}}
+===== Firebaseでログイン後のページの表示 =====
+Firebaseにログイン後の、ログインした人のデータは、「user」に格納されているため、App.vueでthis.userData=userにより、userDataに格納し、それを、Editor.vueで受け取る。
+components/Editor.vue
+(変更前)
+{{:z_blog:2018:pasted:20181216-185558.png}}
+(変更後)
+{{:z_blog:2018:pasted:20181216-190414.png}}
+このままではEditor.vueが真っ白なので、App.vueを編集。
+<code>
+<Editor v-if="isLogin" :user="userData"></Editor>
+</code>
+{{:z_blog:2018:pasted:20181216-190744.png}}
+これで、firebaseからApp.vueを介して、Editor.vueにログインした人のdisplayNameが受け渡され、表示することができた。
+続きは[[z_blog:2018:181216_vue-firebase-miniweb2|181215 改訂新版　Vue.jsとFirebaseで作るミニWEBサービスをCodeSandboxで写経してみる（２）]]へ
+===== ソースコード =====
+<html>
+<iframe src="https://codesandbox.io/embed/x9975wjz64" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
+</html>
+===== Vue.jsとFirebaseの参考リンク =====
+https://codesandbox.io/s/n1rq0x72ll
+vue-firebase demo
+https://codesandbox.io/s/github/jackabox/vue-firebase-auth
+vue-firebase-auth
+https://gist.github.com/mickaelandrieu/a66bdf031a3c5fa4caf301504f018904
+Vue + Firebase + Auth Demo
+===== メニュー =====
+[[z_blog:2018:181224_angular_material|z_blog:2018:181224_angular_material]]
+https://dev.classmethod.jp/server-side/serverless/flex-layout-angular-material-goodbye-css/