プロジェクトのご説明
TopsterMaker
(トップスターメーカー)
好きな音楽のアルバムカバーのコラージュを作って大事にしてみましょう。
プロジェクトの詳細
このプロジェクトは、自分の好きな音楽アルバムのカバーイメージを望む形で 構成してコラージュを作り、ダウンロードして所蔵できるウェブ アプリケーションです。 英国の音楽サービス企業であるLast FMからアルバム情報を 照会して、ウェブブラウザでコラージュを構成した後、画像ファイルにダウンロード します。 WebアプリケーションサーバはNext.jsにビルドされ、部分的にReact.jsを使用してWebクライアントを作成しました。 MantineUIを利用して、あらかじめ定義されたコンポーネントを利用して開発生産性を向上させました。 わかりやすく軽い状態管理ライブラリであるJotaiを使用して、アプリケーションの状態をグローバルに管理します。 AWS Route53を利用してドメインサービスと接続し、AWS Amplifyを利用してCI/CDパイプラインを統合および配布しました。 ユーザーエクスペリエンスを測定するためにGoogle Analyticsを適用しました。
プロジェクトの目的
こちらのサービスは、従来提供されていたトップスターメーカーウェブサービスのモバイルビュー未支援、 ビューサイズの変化、未支援などの不便さを改善するために開発されました。活用した技術
ハイレベルアーキテクチャ
プロジェクトのポイントと学んだこと
このプロジェクトは、企画・デザインから開発・デプロイまでをすべて自分で担当したものであり、Webサービス開発全体のプロセスを深く理解し、実装力を高める良い機会となりました。 特に、既存のサービスよりも便利で使いやすい機能を提供することを目指し、リリース後も継続的に機能改善とユーザー体験の向上に取り組みました。 開発過程で最も困難だったのは、HTML要素を画像として変換し、ダウンロードできる機能の実装でした。ページのレンダリングコンテキストをブロックしないように、HTMLノードをコピーする際には、DFS（深さ優先探索）アルゴリズムを用いて、必要最小限のプロパティだけを抽出・コピーし、それを元にレンダリング用のノードツリーを再構築する手法を採用しました。 このように、実際の課題に対してコンピューティングアルゴリズムを応用して解決に導いた、非常に意義のある経験となりました。