差分

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

--- z_blog:2018:index.html [2018/12/15] – 作成 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]]
 ===== 開発環境 =====
@@ 行 23: / 行 29: @@
 ===== Vue.jsアプリの新規作成 =====
+https://codesandbox.io/　で、右上の Create Sandbox をクリック
+{{:z_blog:2018:pasted:20181215-205521.png}}
+Vue をクリック。これでVue.jsの開発環境が整います。
+{{:z_blog:2018:pasted:20181215-205557.png}}
+今回は、保存したものを後で呼び出しやすいように、GitHubアカウントでログインします。
+{{:z_blog:2018:pasted:20181215-211611.png}}
+途中でCtrl+Sを押せば、保存されます。後で、Dashboardで保存した途中から開始することができます。
+{{:z_blog:2018:pasted:20181215-211705.png}}
+画面一番左の上から2番目のアイコンをクリック
+{{:z_blog:2018:pasted:20181215-211834.png}}
+Vue Templateの右側の鉛筆ボタンをクリックして、好きな題名に変更します。
+{{:z_blog:2018:pasted:20181215-211949.png}}
+今回は、MyMarkdown2 としました。
+{{:z_blog:2018:pasted:20181215-212036.png}}
+===== Firebaseアプリの新規作成 =====
+データをインターネット上で見られるようにするために、Firebaseを利用します。Googleアカウントは作成済みとします。
+https://console.firebase.google.com/
+から、プロジェクとの追加　で、プロジェクト名を、例えば、mymarkdownで新規作成します。
+アプリ作成後の画面で、３つあるアイコンの一番右のアイコンをクリックして出てくる、「ウェブアプリにFirebaseを追加」のコードをコピーして、Vue.jsファイル群のindex.html内の</body>の直前に、以下のようにペーストする。
+Firebaseの画面
+{{:z_blog:2018:pasted:20181215-212723.png}}
+Vue.jsプロジェクトの画面(index.html)
+(変更前)
+{{:z_blog:2018:pasted:20181215-212854.png}}
+(変更後)
+{{:z_blog:2018:pasted:20181215-213026.png}}
+===== 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/
+===== 今回写経した本 =====
+Vue.js初めての方にお勧めです。
+<html>
+<iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=i-doctor-22&language=ja_JP&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=B07HXMHQQK&linkId=2676690c66ac2be60e3b288d6c87b766"></iframe>
+</html>