HANA-LOG

01

作品情報と視聴記録をまとめる

俳優・杉咲花さんの出演作品、ニュース、CMをまとめた非公式アーカイブサイトです。作品を探す、関連情報を見る、観た作品を記録する使い方を考え、企画、構成、UI、実装・運用を個人で担当しています。

02

未視聴の作品を探せる一覧

「未視聴・配信中」を選ぶと、まだ観ていない作品のうち配信情報があるものに絞り込めます。作品名の検索や、新しい順・古い順・評価順の並び替えも組み合わせられます。ポスター、映画・ドラマの区分、公開日、自分の評価をカードにまとめ、次に観る作品を一覧から探せる構成です。

03

作品情報を確認し、視聴済みと星評価を残す

作品詳細では、役名や制作・配給、上映時間、配信先を確認できます。その下に「視聴の記録」を置き、視聴済みへの切り替えと、0.5刻みの星評価を同じページで行えるようにしました。配信情報には確認日も添えています。

04

観た作品を、自分の評価順に見返す

詳細ページで付けた記録は作品一覧にも反映されます。「見た」に切り替えると視聴済みの作品だけが残り、「評価 高い順」を選ぶと自分が付けた星の順に並びます。カード上のチェックマークと星評価で、記録した内容を確認できます。

05

公式情報・ニュース・CMの整理

トップページには、所属事務所の「公式のお知らせ」、掲載元を添えた「最新ニュース」、サムネイルで選べる「新着CM」を分けて配置しました。ニュースは日付と掲載元、CMは企業名と日付を一緒に表示し、それぞれの一覧から過去の情報もたどれる構成です。

06

記録をファイルに書き出して残す

視聴済みと評価は、利用中のブラウザ内に保存します。バックアップ画面では、記録した作品・視聴済み・評価ありの件数を確認して、JSONファイルに書き出せます。ブラウザ内の保存であることと、別の端末へ引き継ぐにはファイルが必要なことを、操作ボタンの前に説明しています。

07

読み込む内容を確認してから反映する

バックアップファイルを選ぶと、形式と内容を検証したうえで、件数と書き出し日を表示します。ファイルを選んだだけでは現在の記録は変わりません。「今の記録に足す」は同じ作品の記録をファイル側の値で更新し、「まるごと置き換える」は現在の記録全体をファイルの内容に入れ替えます。反映方法を選ぶ前に、この違いを画面上で確認できます。

08

画面をまたいで同じ記録を扱う実装

Next.jsで実装し、Vercelで公開しています。視聴済み・評価はlocalStorageに保存し、ReactのuseSyncExternalStoreで一覧と詳細の表示につないでいます。同じブラウザの別タブで行った更新にも対応しています。保存形式を変更した際には、以前の作品IDを現在の識別子に読み替え、記録を引き継ぐ処理も設けています。

使用技術

Next.js / React / TypeScript / Tailwind CSS / Vercel