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

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

ユーザ用ツール

サイト用ツール


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


差分

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

この比較画面にリンクする

両方とも前のリビジョン 前のリビジョン
次のリビジョン
前のリビジョン
06.vue.jsとfirebaseでチャットアプリ:index.html [2018/12/10]
adash333 [方針をたてる]
06.vue.jsとfirebaseでチャットアプリ:index.html [2020/11/20] (現在)
adash333 [Vue.js入門]
行 7: 行 7:
 また、アプリの作成にあたり、Javascriptのフレームワーク(便利なものがつまった)であるVue.jsというものを利用していきます。 また、アプリの作成にあたり、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/ https://codesandbox.io/
行 31: 行 31:
 ソースコード ソースコード
  
-https://codesandbox.io/embed/82oqnjnm22+https://codesandbox.io/s/x7n85xv94z
  
 これから作るもの これから作るもの
  
-<iframe src="https://codesandbox.io/embed/82oqnjnm22" 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>+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>
  
  
行 45: 行 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などを利用されている場合は、そのアカウントで大丈夫です。
  
 https://accounts.google.com/SignUp https://accounts.google.com/SignUp
行 83: 行 87:
 Bulmaのフォームについて:https://bulma.io/documentation/form/general/ Bulmaのフォームについて:https://bulma.io/documentation/form/general/
 ==== 4.nowで公開 ==== ==== 4.nowで公開 ====
 +
 +作成中
 +
 +===== Vue.js入門 =====
 +
 +以下のサイトが非常に分かりやすいです。
 +
 +https://www.hypertextcandy.com/vuejs-introduction-el-data
 +2018.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
 +2019年10月11日に更新
 +10分で基礎がわかるVue.js-入門
 +
 +
 +
 +
 +
 +
 +
 +
 +
 ===== Vue.jsとfirebaseでチャットのリンク ===== ===== Vue.jsとfirebaseでチャットのリンク =====
  
行 103: 行 139:
 https://liginc.co.jp/382652 https://liginc.co.jp/382652
 完成編 完成編
 +
 +https://qiita.com/renowan/items/559bfb721362134b715c
 +@renowan
 +2017年10月31日に更新
 +Vue.jsでFirebaseを始めよう 1.プロジェクト作成編
 +
 +
 +
  
 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に関するリンク =====
行 118: 行 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.1544452686.txt.gz · 最終更新: 2018/12/10 by adash333