開発日記(6/29~7/4)

6 月 29〜

6/29 やったこと ・ログイン時に description も保存、型見直し ・ログイン時に保存する avatarURL を修正 感想 今日はログイン時の処理をもう一度考え、mypage 画面でプロフィールの表示されるコメントの部分を表示したいと考えたため、twitter でのログイン時に取ってくるように実装した。また、ログイン時に保存する avatarURL も AngularFire のデータを持ってきていたが、twitterAPI の credential から取ってくることで、常に最新の twitter にアカウント情報を取得できるようにした。僕のサービスは DTMer や作曲家の人に向けているので、そういった人は見ている限り、Twitter を使っている人が多いと感じたので、Twitter から取得しようと思った。

6/30 目標 ・投稿画面に画像のアップロード機能を追加する やったこと ・Angular-editor の Readme をよく読んで試行錯誤 感想 今日は Angular-editor で引用ボタンと画像アップロード機能を追加しようとしたが、そういった機能がライブラリ自体になく、自前で実装しようとして、試行錯誤した。質問したところ、やはり難しそうだったので、Froala Editor で実装することにした。

7/1 やったこと ・screenName のユーザーデータをマイページに表示 ・articleService 修正、ユーザーページにそのユーザーの記事を表示 ・mypage 画面のマークアップ、ルーティング、スタイル調整 感想 今日は Rxjs を理解しながら、mypage 画面の実装をした。記事の表示では map で userData を user の id に変えた後、switchMap で受け取り、articleService 内の getArticlesByUId で firestore から記事データの配列を受け取って返した。Twitter 連携のアプリなのでプロフィール変更機能は後付けでいいかもしれない。プロフィール入力の手間を省き、共有用途としては主に Twitter での共有を考えたサービス設計にする。

7/2 やったこと ・記事の Firestore 設計を見直し ・Firestore backend のエラーを firebase をアップデートすることで修正 ・create 画面のスタイル修正 感想 アルバイトのため、あまり進まなかったが、Article に含める値をもう一度考えた。create 画面が検証で 4k にした時にスタイルが崩れたため、修正を行った。

7/3 やったこと ・記事コンポーネントのマークアップ ・ホーム画面の ts で getArticlesWithAuthors を実装 感想 今日は Rxjs を理解しながら、ArticleWithAuthor 型の実装を行った。firestore から投稿配列を取得、filter で投稿配列を渡し、findIndex で投稿者 ID の投稿の配列位置を返し、投稿配列の位置と合致した時、true を返し、特定の投稿者の投稿配列を作成、その中の投稿から JS の map で投稿者 Id の配列を作成、その投稿者 Id の配列から、JS の map 内で特定投稿者のユーザーデータを取得して配列作成、conbineLatest で作成された投稿者たちのユーザーデータを受け取り、最終的な switchMap の返り値とする。rxjs の map でユーザーデータの配列を渡し、一時保管した記事から js の map 内で、ユーザーと結合した記事オブジェクトを作り、その配列を返す。言葉でまとめてみて理解したが、あいまいな部分もあるので、より理解できるように今後実装しながら学んでいく。

7/4 やったこと ・ArticleWithAuthor 型を mypage.component.ts, note.component.ts で取得できるように Rxjs 記述 ・記事詳細画面に記事データを表示(note-header のみ) ・create.component.scss に記述した::ng-deep が他コンポーネントの css に影響出たので削除、プレビューのスタイル調整 ・twitter の avatarURL を https で大きい画像を取得 ・記事作成時に肩に時間を含めるように実装した 感想 今日は Rxjs を学びながら、Article コンポーネントで受け取るようにした ArticleWithAuthor 型をマイページと記事詳細ページでも受け取り表示できるように実装した。ホーム画面 ArticlesWithAuthors は JS と RxJS が見事に織り込まれて本当に難しかったが、今日のはそこまで難しくなかった。map 内でユーザーデータを受け取りユーザー id として返し、switchMap でそのユーザー id に紐づいた記事データ配列を返し、map で受け取り、js の map でユーザーデータと記事データを混ぜて ArticleWIthAuthor 型の Observable にして返す。今日のはかなり腑に落ちて実装できた。