差分

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

--- 06.vue.jsとfirebaseでチャットアプリ:index.html [2018/12/10] – [3.CodeSandboxでVue.jsアプリを作成] adash333
+++ 06.vue.jsとfirebaseでチャットアプリ:index.html [2020/11/20] (現在) – [Vue.js入門] adash333
@@ 行 7: / 行 7: @@
 また、アプリの作成にあたり、Javascriptのフレームワーク（便利なものがつまった）であるVue.jsというものを利用していきます。
-Vue.jsなどを利用するためには、通常は、MacパソコンやWindowsパソコンで、Node.jsというものをインストールしたりと、いろいろと環境構築する必要があるのですが、2018年現在、[[https://codesandbox.io/|CodeSandbox]]という、WEBブラウザ上で無料でVue.jsやAngularといったJavascriptのフレームワークを利用できるサイトがあり、ブラウザ上で。2018年現在、初心者が特に動的なWEBサイトを作成する際のツールとして、一番のお勧めです。
+Vue.jsなどを利用するためには、通常は、MacパソコンやWindowsパソコンで、Node.jsというものをインストールしたりと、いろいろと環境構築する必要があるのですが、2018年現在、[[https://codesandbox.io/|CodeSandbox]]という、WEBブラウザ上で無料でVue.jsやAngularといったJavascriptのフレームワークを利用できるサイトがあります。2018年現在、初心者が特に動的なWEBサイトを作成する際のツールとして、一番のお勧めです。
 https://codesandbox.io/
@@ 行 31: / 行 31: @@
 ソースコード
-（作成中）
+https://codesandbox.io/s/x7n85xv94z
 これから作るもの
-（作成中）
+DEMOサイト1：https://csb-x7n85xv94z.netlify.com/
+DEMOサイト2
+<html>
+<iframe src="https://codesandbox.io/embed/x7n85xv94z" 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>
 ==== 0.用意するもの（開発環境） ====
@@ 行 43: / 行 49: @@
 Chrome（くろーむ、WEBブラウザの一つ）\\
 オンラインエディタであるCodeSandboxを利用するために、[[https://www.google.co.jp/chrome/|Chrome]]というWEBブラウザをインストールして、そのソフトでWEBページをご覧になってください。[[https://www.google.co.jp/chrome/|こちらのページ]]からインストールできます。
+test
 ==== 1.Googleアカウントは作成済みとします ====
-今回利用するサーバであるFirebaseを利用するためのGoogleアカウントを、https://accounts.google.com/SignUpから作成してください。無料です。既にGmailなどを利用されている場合は、そのアカウントで大丈夫です。
+Firebaseを利用するためのGoogleアカウントを、https://accounts.google.com/SignUpから作成してください。無料です。既にGmailなどを利用されている場合は、そのアカウントで大丈夫です。
 https://accounts.google.com/SignUp
@@ 行 79: / 行 85: @@
 参考２：https://qiita.com/nakadoribooks/items/a5c73580039c99a117dc
+Bulmaのフォームについて：https://bulma.io/documentation/form/general/
 ==== 4.nowで公開 ====
+作成中
+===== Vue.js入門 =====
+以下のサイトが非常に分かりやすいです。
+https://www.hypertextcandy.com/vuejs-introduction-el-data
+.01.13
+Vue.js入門 (1) el, data
+Masahiro Harada
+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>
+https://qiita.com/moyegogo1020/items/7cf9daaacc6bac1b3c33
+@moyegogo1020
+年10月11日に更新
+１０分で基礎がわかるVue.js-入門
 ===== Vue.jsとfirebaseでチャットのリンク =====
@@ 行 100: / 行 139: @@
 https://liginc.co.jp/382652
 完成編
+https://qiita.com/renowan/items/559bfb721362134b715c
+@renowan
+年10月31日に更新
+Vue.jsでFirebaseを始めよう 1.プロジェクト作成編
 https://cr-vue.mio3io.com/tutorials/firebase.html
 認証付きの簡易チャットを作る！(基礎から学ぶ 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=B07D9BYHMZ&linkId=fa852410875e77ec8615969928dc1e59"></iframe>
 </html>
+===== Firestoreでチャットアプリのリンク =====
+https://qiita.com/ryo2132/items/2881d8223eb2ad3050a1
+@ryo2132
+年03月04日に更新
+firestore, vue.jsでリアルタイム同期のチャットを実装してみる [チュートリアル形式]
 ===== Firebaseに関するリンク =====
@@ 行 115: / 行 173: @@
 年08月31日に投稿
 Firebaseを使い始めたら人生が変わった(ような気がした)
+https://qiita.com/ToshioAkaneya/items/aa1211d73c2d38134e63
+@ToshioAkaneya
+年02月09日に更新
+VueとFirebaseで爆速でチャットサービスを作ろう
+===== リンク =====
+目次：
+前：
+次：