このページへのアクセス
今日: 1 / 昨日: 0
総計: 6
文書の過去の版を表示しています。
今回は、簡易チャットアプリを作ってみたいと思います。
「チャットアプリ」は、2人以上の人が、サーバというコンピュータを介してデータのやり取りをオンラインでする必要があります。チャットサーバとして、Google傘下のFirebaseのRealtime Databaseというものを利用してみたいと思います。
また、アプリの作成にあたり、Javascriptのフレームワーク(便利なものがつまった)であるVue.jsというものを利用していきます。
Vue.jsなどを利用するためには、通常は、MacパソコンやWindowsパソコンで、Node.jsというものをインストールしたりと、いろいろと環境構築する必要があるのですが、2018年現在、CodeSandboxという、WEBブラウザ上で無料でVue.jsやAngularといったJavascriptのフレームワークを利用できるサイトがあり、ブラウザ上で。2018年現在、初心者が特に動的なWEBサイトを作成する際のツールとして、一番のお勧めです。
CodeSandbox上から『deploy Now』をクリックすることにより、パソコン上で、WEBブラウザのみで、無料でVue.jsやAngularで作成したWEBサイトを公開することができます。
今回作成するチャットアプリは、
となります。
ものとします。
今回は、こちらのサイトのソースコードを利用させていただこうと思います。
ソースコード
(作成中)
これから作るもの
(作成中)
パソコン
Windowsパソコンでも、Macでも、かまいません。
Chrome(くろーむ、WEBブラウザの一つ)
オンラインエディタであるCodeSandboxを利用するために、ChromeというWEBブラウザをインストールして、そのソフトでWEBページをご覧になってください。こちらのページからインストールできます。
今回利用するサーバであるFirebaseを利用するためのGoogleアカウントを、https://accounts.google.com/SignUpから作成してください。無料です。既にGmailなどを利用されている場合は、そのアカウントで大丈夫です。
https://accounts.google.com/SignUp
また、必ずしも必要ではないですが、作成したコードを保存するために、GitHubアカウントもあった方がよいです。GitHubアカウントの作成方法については、このサイトについてをご覧下さい。
参考:https://liginc.co.jp/382652
参考2:https://qiita.com/nakadoribooks/items/a5c73580039c99a117dc
Bulmaのフォームについて:https://bulma.io/documentation/form/general/
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://cr-vue.mio3io.com/tutorials/firebase.html
認証付きの簡易チャットを作る!(基礎から学ぶ Vue.js 書籍用サポートページ)
→素晴らしいサポートサイトです。今度、この本を購入して読んでみたいと思います。
https://qiita.com/owen/items/c51c6ec27c9e2f5804b0
@owen
2018年08月31日に投稿
Firebaseを使い始めたら人生が変わった(ような気がした)