Edited at

Angularでビュー(チャット画面)を作る


この記事はAngular+Firebaseでチャットアプリを作るのエントリーです。

前記事:Angularの環境構築(Angular CLIで構築)

次記事:AngularのngForでチャットコメントを実装する



この記事で行うこと

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


Angularのビュー表示

Angular6.XXはAngularJS1.XXと同じく、ロジックにかかるファイル(js、 ts)とビューにかかるファイル(html、css)を分離して管理することができます。

これはReact(もう一つの注目されているJSライブラリ)と異なる点の1つです。

Reactに使われているJSXの文法はちょっと厄介なので、デザイナー(非エンジニア)に「JSXで納品して!」と言ってもかなり厳しいです。

なので、デザイナーから納品されたHTMLとCSSをJSXに書き換える、という作業を毎回エンジニアが行うことになり、仕事のスピード、正確性にかなり負荷がかかってきます。

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


実装内容


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/schematics


(注)こちらを試したところ、次のようなエラーメッセージが出ました。

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

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

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


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


参考


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

npm install bootstrap --save // ver3

npm install bootstrap@next --save // ver4

// SASS版
npm install bootstrap-sass --save // ver3


コードを修正

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


angular-cli.json

  "styles": [

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

app.module.tsbNgbModuleを追記します。


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

<h1>

Wellcome to {{title}}!!
</h1>
<button class="btn btn-primary">Test Button</button>

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">
<span class="input-group-btn"><button class="btn btn-info" type="button">SEND</button></span>
</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: 26px;
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;
}



実装後の画面


ソースコード

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