サルでもわかるWEBプログラミング

フリーソフトのみでホームページ作成

ユーザ用ツール

サイト用ツール


06.vue.jsとfirebaseでチャットアプリ:index.html


差分

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

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン
前のリビジョン
06.vue.jsとfirebaseでチャットアプリ:index.html [2019/01/08] – [Vue.js入門] adash33306.vue.jsとfirebaseでチャットアプリ:index.html [2020/11/20] (現在) – [Vue.js入門] adash333
行 35: 行 35:
 これから作るもの これから作るもの
  
 +DEMOサイト1:https://csb-x7n85xv94z.netlify.com/
 +
 +DEMOサイト2
 <html> <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> <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>
行 46: 行 49:
 Chrome(くろーむ、WEBブラウザの一つ)\\ Chrome(くろーむ、WEBブラウザの一つ)\\
 オンラインエディタであるCodeSandboxを利用するために、[[https://www.google.co.jp/chrome/|Chrome]]というWEBブラウザをインストールして、そのソフトでWEBページをご覧になってください。[[https://www.google.co.jp/chrome/|こちらのページ]]からインストールできます。 オンラインエディタであるCodeSandboxを利用するために、[[https://www.google.co.jp/chrome/|Chrome]]というWEBブラウザをインストールして、そのソフトでWEBページをご覧になってください。[[https://www.google.co.jp/chrome/|こちらのページ]]からインストールできます。
 +test
 ==== 1.Googleアカウントは作成済みとします ==== ==== 1.Googleアカウントは作成済みとします ====
 Firebaseを利用するためのGoogleアカウントを、https://accounts.google.com/SignUpから作成してください。無料です。既にGmailなどを利用されている場合は、そのアカウントで大丈夫です。 Firebaseを利用するためのGoogleアカウントを、https://accounts.google.com/SignUpから作成してください。無料です。既にGmailなどを利用されている場合は、そのアカウントで大丈夫です。
行 95: 行 98:
 Vue.js入門 (1) el, data Vue.js入門 (1) el, data
 Masahiro Harada 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
 +2019年10月11日に更新
 +10分で基礎がわかるVue.js-入門
 +
 +
 +
 +
 +
 +
  
  
行 129: 行 150:
 https://cr-vue.mio3io.com/tutorials/firebase.html https://cr-vue.mio3io.com/tutorials/firebase.html
 認証付きの簡易チャットを作る!(基礎から学ぶ Vue.js 書籍用サポートページ) 認証付きの簡易チャットを作る!(基礎から学ぶ Vue.js 書籍用サポートページ)
-→素晴らしいサポートサイトです。今度、このを購入して読んでみたいいます。+→素晴らしいサポートサイトです。本の内容は、リファレンスといった感じで、写経すればそのま動くというものではないです。
  
 <html> <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> <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> </html>
 +
 +===== Firestoreでチャットアプリのリンク =====
 +
 +https://qiita.com/ryo2132/items/2881d8223eb2ad3050a1
 +@ryo2132
 +2019年03月04日に更新
 +firestore, vue.jsでリアルタイム同期のチャットを実装してみる [チュートリアル形式]
 +
 +
 +
 +
  
 ===== Firebaseに関するリンク ===== ===== Firebaseに関するリンク =====
行 141: 行 173:
 2018年08月31日に投稿 2018年08月31日に投稿
 Firebaseを使い始めたら人生が変わった(ような気がした) Firebaseを使い始めたら人生が変わった(ような気がした)
 +
 +https://qiita.com/ToshioAkaneya/items/aa1211d73c2d38134e63
 +@ToshioAkaneya
 +2019年02月09日に更新
 +VueとFirebaseで爆速でチャットサービスを作ろう
 +
 +
 +
 +===== リンク =====
 +目次:
 +
 +前:
 +
 +次:
 +
 +
  
  


06.vue.jsとfirebaseでチャットアプリ/index.html.1546990699.txt.gz · 最終更新: 2019/01/08 by adash333

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki