開発日記(6/20~6/28)

はじめに

大学生になって、好きだった作曲とアカペラサークルの活動に割と時間を費やしていて、気付いたら 3 年の 2 月になっていた。前々から Wordpress や Ruby on rails でサイトを作ったり、Python でツールを作ったりとプログラミングには興味はあった。そしていろんな Web サービスを見る中で、自分もサービス開発を楽しみ、作り上げ、仕事にしたいと感じてきたため、本気で Web エンジニアを目指そうと思った。だが就活をしながら、自分の実力、実績不足を痛感したため、5 月から Angular/Firebase で自分のサービス開発をする CAMP というサービスに参加した。

6 月 20 日まで

CAMP 内のチュートリアルを終わらせ、サービス企画に取り組む。サービス企画、デザイン、設計、開発、運営をやるのをどういった感じでやればいいのか考えていたが、ある程度モックができたら、コードを書きながら進めた方が早いと気付き、開発速度をあげようとしている。 開発速度を上げるには 1 日 1 日を発信することも大切だと思い、Qrunch を始めた。

6 月までやったこと

• Gitpet というチュートリアルを終わらせる
• Angular の基礎理解、モジュール、コンポーネント、ルーティングなど
• JavaScript, Rxjs の基礎理解、Observable, Subscribe など
• 画面のマークアップ
• AdobeXD の使い方学ぶ

6 月 20 日から

6/20

やったこと

• Firestore からデータを取得、ホーム画面の実装
• AngularMaterial でホーム画面のスタイルを調節

感想

• AngularMaterial の Card が image に padding-16px などがついていて調節しづらかったが、自分が思ったような見た目にすることができた。Crieit や note のトップ画面を参考にして CSS を組んでみたがトップ画面 UI をどういう感じにしたいかまだ固まってない感じなのでとりあえずで組んでいく。Note や twitter のように Card に hover して背景が少しグレーになるのはどうやっているのか検証で調べてみる。

6/21

やったこと

• Create 画面の作成
• ngx-editor の実装

感想

• 記事投稿画面のマークアップをした。また、ngx-editor という WYSIWYG エディター、リッチテキストエディターのライブラリが npm にあったため、使えそうだと思って、Readme を読んで実装した。エディター自体は簡単に実装できたのと、リアクティブフォームと連携できたのはよかった。しかし、基本的な機能以外は外部ライブラリの prosemirror に依存しており、max-height が固定できないのと、外部ライブラリを入れないと改行できないため、Github のリポジトリの issue を見ながら、試行錯誤した。

6/22

目標

• Create 画面の作成
• ngx-editor の使用

やったこと

• Create 画面の作成
• angular-editor の使用

感想

ngx-editor を使おうとしたが、やはり max-height が固定できなかったため、angular-editor に切り替えた。ドキュメントを読んで割と簡単に実装できた。ライブラリ側で html を sanitize されているので、セキュリティ的に angular の html 側で innerHTML しても大丈夫そうだった。一応 ts 側で string として受け取って innerHTML することでプレビュー画面も実装できた。

6/23

やったこと

• 各ボタンにリンク設定

感想

• 今日は予定があり、あまり進まなかった。デバッグのしやすさやサービスの全体を考えるためにも routerlink でリンク設定した。時間がなくても細かい issue をおろして意地でも PR 出すのは大事だと思った。MTG では無限に増える値はプロパティではなくサブコレクションで firestore に管理することを学んだ。また、間違えて mypageModule に認証ガードをかけていたが、mypage 画面は非ログイン時にも共有できるようにしたかったため、外した。

6/24

やったこと

• ブランド名の変更、一旦のロゴ作成

感想

• 今日はアルバイトであまり進まなかった。ブランド名が納得いかなかったため、DTMPlace から MusiL という名前にした。AdobeXD でロゴも作成した。

6/25

やったこと

• twitter の screen_name を取得して firestore に保存

感想

• MTG で質問した上で試行錯誤すると、TwitterAPI を使わずに Firebase と Angular だけで screenName を表示することができた。
• Twitter の signIn の遷移が Redirect と Popup で迷っていたが、Popup だと Twitter のスマホアプリでの認証ができるし、screenName も簡単にとれるため、Popup にすることにした。mtg では Functions は firebase で angular と関数を呼び合えるが直接的な連携はできないことを MTG で学んだ。

6/26

やったこと

• Rxjs の基本を動画と教材で復習

感想

• アルバイトのため、今日は Rxjs の基本を復習した。map は値を受け取って別の値として返す時に使い、switchMap は受け取った値を用いて別の Observable から値を取得して返す時に使うことを主に理解した。

6/27

やったこと

• サービス概要、設計を考える

感想

• 予定があったため、あまり進まなかったが、再度、サービス概要、設計について考えていた。アイコンも作り直し、UI,UX を考えながらボタンとページ全体の色を調整した。

6/28

やったこと

• mypage 画面にルーティングして screenName を読み取る

感想

• mypage 画面に遷移して ActivatedRoute を使って mypage 画面のルーティングの id を取得した。ここから firestore に接続してデータを取ってくる処理を考えた。