完成イメージ

こんな感じ。 pic.twitter.com/CvOFjFq2th
— げんげんと (@gento34165638) November 2, 2019

はじめに

環境は以下の通り
・ionic4
・Nativeとの橋渡しにはcapacitorを使用
・カレンダーについてはionic2-calendarというライブラリーを使用

前回は実機でのテストを行った。
前回の記事はこちら

Firebaseの設定

こちらを参考にやっていく。

ライブラリを入れる

プロジェクトフォルダ内で

npm install firebase @angular/fire

これでプロジェクトにFirebaseを導入できた。

Firebase側でプロジェクト作成

Firebase consoleに行く
プロジェクトを新規作成。
作成したプロジェクトにwebアプリを追加

Firebaseプロジェクトの設定情報を取得
こんな感じの情報があるかと。configの中身が必要な情報だ。この画面を開いたまま、ionicのプロジェクトに戻ろう。

※messagingSenderIdの下にappIdが追加されているかもしれない

データベースをテストモードで開始。

ionicプロジェクトにFirebase情報を入れる

environmentファイルに追加

src/environments/environment.tsを開く

environment.ts

export const environment = {
  production: true,
  firebase: {
   apiKey: "YOUR_API_KEY",
   authDomain: "YOUR_AUTH_DOMAIN",
   databaseURL: "YOUR_DATABASE_URL",
   projectId: "YOUR_PROJECT_ID",
   storageBucket: "YOUR_STORAGE_BUCKET",
   messagingSenderId: "YOUR_SENDER_ID"
   appId: "YOUR_APP_ID"
  }
};

firebaseという名の変数の中に、情報を入れる

ちなみに、デフォルトで作成される環境ファイルのenvironment.prod.tsをprod環境用（つまり本番用の環境？）、environment.tsを**dev環境用（開発時の環境）**とされてるらしい。。

app.moduleにenvironment情報を入れる

app.module.tsを以下のように変更。

app.module.ts

import { NgModule, LOCALE_ID } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

//カレンダー関係
import { NgCalendarModule  } from 'ionic2-calendar';
import { registerLocaleData } from '@angular/common';
import localeJa from '@angular/common/locales/ja';

//Firebaseを利用するためのモジュール
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireAuthModule } from '@angular/fire/auth';

//Firebase設定情報ファイルをインポート
import { environment } from '../environments/environment';

registerLocaleData(localeJa);


@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    NgCalendarModule,
    AngularFireModule.initializeApp(environment.firebase, 'myCarendar'),
    AngularFirestoreModule,
    AngularFireAuthModule
  ],
  providers: [
    StatusBar,
    SplashScreen,
    NativeStorage,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    { provide: LOCALE_ID, useValue: 'ja-JP' }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

AngularFireModule は言うならばFirebase本体。

AngularFirestoreModuleはFirebase本体の中にある機能の１つである、データベースCloud Firestoreの事。

AngularFireAuthModule は今後のユーザー認証（ログインとか）に使う機能の事。

//Firebaseを利用するためのモジュール
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireAuthModule } from '@angular/fire/auth';

これで使う準備は完了。ふぅ。。

カレンダーにイベントを追加

適当にカレンダーの上にボタンを作る。

home.page.html

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>
      {{ viewTitle }}
    </ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="today()">Today</ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content padding>
<ion-button (click)="addNewEvent()">イベント追加</ion-button>

  <calendar
  [eventSource]="eventSource" 
  [calendarMode]="calendar.mode" 
  [currentDate]="calendar.currentDate"
    (onCurrentDateChanged)="onCurrentDateChanged($event)" 
    (onEventSelected)="onEventSelected($event)" 
    (onTitleChanged)="onViewTitleChanged($event)"
    (onTimeSelected)="onTimeSelected($event)"
     step="30">  
  </calendar>
</ion-content>

addNewEventを書いて、データベースにイベントを追加させる。

home.page.ts

import { Component } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';


@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  eventSource = [];
  viewTitle;
  selectedDate = new Date();
  calendar = {
    mode: 'month',
    currentDate: new Date(),
    locale: 'ja-JP'
  };

  constructor(
    private db: AngularFirestore,
) { }

  onViewTitleChanged(title) {
    this.viewTitle = title;
  }

  // 選択した日付を取得
  onTimeSelected(ev) {
    this.selectedDate = ev.selectedTime;
  }

  today() {
    this.calendar.currentDate = new Date();
  }

  async onEventSelected() {
    console.log('onEventSelected');
  }

  eventSelected(event) {

  }


  onCurrentDateChanged(event: Date) { }

}

addNewEvent() {
    let start = this.selectedDate;
    let end = this.selectedDate;
    end.setMinutes(end.getMinutes() + 60);

    let event = {
      title: 'イベント' + start.getMinutes(),
      startTime: start,
      endTime: end,
      allDay: false
    };
    console.log(event);
    this.db.collection(`events`).add(event);
  }

これでイベント追加ボタンを押した後Firebaseのデータベースを見ると、eventsというコレクションの中にイベントのドキュメントが入っているかと。

**「コレクション」と「ドキュメント」の意味がわからない場合は、Cloud Firestoreのデータモデルを知ろう。**詳しくはこちら

イベントを取得してカレンダーに表示

home.page.tsのconstructorに以下を追加。

home.page.ts

 constructor(
    private db: AngularFirestore,
) { 
         this.db.collection(`events`)
          .snapshotChanges()
          .subscribe(colSnap => {
            this.eventSource = [];
            colSnap.forEach(snap => {
              const event: any = snap.payload.doc.data();
              event.id = snap.payload.doc.id;
              event.startTime = event.startTime.toDate();
              event.endTime = event.endTime.toDate();
              this.eventSource.push(event);
            });
          });
 }

とりあえずこれでカレンダーにイベントが表示されるのではないだろうか？

最後に

続き
その4 dayページからイベントを追加

各ストアで配信されてます。
興味があれば使ってみてください。

Apple Store

Google Play