はじめに
Qiita初投稿です。
Webエンジニアになっていながら、jQueryとほんの少しだけ趣味でAngularJSを使っただけという状態でした。
なので、知識のアップデートがてらAngular 6でこんなものを作ってみました。
#Angular6 + #bootstrap4 + #firebase でチャットアプリが出来て自己満に浸りたいので初投稿です pic.twitter.com/87tGVv3mbD
— roottool (@roottool) 2018年10月9日
レポジトリ
使用者を友達だけに限定したいので、サンプルはありません。ごめんなさい。
作成したプロジェクトのソース全文を、以下のレポジトリに展開しています。
https://github.com/roottool/OrgaSound
作成したアプリの仕様
- レスポンシブデザインによるマルチデバイス対応
- チャットルームへの入室は認証を必要とする
- ユーザーはメッセージの発信のみを可能とする
- チャットメッセージはリアルタイムで他の端末に反映される
- 音声ファイル名をメッセージとして発信すると、チャットルーム内にいる全員に対してファイルを再生する
このWebアプリはAngular 4で作成されているBaseChatを基に、Angular 6で作成したものとなっています。
参考文献に作成者が解説しているYoutubeの動画リンクを記載していますので、ご覧下さい。(※英語です)
開発環境
- Windows10 Pro 64bit
- Visual Studio Code
- Node.js：v8.12.0
- @angular/cli：v6.2.2
- firebase-tools：v5.0.1
使用したライブラリ
- @angular/material：v6.4.7
- @angular/cdk：v6.4.7
- @angular/animations：v6.1.9
- bootstrap：v4.1.3
- firebase：v5.5.0
- angularfire2：v5.0.1
トピック
参考文献に記載した「Angular+Firebaseでチャットアプリを作る」に、チャットアプリ作成の手順が既に記載されています。
ですので、そこには載っていないけれども今回実装した以下の点に絞って書こうと思います。