[1ヶ月でAngular] はじめてのアプリ制作!メイン機能編

この記事は次の記事の一部です。

[1ヶ月でAngular] はじめてのアプリ制作!名言メモアプリを作る! – まんくつ

では、今回は画面系の機能を実装していきます。

画面系はページとして表示する部分のことになります。

プロジェクト作成とbootstrapとfont-awesomeをインストールから始めていきます。

プロジェクト作成

まず、プロジェクトを作成します。

カレントディレクトリを適宜、移動して、次のコマンドを実行します。

プロジェクト名にスペースは使えません。もし使うとスペース前までがプロジェクト名になります。

ng new now-remind

完了したら作成したプロジェクトのフォルダに移動します。

cd now-remind

サーバーを起動し、ブラウザにangularのページを表示します。

ng serve -o

angularはプロジェクト内のファイルの更新を監視しています。

更新があればブラウザは自動的に最新の状態になります。

ファイルを更新したらブラウザに思いどおり表示されているか確認しましょう。

今は、ブラウザにangularのデフォルトページが表示されていればプロジェクト作成完了です。

bootstrapをインストールする

次にデザインテンプレートのbootstrapをインストールします。

bootstrapについては次のページにまとめました。使ったことのない方はどうぞ。

Angular5+Firebaseでチャットアプリを作る① モックデータ反映編 – まんくつ

次のコマンドを実行します。

npm install bootstrap@4.0.0-beta.2
2018/02/11現在 npm install bootstrap@next –saveではビルドできずエラーになるのでバージョン指定してbootstrapをインストールします。ただし、指定しているバージョンはあくまでも現在の最新のベータバージョンです。2018/02/11から日にちが経っている場合は状況が変わっているのでご注意ください。エラーになる理由は次のサイトで対処過程を載せています。Angular5+Firebaseでチャットアプリを作る⑤ 完成編 – まんくつ

font-awesomeをインストールする

次にテキストアイコンを使うために、font-awesomeをインストールします。

次のコマンドを実行します。

npm install font-awesome

インストールが完了したら.angular-cli.jsonに2つをスタイルとして設定します。

その前にVSC左上のエクスプローラーから、プロジェクトフォルダを開きます。

ファイル一覧が表示されたら、.angular-cli.jsonを開き、インストールした二つを設定します。

“styles”配列の”styles.css”の上に組込みます。

.angular-cli.json(styles)

この状態でスタイルが反映されないこともあります、

そのときは、一旦サーバーを停止します。

「Ctrl + C」でサーバーを停止します。

再度、サーバーを起動します。

有効になっているかどうかを本来は確認するべきなんでしょうが、まだ、アプリのデザインを決めていないので、デザインを決める過程で確認したいと思います。

そのまえにあまりこる必要のないヘッダーを作ってしまいます。

ヘッダーができた状態でアプリデザインをしていきます。

ヘッダーを作る

ヘッダーはどのページでも表示させる必要があります。

そのため、コアパーツとしてコアモジュールを作っていきます。

モジュール構成については次のページで軽く解説しています。

Angular5+Firebaseでチャットアプリを作る④ 新規ユーザー登録編 – まんくつ

コアモジュール

コアモジュール作成します。

次のコマンドを実行します。

ターミナルでサーバーを動かしているから入力できないよ・・・。という方は次ページで実行方法を解説しています。

Angular5+Firebaseでチャットアプリを作る① モックデータ反映編 – まんくつ

ng g module core

では、コアモジュールを開き編集していきます。

ここにはサイトに一つしか無いものを加えます。

まず、インポートの{ NgModule }の中にOptional, SkipSelfを加えます。

さらに、クラス内にコンストラクターとして次のコードを定義します。

これで、二重に読み込まれるのを防ぐようになりました。

ヘッダーのようなパーツはアプリ動作中に変更がないので一回の読み込みで済みます。

この記述はAngular公式を参考にしています。Angular – Style Guide

どうして、これで二重読み込みさせないのかはわかりません。。。m(_ _)m

作成したコアモジュールはapp.moduleに次のコードを追加して読み込ませます。

import { CoreModule } from './core/core.module';

さらに、@NgModuleのインポートに追加することで読み込まれるようになります。

では、コアモジュールの設定ができたのでこの中にヘッダーを作っていきます。

ヘッダーを作る

次のコマンドを実行します。

ng g component core/header

コアフォルダにヘッダーコンポーネントを作成しました。

ヘッダーのテンプレートとスタイルシートを次のように書き換えます。

header.component.html

header.component.css

書き換えたらヘッダーを表示するために、2箇所変更します。

  • app.component.htmlの最上行に<app-header></app-header>を追加
  • core.moduleの@NgModule.exports[]にヘッダーを追加

exports[]の解説は次のページの少し下辺りで解説しています。

Angular5+Firebaseでチャットアプリを作る④ 新規ユーザー登録編 – まんくつ

ブラウザを確認してみましょう。

ヘッダーが表示されているはずです。

ヘッダー構造については次のページを御覧ください。少し下に載っています。

Angular5+Firebaseでチャットアプリを作る④ 新規ユーザー登録編 – まんくつ

アプリデザインを決める

では、ヘッダーができたのでいちばん重要なアプリデザインを決めていきます。

とりあえずのイメージは前もだしましたが、こんな感じです。

横一列に三つ並べて、どんどん追加し出来るようにしてみたいと思っています。

今回はBootstrapのカードを使って一つ一つ表示させます。

ただ、表示させる分にはカードにする必要ありませんが今後の拡張性も考えてカードにしています。

カードにすると画像を入れることもできます。いつか実装したい^^。

デザイン自体はかなりシンプルですがなれていないので4時間位かかりました(・_・;)

実はhtmlもcssもろくにわかっていません。なんとなくでやっています。

Bootstrapを使うのもはじめてで苦戦しました・・・。

御託はこの辺にして、デザインはこんな感じになりました。

超シンプルです!

表示は名言だけで、誰の言葉か、とか登録日とか、はユーザー毎に決めるようにしていきます。

また、文字や枠の色はユーザーが変えられるようにしていきたいと思っています。

文字数に応じてフォントサイズを変えられるようにもできたらやってみたい。

コードは次のようになります。

app.component.html

app.component.css

では、デザインが決まったところでユーザーが使えるように機能を実装していきます。

まずは、テンプレートに埋め込んでいるテキストデータを変数として表示するように変えていきます。

テンプレート構造

テンプレートとしては特に難しいことは殆どありません。

Bootstrapのグリットとカードを使ってるだけです。

cssで指定しているのは余白の調節をしたくらいです。

グリットやカードは次のサイトを参考にしました。

分かりやすいサイトです。よく参考にしています。

カード~Bootstrap4移行ガイド

グリッド~Bootstrap4移行ガイド

モックデータを表示させる

パイプを使ってモックデータを表示させるように書き換えていきます。

今は次のようになっています。

<p class=”card-text”>本当の自由な心とは認める」ということである</p>

これを次のようにします。

<p class=”card-text”>{{ memo.main }}</p>

memo配列に格納された、メインテキストをパイプを通して表示させます。

では、memo配列の型定義をします。

memoクラスの定義

memoクラスを作っていきます。

ng g class class/memo
memo.ts

idとメインテキストと補足テキストを定義しました。

コメントアウトしていますが日付等、順次実装していきます。

モックデータ作成

では、モックデータをapp.componentに作っていきます。

型のインポートも忘れずに。

さらにクラス内に次のコードを追加し、テンプレートから配列を読み込めるようにします。

memos = MEMOS;

これでモックデータの定義ができました。

名言もITの方々の言葉に変えました。ゲーテ様の言葉は濃ゆいので。

こららを表示させるようにテンプレートを書き換えていきます。

パイプを通す

テンプレートを書き換えて定義したモックデータをパイプを通して表示させていきます。

メモ配列を表示させるのはclass=”col-sm-4″タグなのでこのタグを*ngForで囲みます。

*ngFor=”let memo of memos:angularのfor文です。memos配列からmemoの型定義に合うものをその分返します。つまり、配列分タグ内を生成します。

次のように表示され、パイプを通してメインテキストを表示させました。

app.component.cssに次のコードを追加して、文字数オーバーしたら「・・・」と表示されるようにしました。

参考:【CSS】複数行でも3点リーダーをきかせる – Qiita 参考先様助かりました。

なんで三点リーダーが表示されるのかわ私にはわかりません。

ここで機能からは離れてアプリとしての話になります。

最初のイメージとしては長い文章を入力したとしても全て表示するようにしようと思っていました。

でも、実際にデザインしてみると「どうやるの?」となりました。

そこで、文字数を限定する方向になっています。

しかし私は思う。長過ぎる名言などあるのか?と。

長い名言を短くするという機能も実装することにしました。では、画面系機能に戻ります。

新規作成画面を作る

メイン画面へのモックデータ表示が完了したので、モック配列から入力データを表示するように置き換えていきます。

まずは、ヘッダーにメイン画面から新規作成画面に遷移するアイコンを追加します。

ヘッダーテンプレートのアプリ名の後に次のコードを追加しました。

<a href=”#” class=”fa fa-plus fa-lg plus-icon” title=”新規作成”></a>

センターに表示しています。

ヘッダーにはまだ追加する要素があるのでアイコン位置については後ほどいじっていきます。

ルーティング設定

プラスアイコンから新規作成ページに遷移するようにルーティング設定していきます。

次のコマンドを実行してルーティングモジュールを作成します。

ng generate module app-routing -flat -module=app
  • –flat:ディレクトリを作らずルートにファイルを作成します
  • –module=app:app.module.tsにルーティングモジュールを読み込ませます。自動的にapp-routingがapp.module.tsインポートと@NgModuleに追加されます。

そして、ルートを指定するためにインポートとRoutesを定義します。

@NgModule.importsにRouterModule.forRoot(routes)exports: [RouterModule]を入れるのを忘れずに。

これらがないとroutesに格納されているパスがルーティングとして読み込まれず、そしてapp.moduleに設定を読み込ませることができません。

これでルーティング設定ができました。

app.componentテンプレートに<router-outlet>を書き込みたいので、今書いてあるコードを新しくdashboardコンポーネントに移してしまいます。

そして、新規作成画面になるコンポーネントも作成します。

ng g component memo/dashboard
ng g component memo/new

dashboardをメイン画面として、newを新規作成画面とします。

dashboardにコードを移したら<router-outlet>で今まで通りメモリストの画面が表示されます。

ルーティング設定は画面を作るたびに設定していきます。

新規作成画面を作る

新規作成画面を作りました。

new.component.html

new.component.css

ngFormを使うのでコンポーネントにngFormをインポートします。

フォームタグの#f=”ngForm” (ngSubmit)=”addMemo(f)”で入力値を取得する処理を実行します。

submitボタンを押した時に関数addMemoを実行します。(f)にはテキストエリアタグ内にngModelがある入力値が格納されます。

<textarea ngModel name=“main” class=”form-control” placeholder=”名言を入力”></textarea>

上の場合は、f.value.mainで入力値を受け取れます。

入力値をメモ配列に追加するaddMemoは次のようになります。

addMemo(f: NgForm): void {
const values = new Memo({id: 21, main: f.value.main, sub: f.value.Sub});
this.memos.push(values);
}

push:TypeScriptの配列に追加するメソッド

new.componentで実行したかったのですが、コンポーネント間の受け渡しがうまくいかなかったので、今のところ全てDashboardComponentで行っています。

次のように同じページですが、メモの追加ができるようになりました。

では、受け渡しができるようになったのでデータベースと連携していきます。

データベースからメモ配列を読み込み、入力値をデータベースに書き込めるようにします。

Firebase連携

連携については以前、解説したのでここでは省きます。

Angular5+Firebaseでチャットアプリを作る② Firebase連携編 – まんくつ

上のページの「ブラウザからデータベースを読み書きする」の前までやった前提で始めます。

データベースに書き込みと読み込みをしてみます。

コードは次のようになります。

dashboard.component.ts

  • memos: Memo[]:メモ配列をデータベースから読み取るので配列定義をします
  • memosRef: AngularFireList<any>:データベースから配列リストを取得します
  • this.memosRef = db.list(‘/memos’):データベースのメモ配列の格納先です

ngOnInit()内はこちらで詳しく解説しています。

Angular5+Firebaseでチャットアプリを作る③ 編集・削除編 – まんくつ

簡単に説明すると、snapshotChanges().subscribeでデータベースの変化を購読し、mapでデータベースの配列キーと配列データを分けて、メモ配列の型にあうよう整形しています。配列キーは削除するときに使います。

this.memosRef.push(values):データベースの指定の格納先に新しくメモ配列を追加します。

また、メモクラスのキーをコメントアウトから戻しておきます。

これでデータベースへの書き込みと読み込みができるようになりました。

例えばこのように新規作成したら

データベースは次のようになっています。

Firebase連携ができるようになりました。

新規作成ページを独立させる

では、新規作成ページにaddMemo関数を移動させます。

新規作成ページへの導線がないので、ヘッダーのアイコンにルーターリンクを追加します。

routerLink=”/new”

有効にするには、コアモジュールにルーティング設定を読み込ませる必要があります。

これでプラスアイコンから新規作成ページに遷移して、メモの作成ができるようになります。

編集と削除

データベースの読み書きができるようになりました。

次は、メモを編集したり、削除する機能を実装していきます。

削除

まず、削除から実装していきます。

削除は簡単に実装できます。

二箇所にコードを追加します。

テンプレートの削除アイコンダグ内に(click)=”deleteMemo(memo.key)”

ダッシュボードコンポーネントに

deleteMemo(key: string): void {this.memosRef.remove(key);}

を追加します。

削除アイコンがクリックされると該当のメモ配列のキーをdeleteMemo関数に渡して、データベースの中でそのキーに紐付いているメモ配列を削除します。

アイコンの当たり判定がわからないので、スタイルシートに次のコードを追加しました。

.card-body .fa {cursor: pointer;}

編集

続いて、編集を実装していきます。

新規作成用ページのように別のページに編集ページを作ろうと思いましたが移らない方が意外とよかったので、メインページに表示させてみました。

dashboard.component.html

dashboard.component.css

dashboard.component.ts(追加分)

編集アイコンをクリックするとtoggleEditMemoメソッドで編集フラグを立てます。

編集フラグが立てばそのメモの要素の次に編集欄を表示するように、テンプレートに新規作成用のテンプレートを組込みます。*ngIf=”memo.isEdit”でフラグ判定しています。

テキストエリアにはngModel={{memos[i].main}}等を使って選択したメモの今の値が入力されています。

また、{{ memo.main }}をpタグでくくっていましたが、preに変えて改行をそのまま表示するようにしました。

編集完了をクリックすると、キーに対応したメモデータ配列をupdateメソッドで更新します。その後、編集フラグをもとに戻します。

基礎機能実装完了!

これでアプリの画面系の基礎機能が完成しました。

  • データベースの読み書きをしてアプリに表示
  • アプリからメモを新規作成
  • メモの編集をしてデータベースにも反映

まだまだ細かいところでやることはたくさんありますが、やりこみ要素はいくらやってもなくならないので一旦ここまでにします。

  • 使っていない補足情報等をどうつかうか?
  • 視覚的に何か動きをつけてカードの特性を生かす
  • 順番をドラックで動かす
  • テキストフォントや枠をユーザーで決められるように
  • レスポンシブデザインにする
  • 編集ウィンドウの位置をあそこでいいのか?ポップアップがいいのか?別ページ?
  • ゴミ箱ページ

これらも実装できたらおもしろそうです。

では今の状態でできるところをGIFファイルにしたのでご覧あれー。

次はユーザー認証です!

次のリンクからアプリの製作概要ページに戻れます。

[1ヶ月でAngular] はじめてのアプリ制作!名言メモアプリを作る! – まんくつ