ep.63 よりよい動画閲覧体験を求めて - LINE NEWS の夏インターン 2020 | UIT INSIDE

2020/10/09 に公開1041 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分のそれなりのボリュームにも関わらず、以下の二つが存在しなかった
  - 動画の残り再生時間
  - シークバー
- インターンではこれを実装した

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

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

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

Refs

フロントエンドエンジニア / フロントエンド開発センター| 求人詳細 | LINE株式会社
- https://linecorp.com/ja/career/position/475
BGM&SE
- 魔王魂/騒音のない世界/OtoLogic

採用について

使用素材・クレジット

BGM&SE

音声書き起こし

1. オープニング 00:00

Guest 00:00
こんにちは

Guest 00:01
こんにちは

Guest 00:02
今週もいいテインサイド始めたいと思います。いいテインサイドは、ユーザーインターフェイスと、テクノロジーを愛する開発者のためのオトキャストです。

Guest 00:11
最新のウェブ表示の動向や開発、フレームワークの変遷、またまたurやuxに関することまで、毎週フロントエンドの情報を発信していくことを目的

Guest 00:21
としております。ハッシュタグはシャープ、UIT、アンダースコアインサイド。え、ご意見やご感想はいつでもお待ちしております。え、お気軽についていただければと思います。

Guest 00:30
そして、今回はですね、ゲストにですね。2020年夏インターンのえ、潜水さんを招待してですね。え、インターンでLINEニュースで行った開発について話を聞いていきたいと思っておりますし、水さんよろしくお願いいたします

Guest 00:42
よろしくお願いします。

2. 泉水さん自己紹介 00:46

Guest 00:46
今回、セスさんがえ、ポッドキャスト初出演ということでしてえ、初めに簡単に自己紹介をいただきたいと思っております。セスさん、自己紹介をお願いしてもよろしいでしょうか。

Guest 00:56
はい、ありがとうございますえ、LINEUITのデブアンチームに所属しています。センスゆきと申します。

Guest 01:04
8月末から6週間インターン制として、LINEnewsのフロントエンドを開発しています、よろしくお願いします

Guest 01:13
はい、よろしくお願いいたします。今回のポイントキャストですけど、も。せっかくインターンの。6週目ラストっていうところなので、

3. 2020年夏インターン 01:17

Guest 01:22
インターンでやったことを聞きたいなと思って、ええと、今回の場を設けさしてもらいました。まず、初めにですね、インターンで、こんなことをやりました。って話をちょっとえ教えいただいてもよろしいでしょうか。

Guest 01:33
はい、僕はこのインターンで、LINEnewsの中にビジョンというコンテンツがあるんですけれど、

Guest 01:41
あのビジョンは動画のコンテンツで動画こう。僕は今回作ったものはえ、ビジョンの動画プレーヤーにシーバを実装するという

Guest 01:51
ものをはい、開発してきました。なるほど、なるほど、

Guest 01:55
じゃあ、ほんとに動画関連のコードを書いていたみたいな感じなんですかね。

Guest 01:59
そうですね、ビュージの関連のコードが基本で、それに、hmlのビデオタグを操作するような

Guest 02:08
形で。はい、実装してきました。なるほど、なるほどな、

Guest 02:11
やっぱり、フロントエンドのインターンっていうと、例えば、リアクトとか、ビルとかのおっきな設計を見てみたいとか、なんか、チーム開発をしてみたいもみたいなモチベーションで来る人が、やっぱり多いかなって印象が私の中であるんですけど、

Guest 02:23
あえて動画選んだところとかって、なんかあったりするんですかね。

Guest 02:27
そうですね、

Guest 02:29
メンタさんにご提示いただいたタスクが5個ほどあったんですけれど、あ、そう結構あったんで、そうなんかこう色んなものが使われそうだったんですけれど、その中で1番

Guest 02:42
面白そうだなっていうのが、ビジョンのシーク版のジーソのものでした。はいで、

Guest 02:49
そうですね、で、今まで動画関係って僕ずっと触ってきてなかったので、はい、挑戦できるなというところでビジョンを選びました。

Guest 02:58
なかなか面白いですね、あの4つはどういったのがあったんですか。

Guest 03:03
そうですね、まずニュースってこう、リアクトのところと、ビューのところで分かれていて、はい

Guest 03:11
で、リア友2個くらいビーもま23個くらいそれぞれあったんですけれど、ま、なんかリア友はこうも改善タスク

Guest 03:20
が結構多めで。うん、うん、うん、ビューの方にこう大きめなタスクがあったんですね。はいで、それがまさにビジョンで

Guest 03:29
ビジョンが1番面白そうな大きいそうちょうどこう、タスクの大きさ、

Guest 03:35
ちょうどよさそうだったっていうところですかね。はい、はい、

Guest 03:38
なるほど、なるほど、じゃあ、改善系のリアクトの実装系のタスクとフィーチャー、実装系の

Guest 03:44
ビューもタスクがあって、まひフィーチャー実装系の方が今回面白そうだなっていうので、動画に挑戦してみたっていうところですかね。

Guest 03:52
なんか、インターの中で1つまとまったものの、実装っていうところ、プラス挑戦が入る動画っていう領域はかなり面白い選定ですよね。

Guest 04:00
ほんとですよね、もうなんかこうぴったし、インターンにぴったりな感じでこう。そうですね、やっぱ機能実装してみたかったというのが

Guest 04:10
元々ありましたので、こうユーザーさんが直接触るようなもの

Guest 04:16
をちょっと作ってみたいなというところで、ビジョンは僕にちょっとちょうどよかったのかなと思って。はい、選びました。

Guest 04:22
いいっすね、ちょっと私も動画については全然詳しくないんで、詳細が気になるところなんで、ちょっと。そこについて、次のエイジェプターから聞いていければと思います。

Guest 04:33
ではですねえ、今話に上がったえ、ビジョンの実際のプレイヤーの改善の作業について、詳しく聞いていきたいと思うんですけど、シークバーの実装っていう話が

4. VISIONのプレイヤー改善の概要 04:34

Guest 04:44
やられました。けれども、なんか詳細について教えていただいてもよろしいですか。

Guest 04:48
はい、ビジョンはこのLINEを開いていただいて、下のナビゲーションから、newsでLINEnewsが開けるんですけれど、

Guest 04:58
ちょっと下の方にスクロールしていただくと、ビジョンと書かれたこの動画のカルーセルが出てくると思うんですね。

Guest 05:04
はい、

Guest 05:05
で、これ動画なんでもいいので、タップしていただくと、その動画の詳細が、この別のwebビで開くんですけれど、この動画プレーヤー

Guest 05:15
が、元々はこの上部にプログレスバーが出てるだけで、こうユーザーはこう飼育ができなかったんですね、

Guest 05:23
はいはいはい、

Guest 05:25
この上部のプログレス上部にあったプロプログレスバーをこの画面の下、今出てるシークバーの方に移してきて、

Guest 05:34
ユーザーがこう好きに飼育できるようにするという機能を実装しました。ほ

Guest 05:41
てことは、初めはあれなんですね、そのまただ再生されるだけと言いますか。その見るしかできなかったのは、ある程度コントロールな

Guest 05:50
再生のコントロールができるようになったって感じですかね。

Guest 05:53
そうですね、元もほんとにもう今どこにいるのかというか、もう全体で何分あるの。みたいなところも分かってなかったんですね。

Guest 06:02
はいはいはいはい

Guest 06:03
なので、まなんか動画によってはこう右下のところに残り時間を出したりとか。なんか、動画の方で工夫されてたんですけれど、そこのところをシーバを実装するにあたってこう。今の残り時間は、あと何分なのかっていうのを表示したりとか、

Guest 06:17
そういったこうuxの改善を中心にはい、やってきました。

Guest 06:21
おおかなりいいですね、その動画がが頑張るっていうのは、なかなかこうおかしなところでもあったとは思うんで。

Guest 06:28
確かに

Guest 06:29
そこに回線ができるってのは、この面白いところではありますね。

Guest 06:34
例えば、他のサービスとかだと、ユーザーも普通に飼育できるので、ユーザーをもう飼育できるように慣れてる人が多いと思うんですね。

Guest 06:42
でも、逆に飼育できないのってこう、ショートムービーみたいな。15秒とか、30秒とか、短めなさらっと見れるものだったらしい。はいはい

Guest 06:51
しなくていいと思うんですけれど、ビジョンって結構2、3分の動画とかが多いので、ま。飼育できるようになるっていうのは、すごく大きな

Guest 07:01
変更なのかなと思います。

Guest 07:03
確かに、確かにサービスも普通の動画サービスとかだとま飼育できることが前提で、割とストーリーよりなもの、あの、10秒程度の

Guest 07:12
多くの動画が切り替わるようなところっていうのは、まあシがない場合も多いかなと思いますけど、ビジョンはu愛的にはかなりこう。ストーリー的な

Guest 07:21
ものを意識して作られてそうな祝いをしているけれども、実際、同化自体は長いっていうところが

Guest 07:26
そうなんですよね、なんか、初めの頃は短かったんですかね、ちょっと僕わからないけど、今は結構長めになっちゃって。

Guest 07:34
はいはいはい、なるほど、なるほど、確かにそこの差をうまく吸収してとして、より使いやすいものにするってのはなかなか面白そう。

Guest 07:43
うん、なんか、

Guest 07:46
実装についても聞きたいんですけど、聞いてもいいです。

5. 実装の詳細について 07:48

Guest 07:48
ビジョンのこの動画ページは、このhmlのビデオタグに直接動画を埋め込んでるんですけれど、

Guest 07:57
あ、そうなんですね、

Guest 07:58
でも、あのストリーミングしなきゃいけないというところで、hlsjsというライブラリーがありまして。はい、それを使って、

Guest 08:07
このビデオタクに動画を流し込んでいるみたいな感じになってます。で、

Guest 08:12
iosはこのhlsっていう仕組みがデポルトで実装されていて、hlcsは対応してないので、このまた、iosは別の

Guest 08:22
実装みたいな感じになってるのがちょっとややこしいところなんですけれど、なるほどですね。そんな感じで、はい、hlsという

Guest 08:30
こうストリーミング再生がされてます。

Guest 08:33
なるほど、なるほど、

Guest 08:35
iosの場合は、そのままネイティブの再生を行って、androidとかの場合は、え、hlssを返して動画を提供してるみたいな。

Guest 08:43
そうですね。なので、マウントのところとかでこうhlghlsjsが対応してるかっていう分岐をして

Guest 08:51
ま。hlsjか対応してるんだったら、インスタンス作って。なので、ちゃんとアンマウントする時は、みたいな

Guest 08:57
が必要になったりとかして、結構そこら辺は複雑でした。はい、

Guest 09:03
今回の場合、飼育とかするってことは、今動いてるビデオに対してのあの操作を行うと思うんですけど、なんか、再生時間ずらしたりとかはいいうのをすると思うんですけど、そこって

Guest 09:12
hlsj使ってる場合と、使ってない場合で、操作のインターフェースはまた違ったりするんですかね。

Guest 09:18
いや、それは全く一緒で、この英標準のビデオタグから、エエメディアエレメントっていうエレメントが取れるんですけれど、そこにカレントタイムっていうプロパティーがあって、うんうん。それを更新してあげることで、もう後は勝手に

Guest 09:32
あのブラウザー側で飼育してくれるという

Guest 09:34
感じなので、はい、シークバーが操作されたら、その位置に応じて、カトタイムを更新していくというのが、基本の作業になります。

Guest 09:42
なるほど、なるほど、ということは、hlsjを使っていいのも使ってなくても、最終的にはネイティブの。イメルビデオエレメントへの操作で全部行うことができるっていう感じはいですね。

Guest 09:56
じゃあ、そこにおいてま。これはhlsjsだから、こういう行動を書いてみたいなのは、え、さすがに必要ではないっていうところ。

Guest 10:02
そうですね、幸いにも、飼育の機能のところは、hlsをこうなんか意識することはなかったです。なるほど、はい、

Guest 10:09
それまで意識しないといけなかったら、結構その手元で検証するのも大変ですし、実装も大変ですよね。

Guest 10:16
ほんと、結構それだと地獄ですよね。こう手元にし、iosシミュレーターの他に、androidのシミュレーターもよかないといけない、

Guest 10:26
なかなかそれは大変

Guest 10:28
ささ、ちょっと、LINEnewsのデバックってこう。はいはい、あの、LINEアプリのwebビューで動くので、こうできるだけこう。実際に動かされるような環境に近づけるために、iosシミュレーター

Guest 10:41
で動かしてデバックしてるんですね。あので、

Guest 10:45
はい、そのチャールズっていうソフト使って、プロ棋士して、ローカルでビルドしたファイルに置換して、はいはい、iysシミュレーターの中で

Guest 10:54
実行してで、サファリでベブビューとってこれるので、デバックしてみたいなあ、感じの。なので、

Guest 11:00
これがもしandroidもってことになったら、ちょっと大変なことに。そうですよ。本来だったら、ブラウザで見ればいいものっていう感じですかね。

Guest 11:09
ていうか、そもそも、開発の時からちゃんとできるだけほん、実際の環境に近づけて開発してやっていってるっていうところ。

Guest 11:16
そうですね、LINEnewsの皆さんは、そのようにやってるそうです。

Guest 11:20
なるほど、なるほど、ありがとうございます。はい、

Guest 11:24
じゃあ、割とこう実装に関しては、ちょっとそのデバイスサイとかあると、まあ、ライブライトとかの力もあって、スムーズに進んだ感じですかね。全体としては、

Guest 11:33
僕も初めはそう思ってたんですよ。なんか、ビデオビデオがあるから、簡単に行けるんじゃないかなと思ってたんですよね。カレントタイムを更新すれば、

Guest 11:43
勝手に行くかなと思ってたんですけど、実際は意外とそうじゃなくて、

Guest 11:48
ほう、どんなハマりがあったんですか。

Guest 11:51
なんか、いろんなハマりがあったんですけど、結構1番苦戦したのは、このios13とか、

Guest 11:59
ios14でしか発生しないバグ

Guest 12:01
っていうのが、こう吸への段階で上がってきて、はいはい、僕がシミュレーターで試している段階だと、発生していなかった

Guest 12:10
時期でしか発生しないようなバグとかがちょこちょこ出てきたりして、これが僕の実装が悪いのか、

Guest 12:16
それともiosのサパリのバグなのか、みたいなところで。はい、結構苦戦したんですけれど、

Guest 12:23
そうですね、その辺で面白かったのは、このあいシーバーを実装する時に、このタッチイベントでタッチイベントで

Guest 12:34
取り出してるんですけれど、このタッチイベントって、タッチスタートとタッチム部とタッチエンドがあると思うですけど、はい

Guest 12:43
で、それのカレントタイムを更新するタイミングを、タッチスタートと、タッチエンド両方でやってるんです。はい、なので、タップで

Guest 12:52
飼育しようとした時に、同じ値がタッチスタートとタッチエンドで発生するんですけれど、その両方のイベントの中でカレントタイム両方更新していたら、

Guest 13:02
ios13の時期だけ、なぜかロールバックするみたいな、

Guest 13:07
ロールバックス。そうなんすよこが起きちゃって、その一瞬なぜかそっちに飼育するんですけど、また一瞬で元の位置に戻ってきちゃうみたいな。バグが発生して、

Guest 13:18
それがios13の時期でしか発生しないっていうおqaさんから上がってきたバグ報告で、これにはちょっと苦戦しました。

Guest 13:27
いや、

Guest 13:30
そうなんですよね、これは多分おそらくサファリのバグだと思うんですけれど、しかも今はリモートでこう皆さん、

Guest 13:39
自宅で作業されてるじゃないですか、なので、こう実気でしか再現しないバグって、すごくデバッグ大変じゃないですか。あ、

Guest 13:47
そうですよね、なんか、手元に端末あるないって話からまず始まります。

Guest 13:51
本当そうなんですよね、うん、

Guest 13:52
もしあ、僕はその時ちょうど出社できるタイミングだったので、2泊3日でインターンシップでんインターンシップの期間、2泊3日で、ラインのえ、オフィスに出社できるというタイミングがあったんですけれど、

Guest 14:05
ちょうどその時に旧泳の期間がかぶっていて、ちょうどそこで、旧aさんからバグが報告が上がってきたような形で。

Guest 14:14
なので、UITで所有している。あの、テスト用のえ、懸賞金を使って、デバができたので、

Guest 14:22
幸いにもすぐに修正することができたんですけれど、

Guest 14:25
これがもう充電タイミングが

Guest 14:27
ほんとにほんとにそうですね。ちょっとでもずれてたら、きえさんにコンソール何出てますか。みたいなこと聞かなといけないところでした。

Guest 14:37
いや、そうでないのはかなりまあ、安心というかでしたね、

Guest 14:42
いやなことそういうのもあるんですね、そうか、ちょうど今開発の時期がios14が出る時期でもあるっていうとこですもんね、

Guest 14:52
はい、急え急駅間の途中で、ios14がリリースされたんですね。うん、うん、うん。なので、この

Guest 14:59
え。LINEnewsはこう、アルファaとbqaで分かれてるんですけれど、2段階で分かれてたんですけれど、アルファqaの段階だと、ios14のデバックがなかった

Guest 15:09
ですけれど、ベーqaでは、ios14でもデバックしていたんですね。はいはいはいで、

Guest 15:15
まさかのそのios14でしか再現しないバグっていうのもあって、なるほど、これはちょっと。

Guest 15:22
多分、ios14のバグだと思うんですけど、これもまた似たようなこうなんかいこれはあれですね。

Guest 15:28
イベントが発火しないみたいな特定条件下で、本来他のブラウザでは発火しているのに、なぜかこれだけ発火しないっていうものがあって、それにちょっと依存していた処理が

Guest 15:40
うまく動かずにっていうバグが1つありまして、それにもなかなか苦戦させられました。

Guest 15:47
最終的には、どういう解決をとったんですか。

Guest 15:50
のシークをシーバーを操作した時に、この話した時に、

Guest 15:54
あ、はい

Guest 15:55
違う。その前に今日その前に1つちょっと面白い話があって、

Guest 16:00
はい、

Guest 16:01
あの、シーバーを操作してる時に、こうyoutubeとかって、サムネイルがぴょこって出てきたりするじゃないですか、どの位置に飼育したいのかっていうのを、

Guest 16:10
このユーザーに提示しなきゃいけないっていう仕様も、企画さんから上がっていまして。はいで、それを実装するのに、このビデオ

Guest 16:20
のカレントタインもどんどん更新していけば、画面も切り替わるだろうって思ってたんですけれど、これがなかなか飼育に時間がかかるようで、

Guest 16:28
ああ、全然表示が更新追いついてなかったんですね、はいはい。なので、それの表示をできるだけ早くするために、

Guest 16:36
裏で低画質の動画を読み込んでおいて、はい、シークバーを操作してる間は、その低画質の動画を前面に表示して、ああ、なるほど、

Guest 16:46
はい、低画質なので、飼育はそこそこ早めなのでっていうことでやってて、

Guest 16:52
そうですね。この僕の6週間という期間では、このサムネイルを用意しておいて、みたいな切り替えてみたいなことがフロントだけできないので、

Guest 17:02
とりあえず、その低画質動画を裏で読み込んでおいてっていう方法で実装しました。いや、それな

Guest 17:09
ことかなり考えましたね、確かにそれなら

Guest 17:14
そうですね、これはほんとになかなかおUITのメンバーと

Guest 17:19
かなり競技を重ねてま。これで行くしかないんじゃないか。みたいな感じで。はい、そのそのまま実装したんですけれど、ですね。で、

Guest 17:28
さっきのios14のバグなんですけれど、はい、シーバを

Guest 17:33
操作して話した時に、その前面に出しておいた低画質の動画を表示にしなきゃいけないんですね。

Guest 17:39
あ、はいはいはい、そうですよね、

Guest 17:40
で、それをすいません。んで、それをシークバーシー処理が発生し

Guest 17:48
た後に、飼育が完了したっていうイベントがま。本来はないんですけど、キャンプレイスルーっていうイベントがあって、それは飼ー操作

Guest 17:58
を行った後に、なぜか必ず発火していたんですね。なので、このキャンプレイスルーっていうイベントで、低画質動画を消すっていう処理を加えていたんですけれど、

Guest 18:08
はい、ios14からそのキャンプレイスルーが

Guest 18:11
すでに読み込まれている場所に飼育した時は発火しなくなっていまして、あ、はいはいはい、そのせいでずっと低画質動画が

Guest 18:19
表示され続けてしまうみたいなバグがありまして。はいで、そのキャンプレイスルーを

Guest 18:26
やめると、そのキャンプレースルーのイベントで表示していたのには理由があって、あの飼育完了したら、

Guest 18:34
シークドっていうイベントがあるんですけれど、シークドイベントが発火した段階だと、まだ画面の表示が更新されていなくて、

Guest 18:44
元々の位置の画面が表示されたままなんですね。なので、シードイベントの時に低画質動画を表示してしまうと、

Guest 18:54
この高画質動画は飼育に時間がかかるので、まだ画面の表示が更新されていない

Guest 18:59
ので、画面がパパパってちちしちゃうんですね。なので、ちょっと送らせて、で、そのキャンプレイスルイベントで

Guest 19:07
表示にすると、うまくいっていたっていうものなんですけれど、これをシークドイベントに戻さざるを得なかったので、戻し

Guest 19:16
てしまったというところですね。これ、ちょっとすごくあの、

Guest 19:21
そうですね、この辺ちょっとどうすべきか悩んだんですけれど、まこれしかないんじゃないかというところで、

Guest 19:28
まどのデバイスでも表示されることを大優先にしていく

Guest 19:31
そうですね。is14だけセットタイムアウトするのは、ちょっと。他のバグが大きそうなので、諦めたという形で。

Guest 19:39
いや、なかなか難しいですね。はい、そのキャンプレイするの挙動はどっちが正しいんですかね。13のものが正しいんですかね。

Guest 19:49
そうですね、キャンプレイスルー僕、ちょっとmdn見た限りなので、まだ使用は終えてないので、よく理解はしてないんですけれど、キャンプレイスルーは、こう。

Guest 19:59
mdnによると、この動画が最後まで動画がある程度のところまで

Guest 20:05
再生し続けられるほどのバッファを持てたっていううん、うん、うん、そのイベントなんですね。はい。なので、

Guest 20:12
本来はしすでに読み込まれているところに飼育した時にま発火すべきか、発火すべきかじゃないかっていうのは

Guest 20:21
ま、どちらでもいいのかなっていうところはあるので、はい、発火しなくても、まあ本来のこの塩分からないですけれど、

Guest 20:29
文だけを見るとま、確かにそれも理解できると

Guest 20:32
確かにそうですね。あの0からまあその読めるじょよ。状態になったものをキャンプレイすると定義するか、今の位置から見て再生可能かどうかっていうだけを判断するかによって、確かに

Guest 20:44
解釈が変わるところでは

Guest 20:45
そうです。そうです。そうですね、

Guest 20:47
うん、うん、そうなんですよね、なので、ま、キャンプレーするにこのまま依存し続けるのも、まあ、正直不安ではあったので、

Guest 20:56
本来はシークドでちゃんとやるべきなのかな、というところありますね。はい、

Guest 21:00
なるほど、なるほど、いや、なかなか難しいところではありますね。

Guest 21:05
かなり詰まってしまいましたね、その辺でもっといいやり方があったのかもしれないなと。今までも不安なんですけれど、はい、

Guest 21:12
どうなんでしょうね。いや、なかなかこういった動画とかま、そういったブライザのネイティブ機能も、がっつり使わざるを得ないところっていうのは、

Guest 21:19
何が最適。解か、なかなか分かりづらいところでもあるんで、ちょっと。もしかしたら、なんか後からこういったのものに、詳しいメンバーとかが、なんかコントレートしてくれるとかもしれないですね。しない

Guest 21:32
ですね、それは最高ですね、もう、なんかこう。他のプロダクトで、動画プレイヤーとか触ってらっしゃる方がいたら、

Guest 21:40
確かにそうですね、最近、ライブとかもアップデートしたみたいですし、なんか、ライブのメンバーとかに聞いてみてるとかも面白いかもしれないっすね。

Guest 21:47
そうですね、もっとビジョンはこれから改善できるところはある。伸びしろがあるところだと思うので、

Guest 21:54
それこそ飼育中のプレビューもそうですし、これから改善どんどん加えられていければなと思います。

6. その他のフロントエンド活動 22:00

Guest 22:02
ありがとうございますえ、ビジョンのえ、シークバージストについて話を聞いていったと思うんですけど、かなりここの部分も面白い。コンテンツだったかなと思いますけど、

Guest 22:12
なんか一方でいわゆるフロントエンドらしいと、リアクトとかビーみたいな。いわゆるフレームワーク的な話とか、設計の話とかって、なんか印象深いのとかってあったのかなとか思ってあったら、そっちも聞きたいなと思うんですけど、

Guest 22:23
なんかありますかね。

Guest 22:25
はい、

Guest 22:25
LINEnewsのUITチームでこう。週1で2つくらいイベントを行っていて、1つはバトルグラウンドという

Guest 22:35
こうま、何か開発関連で業務改善できることはないかみたいなのを、こう気付いた時に、スラックで

Guest 22:44
投稿していくっていうのが文化があるんです。けれど、その時にいくつか、ちょっと議論議題をちょっと挙げさせていただいたものがあります。

Guest 22:53
で、そこはすごく面白かったです。なんか、皆さんの意見をこう聞けてこう。バトルグラウンドなので、戦いながらというか、

Guest 23:02
なるほど、

Guest 23:03
そんな感じでこう意見をぶつけ合いながらどっちがいいのかみたい、もっといい、あんりん、もっともっといいものはないのか。みたいなところで、

Guest 23:13
この週1でズームで会議をしていくっていうのがあります。はい

Guest 23:18
はいほど結構面白いですね、その中で、潜水さんはどういったものをあげたんですかね。

Guest 23:23
そうですね、1つはcrm

Guest 23:29
1つはですね。このLINEのnewsLINEnewsのデバッグを、この今までiosシミュレーターでやってきていたんですけれどは、い

Guest 23:37
ま、やっぱりatとかビューのデブツールスを使いたいなっていうのがあって、クロムでどうにかデバックできないのかっていうのを、ちょっと

Guest 23:45
バドルグラウンドで上げました。で、はいはいはい、その辺をちょっとバトルグラウンドので、皆さんに聞いたところ、どうやら。あの

Guest 23:55
サファリでコンソルログん、コンソサファリのコンソールで、ロケーションのhfを見て、クロムに入れれば、

Guest 24:02
とりあえず見れそうだということで見に行ったんですけれど、どうもそのビューとんビューのランタイムがえ、プロダクションビルド

Guest 24:12
されてるようで、はいはいはい、デブルスがま使えないっていうところで、それのビルドを変えなきゃいけなかったんですね。

Guest 24:21
で、それのビルドをするのに、ウェブパックのコードを変えてで、さらに

Guest 24:29
あのurlはこのサーバー取ってきているので、その実際の向こうサーバー上にあるファイルを参照しているので。

Guest 24:38
チャールズでプロキシして、ローカルのやつに移さないといけないので、そのビジョンのコードとビューのランタイムのコードがスプリットされていて、

Guest 24:49
それも一緒に変えなきゃいけないっていうところで。そうですね。スペの置換する処理の今までの手順を引にまとめたりとか、

Guest 24:58
そういったことをはいしました。

Guest 25:00
ああ、なるほどなるほど、いや、結構開発体験をあげるみたいなのも、そういったこうフラッとすスラックに書いた内容から進んでいったみたいな。

Guest 25:09
そうですね、はい、デブツールスなかったら、ちょっと僕、ビジョンのバグ直せなかったところ、

Guest 25:17
もしくは超大変だったところもあるので。そうですね。1つはなんかこうイベントが大量に発火しているので、パフォーマンス悪いみたいなのも、デブツールスがあって、

Guest 25:27
気付けたので。

Guest 25:28
あ、そうっすよね、うん、うん、うん

Guest 25:30
よかな。確かに

Guest 25:33
そうするだけならこう最悪。例えば、状態をコンスで出したらいいじゃんとかなるかもしれないですけど、パフォーマンスとかってなってくると、そういうのではできない領域なんで。

Guest 25:42
そうですね。しかも、ライブラリーの方で、大量にイベントが落ちていたというもので。

Guest 25:48
ま、結果的には、バージョンが古かったっていうのが理由だったんですけど、うん、はい、ちょっとそれやっぱデブツールスあるとこう。もっとキズ早く

Guest 25:56
気付けるので、デブツールスはやっぱ積極的に使っていきたいな。そう

Guest 26:00
ですね、思いますもう1つははい

Guest 26:04
で、もう1つの方は、

Guest 26:07
ライニュースは先ほどリアクトとビューで分かれていると言ったんですけれど、そのリポートが違って、さらにそれで古さも違ったんですね。で、ビューの方は古い方で、

Guest 26:19
リントがこうciで落としてなくて、このりイエリントに引っかかったら、ci無理です。みたいなことが行ってなくて、

Guest 26:28
その結構リントのエラーが放置されていたんですね。はいはいはい

Guest 26:33
で、ビジョンもそこそこま古めなところで、リントエラーが幾つか放置されていたので、このビジョンをせっかく新しい機能を追加するので、

Guest 26:43
そのせっかくだから、イエスリント系のエラーとか、プリティア系のフォーマットエラーとかは、もう全部直しちゃうということで、

Guest 26:51
ちょっと整理していました。で、その中でビューxのミューテーションが、この

Guest 26:59
引数で受け取ったステートを直接変更するスタイルで、そこがイエスリントが起こっていたんですね。引数で

Guest 27:06
受け取ったものを直接変更しないでみたいな選で。じゃ、これをどうしようかっていう悩んだところで、ビジョンだけ直すんだったら、とりあえずまファイルバイトで、

Guest 27:17
ルールを向こうがすればいいかなというところなんですけれど、まあせっかくなのでまあプロジェディン、

Guest 27:24
リポストリー全体で無効化すべきなのかなというところ、

Guest 27:29
今後bx使うところ、時にまたエラーが発生してイルで消してみたいなことはちょっとやりたくないな、というところで、バトルグラウンドで、

Guest 27:39
皆さんに疑問を投げてみたんですけれど、結果的にはですね。

Guest 27:45
と、その仮引き数名がステートっていう名前だったら、

Guest 27:49
無効化するっていうesリントの無効化ルールがあったので、それを利用しようということになりました。

Guest 27:58
はいはい、ああ、なるほど、1番合理的な感じがしますね。

Guest 28:03
そうですね、これ、本来普通のビューとかのプロジェクトもそんな感じで無効化してるんでしょう。

Guest 28:08
そうですね、基本的にどうしてもビーxのミューテーションっていうのは、その

Guest 28:12
あのステート直接書き換える必要が出てくるところなんで、まあそこは仕方ないかなと思いますね。うん、なんかpxがそういうものであるからっていうのが

Guest 28:23
もう

Guest 28:24
仕方ないところなのかなとは思います。うんですけど、まあその今の話みたいにそのファイル単位でえ。無効化してしまうか、なんか、あるいは

Guest 28:33
その全体をオフにするかって話になると、結構全体オフにしちゃうと、結局他のところの安全性が守られないっていうところがあるかなと思うので、まあ、1番楽に解決するのはファイル単位の話かなとは思いますけど、

Guest 28:45
なんか、1番そのステートの場合だけ無効化するっていうのは、かなりその販売としてはいい感じがしますね。

Guest 28:52
そうですね、なかなかスペートっていう引き数って、他のところでは

Guest 28:55
ちょ、むしろ使っちゃいけないようなそうであるのではい、うん、うん、そうですね。なので、ま、ステートっていう変数名だったら、向こうでいいんじゃないか、という議論に落ち着きました、

Guest 29:06
結構いい気がします。

Guest 29:07
バトルグランドの他に、あのもう1個モブプロってのがあるので、ちょっとそれをまたお話したい。

Guest 29:14
あの、ぜひぜひあ、

Guest 29:16
もうもうちょっとバトルグラウンドで取るところありましたら、

Guest 29:21
いや、一旦もうま、これ今のでいっちゃって

Guest 29:23
わかりました。はい、じゃあどうぞ。あと、もう1つなんですけれど、あの、LINEnewsのUITチームでやってる、

Guest 29:31
週1でやってるイベントで、モブロっていうものがあって、ニュースチームで。

Guest 29:39
例えば、なんか1つのことをこう誰かが代表して、画面共有とか。あと、vsコードのシェアリングの機能を使って、

Guest 29:47
一緒に全員で1つの画面見ながら、コーディングしようっていうのがありまして。はいはい、そこで、僕がインターンに参加してからしばらくやっていたのが、リアクトのテストを書こうっていう

Guest 29:59
ものがあります。

Guest 30:00

Guest 30:02
ラニュースのリアクトの方は、あ、これから新しく作るものは、ファンクショナル、コンポーネントで、ちゃんとテストも書くっていうのがルールで決まっているんですけれど、

Guest 30:12
そのなかなかテストの書くっていう経験が浅い。メンバーもいらっしゃるので、この学んでいこうっていうので、

Guest 30:20
モブブロモブプロっていうイベントがはいありました。で、これがすごく面白くて、例えば、それ

Guest 30:28
と、テストとかの議論だけじゃなくて、僕の今つか作ってるビジョンのシークバーで、ここで詰まっているんですけれど、

Guest 30:36
こうちょっと皆さんでどうにか見てもらえませんか。みたいな、そういった投げ方をもってきて、その時に僕の

Guest 30:46
ま、これは先ほど言ったバグとは違う。また、バグがあって、それちょっと皆さんで1時間くらい。皆さんで、ちょっと調べていただいたりとか

Guest 30:55
もして、なんとか。はい、1時間足らずで解決に持ち込めたので、モブプロっていうこのイベントはすごくいいなと思いました。

Guest 31:07
みんなでこう集まって、1つの行動を触るっていう機会もあったりしたっていうとこですかね。

Guest 31:13
そうですね、やっぱリモートでなかなかそういうところって難しいのかなと思いますので。モブプロをこう週1で設けてで、しかも、

Guest 31:21
ちょうどvsコードのシェアリング機能も、シェア。はい、面白かったです。

Guest 31:28
ちょっと、今のリアクトのテストのところについて、単純に興味があるんで、聞きたいんですけど、はい、多分LINEnewsの行動って、そこそこまあ前からある。

Guest 31:36
コードベースだと思ってて、なんかそうなってると、テスティングライブも過去に入れようとした形跡とかあるのかなとかって思って気になったん

Guest 31:44
ですけど、なんか、今って、リアクトのテスティングライブラリーって、まあ、そのリアクトのそのそちょ名前、直球のそのリアクトティスティングライブラリーってやつと、昔からあるあの、エアビーのエンザイムがあると思うんですけど、なんか元々エンザイムが入ってたとかってあるんですかね、

Guest 31:59
どうなんでしょう、ちょっと元々が分からないんですけど、今使ってるのはエンザイムでエンザの方。はい、エンザも入れてて

Guest 32:07
そうですね。今、新しく作るものは、エンザイムのコードをちゃんと書いていこうっていう流れですね。なるほど、

Guest 32:14
ちなみに、そのテストを書くって、なんかテスト書くのって2つあるかなと思ってて、いわゆるテストファーストの

Guest 32:19
その期待する振る舞いを先に書いた後に、ロジック書くっていうパターンと、まあ、普通に実装してしまって、それを担保するために、テストコードを書くっていうのが両方あるかなと思うんですけど、今はどどういった方法で

Guest 32:32
やってるんですかね。

Guest 32:33
そうですね、どちらかというと、後者の方で書いていらっしゃる方が多いのかなと思います。テストドリブではなくて、コードを書いてから、こう

Guest 32:42
テスト項目を書いていくで、あと、スナップショットとかも入れて、影響範囲はちゃんと確認するみたいなところですね。そういった運用

Guest 32:51
そうですね、スナップショップもちゃんと入れて、

Guest 32:53
あ、なかなかいいですね。

Guest 32:56
いいですね、なんか、そうやって、新しいところからだけでもテスト書いていこうみたいなのができると、なかなかモチベーションにもなりますし。

Guest 33:04
そうですね、リアクトの方は、あのタイプスクリプト化も進んでまして。

Guest 33:09
はいはいはい、元もjavaスクリプトオンリーだったんですけれど、リアクトの方はももっとモダにしていこうというところで、タイプスクリプトで、ファンクショナルで、

Guest 33:18
テストもちゃんと書いてっていうこう、もっとは補修な感じ、補修面を切り配ったような開発にシフトしていってるのは、すごくいいかなと思います。いいですね、

Guest 33:33
なんか、リアクトの部分では、コンポネント書く時でも、割とテストファーストで書くのも結構あるかなと個人的に思ったりしてて、

Guest 33:41
あの、なんでしょう。コンポーネントって状態さげ、ブラウザ上で状態を再現するのが結構めんどくさいやつあるじゃないですか。うん、今操作してこの操作して、この操作した時にこうなるみたいな

Guest 33:52
やつが。あの、多分、今ジェストテストランナーはジェストでやってるとは思うんですけど、あの、

Guest 33:57
ジェストのウォッチをしてやると、その手元でその状態を再現しなくても、テスト行動で再現できるってのも、単純に開発効率が上がるよなって思って思うことがあって、

Guest 34:08
なんかそういうのもやれるといいのかなとか、今ちょっと

Guest 34:11
聞いてて思ったりしましたね。なんか、私は手元で状態再現するのがめんどくさすぎて、テスト後足するっていうのが結構あるんですけど、うん、

Guest 34:19
うんこなんか開発していて、こう作っていく中で、ちゃんとかみたいなところですよね。確かにこれ

Guest 34:25
これチェックして、これチェックして、小でチェックした時の挙動みたいなのを毎回あのほっ、ほっとロードが行われるたびに、なんかマウスでポチポチやるのがめんどくさすぎて、テストコード書くっていう

Guest 34:36
結構あるんですけど、なんかそういうのもやりやすくなって、そうだなっていうのを今聞いてて、

Guest 34:41
確かにそこはすごくやった方がいいですね。

Guest 34:44
もし、それやるとめんめんどくさくないっていう方つあるから

Guest 34:47
ですね。しかも、あのホトリロードあの、してくれないので、アオシミュレーターで痴漢してるのではいいち際読み込みしてるので。そうですね、

Guest 34:57
それだったらよりそうっすね、なんか、せっかくテスト書くなら、そういう風に書けると、こうめんどくさくなくなりそうみたいなの。

Guest 35:04
そうですね、まさに、ちょっとそれもブプロで今度提案してみます。

Guest 35:09
てみると、面白いかもしれない。

Guest 35:11
ありがとうございます

Guest 35:12
あ、ありがとうございますいや、でも結構いいですねなんかこうなんか、動画自体の実装にも入りつつ、ま、いわゆるフロンテント的な議論も、そのメイン業務以外の部分で一緒にやっていけるみたいなのは、かなり面白そうですね。

Guest 35:26
そうですね、すごくLINEnewsのUITのメンバー、

Guest 35:29
すごく和やかな雰囲気で、すごくよくしていただいたので、そう色んなところで関わらせていただいたので、すごく勉強になりました。

Guest 35:39
今結構えービジョンでの開発の話とか、えとま、実際、LINEnewsでま、そういったえ、動画以外の部分のフロントエンドの話とかって、どういうことやってましたか。ってものを聞いてきたと

7. これからやりたいこと 35:45

Guest 35:50
思うんですけど、まとはいえもえ、今週でインターもえ終わりっていうところかなと思うんですけど、

Guest 35:56
どうですか。実際、インターンとしては、全部一旦やり切ったみたいな状態ですかね。

Guest 36:01
そうですね、ビジョンのタスクは1回もうリリース完了しましたので、1回1区切りというところなんですけれど、実は

Guest 36:11
あのアルバイトとして継続しさせていただけることになりまして。

Guest 36:16
そうだったんすね。

Guest 36:17
そこで、はい、もうすでにと新しいあるプロダクトをリプレイスしていくっていう、あのプロジェクトが走っていまして、

Guest 36:26
今その開発環境の構築から始めています。

Guest 36:30
あ、じゃあ、リプレースのもうほんとにど新規の次は開発っていうところはいすかね。

Guest 36:35
そうですね、今まで新機能の追加というともかん。シーバーで、体験させていただいたんですけれど、さらにもっと大きな

Guest 36:44
開発環境の構築から、ちょっとやらせていただくことになって、すごく楽しみです。ほうほうほうほ

Guest 36:49
うわあ、いや、それはいいですね。なんか、LINEnewsってどっちかというと、そのおっきなコードベースの中で1つの機能実をするって話だったんで、かなり対局な仕事になると思うんで、それはそれで面白そうですし、

Guest 37:00
リプレースみたいなものって、結構こうやりがいのある仕事でもあると思うんで、かなり面白そうですね。はいや、なるほど、

Guest 37:09
そうですね、しかもももっとせっかくリプレースするので、ガンガンモダンにしていこうっていうところで、はいはいはい、タイプスクリプトで、リアクトで、

Guest 37:18
ちゃんとテストも全部書いてで、もっとなんかこう。メンバーの方で、メンバーでこうやりたいことがあったら、どんどんもう入れちゃっていこうっていうところで、はいはいはい、

Guest 37:28
ストーリーブックちょっと面白そうだから入れようみたいな感じで、ストーリーブック入れたりとか。そうですね。なんか、

Guest 37:37
うん、

Guest 37:37
ciでちゃんと回して、ま。あと、LINEnewsもすごい。ガッチガチで試合回ってるんですけど、もっと改善できるところがあるだろうっていうところで、

Guest 37:46
新しいそのプロジェクトの方では、もっと完全自動化な感じの試合をどんどん入れていこうっていうところも進んでいて、

Guest 37:54
すごく今日面白いなと思います。

Guest 37:56
じゃ、結構なんか挑戦したいものは、ぶんぶん挑戦していこうみたいな。

Guest 38:00
そうですね、僕の方からも色々これちょっとやってみたいんですけれど、みたいなことも言えたりするので、すごく面白いです。

Guest 38:07
いや、なかなか面白そうですね、それは絶対面白い仕事なんか、ちょっと羨ましいなと思って

Guest 38:15
しますね。なるほど、

Guest 38:18
ほんといいタイミングでした。ちょうど、その案件の話が舞い込んできたのが、そのインターンの中盤

Guest 38:24
頃だったんですね。あ、そうなんはいで、センスが今ビジョンやってるけど、

Guest 38:29
じゃあビジョン終わったら次はそれかなみたいな気持ちで

Guest 38:33
そうです。そうですね、その頃はまだアルバイト決まってなくて、その残り3週間でまどこまでやれるかわからないけれど、

Guest 38:41
開発環境の構築からやれるのは、すごく貴重なので、是非やらせてください。というところだったんですけど、アルバイトとして継続できることになったので、もっと

Guest 38:51
もうそこまで完成のところまで行ける見込みになってます。

Guest 38:56
いいですね、いや、すごい楽しみですね、それ

Guest 38:59
はい、すごく楽しみです。

Guest 39:03
なんか、ちなみにそういった今、もう決まってるタスクで、その中でやっていくぞっていうの以外で、なんかこういったこととかも、これからアルバイトとかでやれたらいいなみたいなのはあったりしますか。

Guest 39:13
そうですね、僕インターンを応募する前からずっとUITのこの今、僕まさんに出演しているUIT INSIDEとかずっと聞いてきたので。あ、そうなんですね、は

Guest 39:26
はい、ただいまそ

Guest 39:27
僕僕、すごくちょっと楽しみにしていたんですけど、僕もその

Guest 39:32
まだバイトなので、できるかちょっとわからないんですけど、そういったポットキャストとか、もっとこうタスクフォース的なことも。

Guest 39:40
普通の普段の開発だけではなくて、取り組めたらなとちょっと思ってます。

Guest 39:47
いや、それはなかなか頼もしいですし、ぜひ、例えばワインサイドとかでもよければ、今後も出ていただけるといいかなと

Guest 39:55
思います。

Guest 39:56
じゃあ、あれですかね。プロジェクトの開発もしながら、なんかその他の活動もやっていけるといいかな、というところ

Guest 40:02
ですかね。そうですね、すごく面白そうなので、僕のメンターのおさんも、プレイbookuytplybookの仕事をタスクフォースで担当されていて。

Guest 40:13
そうですね。それもまた堀さん忙しそうなんですけれど、すごく楽しそうなので、僕もそういったタスクフォース的なこと、挑戦できたらなと思います。

Guest 40:22
まさにそれ

Guest 40:23
やっていけると面白そうですね

Guest 40:26
UITプレイブックについてはですねと、エピソード54で話しておりますので、もしご存知のない方がいらっしゃいましたら、ぜひぜひえ、そちらのエピソードを

Guest 40:35
えで3種類いただければと

Guest 40:37
思います。なるほど、

Guest 40:39
いや、なんかそういったこともどんどんやっていけると面白そうですね。

Guest 40:44
そうですね、すごく面白そうなので、ぜひ挑戦させていただきたいなと思います。

Guest 40:49
じゃ、これからのUIT INSIDEの出演にも、期待というところでしょうか。

Guest 40:54
もし、次のエピソードあったら、その時はぜひよろしくお願いします。ぜひぜひ

8. クロージング 41:00

Guest 41:01
ということでですねえ、今回はえ、セスさんをゲストに加えてですねえ、LINEnewsでのえーシーバーのえません、

Guest 41:08
LINEnewsのビジョンでのえし、シークバーの実装、およびえ、その他え、ラインのインターンにおいて、え、行ったフロントエンドの活動などについて聞いてきました。

Guest 41:19
ラインのフロントエンド組織UITでは、このようなえ、技術的なキャッチアップなどをえ、日々行っております。

Guest 41:25
例えばですね、外に出しているネタで言うと、ビュースリースタリなどは、実は社内勉強会から始まったネタだったりしていて、ま、そんな形で。お互いにキャッチアップしたりだとかま、自己検査みたいなのを

Guest 41:37
なっているので。ま、今後も、えー。ポットキャストっていう形で、外部にらせていけるといいかなと思っております。

Guest 41:44
また、最後になりますが、もしですね、このコードキャストを聞いてですね、ラインに興味を持ってくださった方は、カジュアルメラから実施しておりますので。えョと、最下部にあるえと、求人ページからえ、ご連絡いただきますと幸いです。

Guest 41:58
今ですね、ズランドメのカジュアル面談も行っておりますので。ぜひぜひえ、お気軽にご連絡いただければと思います。

Guest 42:06
というわけでえ、今回はですねえ、セスさんをゲストにえ、LINEnewsビジョンでの動画のシークバジストについて、え、プラスアルファを聞いていきました。え、セスさん、ありがとうございました、

Guest 42:17
ありがとうございました。