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

#完成イメージ
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">こんな感じ。 <a href="https://t.co/CvOFjFq2th">pic.twitter.com/CvOFjFq2th</a></p>&mdash; げん げんと (@gento34165638) <a href="https://twitter.com/gento34165638/status/1190431795877007362?ref_src=twsrc%5Etfw">November 2, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

#はじめに
環境は以下の通り
・ionic4
・Nativeとの橋渡しには[capacitor](https://capacitor.ionicframework.com)を使用
・カレンダーについては[ionic2-calendar](https://github.com/twinssbc/Ionic2-Calendar#readme)というライブラリーを使用

前回はログインとアカウント作成ができるようになった
:point_right:前回の記事は[こちら](https://qiita.com/kokogento/items/90ae35c2c587c69c58de)

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

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

<img width="136" alt="スクリーンショット 2019-11-12 22.07.02.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/abd80efc-f080-bf57-4b6e-8f8261d7fe78.jpeg">

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

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

```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`として追加。

```html: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>
```

#ログアウトの処理

```typescript: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();
  }
}
```
[前回](https://qiita.com/kokogento/items/90ae35c2c587c69c58de#authservicets)作成した`auth.service.ts`で書いた`logout()`を注入して使用。


#最後に
続き:point_down:
[その7 ログインチェック](https://qiita.com/kokogento/items/e56df660ecd53257fc9c)

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

<a href="https://apps.apple.com/jp/app/%E6%80%A7%E6%B4%BB%E3%82%AB%E3%83%AC%E3%83%B3%E3%83%80%E3%83%BC/id1484151444?mt=8">Apple Store</a>

[Google Play](https://play.google.com/store/apps/details?id=com.hCalendar.app)