WATARU OKAMOTO

◆GithubURL🔻 ◆ポートフォリオURL🔻 ◆なぜこの作品なのか？ 身近なアーティストやイベントを沢山の方に知ってもらう事ができるアプリがあったらいいなという思いで作りました。 以前、アーティストとして活動していた時に「インスタグラムやツイッター」など各SNSでイベントの告知を行っていました。しかしイベントの告知以外の投稿と重なってしまいイベントのスケジュールなどが気になった人に分かりずらい事や身近なアーティストやイベントを探す際に他の投稿に埋もれってしまって検索にヒットしにくい、ストーリーの告知などは24時間で消えてしまいあとから確認しにくいなど沢山の問題点がありました。 そこで私は「Seartist」という、沢山のユーザーに地元で活躍するアーティスト・イベントを知ってもらう事ができるWebアプリを開発しました。従来のSNSでは解決できなかった問題点なくす為に様々な事を考え「アーティスト・イベント主催、ユーザー」にとって利用しやすい物を提供したくこの作品をポートフォリオとして作成しました。 ◆機能 - 新規メールアドレス登録機能 - メールアドレスログイン機能 - Googleログイン機能 - ゲストログイン機能 - ログアウト機能 - パスワード変更機能 - プロフィール登録機能 - 投稿表示機能 - 投稿機能 - 投稿検索機能 - ユーザ検索機能 - いいね機能 - 投稿削除機能 - フォロー＆フォロワー機能 - プロフィール編集機能 ◆利用技術 - React - Next.js（SSR） - TypeScript - ESLint - Pritter - Vercel(ホスティングサービス) - Firebase(Authentication,Cloud FireStore,Storage) - TailwindCSS - headlessui - SWR(データ取得) - Algolia（ユーザの検索機能） - react-hook-form（フォーム） - next-seo (SEO＆OGP) - react-dropzone（画像追加） - react-icons（アイコン） - recoil（状態管理） - react-hot-toast(トースト) - GitMoji ◆ターゲットユーザー アーティスト・イベント主催者・イベントを告知したい人・アーティストやイベントの情報を知りたい人&応援したい人 ◆利用シーン、利用の流れ 【リスナー：利用シーン】 ・身近なアーティストやイベントを探したい時 ・好きなアーティストの最新のイベントを知りたい時 ・ 気になったアーティストをフォローすることで、ホーム画面に最新のイベントが分かる ・気になったアーティストのSNSなど様々なプロフィールをチェック ・気になった投稿をいいねして保存できる 【リスナー：利用の流れ（1例）】 1. アカウントを作成 2. プロフィール登録 3. 検索ページから、「アーティスト名＆ユーザーID＆ジャンル＆所在地＆都道府県＆開催日」で検索 4. 気に入ったアーティストやイベント投稿をフォロー or イイネする事で最新の投稿をチェックできたり、あとから見返すことができる。 5. 気に入ったアーティストやイベント主催者のプロフィールページからSNSリンクを載せていた場合、各SNSアカウントをチェックできる。 【クリエイター：利用シーン】 - 認知度をあげたいアーティストやイベント主催者 - イベントのスケジュールをファンや利用者に知ってもらいたい方 - 地域にどんなアーティストやイベントがあるか載せていることで、それを知ったイベント主催者などが関心をよせ仕事を得られる。 【クリエイター：利用の流れ（1例）】 1. アカウントを作成 2. プロフィール登録（全ての項目を入力することで検索にヒットしやすい） 3. 投稿ページにて、イベント告知を各フォームの項目に沿って投稿 ◆ポートフォリオで力をいれた部分 ポートフォリオで力を入れた部分は「UI / UX ・ユーザービリティ」です。 利用するユーザーにとって考えさせないUIやユーザー体験を良くしたり、フォームのplaceholderを文ではなく実際入力例を記載したりボタンの配置やバリデーションやエラーの表示方法など考え作成しました。 ◆ポートフォリオで、つまづいた箇所とその乗り越え ポートフォリオで一番つまずいた所は「画像のアップロード機能」でした。 ポートフォリオで様々な機能が実装した事ない物ばかりでしたが、その中でも難しく感じました。今回Firebaseの画像を保存できる「Storage」サービスと「react-dropzone」を使い「画像のアップロード機能＆画像を表示＆画像変更」の機能を実装するにあたって、まずGoogleで 「firebase react-dropzone」という検索ワードで調べました。検索すると沢山の日本語＆英語の記事があり、大体が記事の内容を通りに記載しても「Storege」サービスとうまく連携できなかったり画像をドロップできなかったりと中々期待どおりに動きませんでした。いくつかの記事の内容を調査していくうちに解決できそうな物を見つけ理解しながら書いたところ、「Storege」サービスの連携と画像をドロップする機能は実装できましたが、画像を投稿する際に同じ画像を投稿すると最初に投稿した画像が表示されなくなってしまう現象がおき調査しました。 まず、デベロッパーツールを開きエラーがでていない見た所、「GET ~~~ 403」という内容が表示されていました。ステータスコードをみておもったのが「取得する際に画像のアクセス権」がない事だと思い、調査した所「Storage」サービスにアップロードする際に同じurlで上書きされてしまい以前参照していた場所と異なってしまうという原因で画像がうまく取得できていませんでいた。解決方法として「Storage」サービスにアップロードする際にランダムな数字をファイルパスとして設定し同じ画像がアップロードされたとしてもアップロード先のパスが事なるので重複せずエラーを解決できました。