ピックアップゲーム機能

ランダムで試合動画を表示する仕様でしたが、動画を見ていると「表示している動画と試合結果を連動したい」と思って、

• 乱数生成して試合IDを指定し、動画を表示
• 指定した試合IDでAPIから試合データを取得

componentDidMount(){
    let videos = []
    for(let key in youtubeConfig){
      videos.push(key)
    }
    let idx = Math.floor(Math.random()* (videos.length + 1))
    fetchPickUpGame(videos[idx])
    this.setState({
      game_id: videos[idx]
    })
    console.log(videos[idx],this.state.game_id)
  }

若干回りくどい実装のような気もします...。

試合結果詳細に試合動画を表示するようにしました。

最近の試合結果にチーム名を表示するようにしました。

元々SQLでチーム名を取得する仕様にはなっていなかったところを修正しました。久々にAPI側に手を入れました...。

SELECT 
    g.game_id,
    g.game_date,
    g.game_number,
    g.first_team,
    g.last_team,
    g.first_run,
    g.last_run,
    g.league_id,
    t1.short_name as first_team_name,
    t2.short_name as last_team_name
from game g
inner join league l
on g.league_id = l.id
inner join team t1
on g.first_team = t1.team_id
inner join team t2
on g.last_team = t2.team_id
where g.game_date>=? and g.game_date<=?
order by g.game_date desc

最新のスタッツへの直接アクセスが多い当サービスですが、トップページのコンテンツを充実させて刷新しました。

最近の試合結果リスト

直近の3試合を表示して試合結果詳細への導線をつけました。

API側変更

トップページにアクセスした際に「最新のスタッツ」APIを呼び出す仕様に変更し、APIで返す情報を増やす対応を行いました。

ピックアップ動画

youtubeに上げている試合動画をランダムで表示するように実装しました。

フロント側実装

試合IDとyoutubeの動画IDとの紐づけはソース上でこのようなプロパティを記述して直接更新しています。

export const youtubeConfig=
{
  //17-11-25
  "248":"1vBgiQhGW3E",
  "249":"hnF0JpGWzrk",
  "250":"QucROoxDudg",

一旦全てのキーを取得して配列に格納した後、Math.random()で乱数を生成して該当する配列のインデックスに格納されている動画を表示します。

スタッツサマリー

スタッツでTOP10を表示している項目を上位3人に絞って表示しています。
display:flexを駆使したのに文字の改行で項目の表示にずれが...orz
全部tableだと味気ないと思ったのですが。

作っているサービス

https://jcblscore-react.netlify.com/
ぜひ感想やご意見・フィードバックをお寄せください。

試合動画の埋め込み

コンテンツを活用したい

リーグのコンテンツとして試合動画を撮っているので上手く活用したいところです。

react-youtube

今回はreact-youtubeというパッケージを使っています。

データの紐付け

定石としてはDBにカラム作ってAPIで返すべきなのだとは思いますが、今回はjsonですらないです。

• jsonにはしたいけどコメント書きたい

ということで試合IDをキーとしてyoutubeの動画IDを格納するファイルを作りました。
DBに追加するのと手間は同じぐらいだと思います。

export const youtubeConfig =
{
  //日付などのコメント
  "試合ID":"youtube動画ID",
}

これをreact内のループでこう書いてやります。

import { youtubeConfig } from './youtubeConfig'
(中略)
<YouTube
 videoId={youtubeConfig[試合ID]}
/>

CSSでアスペクト比を維持する

個人開発でcalcを使ったのは初めてです。
業務でもそんなに使ったことはないのですが...。
ブラウザの幅に応じて動画の幅を拡大縮小し、高さをアスペクト比を維持するように変えてやります。

iframe{
    width: 90%;
    height: calc(90vw*9/16);
  }