ユーザ用ツール

サイト用ツール


ionicとfirebaseでチャットアプリ

差分

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

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン
前のリビジョン
ionicとfirebaseでチャットアプリ [2018/06/09] adash333ionicとfirebaseでチャットアプリ [2018/10/07] (現在) – 外部編集 127.0.0.1
行 1: 行 1:
 ====== Ionic3とfirebaseでチャットアプリ ====== ====== Ionic3とfirebaseでチャットアプリ ======
  
-ソースコード+firebaseを使用するためにはGoogleアカウントが必要です。ある程度の範囲であれば、firebaseは無料プランで十分です。 
 + 
 +Ionic(Angular)とfirebaseの接続方法ですが、 
 + 
 +  -HttpModuleのみを用いる方法 
 +  -Angularfire2を用いる方法 
 + 
 +の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 ===== 
 +@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\\
行 7: 行 28:
 [[https://www.djamware.com/post/5a629d9880aca7059c142976/build-ionic-3-angular-5-and-firebase-simple-chat-app|Build Ionic 3, Angular 5 and Firebase Simple Chat App by Didin J. on 1 20, 2018]] [[https://www.djamware.com/post/5a629d9880aca7059c142976/build-ionic-3-angular-5-and-firebase-simple-chat-app|Build Ionic 3, Angular 5 and Firebase Simple Chat App by Didin J. on 1 20, 2018]]
  
 +===== ソースコード2 =====
 https://github.com/Yamamoto0525/NgChat\\ https://github.com/Yamamoto0525/NgChat\\
 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でパスワード制限つきチャットアプリ(1)]]
 +  -[[http://twosquirrel.mints.ne.jp/?p=23749|Ionic+Firebaseでパスワード制限つきチャットアプリ(2)]]
 +  -[[http://twosquirrel.mints.ne.jp/?p=23821|Ionic+Firebaseでパスワード制限つきチャットアプリ(3)AngularFire2を利用してIonicとfirebaseを接続]]
 +  -[[http://twosquirrel.mints.ne.jp/?p=23919|Ionic+Firebaseでパスワード制限つきチャットアプリ(4)angularfire2@5.0.0-rc.4とfirebase@4.8.0でCRUD実装]]
 +  -[[http://twosquirrel.mints.ne.jp/?p=23987|Ionic+Firebaseでパスワード制限つきチャットアプリ(5)navCtrl.push()でページ遷移]]
 +  -[[http://twosquirrel.mints.ne.jp/?p=24052|Ionic+Firebaseでパスワード制限つきチャットアプリ(6)RxJSを用いてデータの受け渡し(うまくいかず)]]
 +  -[[http://twosquirrel.mints.ne.jp/?p=24161|Ionic+Firebaseでパスワード制限つきチャットアプリ(7)(最終だけど途中)FirebaseAuthenticationでメールアドレス認証]]
 +
 +===== ソースコード3 =====
 +
 +
 + 
 +
 +
 +パスワード制限やいろいろな機能が入っています。これを見て参考にしたい、、、
 +
 +https://github.com/chat21/chat21-ionic
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +===== 自動で下にスクロール =====
 +
 +チャットアプリでは、自動的に一番下にスクロールされることが必須である。(十分に古いメッセージは読み込みを後にしたいが、、、)
 +
 +そのようなときは、content.scrollToBottom関数を用いる。
 +
 +たとえば、home.htmlの中で、自動スクロールしたい部分を<ion-content></ion-content>で囲む。
 +<code>
 +<ion-content>
 +  Add your content here!
 +</ion-content>
 +</code>
 +
 +home.ts で、例えば、以下のように設定。
 +<code>
 +import { Component, ViewChild } from '@angular/core';
 +import { Content } from 'ionic-angular';
 +// Ionic4の場合は、import { Content } from '@ionic/angular';
 +
 +export class HomePage {
 +  @ViewChild(Content) content: Content;
 +  
 +  ionViewDidLoad()
 +  // Ionic4の場合は、ngOnInit()
 +  {
 +    setTimeout(() => {
 +      this.content.scrollToBottom(300);
 +    }, 1000);
 +  }
 +
 +}
 +</code>
 +
 +https://ionicframework.com/docs/api/components/content/Content/
 +{{:pasted:20180609-210216.png}}
 +
 +http://www.ionichelper.com/2017/05/01/ionic-framework-scroll-to-bottom/
 +{{:pasted:20180609-210558.png}}
 +
 +===== firebaseのみでWebチャットアプリ =====
 +
 +
 +https://qiita.com/st5757/items/9e651e8cffaa90681426
 +
 +
 +
 +
 +===== リンク =====
 +
 +https://qiita.com/ryotakodaira/items/e41c3a60348a9e1c7616\\
 +@ryotakodaira
 +2015年11月30日に更新
 +Firebaseでリアルタイムチャットを構築する
 +
 +https://www.google.co.jp/amp/s/html5experts.jp/technohippy/18040/amp/\\
 +Firebaseで作る簡単リアルタイムウェブアプリケーション(前編)
 + あんどう やすし
  
  

ionicとfirebaseでチャットアプリ.1528521480.txt.gz · 最終更新: 2018/10/07 (外部編集)

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki