内容へ移動
サルでもわかるWEBプログラミング
フリーソフトのみでホームページ作成
ユーザ用ツール
ログイン
サイト用ツール
検索
ツール
文書の表示
以前のリビジョン
バックリンク
最近の変更
メディアマネージャー
サイトマップ
ログイン
>
最近の変更
メディアマネージャー
サイトマップ
現在位置:
index.html
»
06.vue.jsとfirebaseでチャットアプリ
トレース:
06.vue.jsとfirebaseでチャットアプリ:index.html
この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
===== 06. Vue.jsとFirebaseでチャットアプリ ===== 今回は、簡易チャットアプリを作ってみたいと思います。 「チャットアプリ」は、2人以上の人が、サーバというコンピュータを介してデータのやり取りをオンラインでする必要があります。チャットサーバとして、Google傘下のFirebaseのRealtime Databaseというものを利用してみたいと思います。 また、アプリの作成にあたり、Javascriptのフレームワーク(便利なものがつまった)であるVue.jsというものを利用していきます。 Vue.jsなどを利用するためには、通常は、MacパソコンやWindowsパソコンで、Node.jsというものをインストールしたりと、いろいろと環境構築する必要があるのですが、2018年現在、[[https://codesandbox.io/|CodeSandbox]]という、WEBブラウザ上で無料でVue.jsやAngularといったJavascriptのフレームワークを利用できるサイトがあります。2018年現在、初心者が特に動的なWEBサイトを作成する際のツールとして、一番のお勧めです。 https://codesandbox.io/ {{:vue:pasted:20181209-144356.png}} CodeSandbox上から『deploy Now』をクリックすることにより、<wrap hi>パソコン上で、WEBブラウザのみで、無料で</wrap>Vue.jsやAngularで作成したWEBサイトを公開することができます。 ===== 方針をたてる ===== 今回作成するチャットアプリは、 -『ユーザー』と『コメント』を入力して、『送信』ボタンでコメントをサーバに送信 -サーバに『ユーザー』と『コメント』を保存 -サーバから『ユーザー』と『コメント』をとってきて、時間順でリストで表示 となります。 -データは『Firebase』という場所に保存(異なるスマホ・パソコン間では共有する) ものとします。 今回は、[[https://liginc.co.jp/382652|こちらのサイト]]のソースコードを利用させていただこうと思います。 ソースコード 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.用意するもの(開発環境) ==== パソコン\\ Windowsパソコンでも、Macでも、かまいません。 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などを利用されている場合は、そのアカウントで大丈夫です。 https://accounts.google.com/SignUp {{:06.vue.jsとfirebaseでチャットアプリ:pasted:20181210-221119.png}} また、必ずしも必要ではないですが、作成したコードを保存するために、GitHubアカウントもあった方がよいです。GitHubアカウントの作成方法については、[[:index.html|このサイトについて]]をご覧下さい。 ==== 2.Firebaseで新規プロジェクト(新しいサーバ)を作成 ==== -https://console.firebase.google.com にGoogleアカウントでログイン -新規プロジェクト作成 -Database > Realtime Database をクリック -モードは、「テストモード」を選択 -Project Overview > 「開始するにはアプリを追加してください」のすぐ上の、「</>」をクリック -「ウェブアプリに Firebase を追加」画面が出てくるので、中身をメモ帳などにコピーしておく 参考:https://liginc.co.jp/378463 ==== 3.CodeSandboxでVue.jsアプリを作成 ==== -https://codesandbox.io/へ行き、画面右上の、『Create Sandbox』をクリック -Vue をクリック -index.htmlの編集 -src/App.vueの編集 <html> <script src="https://gist.github.com/adash333/4600e3b8c4f0d871f487947d8d59bf0d.js"></script> </html> 参考:https://liginc.co.jp/382652 参考2: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 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でチャットのリンク ===== https://qiita.com/nakadoribooks/items/a5c73580039c99a117dc @nakadoribooks 2017年08月05日に更新 vueとfirebaseでブラウザチャット JavaScript vue.js Firebase Bulma https://liginc.co.jp/378463 Vue.js + Firebaseでチャットアプリを脳死しながら作ってみよう!〜セットアップ編〜 2018.01.10 #113 それいけ!フロントエンド Vue.js + Firebaseでチャットアプリを脳死しながら作ってみよう!〜セットアップ編〜 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 認証付きの簡易チャットを作る!(基礎から学ぶ 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 2019年03月04日に更新 firestore, vue.jsでリアルタイム同期のチャットを実装してみる [チュートリアル形式] ===== Firebaseに関するリンク ===== https://qiita.com/owen/items/c51c6ec27c9e2f5804b0 @owen 2018年08月31日に投稿 Firebaseを使い始めたら人生が変わった(ような気がした) https://qiita.com/ToshioAkaneya/items/aa1211d73c2d38134e63 @ToshioAkaneya 2019年02月09日に更新 VueとFirebaseで爆速でチャットサービスを作ろう ===== リンク ===== 目次: 前: 次:
06.vue.jsとfirebaseでチャットアプリ/index.html.txt
· 最終更新: 2020/11/20 by
adash333
ページ用ツール
文書の表示
以前のリビジョン
バックリンク
文書の先頭へ