Ionic + Firebaseで記録するカレンダーアプリを作る　その8 ログインユーザーのデータを取得

#完成イメージ
<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)というライブラリーを使用

前回はAngularのGuard機能を使ってログインチェックを実装した。
:point_right:前回の記事は[こちら](https://qiita.com/kokogento/items/e56df660ecd53257fc9c)

#概要
[その5 ユーザー作成と認証](https://qiita.com/kokogento/items/90ae35c2c587c69c58de)から前回までユーザー認証関係の事をしてきたが、実はまだ一番重要は事が終わっていない。

なぜなら**ログインしても全員で共通のカレンダーを取得している事になるからだ。**

```typescript:home.page.ts
// Firebaseからイベント取得
        this.db
          .collection(`events`).snapshotChanges()
          .subscribe(colSnap => {
            this.eventSource = [];
            colSnap.forEach(snap => {
              const event: any = snap.payload.doc.data();
              // ここでのevent.idがhome.page.htmlで使われる
              event.id = snap.payload.doc.id;
              event.startTime = event.startTime.toDate();
              event.endTime = event.endTime.toDate();
              this.eventSource.push(event);
            });
          });
```

イベントを取得している所をみてみよう。

```typescript
.collection(`events`)
```

これではFirestoreの`events`ドキュメントから、全てを取得する事になる。

**ログインしているユーザーのイベントだけを取得**するなら（あくまで１つの例だが、、）以下の様にする必要がある。

```typescript
 .collection(`users/${user.uid}/events`)
```

その為に必要なことは
**・ユーザー固有のidであるuidを取得
・イベントを追加時に保存する場所を`users/${user.uid}/events`にする
・`users/${user.uid}/events`からイベントを取得する**

こんな感じ。

#uidを取得してイベントを追加
イベント追加の処理が書いてあるのは`home.service.ts`


```typescript:home.service.ts
// uidを格納する用
currentUser = '';

  constructor(
    private afs: AngularFirestore,
    private afAuth: AngularFireAuth,
    private router: Router,
    private alertCtrl: AlertController
  ) {
// もしログインしているならuserはnullにはならない
    this.afAuth.auth.onAuthStateChanged((user) => {
      if (user != null) {
        this.currentUser = user.uid;
        // コレクションを取得してdayCollectionに格納
        this.dayCollection = this.afs.collection<DayEvent>(`users/${this.currentUser}/events`);
        this.dayEvents = this.dayCollection.snapshotChanges().pipe(
          map(actions => {
            return actions.map(a => {
              const event = a.payload.doc.data();
              const id = a.payload.doc.id;
              return { id, ...event };
            });
          })
        );
      } else {
        this.router.navigateByUrl('/auth');
      }
    });
  }

addNewEvent() {
    const start = this.selectedDate;
    const end = this.selectedDate;
    const eventTitle = this.eventTitle;
    const eventMemo = this.eventMemo;
    const birthControl = this.birthControl;
    end.setHours(end.getHours() + 1);
    const event = {
      title: eventTitle,
       startTime: start,
       endTime: end,
       memo: eventMemo,
       birthControls: birthControl,
       allDay: false
    };
    return this.afs.collection(`users/${this.currentUser}/events`).add(event);
  }
```


#uidを取得してイベントを取得

```typescript:home.page.ts
 this.afAuth.auth.onAuthStateChanged(user => {
      if (user != null) {
        // Firebaseからイベント取得
        this.db
          .collection(`users/${user.uid}/events`)
          .snapshotChanges()
          .subscribe(colSnap => {
            this.eventSource = [];
            colSnap.forEach(snap => {
              const event: any = snap.payload.doc.data();
              // ここでのevent.idがhome.page.htmlで使われる
              event.id = snap.payload.doc.id;
              event.startTime = event.startTime.toDate();
              event.endTime = event.endTime.toDate();
              this.eventSource.push(event);
            });
          });
      }
    });
```

これでログインしている人のイベントが取得できた。



#最後に
続き:point_down:
[その９ オートログイン　ストレージにユーザーデータを保存](https://qiita.com/kokogento/items/09c58ae0ca914edb6336)

各ストアで配信されてます。
興味があれば使ってみてください。: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)