ionicとfirebaseでチャットアプリ
差分
この文書の現在のバージョンと選択したバージョンの差分を表示します。
| 両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
|
ionicとfirebaseでチャットアプリ [2018/06/12] adash333 [Ionic3とfirebaseでチャットアプリ] |
ionicとfirebaseでチャットアプリ [2018/10/07] (現在) |
||
|---|---|---|---|
| ライン 9: | ライン 9: | ||
| の2通りがあります。Angularfire2を用いる方が簡単そうですが、2018年6月現在、angularfire2が5.0.0-rc10で、なんか不安定な感があるため、rcが取れるまでは、HttpModuleのみを用いる方がよさそうです。 | の2通りがあります。Angularfire2を用いる方が簡単そうですが、2018年6月現在、angularfire2が5.0.0-rc10で、なんか不安定な感があるため、rcが取れるまでは、HttpModuleのみを用いる方がよさそうです。 | ||
| + | |||
| + | しかし、HttpModuleはangular4.3から（Ionic3の途中、2017年8月頃から）変更になっていますので、こちらも注意が必要です。HttpModuleについては<wrap hi>[[ionicでhttp接続|Ionicでhttp接続(v3で変更)]]</wrap>をご覧下さい。 | ||
| + | |||
| + | |||
| ===== ソースコード1 ===== | ===== ソースコード1 ===== | ||
| + | @s_kozake | ||
| + | 2018年08月03日に更新 | ||
| + | Ionic 4とFirebaseでチャットアプリ\\ | ||
| + | https://qiita.com/s_kozake/items/6c7a0cec75c957606a33 | ||
| + | |||
| + | こちらのサイトが日本語でとてもわかりやすいです！ | ||
| + | |||
| https://github.com/didinj/ionic3-angular5-firebase-simple-chat\\ | https://github.com/didinj/ionic3-angular5-firebase-simple-chat\\ | ||
| ライン 21: | ライン 32: | ||
| Angular5とfirebaseを用いて、チャットアプリ作成の途中までです。以下のサイトで、日本語で、背景から丁寧に解説されています。\\ | Angular5とfirebaseを用いて、チャットアプリ作成の途中までです。以下のサイトで、日本語で、背景から丁寧に解説されています。\\ | ||
| [[https://qiita.com/Yamamoto0525/items/a76ea4b3924eeb82b0f9|@Yamamoto0525 2018年03月07日に更新Angular+Firebaseでチャットアプリを作る]] | [[https://qiita.com/Yamamoto0525/items/a76ea4b3924eeb82b0f9|@Yamamoto0525 2018年03月07日に更新Angular+Firebaseでチャットアプリを作る]] | ||
| + | |||
| + | |||
| + | 上記サイトをIonicで写経してみました。下記にリンクを記載しますので、もしよろしければご覧下さい。その都度のソースコードもGitHubにアップロードしました。 | ||
| + | |||
| + | https://github.com/adash333/ionic3_firebase_chat2 | ||
| + | |||
| + | -[[http://twosquirrel.mints.ne.jp/?p=23705|Ionic+Firebaseでパスワード制限つきチャットアプリ（１）]] | ||
| + | -[[http://twosquirrel.mints.ne.jp/?p=23749|Ionic+Firebaseでパスワード制限つきチャットアプリ（２）]] | ||
| + | -[[http://twosquirrel.mints.ne.jp/?p=23821|Ionic+Firebaseでパスワード制限つきチャットアプリ（３）AngularFire2を利用してIonicとfirebaseを接続]] | ||
| + | -[[http://twosquirrel.mints.ne.jp/?p=23919|Ionic+Firebaseでパスワード制限つきチャットアプリ（４）angularfire2@5.0.0-rc.4とfirebase@4.8.0でCRUD実装]] | ||
| + | -[[http://twosquirrel.mints.ne.jp/?p=23987|Ionic+Firebaseでパスワード制限つきチャットアプリ（５）navCtrl.push()でページ遷移]] | ||
| + | -[[http://twosquirrel.mints.ne.jp/?p=24052|Ionic+Firebaseでパスワード制限つきチャットアプリ（６）RxJSを用いてデータの受け渡し(うまくいかず)]] | ||
| + | -[[http://twosquirrel.mints.ne.jp/?p=24161|Ionic+Firebaseでパスワード制限つきチャットアプリ（７）（最終だけど途中）FirebaseAuthenticationでメールアドレス認証]] | ||
| + | |||
| + | ===== ソースコード3 ===== | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | パスワード制限やいろいろな機能が入っています。これを見て参考にしたい、、、 | ||
| + | |||
| + | https://github.com/chat21/chat21-ionic | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| ===== 自動で下にスクロール ===== | ===== 自動で下にスクロール ===== | ||
| ライン 39: | ライン 81: | ||
| import { Component, ViewChild } from '@angular/core'; | import { Component, ViewChild } from '@angular/core'; | ||
| import { Content } from 'ionic-angular'; | import { Content } from 'ionic-angular'; | ||
| + | // Ionic4の場合は、import { Content } from '@ionic/angular'; | ||
| export class HomePage { | export class HomePage { | ||
| ライン 44: | ライン 87: | ||
| | | ||
| ionViewDidLoad() | ionViewDidLoad() | ||
| + | // Ionic4の場合は、ngOnInit() | ||
| { | { | ||
| setTimeout(() => { | setTimeout(() => { | ||
| - | this.contents.scrollToBottom(300); | + | this.content.scrollToBottom(300); |
| }, 1000); | }, 1000); | ||
| } | } | ||
| ライン 58: | ライン 102: | ||
| http://www.ionichelper.com/2017/05/01/ionic-framework-scroll-to-bottom/ | http://www.ionichelper.com/2017/05/01/ionic-framework-scroll-to-bottom/ | ||
| {{:pasted:20180609-210558.png}} | {{:pasted:20180609-210558.png}} | ||
| + | |||
| + | ===== firebaseのみでWebチャットアプリ ===== | ||
| + | |||
| + | |||
| + | https://qiita.com/st5757/items/9e651e8cffaa90681426 | ||
| + | |||
| + | |||
ionicとfirebaseでチャットアプリ.1528804309.txt.gz · 最終更新: 2018/10/07 (外部編集)
