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