1. はじめに
何かを勉強するときに、資料やチュートリアルを読んで知識をつけることはもちろん大事ですが、その身につけた知識を活用できないと意味がありません。ということで、今回Webアプリケーションを作成してみることにしました。
※Qiitaなどへの投稿は初めてなので拙い文章ですが、それでも読んでいただけると幸いです。
アプリへのリンク
ForActors
現在アクセスできません🙇♂️
2. 用いた技術
フロントエンド：Vue.js、Vuetify、VueRouter、VueStore、VueLoading
バックエンド：Firebase、Firestore、Authentication、Azure Web Static App
3. 作成したアプリケーションの説明
このアプリケーションは、役者を目指している友達が「オーディションの情報を仕入れづらい」と言っていたことがきっかけで作成しました。主な機能は以下の通りです。
主な機能
- ・全ユーザーの投稿したオーディション情報を閲覧
- Twitterのタイムラインのようにオーディション情報を閲覧することが可能
- お気に入りボタンを押すことで、プロフィールから閲覧可能
- ・オーディション情報の投稿
- HOMEページの投稿ボタンからオーディション情報を投稿することが可能
- ・ログイン、ログアウト機能
- リンクにアクセスするし、ログインページからログイン可能
- ログイン後、ヘッダーのログアウトボタンを押すことでログアウト可能
- ・ユーザー検索機能
- 検索ページからユーザー名を用いてユーザーのアカウントを検索可能
- 他ユーザーをフォロー、メッセージを送るなどが可能
- 他ユーザーの投稿したオーディション情報もしくはお気に入りに追加したオーディション情報を閲覧可能
- ・プロフィールを閲覧、設定
- ユーザーのアイコン、名前、紹介文を編集可能
- 今までの投稿を確認、削除可能とお気に入りの投稿確認
- ・自分のフォロー、フォロワーの確認
- フォロー、フォロワーの数字を押すことでどのユーザーがフォロー、フォロワーなのか確認可能
- ・他ユーザーとのメッセージ
- 他ユーザーとメッセージのやりとりが可能
4. UI説明
ログイン画面：
・GoogleアカウントとEmailでのログイン
・Emailによる新規アカウント作成
ホーム画面：
・全ユーザーの投稿したオーディション情報の閲覧
・オーディション情報の投稿や、他のユーザーの投稿をお気に入り登録
・右上のログアウトボタンからログアウト
検索画面：
・他のユーザーを名前から検索
・検索したユーザーをフォローする
・検索したユーザーとのメッセージルームに遷移
・検索したユーザーの投稿やお気に入りの閲覧
プロフィール画面：
・ユーザーの基本情報確認
・アイコン画像、名前、紹介文編集
・今までの投稿やお気に入りの削除
・フォローの取り消し
メッセージ画面：
・他ユーザーとのメッセージのやりとり
5. 改善点
改善点としては、メッセージを送った際のアイコンが保存されているため、送られてきたメッセージのアイコンと現在のアイコンに矛盾が生じてしまうことです。また、プロフィールでフォーロー、フォロワーを確認する際も同じことが起きてしまいます。この原因はFirestoreの構造にあると感じたので、一から見直して設計し直すことで改善しようと思います。
6. 最後に
今回このアプリケーションを作成して、Vue.jsの扱い方や機能について大まかに理解できたと思います。しかし、思いつきで作成したこともあってER図もなく、DBの構造がしっかりしていないため中身が雑な作りとなってしまいました。まだまだ学ぶことは多いので、次にアプリケーションを作成する時にはしっかりとER図を作成して、バックエンドにも力を入れようと思います。
ここまで読んでいただいた皆様、貴重なお時間をありがとうございます。もし、少しでも興味を持っていただけましたらこのアプリケーションを触ってみてください。