Nuxt3で作ってみた! - Yo●Tube 動画ページ
前回のあらすじ
前回の記事では、YouTubeの動画詳細ページを作りました。 ・tileの使い方 ・各構造の見方
この部分を重点的に解説しました。
今回できるもの
今回はYouTubeのチャンネルページ(https://www.youtube.com/channel/●●●)を、Nuxt3で実装してみました。 この記事を見れば、 ・リンクによって内容が変わるページってどうなっているのか ・Webサイトのページがどんなふうにできるのか ・Htmlから作るのとNuxtでやる時の違い ・10分で1ページできてしまうぐらいのNuxt ✖️ Bulmaの相性の良さ ...etc を紹介できればなと思います!
phase.0 まずは構造理解
まず、このページはURLの「channel/●●●」の部分 https://www.youtube.com/channel/●●● でチャンネルが特定されます。なのでこの●の部分(チャンネルID)からデータを引き出し、その内容を表示してます。
さらに、 ・ヘッダー(サイドメニューも) ・背景画像 ・チャンネル情報 ・各タブ(ホームとか動画とか) ・いろんな動画の部分(タブで「動画」を選んだ時) に分かれています。
ヘッダー系は前回作ったのでそれを使い回せばOKです。 なのでそれ以外の4つの部分ごとにソースも含めて解説します。 ※BulmaとPugを使用しています。 ※サイドバーのサイズ判定忘れてました。。。
phase.1 背景とチャンネル情報
背景は、横いっぱいに出して縦で溢れた部分を隠しています。 チャンネル情報の部分は、横並びで ・チャンネルのプロフィール画像 ・名前などの情報 となっています。
ちなみに、今回の概要欄部分はクリックしても詳細がでません。 もし出すとしたら、クリック後にモーダルウィンドウ(上に浮かんでる部分)を開き、そこに情報を載せるといった流れになります。
figure.image.contentRounded#channelBackImg
img(:src="channelData.backImg" alt="Channel image")
.content-row-space-left-start.p-2.pt-5
figure.image.is-128x128
img(:src="channelData.thumbnail" alt="Channel image")
.has-text-left
p.title.m-0.p-2 {{ channelData.name }}
.content-row-space-left
p.subtitle.is-size-7.has-text-grey.m-0.p-1 @{{ channelData.accountID }}・チャンネル登録者数 {{ $common.millBillUnit(channelData.subscribers) }}人・{{ $common.millBillUnit(channelData.movies) }} 本の動画
.content-row-space-left
button.button.is-white.m-1.p-0
span.has-text-grey.is-size-7 概要欄
span.icon.has-text-grey
i.fas.fa-angle-right
button.button.is-black.is-rounded チャンネル登録
phase.2 各タブ(ホームとか動画とか)
タブ(ホームや動画など選べるやつ)は、0からデザインから作ることもできますが、bulmaの「tabs」を使うと一瞬でタブを作ることができます。 使い方は、親(一般的にはdivタグ)に「tabs」クラスをつけ、そのあとはulとli(リスト項目をするときに使うもの)で項目を作り、中身はaリンクで完成です。 また、選択中状態は「is-active」クラスをつけるとOKです。
↓今回はこんな感じで作りました。
.tabs
ul
li(:class="{'is-active':tabNo == 0}")
NuxtLink(@click="moveTag(0)") ホーム
li(:class="{'is-active':tabNo == 1}")
NuxtLink(@click="moveTag(1)") 動画
li(:class="{'is-active':tabNo == 2}")
NuxtLink(@click="moveTag(2)") ショート
li(:class="{'is-active':tabNo == 3}")
NuxtLink(@click="moveTag(3)") ライブ
li(:class="{'is-active':tabNo == 4}")
NuxtLink(@click="moveTag(4)") 再生リスト
li(:class="{'is-active':tabNo == 5}")
NuxtLink(@click="moveTag(5)") コミュニティ
phase.3 「動画」タブの画面
この画面はトップページと同じで、動画を3列で並ばせるだけです。 また、タブ選択を反映できるように、「動画」タブを選んだ際に表示されるようv-ifを使用しましょう。
ul.columns.is-multiline(v-if="tabNo == 1")
li.column.is-one-third(v-for="mv in recoMovieList")
MovieCard(:movie="mv")
phase.4 まとめ
今回はYouTubeのチャンネルページ解説しました。 他にも、Shortsなども作ってみる予定ですのでお楽しみに!
全体のソースはこちら! https://github.com/yamu-studio/Nuxt3-YouTube/tree/phase_1
