【個人開発】推し曲を動的に生成したOGP付きで共有できるサービス「推し曲.com」を作りました

本記事の目的

この記事の目的は最近リリースした個人開発サービスの紹介です。
作ったものや、作った背景、作ってみた感想についてがメインです。
利用技術についても軽く触れます。

個人開発のサービスに興味ある方や、音楽好きな人向けの記事かもしれないです。

作ったもの

推し曲.comという推し曲をOGP付きで共有できるwebサービスを作りました。

曲を4曲選んで保存するとその曲のアルバムジャケットが並んだ画像が生成され、保存後の画面のOGPに設定されます。

作成後の画面をTwitterで共有すると、Twitter CardにOGPが表示されるので、いい感じにTwitterで表示されます。
加えてアーティスト名のハッシュタグ付きで共有できます。

もちろんTwitter以外でもOGPが表示されるものなら大丈夫です。
QiitaでもOkですね↓

ちなみに共有した曲は曲の一部を視聴できたりします。

なぜ作ったか

割と今回は思いつきで始めたのですが、もともとTwitter上で機能するサービスを作りたいなって思いはありました。
というのも、個人開発の一つのネックとしてどうしても認知されるハードルというものがあるんですよね。
その点、サービスの利用動線にTwitterでの共有が入っているサービスなら、利用→宣伝になるため個人開発であっても広がりやすいんじゃないかという仮説がありました。
有名どころでいうと質問箱はOGPを利用して上手にTwitterを活用していると思ってました（最近は有料版の相談箱なんてものもあるみたですね）

そんなことを考えている中、とある方のQiitaの記事↓がきっかけになり、今回の開発に至りました。
【個人開発】名刺代わりの10冊メイカーというサービスを作ったけど、恥ずかしくて宣伝してなかった

この方は書籍を選ぶことで、その表紙を並べたOGP画像を生成してTwitterで共有できるサービスというものを作っていました。
詳細は是非この方の記事を読んでいただけると良いと思います。
とにかくこの方の記事に刺激を受け「自分もパクリたい参考にしたい！」と思い、自分の好きなジャンルである音楽でやってみようと思い立ちました。
とくに自分は以前にSettlyというプレイリストを作るアプリを作っていたのでApple Music APIの使い方をわかっていたので開発開始までもスムーズでした。

推しポイント

• 色
  • こだわったというか、なんとなくオレンジっぽい色を選んだのですが、それが結構気に入ってます。
  • 今思うと音楽系のサービスを見てると黒系でブラーがかったデザインが多いのでそれによせても良いですね
• 1週間で作り切った
  • 最初はその時作っていたアプリの片手間に1日２日で完成させるつもりでしたが、なんやかんやで1週間作ってました。
  • とはいえシンプルなサービスですが、1週間で1つのサービスをリリースできたことは結構満足感あります。
• 保存後の画面のデザイン（上で載せた画像の二枚目です）
  • 今回はFigmaなどを使ったUIデザインをせずに見切り発車でデザインも作り始めたんですが、完成してみるとなかなかに文字サイズなどの緩急ついた良い感じのレイアウトになったと自負してます。
• サービス名
  • ずっと「〇〇.com」って名前のサービスを作りたかったので夢が叶ってよかったです。
  • 今度は「〇〇オンライン」って名前のサービス作りたいです。

利用技術

• フロント
  • next
    • 初めて使いました。普段はExpoばかり書いてます。
    • OGPのためにgetServerSidePropsを使いたかった感じです。
  • styled-component
    • 初めて使いました。
    • ExpoでCSS in JSに慣れていたので使いやすかったです。
  • TypeScript
    • みんな大好きTypeScript。もはやこれなしでは生きていけない体に。
  • vercel
    • デプロイまでの初期設定、デプロイが爆速ですね。
    • これに慣れると退化しそうです。
• サーバ
  • FirebaseのCloud Firestoreを使いました。
  • Apple Music APIから取得した曲の情報とかを保存してます。
  • とりあえず無料で使えて、サーバサイド用意する必要もないし、JSONをそのまま突っ込めるので便利オブ便利です。
• 曲のデータベース
  • Apple Music APIを使いました。
  • 利用にはAppleDeveloperで認証鍵とか作る必要あるのでこのAPIが使えるのは毎年アップルにお布施を払ってるものの特権です。
  • 前回作ったSettlyというアプリでも利用しました
  • このAPIを使ってる人はあまり見かけないですね。もしかしたら使ってみた記事単体で書いてみても良いかもしれない？
  • 今回はReactで使いたかったのでnode-musickit-apiを利用しました。
• ドメイン
  • お名前.comは実質スパムなのでGoogle Domainsで購入しました。
  • 1400円/年でした。
• ogpの生成
  • Playwrightを利用しました。ほぼ↓の記事を頼りに作っており、正直あまり理解は深くないです。
    • Vercel + Next.js + PlaywrightでOGP画像を自動生成する
      
  • getServerSidePropsのタイミングでFirestoreから曲の情報とアルバムジャケットのURLを取得し、Headless Chrome上で表示したものをPlaywrightでスクショし、それをOGPに設定しています。
  • ここの処理が結構重いので、OGP画像が表示されるまでにラグがあったり、ごく稀に生成に失敗したりしてます。なんとかしたい。

反省

• LintとかPrettierは最初に設定すべきだった

  • サクッと作っておわりにするつもりだったので最初は全く設定せずに書き始めたのですが、書き殴ったコードだからこそ必要なんですよね。
  • 結局あとからちゃんと設定しました。

• Nextをなんとなく使っていた
  

  • 普通に良くないですね。雰囲気でも書けちゃうですが、多分間違った使い方とかガンガンしてると思います。
  • もっとしっかりしたものを作る時にはちゃんとドキュメント読み込んで理解を深めるべきです。

• styled componentは最初導入すべきだった

  • CSSに関してもサクッと作って終わりにするつもりだったので、Nextで最初から用意されているCSS Moduleを使って書いてましたがCSS in JSに慣れた体には受け入れられず、結局後から全部styled-componentsに書き換えました。
  • 時間がもったいなかったので最初から導入すればよかったです。

• PCでのレイアウトを諦めた

  • 普段スマホアプリばかり作っているせいでPCでのレスポンスデザインに慣れてなさすぎて、PCで表示した時にいい感じにするのは諦めました。
  • 多分スマホとはガッツリ変えないといい感じにはならないと思いますが、そこまで元気がありませんでした。

まとめ

• ということで最近作ったNextとかApple Music APIを使ってOGP付きで推し曲を共有できる個人開発サービスの紹介でした。

• このサービスで今勤めている会社、株式会社mofmofの個人開発アワードにエントリーしようと思います。

• まだまだ利用が少ないので、もしちょっとでも面白いと思ってもらえた方は一度でいいので使ってみてください！！！！　2分もかかりません！

Twitterもやってるので、よければフォローお願いします。
→https://twitter.com/ObataGenta

このプロダクトは、株式会社mofmofの「水曜日の個人開発」にサポートされています。
https://indie-dev.mof-mof.co.jp