音声書き起こし
1. オープニング
Guest
こんにちはこんにちは
Guest
今週のUIT INSIDE始めたいと思います。え、UIT INSIDEは、ユーザーインターフェースと、テクノロジーを愛する開発者のためのポートキャストです。
Guest
最新のウェブ標準の動向や、開発、フレームワークの変遷、またまたuiruxに関することまで、毎週フロントエンドの動向を
Guest
キャッチアップすることを目的としております。ハッシュタグはシャープ、UIT、アンダースコアインサイド。
Guest
ご意見やご感想はいつでもお待ちしております。お気軽にツイートいただければと思います
Guest
そして、今回はですね、私ポテトfreをオスにですねえ、ゲストを2名え、招待しております。え、ゲストにアランさんと林田さんの2名をえ、お迎えして
Guest
え。LINEliveのリニューアルについて、話をお伺いしたいと思います。お2人ともよろしくお願いいたします、
Guest
よろしくお願いします
Guest
お願いします
Guest
それではですね、今回そうですね。アランさんに関しては、2、3回これまでもポズキャストに入れていただいてるんで、一旦林田さんの自己紹介だけにして、お願いしましょうかね。では、まずはんの方から自己紹介お願いいたします。
Guest
はい林田ですえーUIT所属のフロントエンドエンジニアでま、現在は主にアランサーたちと一緒にLINEliveの開発に携わっています。
Guest
はいえ、林田さんよろしくお願いいたしますはい、よろしくお願いします。
Guest
まずでは、今回はLINEliveのリニューアルという話になっておりますけど、
2. LINE LIVE とリニューアル
Guest
ま、このLINElive自体についてのま、基本的な情報とかえ、リニューアルのえ、基本的なバックグラウンドとかを紹介いただいてもよろしいでしょうか。
Guest
はい、まずまあ、LINEliveはあののことを知らない人がいれば、まあかめに紹介するんですけど、
Guest
まあと、LINEliveは基本的にあのしょ、ソーシャルライブって呼ばれる。まあ、あの部類のアプリで。
Guest
まあ、自分のことをとっても配信して、視聴者と
Guest
ま話し合って、なんかチャットを見てま。色々インタラクションが取れるようなアプリとなっています。
Guest
で、まあ、それを元でなんか色々なサービスや機能とかも結構入ってるんですけど、私もはやさんも結構なんか
Guest
入社した時期から、こちらのプロジェクトに配属されていますね。
Guest
で、そうですね、あの、基本的にはそのLINEliveはまあのウェブもアプリももちろんあるんですけど、結構そのま、今まではアプリは結構優先的に開発がすむ。進められていて、
Guest
ちょっとウェブの方はま、まだなんかデザインもあのま、機能も。アプリの
Guest
ま、南方遅れみたいな感じの状態になっていたものを、ちょっとま、
Guest
そろそろキャッチャップしようっていう動きがあってま。リニューアルすることに、あの、今年が決まりましたとで、まあ、ちょっと
Guest
詳細に入ると、
Guest
まあ、
Guest
当時はまあ3人であのまjs2人と。まあ、カップは1人で、まあ、1、2か月ぐらいかけて、
Guest
結構あの大型のリニューアルになりました。なんかこうミット数は400とかなんかすごい数になって、
Guest
まあ、ファイルもま700なんか7800ぐらい。変更になって、結構あの
Guest
まcsの面でもhmmの面でも、まあjsの面でも、
Guest
まあ、結構大型に色々な変更が入ったっていうようなリニューアルになりました。
Guest
うん、うん、うん、うん、
Guest
なるほど、じゃあ、結構アプリ優先でま。長いコードベイスがあるって話でしたけど、いつ頃からあるプロジェクトなんですか。
Guest
そうですね、あの、開発自体はま、私も当時はいなかったんですけど、2015年
Guest
頃に開発会社始めて、まあ、それからなんか続きで
Guest
やっているプロジェクトなので、ま、結構ま歴史の長いプロジェクトにはなっています。
Guest
なるほど、なるほど、いやじゃ結構あれですねまあ、5年ぶりぐらいのえ、リニューアルってなるんで、結構デザイン面でも、技術面でも色々聞けることが
Guest
ありそうですね。そうじゃあ、ちょっとね、こっからええ、実際の話を聞いていきたいと思います。
3. デザインリニューアルでの変更点について
Guest
じゃあですねまず今回はえーリニューアルとしては、え、デザインから入っているでということでした。けれども、デザインのリニューアルについては、田さん説明していただいてもよろしいでしょうか。
Guest
はい、まあ、先ほどアランさんから話があったように。まあ、LINEliveはアプリとweb版のま、両方があるんですけども、まあ、
Guest
こまちょっと正確にはわからないですけども、ここ数年はアプリ中心にアプレートが進んでいて
Guest
まプリ側のデザインと、ウェブ側のデザインが全く違うのを回してしまうという状態になっていたんですね。なんで、まあ、これは
Guest
もうぱっと見ただけで、ウェブの方が古臭いっていう感じになっていたので、とりあえず、これをもうどんどんアプリに近づけて、アップデートしていこうと、
Guest
それと、同時に炊いてない機能っていうのもたくさんあったので、まそこもえ追加していったりしようま、使ってない機能がけそうとかま、そういうことを、
Guest
まあ、企画側から話が上がったっていうとこから始まってます。はいはいはい
Guest
はい、なるほど、なるほど、じゃあ結構あれなんですね。昨日の回収や、追加もかなり多いアップデートであったっていうところなんですね。そう見た目だけではなくて、
Guest
はい、まあ、基本的にはあのデザインのアップデートがメインだったんですけども、まあ、あの、
Guest
我々開発としても、まUITのエンジニアはみんなそうだと思うんですけど、もまデザインとか、企画の団体段階から色々と
Guest
まインプットして、こういう機能があった方がいいんじゃないのとか、まあ、こういう開発機関だったら、ちょっとこれは
Guest
削りたいなとか、そういうことをどんどんやっていったっていう感じですね。
Guest
うん、うん、うん、うん、うん、
Guest
なるほどなるほど、じゃあ結構もう。そのプロジェクトデザインのリニューアルをしようっていうところから、UITも関わって、
Guest
積極的に変更していったっていうところだったんですね。
Guest
実際、UITとしてすごく携わってま、どういったその風に関わったとか、変化があったとかっていうのを聞いてもよろしいでしょうか。
Guest
はい、そうですね、まあ1番大きかったのはまあ先ほどもあったように。まあ、LINEliveは、
Guest
pc向けのサイトとモバイル向けのサイトの両方があるんですけど、もま、それが全く別のプロジェクトでまま開発コストも2倍かかるような状態
Guest
だったんですが、まあ、今回それをなみの見直してま。できるだけスポンシブのデザインなんかを採用しながらま
Guest
統一していこうということを提案して、それが受け入れられました。と、それによって、まあ、開発コースもまあ、大幅に圧縮することができました。
Guest
うん、うん、うん、なるほどね、
Guest
その他にも、えま企画の方と話し合ってサポートするブラウザー
Guest
なんかを見直してもらって、まあ、例えば今回iとえマイクロソフトの古い方ですね。なんかは、まあ、もうサポートしないということが
Guest
あま了承してもらえたんで、ま。それによって、だいぶ。まあ、フロントでたなことならわかると思いますけど、まだいぶ楽になったってこともありましたね。
Guest
ああ、なるほど、あいよ、そもそも、サポートしないっていうのは、かなり
Guest
かなり重い選択にも見えますけど、ユーザーとし、ユーザー層としても、やっぱりライブブのストリーミング見てるってなってると、
Guest
若い人とかが多いっていう風な形での決定だったんですかね。
Guest
ま、それもそうですし、まあ、社内向けのおアナリティクスのツールがあるんですけども、それで、どういうユーザーがどういうプラウザーでアクセスしてくしてきているのかっていうのがまあ
Guest
わかるので、ま。それで調べた結果、iのユーザーはそんなに多くないし、ま、そもそも
Guest
まま言うとあれなんですけども、愛でま壊れがちだったので、もういいかなって
Guest
で、まあ合意したっていう感じ。
Guest
なるほどいいですね。なんか、そのサポートするところとかもリニューアルと合わせて
Guest
見直しって、なんか結構どうしても、ユーザーインターフェースのリニューアルって、見た目は一緒だけど、サポートするのは一緒にしたいとかって結構言われて大変とか
Guest
ええってよくあるかなと思うんですけど、そこまでこう見直せるってのは結構いいですね。この初めの方から携わってる、だからこそできるような
Guest
どこでもありそうですね。そうですね、
Guest
あとなんだろうそのiだと結構そういうまあ、LINEliveみたいな、あの、なんだろう。
Guest
そういうデラクティブな動画とか、なんか色々入ってるから、こうそういうのに対して、あの、あのパフォーマンスは
Guest
もうあの絶望的だったので、もう多分なんかまあ見えたとしても、あのまあ見えてるって
Guest
あんまり言えないような状況にはなっていたので、まあ、もうあのなんだろ。もうサポートしていないって断言した方が
Guest
ま、ある意味ユーザーのためにもなりました。とあ、なるほど、なるほど
Guest
ま、実際その使った時のユーザー体験か考えるぞっていうところ
Guest
です。そうですね、
Guest
なるほど、
Guest
確かにいや、でも、そういうのができるような状態なのはすごいいいところだなと思いましたね。
Guest
あ、はい
Guest
あ、その他は何かデザインリニアについて、何か話したい内容とかってありそうですか。大丈夫だと思います
Guest
では、次にいたいなと思います
Guest
ではですね、次はですね、まあ事前にえ提出いただいているこの内容として、環境やビルト改善も結構。えー行ったっていうところが
4. 環境やビルド改善で行ったものと成果
Guest
あるとえ思います。ここですね、やっぱり、フロントエンドエンジニアとしては、サービスのリニューアルを行う時っていうのはま、技術的なところも見直したいっていうのがあるかなと思うんですけど。まあ、実際え。まあ、どういった風にどういったものをえ、改善していったのかっていうのも
Guest
話をえ、聞きたいなと思います。ではですね、じゃあ、ひとまず、林田さんの方に紹介いただいてもよろしいでしょうか。
Guest
はい、まあ最初の方で話があったように。まあ、ライブの開発自体はもう5年ぐらい
Guest
続いてるものなんですけど、まあ、あのフロントエンドの世界において、5年というのは結構。
Guest
まあ長くて、その間にいろんなことがあったなと皆さん思うと思うんですけど、も
Guest
ま、その時々においてま。ちゃんと最適な選択はずっとしていたとは思うんですけども、今、我々が見た時に、ちょっとこれは
Guest
ちょっと扱いづらいなっていうのが目立つようになってきていたっていうのが、まあ正直なところですとで
Guest
まなんで。まあ色々と変えたいなという思いはずっとあったんですけど、もま、今回リニューアルをするにあたってま。
Guest
事前にqaの方がまあ、サービス全体のフイブレッションテストっていうのをやってもらえるっていうのが、まあ、事前に分かっていたので、ま、ちょっと
Guest
乱暴な言い方ですけども、ま多少無茶をしても大丈夫かなっていう感じはあったんで、
Guest
結構アグレッシブにいろんなことを改善していったという感じになってます。
Guest
そうですね、あと、まあそのなんだろう、まあ、企画の
Guest
なんだろう。本格的の軌道はまあ、今年にはなったんですけど、まあ、
Guest
去年の段階からそのなんだろう。こういう熱はあるって分かっていたので、結構あのま、去年のあの終わりの頃から、
Guest
まあ、ちょっとこれに向けてのま。下準備と言えばいいのかなか分からないんですけど、
Guest
まあ、下準備的なものを進められるようになっていたので、ま、そっから着々とあの
Guest
まデザイン以外のところをまあ回線しようっていうことをま進めていましたね。
Guest
うんうん、うん、うん、
Guest
なるほどなるほど、じゃあ結構あの元々少しずつリニューアルが来ることを考えて、
Guest
かん開発環境を改善しておいて、いよいよ。街に待ったリニュアルだったっていうところなんですね、
Guest
はい、ほんとにそうでした。
Guest
実際、その改善っていうのは、どういったことをやっていたんですか。
Guest
ま、例えばま我々が1番気にしてたのは、そのビードした
Guest
ヤスペットのバンドサイズが異常に大きかったというのが、まあ
Guest
気になっていて、そのリニま我々はその改善作業をする前っていうのは、
Guest
ま1つのおっきなバンドルファイルがまどんと作られていてま。合計すると、ま一目が超えるような
Guest
jagascipァイルができてたですね。で、まあこれまpcには多少許されるとこもあるとは思うんですけど、モバイルです。とかあと、
Guest
さっき言ったようなら、い
Guest
まライブのネイティブアプリもあるんですけども、ネイティブアプリから、あの、我々のウェブサイトに直接アクセスして表示しているような
Guest
部分もえ、幾つかあるので、そういう時にはかなりいい問題になるかな、というのは、まずっと気にしていたところです。なんで
Guest
とりあえず、まあ、
Guest
僕マランさんもなんかわかしスピード教的なところがあるんで、あの、とりあえず、このサイズをなんとか削っていこうっていうのも、まあ、
Guest
最初は一生懸命やってましたね、
Guest
結構あれですね、この元々の状態が、いじめがバイトを超えるってのはかなり
Guest
重いというか、かなりすごい状態ですよね、これはあれですよね、その
Guest
ページごとのコードスプリッキングとか行ってるわけではなくて、あの、アクセスした段階で全部読み込まれてしまっている状態だったっていうところですよね。
Guest
はい、そうなので、まあ実際には必要のないものがたくさん生まれていたっていう状態でした。
Guest
そっから、実際のみな見直しを今回のリニューアルで行っていったっていうところ。
Guest
そうですね、はいま、例えばま具体的に言うと、バウェルとかウェルウェブパックの設定を見直すと、まさっき言ったように
Guest
裏技のせ、あのサポートを結構切れたので、例えば、ポリポリフィーを
Guest
いらないものを外していくだけで、結構サイズが減っていったりです。とかま、ちょっとミニファの設定もちょっとおかしかったので、そこを修正したり
Guest
とか。ま、あと、ちゃんとバンドラナライザーでチェックして、
Guest
非常におっきなサイズのライブラリを使ってたら、これなんとかできないかっていうのをま、色々話し合ったりとかいうことも始めました。で、もちろん、えーコードスプリ
Guest
キングとか、まあ、プリフェチとかそういう部分もま、今となっては割と当たり前ですけど、ま、そういうこともまあ、少しずつやっていって、えーコードのサイズはまあ
Guest
最終的にはっていうか、ま、今ですけど、もま300キロバイトは切るぐらいには来たかな。
Guest
そうじゃあ、元々からしたら、かなりの
Guest
生きているっていう状態
Guest
ですよね。ですね、あと、そのなんだろう。まあ、先ほどののidとかのサポートを切ったとかって言いましたので、
Guest
ま、それも踏まえて。まあ、そのコードのあのバンドルのターゲットをまイエイブではなく、
Guest
まあ、イエスのジュールスとかにしてま。結構それだけでも、まあ、アローファンクションや、あの
Guest
まあ色々な機能まプリフィールもそうなんですけど、書き方自体のあの
Guest
ま、バンドルの変更によって結構なんかそれだけでも、あの候補のサイズは何キロバイトがあの減らせたので
Guest
おおいいですね。
Guest
ですよ、あれですもんね、これ元々がpcとspがェブ、あの、別のウェブサイトだった別のプロジェクトだったってことは、両方対応するして、
Guest
まあだから、多分、pcoのコドspoのコードっていうのは多少あるかなと思うんですけど、それ加してもこんだけ削減できたっていう状況ですもんね。
Guest
そうですね、はい、
Guest
ありすごいいいですね。こう、あの、サポートを切るところから、実際のコードベースまでま全部に携わってるからこそできる。
Guest
削減でもありますし。はい、結構この改善いいですね。なるほど、ありがとう、ありがとうございます。
Guest
なんか、その他開発環境としての変更とかって、何かあったりとかしますか。
Guest
はい、まあそうですねま、僕が去年10月ぐらいに入った段階では
Guest
ま、いわゆる今時の開発環境というのは、結構不足していてま。
Guest
まあ、今となっては当たり前なんですけども、esリントとか、ptrとかそういうものもなくて、結構コードのフォーマットもバラバラだったりとかして、まあ非常に
Guest
ま、単純にコードデビューしにくいとか、まあ、しょうもない。例えば、セミコロを忘れたとか、そういうミスも起きやすかった
Guest
ので、まあ、こういうのをちゃんと設定して、あまあまあどうせみんなビジュアルスタジオコード使ってるんで、そういうのもまあ、デフォルトで
Guest
フォーマットするようにして、とかま、そういうことやって、あのチームとして開発しやすいような環境を作っていくっていうのを、まあ地道にやっていました。
Guest
あと、まあ、ちょっとあんまり言うのも恥ずかしい話ですけど。まあ、ユニットテストがまほぼ0だで。
Guest
まあ、我々途中から入ったので、テストがないと正直あんまりよく把握できない部分も、はいはいはい、たくさんあったので、
Guest
これなんでこう書いてたんだろうなみたいな。
Guest
なんで。まあ、正直、既存のコードにテストを足していくっていうのはなかなか難しかったんですけども。まあ、少なくとも今回手を入れた部分、
Guest
リニューアルに際して手を入れた部分については。まあ、別にやろうって言ったわけじゃないんですけど、なんとなくテストを書き始めたら、2人とも
Guest
大丈夫だという、
Guest
そんな感じですとで、まあ
Guest
わかりやすい指針で言えばまカバレージま、カバレージが高けりゃいいってもんでもないんですけども。まあ、最初はほぼゼ
Guest
だったのがま、昨日測定したら33パーぐらいまではまなんとか来てたので、まあ
Guest
またきゃいいってわけじゃないですけど、まあ、もうちょっと頑張ろうかなっていう感じにはなってます。
Guest
いや、でも、ほぼ0の状態から、かなり
Guest
上げていけるところがあったっていうのがま。これをまたサロで神経で開発するって言ったら別ですけど、既存からのユニアルの中で
Guest
書いていくってのは、結構大変な作業だとは思いますけど、いいですよね。それって、ちょ、自然と書かれるようなこう文化になっていくっていうのはいいですね。
Guest
はい、あとまあそうですね、なんかテストも入れたことで、あのなんだろう、元々、このプロジェクトには結構なんだろう。
Guest
ま、デプロイなどのあのスクリプトは結構優秀だったんですが、
Guest
その試合は使っていませんでしたので、まあ、ちゃんとciでのあのデプロイムを入れるあのことにして、
Guest
まあテストをなんだろう、もっと書くようになったあの時にあのま試合でもま自動的にあのprやコミットに対して
Guest
テストが走れるようにしましたので、ま、それで結構あのなんだろうで。あのま、さっきも林田さんがったんですけど、
Guest
あのまりんとも、このテストのあの試合でやったのはまごいあのレビュー
Guest
をするのがすごく楽になってきていますね。最近はなんだろうあの、
Guest
もう元々テストでかまるあのエラーは多くて、まあ、それで逆にデビュー
Guest
あの時間をま削減できたので、ま、結構色々な意味で。はい、あのコストま個数を
Guest
減らせているんじゃないかなって思っています。
Guest
なるほど、なるほど、
Guest
じゃあ、そのリントとかの設定も一緒にやることによって、手元でのケアレスミスも減らせるしま。試合入れることによって、レイベの時間も結構短縮できていったっていう
Guest
ところなんすね。なるほど、な
Guest
いや、いいっすよ、深合入れてよかったのは、まと特に。この
Guest
リニアの時から始まったんですけど、まあ、昨日できたとこからどんどんレプロイしていって、
Guest
まきえさんにテストしてもらうっていうことは始まってるんですけど、もま、そういうアジア的なやり方になってきたんですけども。まあ、
Guest
それで、毎回マニュアルでデプロイとかしてたら、まあ、ちょっと辛かったので、まこんか。あ、こうやってciを入れて、自動的にデプロイスされるようになったっていうのは、非常にま、我々としても楽チンでよかったなと思ってます。
Guest
そのなんでしょう、エンジニアだけじゃない、まあ、全体としての。まあ、その
Guest
開発の効率とかえ、施策に対してのま、救営とかのサイクルの回しやすくなったっていうところもあったっていう
Guest
いいですね。なんか、こうurのリニューアルから始まったけれども、環境のリニューアルとか、まあ、実際のバンドルサイズみたいな、パフォーマンスへの
Guest
なんかええ、高原みたいなのもあるってのはなかなかいいこうなし。ただただ、ユーザーインターフェイスの影響に
Guest
晒されて、急いで開発するってだけじゃない。リニューアルの仕方って、すごい健全でいいっすね。
Guest
そうですね、なんだろう、個人的にはこれは結構そのそういうあのなんだろう、いわゆる技術的な災
Guest
をあのなんだろう、色々とそういう面でも、あのリニューアルできたっていうのは、すごい良かったと思っているところなんですよね。
Guest
結構そういう機会が少ない。あの、まああののアプロンテンドだったりするので、まあ、
Guest
こんこの機会を通して、なんか色々できたのはすごいよかったと思います。
Guest
そうっすね、なんかこうあの、ただリファクターしたいだけとかだったら、なかなか承認得られない中で、いい感じにタイミング見つけてできてるってのも
Guest
いい成功例な気が
Guest
ありがとうございますじゃですね、ちょっと次のテーマに移りたいと思います。
5. その他のパフォーマンス改善
Guest
じゃ、次ですね、もう1つこれは事前に話さないようしてもらってる時に、パフォーマンス改善の話もぜひしたいというえ、風に来ていたので、ちょっと色々聞きたいなと思うんですけど、
Guest
なんか今回のりにあるにあたってま。こういったパフォーマンス改善をやったら、うまくいったわみたいなのがあれば、
Guest
性格なんでぜひお話いただきたいと思うんですけど、これはアランさんからお願いしてもいいですか。
Guest
はい、そうですね、あの、結構まあ、LINEliveといえば。まあ、その生がメインのサービスなんで
Guest
で。まあ、もちろんその視聴してる側がまチャットを通して、あのま配信者に繋がってるっていうのはあるので、
Guest
ま、チャットのね。パフォーマンスは、まあ、結構大事なサービスにはなっていると思うんですが。まあ、
Guest
今今からいえ、今なら言えるんですけど、正直、あの前のチャットのパフォーマンスは結構あの
Guest
あまり良くはなかったんですよね。で、はいはいはいはい、まあそれはもちろんそのなんだろう。まあ、
Guest
2015年の当時は結構あのま、それが再選のパフォーマンスだったと思うんですけど、まあ、今ならもっとうまくできるんじゃないかって色々模索していたんですけど、
Guest
ま、それで、結構そのまビルビチャル、いわゆるビルチャルスクロール的な。あの、ウェブコンポーネントを。
Guest
自分の方でちょっと見つけて、どうにかあの入れられるんじゃないかなって。
Guest
あの、ちょっと模索していたら、まあ、ビューのあのウェフコンポーネントとの相性は、あのまあ結構良くて
Guest
ま入れるのはなんかそこまで複雑ではなかったので、とりあえず入れてみたら、結構そのチャットの量があのすごい多い。
Guest
あの配信の中でも、
Guest
まあ、あんまりあの端末への負担をかけないような状況にできたのは、すごい良かったなって、個人的に思いました。
Guest
いいですね、なんか、こう技術的な課題としても、その5年の月日があったからこそ、できるような改善を
Guest
やっていけって感じなんですね。
Guest
そうですね、なんか結構そういう
Guest
まなんだろうまあ、動いてるからこそ、あんまりなんだろう。見直しがされないものは多いと思うんですけど、まあ
Guest
なんだろう。今回は結構色々な意味でなんだろう、何をどうできるかをなんかもうあの色々
Guest
考えてたらま、これは改善点の1つだったっていうのはすごい明らかでした。
Guest
なるほど、なるほど、なるほど、
Guest
ちゃっとまあ、特に人気な人ほど、サービスとしてもたい、大切にしたいところではあると思うんで、そういった時に重くなってしまうとかだと、問題なんで、
Guest
かなり効果もありそうですね。
Guest
ほんとにそうですね、結構いきなりこうチャットがバババンってすいません、出るあの、配信は多いので、
Guest
なんかその他にありますか。こういった改善を行ったみたいなのって、
Guest
はい、そうですね。まあ、LINEliveの
Guest
ウェブページにアクセスしてもらうとわかるんですけども。まあ、トップページま、我々はホームと呼んでるんですけど、もま、ホームのページっていうのは、非常に画像が多くて、
Guest
まあ、あのデブツの中で見てると、すごい量の画像ががって読み込まれるんですけど、ま
Guest
ま、パフォーマンスの家電というよりは、まuxの家電という感じなんですが、まあ、それはあの
Guest
見えもしない画像をどんどん読み込まれても、あんまり嬉しくないので。まあ、最近ではブラウザをネイティブでサポートするようになった。まあ、レイジーロードなんかをえ入れるようにしてます。と
Guest
ま、要するにま、オフスクリーンの画像はま、読み込まずに、ユーザーがスクローして見えるようになったら、読み込むっていうことをして、
Guest
まあ多少のなんですか。ネットワークの節約みたいなこともやってます。あと、まあ、このホーム
Guest
ホームのページっていうのは、まあ、サワーサイドの複数のエペをまあ叩いて
Guest
で、そっから帰ってきて、データをまあ取得して、まあ、データが帰ってきたら順次表示していくっていう風になっているんですけど、もま、このデータの帰ってくる順番によっては、まあ、
Guest
なんていうんですかね。ま、いわゆるレイアウトシフトっていうのが、まあ起こりやすい状態になっていると、ま。例えば、ページの下の方にあるコンテンツのデータが先に帰ってきてしまうと、
Guest
下の方のものがおんと上の方に出てきて、その後あの上のやつが
Guest
出てきちゃうと、まあガタガタガタってくるっていうのはまあまありがちだと思います。なんで、まあ、今回はまあそういうのはちょっと。あんまり
Guest
ux的に良くないということで、ま、あの、最近流行りというか、facebookとか、youtubeとかでもやってますけど、もまいわゆるスケルトンローディングっていうのをや
Guest
で、まず、ページを開いた段階では、まあ、そういうグレーの
Guest
プレースフォルダーみたいなものを表示しておいて、で、データが来たら、それを置き換えていくっていうことをやることで、
Guest
まあ、あの、そういう方がってなるのを防ぐことを行っています。
Guest
うん、うん、なるほどいっすね、これ、今話してなかったってことは、ほんとにブラザネイティブのレジロードでやっているって感じなんですか。
Guest
やりたかったんですが、まあ、全ブラウザをサポートしてるわけでもないので、実はあ、
Guest
カスタムでやって。
Guest
なるほど、なるほど、ただまあおいスコアを控えていこうと思ってます。
Guest
今後はそういう風にやりたいっていうとこなんすね。はい、なんかそれ以外他にありますでしょ、
Guest
そうですね、ま、最後のなんだろうまあ、今だからできる見直しの部類に入るんですけど、あの結構そのまあ
Guest
なんだろうま、開発が始まった当時だからこそ、あの必要だった。ライブラリーや、あの、まあ
Guest
もうなんか結構長い間その更新していなかったライブラリーなどをま色々置き換えるとか、あの、削除することにあのしました。
Guest
ま、例えばなんですけど、まあ、元々LINEliveはまあ、社内で開発しているウェブプレーヤーを使っていたんですけど、結構長い間あの
Guest
古いものを使っていたため、まあ、そろそろなんか、あの、もっとスムーズな新しいやつにできないかって模索していたら、まあ、
Guest
あの、それは結局
Guest
ちょっと。なんかま、最初の段階ではできなかったものの、まさ、なんか、ちょっと時間が経った時に、もうちょっとあの、そっちにも改善を入れたんですよね。
Guest
あ、まあそのLINEliveとかだと、ま、ギフトとかは結構ま、アニメ付きのあのものが多くて、
Guest
そういうのはまあ、apagとかのファイトだったりしますけど、あのああ、はいはい、まあ、
Guest
結構クロムは長い間そのapngをサポートしていなかったんですよね。サファリとファイアフォークスに入ってたんですけど、で、まあ、やっと最近ほんとにあのほぼこのリニューアルをしていた頃ぐらいに、
Guest
サポートするようになったから、
Guest
もうとりあえずあの前使っていた。あのま、apagをjavascriptで再生するような、あのライブラリをはいま、やっと、あの、
Guest
もうあのネイティブの実装に着替えることができたので、ま、そこなどは結構ま印象的で。
Guest
なんかすごい。まあ、スッキリしたようなものなんでした。
Guest
なるほど、
Guest
ま、そういったこうまでもこれもあれですよね。今回のサポートブラウザを狭めたっていうのも、かなり
Guest
影響にで影響出ている部分かなと思うんですけど。そうですね、いいですね、そういった、できるだけブラウザのレポルトの機能にしていくっていうのはいいですね。
Guest
そうですね、まあ、この5年間でまブラウザーができることがすごい増えたと思うので、
Guest
まあ出来るだけねん。あの、ライブラリーに頼らず、まブラウザー自体に頼ることが、まあこのなんだろう。
Guest
このリニュアルのあのまuiの部分ではなくま、技術的な意味でのあの、結構大きな一環だったと思います。
Guest
いいですね、レイジロードとかもだんだん外せるようになって、ネイティブで使っていけるようになると、よさそうっていう意味でも、これからもより改善の
Guest
余地があるような意味があるっていうのは、かなり面白いですね。なるほど、ありがとうございます。最後に、
Guest
ちょっといきなりアドリリブで入れちゃいますけど、
Guest
なんかえ、LINElive。今使ってるフレームワークをビー2からビー3にアップグレードしようとしてるって話を。この間聞いたんですけど、ちょ、その辺えと、林田さんがちょっと活動してるって話なんで、ちょっと聞いてもいいですか。
Guest
そうですね、まあ、まだビュー3はリリース、キャンディデートなんでま。色々問題はあるんですけど、も、とにかく
Guest
ま。こういうのを先延ばしにすると、どんどん辛くなっていくので、ま。早い段階でまrcに入れ替えてやってみて、どういう問題があるのかっていうのをま一生懸命洗い出しているという状態です。まあ、もう今でも
Guest
780パーぐらいは動くようになってきたので、まあ、できれば今年中には移行していきたいなっていうのも
Guest
考えてますとで、あと同時にまほま。これは僕がやってるんじゃないですけどもま、まあ、皆さんの大好きなダイプスクリット、も
Guest
ま、ビュースとの相性がいいっていうのもあるので、
Guest
まあ、使えるようにして、もっと楽チンに開発できるようにしたいなっていう活動も行ってます。
Guest
なるほど、いや、いいっすね、なかなか面白そうな、ちょっとその両方がまた新着とか出たりとか、
Guest
アップデートあったら、ぜひこのUITeサイトで、また話していただければなと思うんですけど、ちょっとまたお願いするしてもお願いしてもいいですか。
Guest
はい、ありがとうございます
Guest
ちょっとまあ、まだ社内的にもrcの段階で色々マイグレーション試したりしてるプロジェクトとかって、あんまりラインでもないかなと思いますので、ちょっとまた
Guest
聞ければと思います。はいというところで、じゃあ、今日のテーマは以上かなと思います。
6. クロージング
Guest
というわけでえ、今回はですね。LINEliveのリニューアルをテーマに、アナさんは、田さんとともに話していきました。
Guest
ラインのフロントエンド組織UITでは、このようなフロントエンドに関する議論や、キャッチアップを日々行っております。
Guest
ビューススタディなど。え、社内の学習企画から始まったコンテンツも多くありますので、え、ぜひぜひ。今後も発信していきたいと思っております。
Guest
またですねえ、今回のコードキャストを聞いて、LINEに興味を持っていただいた方は、え、ぜひぜひ、カジュアルメラからでもご連絡いただければと思います。
Guest
今とかですと、ズームでのえ、カジュアル面談とかもやってて、えと、自宅からとかでも全然可能ですので。え、是非興味のある方は、正のと家にえ、求人への連絡を掲載しておりますので、お気軽にご連絡いただければと思います。
Guest
それではですねえ、今回はLINEliveのリニューアルをテーマに。え、林田さん、あらさんとともに話していきましたお2人ともありがとうございました、
Guest
ありがとうございました、
Guest
ございました。
