komura-c.log

komura-cのWeb技術、音、生活のメモの備忘ログ

開発日記(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にして返す。今日のはかなり腑に落ちて実装できた。


> 一覧に戻る