tag:crieit.net,2005:https://crieit.net/tags/nuxtjs/feed Crieitでタグ「nuxtjs」に投稿された最近の記事 2020-06-05T19:26:08+09:00 https://crieit.net/tags/nuxtjs/feed tag:crieit.net,2005:PublicArticle/15920 2020-06-05T19:26:08+09:00 2020-06-05T19:26:08+09:00 https://crieit.net/posts/musico <p>突然ですが、先々週に行われたweb1weekという1週間でウェブアプリを作って公開するオンラインハッカソンに参加しました。</p> <p><a href="https://crieit.net/boards/web1week-202005">（5/18～5/24）１週間でWebサービスを作るイベント - お題「Like」</a></p> <p>と、言いたいところだったのですが、実は2日目以降、家庭内のインシデント対応やそれに起因する自身の体調不良で、全く開発を進めることができませんでした（汗）</p> <p>昨日あたりから、体調含めて状況が落ち着いてきたので、遅ればせながら開発を進め、ガっと最低限の所まで作り込み、勢いでドメイン取って公開してみました。</p> <p>以下、今回開発したウェブアプリについて。</p> <p>お題は「Like」でしたので、好きな楽曲についてあーだこーだ語り合えるサービスを作ってみました。</p> <p>「<a target="_blank" rel="nofollow noopener" href="https://musi-co.fun">musico | find track you like and talk about it</a>」（何故か英語ｗ）</p> <p><a href="https://crieit.now.sh/upload_images/cbe4c4b65476b6a84552bce4ea4da34f5eda1a8c5fd28.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/cbe4c4b65476b6a84552bce4ea4da34f5eda1a8c5fd28.png?mw=700" alt="画面" /></a></p> <p>フリーワードで楽曲を検索して、その楽曲にLikeやコメントをすることができます。</p> <p>現時点での機能は以下、</p> <h3 id="未ログイン時"><a href="#%E6%9C%AA%E3%83%AD%E3%82%B0%E3%82%A4%E3%83%B3%E6%99%82">未ログイン時</a></h3> <ul> <li>楽曲を検索、またはコメントがある楽曲リストを閲覧できる</li> <li>楽曲のコメントページを閲覧できる</li> <li>楽曲のプレビュー再生ができる（ファイルがあるもののみ）</li> <li>Spotifyで楽曲を聞くことができる（別タブでウェブ版を表示）</li> </ul> <h3 id="ログイン時"><a href="#%E3%83%AD%E3%82%B0%E3%82%A4%E3%83%B3%E6%99%82">ログイン時</a></h3> <p>上記に追加して、<br /> - 楽曲にコメントできる<br /> - 楽曲にLikeできる</p> <h4 id="動作ムービー"><a href="#%E5%8B%95%E4%BD%9C%E3%83%A0%E3%83%BC%E3%83%93%E3%83%BC">動作ムービー</a></h4> <p><a target="_blank" rel="nofollow noopener" href="https://youtu.be/sDVK6O61_S0">https://youtu.be/sDVK6O61_S0</a></p> <p>各楽曲、コメントごとのページをSNSにシェアすることも出来ます。</p> <p><a href="https://crieit.now.sh/upload_images/f3869d86a81591bf66abf5f407661d895eda1b78e57e3.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/f3869d86a81591bf66abf5f407661d895eda1b78e57e3.png?mw=700" alt="image" /></a><br /> <a target="_blank" rel="nofollow noopener" href="https://musi-co.fun/tracks/6K53GM9W6Vle5KBwGFVnZM">https://musi-co.fun/tracks/6K53GM9W6Vle5KBwGFVnZM</a></p> <p>開発時の様々や動機はなどは下記のハッカソンのボードに書きました。<br /> <a href="https://crieit.net/boards/web1week-202005/musico">https://crieit.net/boards/web1week-202005/musico</a></p> <h2 id="技術的なこと"><a href="#%E6%8A%80%E8%A1%93%E7%9A%84%E3%81%AA%E3%81%93%E3%81%A8">技術的なこと</a></h2> <p>技術スタック的にはFirebase+Vuejs（Nuxtjs）という、マネージドなサーバレス環境とコンポーネント思考なリアクティブフレームワークを組み合わせたJAMstackな流行りの構成です。</p> <p>最初はホスティングにNetlifyを選択したのですが、SSR周りやFirestoreなど他に使ってるサービスとの兼ね合いも考えて、Firebase全乗っかりな構成にしました。</p> <p>UIは最近良く使ってるBulmaのコンポーネントをほぼほぼそのまま使ってる感じです。</p> <p>本業ではAWSがっちり使って、コンテナとかサーバレスとかマネージドサービスを組み合わせたサーバサイド寄りの開発が多いので、個人開発ではフロントエンド寄りの技術を選定しがちですね（汗）</p> <p>あんまり凝ったことはしていないのですが、開発時に得た知見は今後すこしずつ書いていこうと思っています。</p> <p>それではまた。</p> <hr /> <h3 id="PS."><a href="#PS.">PS.</a></h3> <p>祝Crieit初投稿！！</p> ぷろみつ