前回は計算アプリを作成しました。今回は、いきなり『Emailパスワード制限つき掲示板』とハードルが高いですが、2019年2月現在、唯一のIonic4解説本である以下の本を写経してみたいと思います。

上記の本のサポートサイト
https://sinack.com/ird_ionic/

1. 掲示板
2. Emailアドレスとパスワードでログイン制限あり
3. ユーザー登録ができる
4. 掲示板にメッセージを書き込める（Create）
5. メッセージの更新（Update）と削除（Delete）ができる
6. メッセージにコメントできる
7. PWA化して、オフラインでもアプリとして利用できようにする

作成の流れとしては、初心者でも大丈夫!! IonicとFirebaseでゼロからはじめるアプリ開発によると、以下のようになります。

1. PWA化する
2. ログイン機能のない『疑非メッセージボード』を作成する
3. 上記メッセージボードにログイン機能をつける
4. 投稿されたメッセージをFirebaseに保存できるようにする

ソースコード

DEMO

私の環境は以下のようになっていますが、Windowsパソコンの場合、

WindowsでIonicを始める方法

や、

オプション：nvm-windowsでNode.jsのバージョン管理

の手順でインストールしていただければ、ほぼ同じ環境が整います。

Windows10パソコン購入後のWindows Subsystem for Linuxでの環境構築については、Windows10購入時の設定に記載させていただきました。

Panasonic CF-RZ6
Windows10 Pro (1803)
VisualStudioCode 

Windows Subsystem for Linux (WSL)
Ubuntu18.04
VisualStudioCodeのターミナル画面をWSLのBashに設定
git 2.17.1
anyenv 
nodenv 1.1.2-69-gced0e70
node 10.14.2

私の場合、以下のようにフォルダ共有しています。

Windowsの C:/Users/a/a/
Ubuntuの  /mnt/c/Users/a/a/

また、Windows10のVisualStudioCodeでC:/Users/a/a/フォルダを開き、こちらの設定にて、VisualStudioCodeのターミナル画面をWSLのUbuntuのBash画面に設定しています。

1. VisualStudioCodeでWindowsのC:/Users/a/a/ionic/フォルダを開く
2. Ctrl+@でターミナル画面を開いて、以下を入力します

cd ionic
ionic start ionic4-board blank --type=angular
// 何か聞かれたら、n + Enter

私の環境（Windows10のWSL）ではインストールに14分かかりました、、、（次回から、Windowsに直接nvm-windows, Nodejsをインストールして、Ionicを触ろうと思います。）（CodeSandboxでVue.js始めるためには2区クリックで3秒くらいで開始できるのに、、、）しかも、この時点で405 MB。。。

• 以下を入力して、サーバを起動します。1分くらいかかります。

cd ionic4-board
ionic serve

なお、サーバを停止するためには、Ctrl+C, Y, Enterの操作を行います。（Ubuntuだと、Ctrl+Cのみですぐにサーバ停止します。）

なお、ionic serve --labというコマンドを入力すると、Android、iPhoneでの見栄えをエミュレートすることができるようになります。

掲示板の見栄えを作っていきます。

（変更後）

• メッセージ投稿部分を作ります

• 投稿されたメッセージを表示する部分を作ります

• <ion-note>で記述された『2分前』がずれているのでhome.page.scssに以下のように記載して修正

（変更前）

（変更後）

掲示板の機能を実装していきます。

投稿の変数を定義します。

（変更前）

（変更後）

home.page.htmlに、このpostの値を反映させます。

（変更前）

（変更後）

{{}}は、Angularのインターポレーションという書き方だそうです。

参考：https://medium.com/@genta.ameku/angular-%E3%83%87%E3%83%BC%E3%82%BF%E3%83%90%E3%82%A4%E3%83%B3%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0-bdf8d0c96771
Angular データバインディング
Genta Ameku
May 3, 2018
→こちらによると、Angularのデータバインディングには、以下の４つがあるそうです。

1. Interpolation(補間) {{}} : One-way (データからビューへ)
2. プロパティバインディング [] : One-way (データからビューへ)
3. イベントバインディングが () : One-way (ビューからデータへ)
4. 双方向バインディング [()] : Two-way (データ←→ビュー)

参考２：https://angular.keicode.com/basics/data-binding.php

home.page.tsでpostの配列postsを定義して、home.page.htmlで表示できるようにします。

home.page.ts

home.page.html

この、 *ngFor=“let p of posts” は、配列postsを順番に、変数pに読み込んでいます。

home.page.html

（変更前）

（変更後）

#f=“ngForm” は、フォームにvalidationをつけるためだそうです。

(submit)=“addPost()” は、『このフォームがsubmitされたら、addPost()を実行する』という意味だそうです。

[(ngModel)]=“message” は、Angularの双方向データバインディングという構文だそうです。addPost()も、messageも、この後、home.page.tsで定義します。

home.page.ts

メッセージを入力して、投稿　をクリックしてみると、投稿が追加されることがわかります。

各メッセージの『編集』ボタンを押すと、モーダル画面が出て、メッセージを更新できるようにします。

モーダル画面は、ionicのAlertControllerを用います。
参考：https://ionicframework.com/docs/api/alert

Javascriptフレームワーク初めての人向けの、Ionic4とFirebaseの解説本です。Macパソコン上で、Firebaseを利用した、Emailパスワード制限つきの掲示板を作成していきます。最初の一冊として非常にお勧めです。

しかし、Ionic自体の解説については、以下の本が詳しいですので、Ionic3とはなりますが、非常に分かりやすく、お勧めです。

目次：スマホ用ホームページ&スマホアプリ作成ソフトIonic4

前：Ionic4で計算アプリ

次：