2020-06-05に投稿

好きな楽曲について語り合うウェブサービス「musico」を作ってみました。

突然ですが、先々週に行われたweb1weekという1週間でウェブアプリを作って公開するオンラインハッカソンに参加しました。

(5/18~5/24)1週間でWebサービスを作るイベント - お題「Like」

と、言いたいところだったのですが、実は2日目以降、家庭内のインシデント対応やそれに起因する自身の体調不良で、全く開発を進めることができませんでした(汗)

昨日あたりから、体調含めて状況が落ち着いてきたので、遅ればせながら開発を進め、ガっと最低限の所まで作り込み、勢いでドメイン取って公開してみました。

以下、今回開発したウェブアプリについて。

お題は「Like」でしたので、好きな楽曲についてあーだこーだ語り合えるサービスを作ってみました。

musico | find track you like and talk about it」(何故か英語w)

画面

フリーワードで楽曲を検索して、その楽曲にLikeやコメントをすることができます。

現時点での機能は以下、

未ログイン時

  • 楽曲を検索、またはコメントがある楽曲リストを閲覧できる
  • 楽曲のコメントページを閲覧できる
  • 楽曲のプレビュー再生ができる(ファイルがあるもののみ)
  • Spotifyで楽曲を聞くことができる(別タブでウェブ版を表示)

ログイン時

上記に追加して、
- 楽曲にコメントできる
- 楽曲にLikeできる

動作ムービー

https://youtu.be/sDVK6O61_S0

各楽曲、コメントごとのページをSNSにシェアすることも出来ます。

image
https://musi-co.fun/tracks/6K53GM9W6Vle5KBwGFVnZM

開発時の様々や動機はなどは下記のハッカソンのボードに書きました。
https://crieit.net/boards/web1week-202005/musico

技術的なこと

技術スタック的にはFirebase+Vuejs(Nuxtjs)という、マネージドなサーバレス環境とコンポーネント思考なリアクティブフレームワークを組み合わせたJAMstackな流行りの構成です。

最初はホスティングにNetlifyを選択したのですが、SSR周りやFirestoreなど他に使ってるサービスとの兼ね合いも考えて、Firebase全乗っかりな構成にしました。

UIは最近良く使ってるBulmaのコンポーネントをほぼほぼそのまま使ってる感じです。

本業ではAWSがっちり使って、コンテナとかサーバレスとかマネージドサービスを組み合わせたサーバサイド寄りの開発が多いので、個人開発ではフロントエンド寄りの技術を選定しがちですね(汗)

あんまり凝ったことはしていないのですが、開発時に得た知見は今後すこしずつ書いていこうと思っています。

それではまた。


PS.

祝Crieit初投稿!!

ツイッターでシェア
みんなに共有、忘れないようにメモ

ぷろみつ

フルスタック気味の中年プログラマです。アプリやサービス作ったり、興味を抱いたモノをやってみたり、それを深堀したりしながら生きてます。 会社ではアジャイルチームをリード/マネジメントしています(フルリモート勤務) 動物占いは華やかな子鹿。社交的なインキャです。 #リモートワーク #リトルトゥース #田舎暮らし #WFH

Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

有料記事を販売できるようになりました!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?

コメント