Angularでビュー（チャット画面）を作る

この記事はAngular+Firebaseでチャットアプリを作るのエントリーです。
前記事：Angularの環境構築（Angular CLIで構築）
次記事：AngularのngForでチャットコメントを実装する

この記事で行うこと

本稿では、Angularのテンプレートを更新し、ビュー（チャット用の画面）を作成します。

• bootstrapをインストール
• HTML、CSSを更新

Angularのビュー表示

Angular9.XXはAngularJS1.XXと同じく、ロジックにかかるファイル（js、 ts）とビューにかかるファイル（html、css）を分離して管理することができます。
これはReact、vue.jsと異なる点の１つです。

Reactに使われているJSXの文法はちょっと厄介なので、デザイナー（非エンジニア）に「JSXで納品して！」と言ってもかなり厳しいです。
なので、デザイナーから納品されたHTMLとCSSをJSXに書き換える、という作業を毎回エンジニアが行うことになり、仕事のスピード、正確性にかなり負荷がかかってきます。

その点、AngularはHTMLとCSSのみの静的なファイルを納品してもらってそのまま流し込むことができるので、エンジニアの負担軽減につながります。

---

（追記：2020/6）現時点（2020年6月）での最新の内容に書き換えています。

---

実装内容

bootstrapをインストール

ここ最近、新しくWEBアプリを構築しようとする時はなんらかのUIフレームワークをいれることがデファクトスタンダードになりつつあるんじゃないかと思っています。

GoogleのAngularを使うのだから、UIフレームワークもGoogleのマテリアルデザインを使おう！…と思ったのですが、2017年6月01日現在でまだangular-material2は構築中のようでした。

---

（追記：2018/9）現時点でほぼ運用可能なレベルまで開発が進んでいます。

---

なので、とりあえずここはおなじみ(twitter)bootstrapのver4を入れておきます。

ng addコマンドを使ってインストールする場合

まずはangular6から追加されたng addコマンドを使って実装します。

ng add @ng-bootstrap/ng-bootstrap

（追記：2020/6）angular9では以下エラーがは出ませんでした。
（注）こちらを試したところ、次のようなエラーメッセージが出ました。

The package/collection may not support the 'targets' field within >'~/NgChat/angular.json'. 

angular.jsonファイルのtargetsをarchitectに変更すると通りましたが、この挙動はバージョンによって異なると思いますので、表示されたエラーメッセージに従って対応してください。

また、インストール後にjquery@1.9.1 - 3 but none is installed.のようなメッセージが表示されますが、bootstrapの動的な挙動を利用しない場合は無視して構いません

このコマンドによって、app.module.tsなどの関連するファイルも自動的に更新されます。もし自動更新を避けたい場合は、下記の参考からバージョン管理を使ってインストール&ファイルの更新を行ってください。

参考

Bootsrapのライブラリを直接インストールする場合

npm install bootstrap --save // ver4
npm install bootstrap@4.x.x --save // バージョンを指定

// SASS版
npm install bootstrap-scss --save

---

（追記：2020/6）bootstrap-sassは開発がとまっているようなので、bootstrap-scssに変更しました

---

コードを修正

angular-cli.jsonにbootstrap.cssへのパスを追記します。

angular-cli.json

  "styles": [
     "src/styles.css",
     {
       "input": "./node_modules/bootstrap/dist/css/bootstrap.css"
     }
  ],

app.module.tsにbNgbModuleを追記します。

src/app/app.module.ts

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgbModule.forRoot() // 追加
  ],
  providers: [],
  bootstrap: [AppComponent]
})

動作確認

app.component.htmlの記述を変更し、UIに反映されているか確認します。

src/app/app.component.html

<div class="content" role="main">

  <div class="mb-2">
    <button class="btn btn-primary">Test Button</button>
  </div>

ng serve

UIへの反映が確認できました。

HTML、CSSを更新

指定されているテンプレートを確認

app.component.tsを見てみると、@Componentにビューとなるテンプレートが指定されています。
ビューを更新する場合は、@Componentでパスを確認します。

src/app/app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html', // HTMLを指定
  styleUrls: ['./app.component.css'] //CSSを指定
})

コードを修正

ビューの元となっているHTMLとCSSを更新します。
デザイナーから静的ファイルが納品されることを想定し、JavaScriptにかかるものは全く実装されていないことを前提としておきます。

src/app/app.component.html

<div class="page">
  <section class="card">
    <div class="card-header">
      NgChat
    </div>
    <div class="card-body">
      <div class="media">
        <div class="media-left">
          <a href="#" class="icon-rounded">S</a>
        </div>
        <div class="media-body">
          <h4 class="media-heading">Suzuki Taro Date:2016/09/01</h4>
          <div>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</div>
        </div>
      </div>
      <hr>
      <div class="media">
        <div class="media-body">
          <h4 class="media-heading">Tanaka Jiro Date:2016/09/01</h4>
          <div>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</div>
        </div>
        <div class="media-right">
          <a href="#" class="icon-rounded">T</a>
        </div>
      </div>
    </div>
  </section>

  <section>
    <form class="chart-form">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Comment">
        <div class="input-group-append">
          <button class="btn btn-info" type="button">SEND</button>
        </div>
      </div>
    </form>
  </section>
</div>

src/styles.css

html, body {
  height: 100%;
  font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  background-color: rgba(255, 251, 251, 0.78);
}

src/app/app.component.css

.page {
  max-width: 960px;
  height: 100%;
  margin: 0 auto;
  padding: 10px;
  background-color: #fff;
  border-left: 1px solid #DDDDDD;
  border-right: 1px solid #DDDDDD;
  box-shadow: 0 0 15px #DDDDDD;
}

.page .card .media-body {
  padding: 18px;
  margin: 0 10px;
  background-color: #F5F5F5;
  border-radius: 10px;
  font-size: 15px;
  word-break: break-all;
}

.page .card .media-body h4.media-heading {
  color: #999999;
  font-size: 13px;
}

.page .card .card-block {
  padding: 10px;
}

.page .card a.icon-rounded {
  display: block;
  font-size: 28px;
  color: #fff;
  text-align: center;
  margin: 5px;
  padding: 5px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.page .card .media-left a.icon-rounded {
  background-color: #f0ad4e;
}

.page .card .media-right a.icon-rounded {
  background-color: #5cb85c;
}

.page .chart-form {
  margin: 20px 0;
}

実装後の画面

ソースコード

この時点でのソースコード