UIT INSIDE

LINE UIT室の開発者による「最新のフロントエンド」をキャッチアップできる Podcast

  • オープニング
    00:00
  • 1. 泉水さん自己紹介
    00:46
  • 2. 2020年夏インターン
    01:17
  • 3. VISIONのプレイヤー改善の概要
    04:34
  • 4. 実装の詳細について
    07:48
  • 5. その他のフロントエンド活動
    22:00
  • 6. これからやりたいこと
    35:45
  • 7. クロージング
    41:00
  • HANATANI Takuma
  • Yuki Sensui
2020/10/09 に公開 211 views

このエピソードについて

@potato4d が夏インターン生の @g4rds に、インターンで行った、 LINE NEWS VISION の動画プレイヤーの改善について話を聞いてみました。

ゲスト紹介

  • @g4rds
    • 2020 年夏インターン
    • Front-End Dev 1 Team

LINE の 2020 年夏インターン

  • LINE NEWS チームに配属され、『VISION』の改善を行った
    • 動画サービスのシークバーの新規実装と改善
    • フロントエンドのインターンでは珍しい動画を中心とした開発
      • hls.js など

LINE NEWS 『VISION』の改善

  • LINE アプリのニュースタブを開けてしたにスクロールすると存在する VISION から遷移できる
    • この VISION 内は Vue.js ベースの SPA で作られている
    • NEWS のタブ自体は React 製
  • VISION は 3~4分程度の全画面動画が流れるメディア
    • 3~4分のそれなりのボリュームにも関わらず、以下の二つが存在しなかった
      • 動画の残り再生時間
      • シークバー
    • インターンではこれを実装した

image

  • touch イベントを元に動画を動かすだけのタスクに見えるが、細かな挙動が豊富に存在
    • touchstart/touchend で同じ値を video の currentTime に代入したときに動作が怪しくなる
    • シーク中のサムネイル画像がおいつかない
      • 低画質動画を別途用意することで解決
    • iOS 13 と、インターン中にリリースされた iOS 14 で動作に違いがある

その他のフロントエンド活動について

  • みんなで一つのコードベースを触って理解を深めるモブプログラミング
  • 議論しながらフロントエンドを改善する battle ground

Refs

10秒前へ 10秒次へ