====== Ionic4とFirebaseでEmail認証つき掲示板 Part.1 ====== 前回は計算アプリを作成しました。今回は、いきなり『Emailパスワード制限つき掲示板』とハードルが高いですが、2019年2月現在、唯一のIonic4解説本である以下の本を写経してみたいと思います。 上記の本のサポートサイト https://sinack.com/ird_ionic/ ===== すること ===== -掲示板 -Emailアドレスとパスワードでログイン制限あり -ユーザー登録ができる -掲示板にメッセージを書き込める（Create） -メッセージの更新（Update）と削除（Delete）ができる -メッセージにコメントできる -PWA化して、オフラインでもアプリとして利用できようにする 作成の流れとしては、[[https://amzn.to/2I7ktCj|初心者でも大丈夫!! IonicとFirebaseでゼロからはじめるアプリ開発]]によると、以下のようになります。 -ログイン機能のない『疑非メッセージボード』を作成する -上記メッセージボードにログイン機能をつける -投稿されたメッセージをFirebaseに保存できるようにする ソースコード DEMO ===== 開発環境 ===== 私の環境は以下のようになっていますが、Windowsパソコンの場合、 [[00.ionic4:01.windowsでionicを始める方法|WindowsでIonicを始める方法]] や、 [[00.ionic4:01.windowsでionicを始める方法#オプション：nvm-windowsでNode.jsのバージョン管理]] の手順でインストールしていただければ、ほぼ同じ環境が整います。 Windows10パソコン購入後のWindows Subsystem for Linuxでの環境構築については、[[z_blog:2018:181219_windows10_config|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 {{:00.ionic4:pasted:20190210-143318.png}} 私の場合、以下のようにフォルダ共有しています。 Windowsの C:/Users/a/a/ Ubuntuの /mnt/c/Users/a/a/ また、Windows10のVisualStudioCodeでC:/Users/a/a/フォルダを開き、[[http://i-doctor.sakura.ne.jp/web/doku.php?id=z_blog:2018:181219_windows10_config#%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E5%85%B1%E6%9C%89%E3%81%AE%E5%88%9D%E6%9C%9F%E8%A8%AD%E5%AE%9A|こちらの設定]]にて、VisualStudioCodeのターミナル画面をWSLのUbuntuのBash画面に設定しています。 ===== 新規Ionic4アプリの作成 ===== -VisualStudioCodeでWindowsのC:/Users/a/a/ionic/フォルダを開く -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。。。 {{:00.ionic4:pasted:20190210-233922.png}} {{:00.ionic4:pasted:20190210-233943.png}} {{:00.ionic4:pasted:20190210-234010.png}} *以下を入力して、サーバを起動します。1分くらいかかります。 cd ionic4-board ionic serve {{:00.ionic4:pasted:20190210-234211.png}} なお、サーバを停止するためには、Ctrl+C, Y, Enterの操作を行います。（Ubuntuだと、Ctrl+Cのみですぐにサーバ停止します。） なお、''%%ionic serve --lab%%''というコマンドを入力すると、Android、iPhoneでの見栄えをエミュレートすることができるようになります。 {{:00.ionic4:pasted:20190211-031248.png}} ===== src/app/home/home.page.htmlの編集 ===== 掲示板の見栄えを作っていきます。 （変更後） {{:00.ionic4:pasted:20190211-003348.png}} *メッセージ投稿部分を作ります {{:00.ionic4:pasted:20190211-003757.png}} *投稿されたメッセージを表示する部分を作ります {{:00.ionic4:pasted:20190211-004607.png}} {{:00.ionic4:pasted:20190211-004826.png}} {{:00.ionic4:pasted:20190211-005355.png}} *で記述された『2分前』がずれているのでhome.page.scssに以下のように記載して修正 （変更前） {{:00.ionic4:pasted:20190211-005551.png}} （変更後） {{:00.ionic4:pasted:20190211-005724.png}} ===== src/app/home/home.page.tsの編集 ===== 掲示板の機能を実装していきます。 投稿の変数を定義します。 （変更前） {{:00.ionic4:pasted:20190212-130534.png}} （変更後） {{:00.ionic4:pasted:20190212-130750.png}} home.page.htmlに、このpostの値を反映させます。 （変更前） {{:00.ionic4:pasted:20190212-131232.png}} （変更後） {{:00.ionic4:pasted:20190212-131454.png}} {{}}は、Angularのインターポレーションという書き方だそうです。 {{:00.ionic4:pasted:20190213-151218.png}} 参考：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のデータバインディングには、以下の４つがあるそうです。 -Interpolation(補間) {{}} : One-way (データからビューへ) -プロパティバインディング [] : One-way (データからビューへ) -イベントバインディングが () : One-way (ビューからデータへ) -双方向バインディング [()] : Two-way (データ←→ビュー) 参考２：https://angular.keicode.com/basics/data-binding.php {{:00.ionic4:pasted:20190213-151322.png}} ===== 投稿を2つにする ===== home.page.tsでpostの配列postsを定義して、home.page.htmlで表示できるようにします。 home.page.ts {{:00.ionic4:pasted:20190212-133948.png}} home.page.html {{:00.ionic4:pasted:20190212-134224.png}} この、 *ngFor="let p of posts" は、配列postsを順番に、変数pに読み込んでいます。 ===== 入力した投稿を表示させる ===== home.page.html （変更前） {{:00.ionic4:pasted:20190212-143126.png}} （変更後） {{:00.ionic4:pasted:20190212-143418.png}} #f="ngForm" は、フォームにvalidationをつけるためだそうです。 (submit)="addPost()" は、『このフォームがsubmitされたら、addPost()を実行する』という意味だそうです。 [(ngModel)]="message" は、Angularの双方向データバインディングという構文だそうです。addPost()も、messageも、この後、home.page.tsで定義します。 home.page.ts {{:00.ionic4:pasted:20190212-144410.png}} メッセージを入力して、投稿　をクリックしてみると、投稿が追加されることがわかります。 {{:00.ionic4:pasted:20190212-144523.png}} ===== メッセージを更新（update）できるようにする ===== 各メッセージの『編集』ボタンを押すと、モーダル画面が出て、メッセージを更新できるようにします。 モーダル画面は、ionicのAlertControllerを用います。 参考：https://ionicframework.com/docs/api/alert home.page.html （変更前） {{:00.ionic4:pasted:20190213-155937.png}} （変更後） {{:00.ionic4:pasted:20190213-160126.png}} *ngFor="let p of posts; let i =index"により、インデックス用の変数iを追加しています。 編集ボタンのところに、(click)="presentPrompt(i)"と、presentPrompt(i)関数をiを用いて記載し、home.page.tsで関数を定義します。 home.page.ts （変更後） {{:00.ionic4:pasted:20190213-160705.png}} {{:00.ionic4:pasted:20190213-161753.png}} いきなり大量のコードで目が回りますが、 -AlertControllerのimport文を一番上に記載。 -constructorでAlertControllerを注入 -presentPrompt(index)関数をasync/awaitを用いながら定義（ionic4からasync/awaitを使用するようになったとのことです） -AlertControllerの使い方は、公式ドキュメントをコピペした後に編集 という流れでやっていくのがよいと思われます。(このやり方は、[[https://amzn.to/2tnUEna|Ionicで作る モバイルアプリ制作入門]]に書かれていて、「公式ドキュメントはこのように使うのか？」と感心した記憶があります。) 参考：https://ionicframework.com/docs/api/alert-controller/ {{:00.ionic4:pasted:20190213-162136.png}} https://ionicframework.com/docs/api/alert {{:00.ionic4:pasted:20190213-162238.png}} ==== async/awaitについて ==== async/awaitは、『非同期処理』に関する記載方法らしいのですが、非同期処理は本当に難しくてよくわからないので、とりあえず、AlertControllerを使用するときにはこのように記載する、と覚えておいて、次に進みます。 ぶっちゃけ、以下を何回か繰り返し読んでみたのですが、内容の1割も理解できていません。。。きっと、避けて通れないのだとは思いますが、、、（まず、Promiseとかcallbackとかがなんなのか分からないんです、、、はい。。。） https://www.sejuku.net/blog/69618 【JavaScript入門】5分で理解！async / awaitの使い方と非同期処理の書き方 更新日：2018年8月27日 書いた人 マサト https://www.sejuku.net/blog/52314 【JavaScript入門】誰でも分かるPromiseの使い方とサンプル例まとめ！ 更新日：2019年2月10日 書いた人 マサト https://www.sejuku.net/blog/67743 【JavaScript入門】初めてのコールバック関数の書き方と応用例！ 更新日：2018年8月13日 書いた人 マサト https://qiita.com/soarflat/items/1a9613e023200bbebcb3 {{:00.ionic4:pasted:20190213-163400.png}} ===== メッセージの削除を実装する ===== 編集のときと同様に、削除ボタンを実装します。 deletePost(i)関数の定義方法として、this.posts.splice(index, 1)とするのが、ポイントのようです。 home.page.html （変更後） {{:00.ionic4:pasted:20190213-165144.png}} home.page.ts （変更後） {{:00.ionic4:pasted:20190213-165310.png}} これで、削除deleteも実装することができました。 以上で、メッセージの -追加create -更新update -削除delete を実装することができました。（いわゆるCRUDを実装できたことになります。） 次の、[[00.ionic4:05.ionic4とfirebaseで掲示板part2|Ionic4とFirebaseでEmail認証つき掲示板 Part.2]]では、Firebaseを用いてメールアドレスとパスワードによるユーザー認証を実装します。 ===== 今回写経した本 ===== Javascriptフレームワーク初めての人向けの、Ionic4とFirebaseの解説本です。Macパソコン上で、Firebaseを利用した、Emailパスワード制限つきの掲示板を作成していきます。最初の一冊として非常にお勧めです。 しかし、Ionic自体の解説については、以下の本が詳しいですので、Ionic3とはなりますが、非常に分かりやすく、お勧めです。 ===== 参考リンク ===== ===== リンク ===== 目次：[[00.ionic4:index.html|スマホ用ホームページ&スマホアプリ作成ソフトIonic4]] 前：[[00.ionic4:03.ionic4で計算アプリ|Ionic4で計算アプリ]] 次：[[00.ionic4:05.ionic4とfirebaseで掲示板part2|Ionic4とFirebaseでEmail認証つき掲示板 Part.2]]