More than 5 years have passed since last update.

Ionic + Firebaseで記録するカレンダーアプリを作る　その６ログアウト処理とサイドメニュー

Last updated at 2019-11-21Posted at 2019-11-12

完成イメージ

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

はじめに

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

前回はログインとアカウント作成ができるようになった
前回の記事はこちら

概要

今回はログアウトの処理って事だが、それだけじゃ一瞬で終わる。
なぜ前回の記事に含めなかったかと言うと、ログアウトボタンをサイドバーに配置したかったからだ。

完成イメージで紹介している映像を見ると、左上にサイドバーアイコン**（通称ハンバーガーアイコン）**があるのがわかる。

と言うわけで、サイドバーにメニューを作ってから、ログアウト処理と行く。

サイドバーを追加

サイドバーを追加するにはapp.component.htmlに変更を加える。

app.component.html

<ion-app>
  <ion-menu side="start" contentId="content1">
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>
          カレンダー
        </ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <ion-list>
        <ion-menu-toggle>
          <ion-item lines="none" button>
              <ion-icon name="person" slot="start"></ion-icon>
              <ion-label>My ページ</ion-label>
          </ion-item>
        </ion-menu-toggle>
        <ion-menu-toggle>
            <ion-item lines="none" button>
                <ion-icon name="settings" slot="start"></ion-icon>
                <ion-label>設定</ion-label>
            </ion-item>
          </ion-menu-toggle>
          <ion-menu-toggle>
              <ion-item lines="none" (click)="logout()" button>
                  <ion-icon name="exit" slot="start"></ion-icon>
                  <ion-label>ログアウト</ion-label>
              </ion-item>
            </ion-menu-toggle>
      </ion-list>
    </ion-content>
  </ion-menu>
  <ion-router-outlet id="content1"></ion-router-outlet>
</ion-app>

ion-menu-toggleにより、押されると表示されるようになる。
「toggle」とは2つの状態を切り替える（オンとオフみたいな）と言う意味の英語

これを使いたいページのion-headerに、ion-menu-buttonとして追加。

home.page.html

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

ログアウトの処理

app.component.ts

import { AuthService } from './auth/auth.service';
import { Router } from '@angular/router';
import { Component } from '@angular/core';
import { Platform, ToastController, LoadingController, AlertController } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})

export class AppComponent {
constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private router: Router,
    private authService: AuthService,
    private toastCtrl: ToastController,
    private alertCtrl: AlertController
  ) {
    this.initializeApp();
  }

initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }

async logout() {
    const alert = await this.alertCtrl.create({
      header: 'ログアウトしますか？',
      message: '再度ログインするのは面倒ではありませんか？',
      buttons: [
        {
          text: 'キャンセル',
          role: 'cancel',
          handler: blah => {
            console.log('Confirm Cancel: blah');
          }
        },
        {
          text: 'ログアウト',
          cssClass: 'cancel-button',
          handler: async () => {
            this.authService.logout().then(async () => {
              const toast = await this.toastCtrl.create({
                message: 'ログアウトしました',
                duration: 3000
              });
              await toast.present();
            });
            this.router.navigateByUrl('/auth');
          }
        }
      ]
    });
    await alert.present();
  }
}