Nuxt3で作ってみた！ - Yo●Tube 動画ページ

前回のあらすじ

前回の記事では、YouTubeの動画詳細ページを作りました。 ・tileの使い方 ・各構造の見方

この部分を重点的に解説しました。

今回できるもの

今回はYouTubeのチャンネルページ(https://www.youtube.com/channel/●●●)を、Nuxt3で実装してみました。 この記事を見れば、 ・リンクによって内容が変わるページってどうなっているのか ・Webサイトのページがどんなふうにできるのか ・Htmlから作るのとNuxtでやる時の違い ・10分で１ページできてしまうぐらいのNuxt ✖️ Bulmaの相性の良さ ...etc を紹介できればなと思います！

phase.0 まずは構造理解

まず、このページはURLの「channel/●●●」の部分 https://www.youtube.com/channel/●●● でチャンネルが特定されます。なのでこの●の部分(チャンネルID)からデータを引き出し、その内容を表示してます。

さらに、 ・ヘッダー(サイドメニューも) ・背景画像 ・チャンネル情報 ・各タブ（ホームとか動画とか） ・いろんな動画の部分（タブで「動画」を選んだ時） に分かれています。

ヘッダー系は前回作ったのでそれを使い回せばOKです。 なのでそれ以外の４つの部分ごとにソースも含めて解説します。 ※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