Zenn
🎤

【個人開発】歌詞カードを作るサービスを作りました。

2024/05/01に公開
Next.js
React
個人開発
Supabase
tech

🚩はじめに

歌詞カード作成に特化したwebaアプリサービス「Vird」を作りました。※ベータ版です


https://vocal-card-editor.vercel.app/

❓何ができるの？

ブレスやアクセントなどの歌い方をメモする歌詞カードを、web上で簡単に作成できます。
文字のハイライトやテクニックアイコンの配置、ルビ振りや注釈など歌詞カード作成に特化した機能を多数実装。

🔭コンセプト

誰でも簡単に歌詞カードを作成できるサービス。というコンセプトで開発しました。
歌詞カードを作成することは、WordやPowerPointなど、他サービスでも実現することは可能ですが、多機能過ぎて、歌詞カード作成には向いていません。
「Vird」はそういったサービスから歌詞カード作成に適した機能だけを盛り込むことで、作成のハードルを下げることができると考えています。

🎙作った経緯

自分の趣味がカラオケで、歌詞カードを作ろうと思った時、web上に類似するサービスがなく、ないなら自分で作ってしまおうと思い、勢いで開発スタート。

💻️技術スタック

フロントエンド

  • 言語：HTML&CSS, TypeScript
  • フレームワーク：React・Nextjs14
  • CSSフレームワーク：TailWindCSS、sass
  • ライブラリ
    • Quill
    • ReactModal

バックエンド

  • DB：Supabase DB
  • 認証：Supabase Auth

ホスティング

  • Vercel

その他ツール

  • ソースコード管理：GitHub
  • デザイン：Figuma
  • ドキュメント管理：Notion
  • エディタ：Cursor

🎨デザイン・UIUX

  • 全体デザイン
    ZennやQiita、Supabase公式サイト、React公式サイトなどを参考にしました。特にZennのデザインはかなり参考にしていただきました🙇‍♂️
  • コンポーネントデザイン
    ボタンやカードなどのコンポーネントの詳細デザインは、Apple Design Resources, マテリアルデザイン, デジタル庁のデザインシステムを参考しました。
  • アイコン作成について
    楽しく作成できるようにテクニックアイコンを用意しました。これでエディタが華やかになること間違いなし！アイコンの作成にはFigumaを利用しました。

🎈機能

ログイン機能

  • Googleアカウントを利用したユーザー登録（OAuth認証）

CRUD操作

  • 歌詞カードの作成、閲覧、編集、削除機能

アイコンの配置

  • ブレスやビブラートなどの、アイコンをエディタ上に自由に配置できます。

WYSIWYGエディタ機能

  • テキストのハイライト
  • フォントサイズの変更
  • 注釈
  • 下線

カラーガイド

ハイライトする際のカラーガイドを用意したので、ガイド通りにハイライトを行えば、誰でも簡単に歌詞カードを作成できます。

🏃大変だったこと・反省点

アイコンの配置機能

このサービスではアイコンをエディタ上での自由配置機能があります。これはエディタを3層構造にすることで実現しました。アイコンのドラッグ・ドロップイベントをトリガーに、z-indexを調整、前面に出てくる層をコントロールしています。この処理によって、エディタ上へアイコン配置、アイコンの再配置などのを実装しました。試行錯誤の末、このアイデアをひらめいた時の自分を褒めてあげたい、、、。

  1. 最初は以下のような構造
    2層目　Quillエディタ：Z-index: 10;
    1層目　アイコンのドロップ層：z-index: 0;
     
  2. アイコンのドラッグ開始をトリガーにして、アイコンをドロップ層を2層目に表示します。
    2層目　アイコンのドロップ層：z-index: 20;
    1層目　Quillエディタ：Z-index: 10;
     
  3. アイコンをドロップすると、stateにアイコンの座標を保存して、mapで3層目に展開します。同時に、アイコンのドロップ層を1層目に戻します。
    3層目　配置後のアイコン達：z-index: 30;
    2層目　Quillエディタ：Z-index: 10;
    1層目　アイコンのドロップ層：z-index: 0;

PowerPointやFigumaなどのアプリはどうやってこのあたりの機能を実装しているのだろうか、、、？

WYSIWYGエディタの実装

このサービスの肝となるエディタ機能は自力で実装しようとしたが、Selectオブジェクトの扱いが複雑過ぎて挫折、、、。結局、WYSIWYGエディタのライブラリでは有名な Quill を採用。想像以上にカスタムの幅が広く、ライブラリ選定の重要さを身にしみて感じました。
最初に自力で実装しよう頑張った時にSelectオブジェクトの扱いに少し詳しくなれたので、挑戦して良かったと思います。

TypeScriptの型定義

TypeScriptでの開発はこれが初だったので、試行錯誤しながら作業しました。正直、この規模のサービスだと型定義する必要があるのかな、、、と思いつつ型エラーを潰しました。TypeScriptのメリットとしては補完が便利でした。

SSRの実装

NextjsではSSRが簡単に実装できるため、データの取得はSSR、インタラクティブなページはCSRで実装することでレンダリングまでの時間を短縮しました。

OAuthの実装

認証自体は簡単に実装できたが、認証後のリダイレクトの処理でハマった。なんかうまくいくが、どうしてうまくいくのかわからず、Supabase Auth は情報も、まだ多くないため。かなり時間を取られてしまった。

デプロイについて

デプロイにはVercelを利用しましたが、デプロイの仕様について理解していなかったため、修正後もずっと修正を反映していない一つ前のデプロイページを確認してしまっており、あるはずもないバグと格闘する羽目になりました。

利用規約とかプライバシーポリシー

ログイン機能を実装しているので、最低限必要だと思いページを作成。全く経験ない分野だったので、地味に大変でしたが、いい経験になりました。

📒学んだこと

設計はやっぱり大事

今回はなんとなくの画面だけ想定して、開発をスタートしました。初期段階では、特に問題ありませんでしたが、開発が進むにつれ、データベースのカラム名や変数名などがなんとなく気持ち悪い感じになってしまいました。今回は小規模な個人開発なので大きな問題はありませんでしたが、開発規模やチーム開発ではかなりの問題になりそうだと身を持って感じました。

技術選定も大事

フロントやNextjs14、バックエンドはSupabaseを採用しましたが、どちらも割と新しい技術・サービスになるので、情報があまり多くありませんでした。新しい技術を追うのも大事だけど、やっぱり情報が多い技術、バグも少なく安定もしているということなので、今後は技術選定にも気を配って開発したいと思います

Discussion