AngularとBootstrapとFirebaseでWebサイト作成・公開してみた

#はじめに
こんにちは(*`･ω･´)
社会人2年目　新人SESの@Emagineerです。
今回は初めて一人でWebサイト作成～公開してみました。
Webサイトはこちら：ChordSeaecher
本記事は日記兼忘備録です。

一人でも絶滅危惧種Angularマンが増えますように…

#Webサイトの仕様
仕様相談時間：3h
デザイン検討時間：4h

仕様は心のお客様と対話、たまに友人に意見を聞いて確定させました。

要望
音楽のコードを構成音から検索するサイトがほしい。

確定仕様
・音を選択し、コードと全構成音を表示する。
・音で確認できるようにする(未実装)

#開発環境
GitHub：ソースコード

Angular CLI: 8.3.18
Node: 10.16.3
Angular: 8.2.13
Bootstrap (currently v3.4.1)

#Angularについて
実装時間：15h

主に全コード作成処理で安易に可能と想定して実装した箇所に時間を取られてしまいました。
また本来DBに登録するようなデータ（全コードリストや全音名Objectなど）をコード内に含んでしまっているため改善の余地ありです。

・登録に時間が取られる
・音名やコードは変更になることはない

と判断して内部に含みました(´・ω・｀)

###初めての実装項目
今回自身初実装したのは入力フォームでフォーカスアウトしたときの処理。
HostListenerを利用して実装。

src/app/directives/focus-out.directive.ts

import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[appFocusOut]'
})
export class FocusOutDirective {

  constructor() { }

  /**
   * スマホ用フォーカスアウト時のスクロールもとに戻す処理
   */
  @HostListener('blur')
  onBlur() {
    window.scroll(0, 0);
  }
}

#Bootstrapについて
実装時間：5h

実装開始から6時間経過した頃。
「そういえば問い合わせフォーム作りたいな。デザイン楽になるしBootstrap入れてみようかな。」
そんな軽いノリでBootstrapを導入。
今回はform-groupが使用できればよかったのでBootstrapCDNで導入。

src/styles.css

@import url("https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css");
@import url("https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css");

Bootstrap導入したし、一度確認するか～。ん？？？？
デザイン世紀末くらい崩れてない？？？
ここから怒涛のCSS修正。
ここのCSS修正なかったら開発時間4h短縮できた。反省。

#Firebaseについて
実装時間：3h

DatabaseとHostingを利用したかった。
Hostingは独自ドメインが取得できないと利用できなさそうだったためデプロイのみ行った。

以下AngularのFirebase情報取得処理

src/app/drawer/drawer.component.ts

  constructor(
    private db: AngularFirestore
  ) {
    db.collection(environment.koshinRirekiName).valueChanges()
    .subscribe(x => {
      this.rirekiItem = x;
    });
  }

  /**
   * コメント送信
   * @param e イベント
   */
  sendComment(e: Event) {
    (割愛)

    //更新
    this.db.collection(environment.collectionName)
    .add(new FirebaseComment(this.name, this.mailAddress, this.contents, date).deserialize());
    this.name = '';
    this.mailAddress = '';
    this.contents = '';
  }

#おわりに
総作業時間：30時間

良かった点：　自走力の確認ができたことでかなり自信が付いたこと。
反省点：　全体的に実装するときの検討不足が目立つこと。

初めてWebサイトを１から自分で作成・公開しましたが本当に楽しかったです。

次回はPythonを勉強予定。
何を作ろうかな～！(*`･ω･´)