個人開発で４年前にリリースしたWebアプリを、フルリニューアルした。

作ったもの 👉 Music Video Maps

バグ、使いづらい部分、データの少なさ、そして汚いソースコードと、今後も色々対応すべきことはたくさんあるけど、とりあえずリリースということで一旦記録としてテキトーにまとめてみる。

経緯

去年の11月に怪我してジャンプできなくなり、暇だったのでアウトプットの為にこのブログを作成。その時に使った最近の技術（Next.js)が素晴らしかったので、放置していたMusic Video Mapsを思い出して作り直したという経緯。

リニューアル前のバージョンは、サーバーパスワード忘れてGit管理もしてなかった（なぜ）ので死亡。放置してた割に、たまに海外で話題になったりして嬉しかった記憶。

技術

技術的には要素は最近のを取り入れつつ、難しいことはせず、あくまでチュートリアルを参考にしながら基本的な内容で作成。

昔

PHP(CodeIniter),MySQL(Spatial Index + mroonga),memcache,Conoha VPC,jQuery

今回

Node.js(Express),Heroku,Posgres(Postgis),Next.js,Vercel

• jQuery以来のフロントエンド挑戦で、新鮮だしnpmとか便利な時代になったものだ。仕事で触れられない技術は楽しいし、新しい技術は楽する為にある。楽する為に新しい技術を学ぶ価値があるという感想。

• ちゃんとしたフロントエンドの設計について調べると、一昔前のサーバーサイドみたいな構成でビビった。今後さらに勉強する必要がある。

• 旧バージョンにあった全文検索機能は、データ件数が少ないので削った。今後データが増えたら Algoria とか面白そうなので実装してみるかも。

• VercelもHerokuも、Dev, Staging, Productionの環境切り分けめっちゃ楽

• SPAのセキュリティがなるほど感。

• ちなみにこのブログはNext.js x Contentful x Vercelでランニングコスト含めドメイン以外無料でできている。Vercelもだけど、ContentfulもImage APIなど最高すぎる。

リリースまでの感想など

• リニューアルに向けて開発を始めた当初、新しい技術要素もりもりでスキルアップしてやる！なんて思っていたが、とてもじゃないが無理。

  • jQuery石器時代の人が、最新のキレキレフロントエンドエンジニアに３ヶ月で追いつけるわけなかった。

• Next.js, Vercel, TypeScript, GraphQL, Docker, AWS, Jest, ServiceWorker, PWA.

  • そう、単にキラキラしたワードを並べたかった。ワクワクするでしょう。上記がなんのことだか私は全然わかっていない。とにかくキラキラしたかった。
  • 1週間でプロトタイプを作ろうとしたが、キラキラ技術のドキュメントをボーッ眺めるだけで終わって無理だと諦めた。
  • Next.jsだけは習得することを目的に、安価・安定・開発スピードを意識して仕事の片手間でも作り終えられる構成（前項）にした。

• デザインは、Airbnbなどデザイナーがブログで発信してたり、デザインコンセプトがしっかりしているサービスを参考にしたら、使いやすくなった。

• 開発中盤くらいにFlux(Redux)というものを知り、まさに当時悩んでいた状態管理を解決できるものだと思ったが、コードベースが若干大きくなってきたところだったので導入をめんどくさがり、使わず。後半の仕上げる際に、より重要度が増してきて、導入しなかったことを後悔した。

• 後半になるにつれて、「早く終わらせたい」という気持ちが大きくなり、設計やコードの構成・読みやすさなど考えられなくなる。

• １度リリースすると、冷静になれて改善点がとても見つかる。もっと早い段階で一度落ち着いて全体を見返してみればよかった。一方で、リリース後はモチベーション的に落ちる。改修を行うのか微妙に気持ちになる。別のことがしたくなる。

• 利用規約やプライバシーポリシーは、重厚長大な文書だと勝手に思っていたが、いざ作成してみるとそんなに文量は多くなかった。

• 個人開発は楽しい。けど時間がかかる。閃いた時間の100万倍時間かかる。どんどん改善点も見つかる。

• 最初にある程度、設計というか指針を考えるべき。どうせ修正される前提。

  • 初期のコードを後半に見返すと、どこのバカがこんな酷いコード書いたんだ？ってなるレベル。

• 目的が技術習得なのか、サービス開発なのかはっきりさせるべき。

  • 目的が技術習得なら、要素を欲張りすぎないのと、サービスは小規模にすべき。
  • 目的がサービス開発なら、使ったことのない技術は別で検証してから取り入れる or 使わない方がいい。あと、リリース後に燃え尽きがち。しかし運用・マーケティングをちゃんとしないとマジで誰も使わないので、リリース後も頑張らなければならない（自戒）。

• 旧版は１年構想仕様決め・１年デザイン・開発だったのが、今回は３ヶ月でさくっとできたのが成長を感じてちょっと嬉しい。

リリースしてみて

• ミュージックビデオのロケ地を比較してみると、本当に同じ場所かと疑うくらい、MV映像とストリートビューの雰囲気が全然違うケースばかりだった。例えばBTSのDynamite（America's Got Talent 2020）とか、だいぶ哀愁漂う遊園地のようにストリートビューでは見えるが、MVでは一転とても輝かしい演出で、MVに関わる人たちのプロフェッショナルさを感じずにはいられない。

• Maps, Street View, YoutubeとGoogleのサービスにおんぶに抱っこのサービスを作ってみたわけだが、APIの使いやすさや設定の細かさなど、痒いところにしっかり手が届く設計とわかりやすいドキュメントに、改めて素晴らしさを感じる。今後別のサービスを作る上で参考にしたい。

以上

次はGoogleさんにあまり頼らず、6年近く構想しているスポーツのアプリを作る。

スポーツに関わりたいんじゃい。

個人ブログはこんな雑にだらだら書いても、人に見られている感が少なくて健全だ。。

Music Video Maps

以前のバージョン

リニューアルバージョン