2022/07/01 に公開1132 views
@potato4d が @spring_raining に、 UIT INSIDE のリニューアルについて話を聞きました。
- UIT INSIDE リニューアル記事: https://uit-inside.linecorp.com/news/20220624
- LFK DevPods: https://lfk-devpods.linecorp.com/
- Clova Note: https://clovanote.line.me/home
音声書き起こし
1. オープニング
@potato4d
こんにちは、uitのpotato4dです。ユーザーインターフェースとテクノロジーをアする、開発者のためのウィークリーポッドキャスト UIT INSIDE、今週も始めていきたいと思います。 今回はですね、すでに今このウェブサイトを見ていてわかるかなと思うのですけれども、いいテイサがですね。先週の 末にですね、リニューアルされましたので、そこについてリニューアルをも担当していた田さんに話を聞きたいなと思って
@potato4d
招待しております本日は玉田さんよろしくお願いいたします、よろしくお願いします。
2. 書き起こし機能
@potato4d
さてということで、かなり見た目から昨日から変わっていったかなと思うんですけど、今回のuitinsideのニューアル、具体的にどういったところが変わったか教えていただいてもよろしいでしょうか。
@spring_raining
はい、見た目はもちろんガラッと書いた感じになるんですけども、まあ、1番時間をかけてやったところで言うと、えっと、そうですね、書き起こし機能 をつけましたで、皆さんあの、もう見ているのかもしれないんですけれども、コントロールはの1番右に新しいオーターを つけまして、そこを押すとまpcだと、右からこうシュッと書き起こしの
@spring_raining
画面が出てきたり、あとは、やっぱスマートフォンだと下から出てくるみたいな感じの書き起こしのパネルを追加したという感じになってます。
@potato4d
結構あれですよね、これまでもテイサを書き起こししててほしいとかま、できればテキストで見たいとかっていうこう。需要ははい、1点あったのかなと思うんで がまこう。そこに答えていっての
@spring_raining
アップデートっていう。そうですね。そうですね、まあ結構あれですね。誰が要望していたかというと、主に多分自分だった気がする。
@spring_raining
そ、そうですね、結構前からなんか書き起こしみたいなっていう話を確か。えっと、そうですね、結構前からあの以前 えっと、prealイトですかね。そこで話したのが最初のなんか、あの、今後の機能として書き起こしつけたいですみたいな話を した記憶があります。
@potato4d
あ、あ、しましたね、しましたはい、あれが結構もう1年ぐらい前なんで、ちょうど1年越しぐらいのアップデートっていう感じですかね。
@spring_raining
そうですね、やりたいと思いつつ、どういった方針でやっていくかっていうのを、まあ考えていたっていうところで、1つきっかけだったのは、えっと、そのクローバノートというサービスがまあ最近 出ました。で、まそこのまあやるよっていう話を聞いて、 じゃあ、もうこれを使えばいいのでは。っていうところから、えっとま、実装が具体的に始まった感じですね、
@potato4d
クロバノートは、どこからできるんですか。
@spring_raining
これはあれですね、あの、今聞いている
@spring_raining
そうですね、line社のプロダクトになっております。で、あのまクローバというのは、そのlineのまあなんていうんですかね。そのai ま色んなこう。aiaiというか、そのま機械学習であったり、そういったそういう なんてソリューションというか、例えば、linアプリだと、その文字認識というか、あのオシアル的な機能であったり。まあ、これはそのクローバースピーチというその音声認識のまあ、技術
@spring_raining
のまソリューションをこう提供していて、で、クロバノートがま、それの技術を使った。あれですね。まあ、 書き起こしアプリというか、あの音声を記録してでま、それに対してこうメモとか音声が書き起こされたものをま後から見たりとかっていう、 すごい便利なアプリです。はい、私が作ったわけではないですけど、
@potato4d
をまあせっかくリリースされたんで、使ってみるかっていうので、今回uitサイドに導入してみたっていうはいいですね。
@spring_raining
そうですね、でも、uitinside自体はほんとにapiというか、その書き起こした結果を使わせてもらってるっていうだけなので、 まじ質機能としてつけたのはどうやってその音声のタイム スケジュールにこう追従させるかとか、あとは、あの、そのジャンプ機能であったりとかま、そういったui面でのまあ、実装が主になっております。
@potato4d
確かにそうですね、ま、聞きながら押してもらえるといいかなと思うんですけど、ちょうど話している内容に追従するような形で、自動でスクロールされて、 今話してるものの書き起こしが表示されるかなと思ってるんですけど、ま、そういうのをこうuitとしてとか、フロントエンドとして実装したっていう感じですね。はい、 ここの表示の部分で、結構そのトランスクリプトがどういう風に提供されているかとかもあるかなと思うんですけど、実装の裏側としては、どういう仕組みになってるんですか。
@spring_raining
そうですね、あのま書き起こしした結果っていうのは、そのテキストファイルで。えっと、まあ単純なほんとに なんて言うんですかね。そのジェイソンとかではない、ただのなんて言うんですかね、テキストファなってますこのフレーズがま何秒から 始まってで、誰が喋ってるかっていうのを、あのテキストファイルで得られるので、ま、それをこうパースして、
@spring_raining
で、そのフレーズごとにチャンクを作って、で、タイムライン上に並べるという感じになってます。
@potato4d
ああ、なるほど、じゃあ、その時間と話者とその話す内容っての人まとまりとしてするごとにこう分割して、
@spring_raining
はい、
@potato4d
距離してるって感じですね。
@spring_raining
そうですね、あとはあれですね、あの、元々そのuitサイトって、チャプターの機能がありまして、で、以前だと確かそのチャプター が一覧になってて、まそのチャプター単位でジャンプできるっていう状態になってた。はいと思うんですけど、はい なんですけど、もまそれを組み合わせたみたいな感じに今はなってます。で、スクロールさせると、スクロールステッキーでこう上に
@spring_raining
あのくっついてるのが、その以前のチャプターの機能になってます。なんで、まあ、それを 1つのタイムライン上で組み合わせたみたいな。今なってますね。
@potato4d
チャプターで飛ぶこともできるし、まあ、1つ1つも遠くないようにとることもできるっていう風な。はい、そうですね、かなりこれ これまではキャプターにざっくりだったんで、よりこう詳細に行くところが遷移できてよ。
@spring_raining
そうですよね、そうですよね、結構ま割とチャプターが以前も結構整備されてたので、そのあたりはま 使えてありがたかったところですね、結構なんていうんですかね。ただ、テキストスクリプトの羅列だと、割とメリハリと言いますか。 なかなかなか使いづらかったのかもしれないですね。
@potato4d
ああ、そうですね、うん、うん、うんうん。確かに。確かに ただこの辺りせっかくこういうふうに、かなり細かく分割できるようになってきたんで、なんかよくを言うと、あれですよね。あの時間とか、 あの、クイリストリングとかで時間とかしてして、シェアできるとよりああなりそうですよね。
@spring_raining
そうですね、それは確かに全然すぐにつけりそうですね、
@potato4d
今後できればこういうそういうのはどうよさそうですよね、
@spring_raining
やります。
@potato4d
ちなみに、この再生位置に合わせて、こうぬるっと感じのスクロールの種類とかも。なんか結構工夫して実測したりしたんですかね。
@spring_raining
あ、そうですね、はい。昨日で言うと、マスクロールスムーズとかも。最近ちょうどアオイス。でも、まあ 対応できるようになったとかあったと思うんですけども。まあ、なんで。あの、基本的にあんまりjsのjsで実装したところって 実はないんですよね。例えば、書き起こしのスクロール領域と、その全体のスクロール領域が今重なってるかなと思うんですけども、
@spring_raining
あの、例えばモーダルの実装とかを思い浮かべると、あのモーダルの中をスクールさせる
@potato4d
バーはい
@spring_raining
けれど、も、はい、その後ろ側をスクロールさせないっていうあの要望があるかなと思うんですけど、ま、そのケースだと、例えば今までだと、 そのjsで、そのボディにそのオーバーフローヒをあの動的につけるっていう 対応がま。大体一般的かなと思うんですけども、今回はあんまり、それはやらずに
@spring_raining
オーバースクロール、ビヘビアですね。そうですそれをあの設定して、まあ、 そのオーバースクロールビヘビアに対応してるブラウザであれば、書き起こしの中のスクロールのあの操作が外に 伝搬しないようにしたりっていうところを今回やってます。なんで、あの極力jsの
@spring_raining
機能を使わないっていうのが、はいはいはい、今回のまあ、もしかしたらもう1つの裏テーマかもしれないですね。うん、うん、うん、
@potato4d
確かにuitサイト自体は結構こうなんでしょう。ブラザーのサポートま、エンジア向けっていうのもあって、基本的に最新に寄せてるのもあって、 かなりそういうこう。プログレッシュ、ベイン、ハンスメント的な機能も使いやすいところでもあります。しね。はいはい、いいですね。
@spring_raining
まあ、あとは、pcとスマートフォンの横幅のサイズで、実装をできるだけ一緒にさせるとか。あの、ああ、はいはいはいはい、 あの、なんていうんですかね。この今、そのpcと スマートフォンでその横から出てくるか、上から出てくるかで、なんか実装かいてるんじゃないかっていうところ
@spring_raining
も。まあ、実装変える方法もあるんですけれども、今回はできるだけそれをなんて言うんすかね。分岐させないようにしたりとか っていうところをやったりとかしてますね。 なんで、あの位置が全然違うように見えるんですけれども、実はコントロールバーと書き起こしのコンポーネントは、両方とも同じものを使いましてます。
@potato4d
ま、基本的にスタイルとかでま調整する、そういう風にはしてる、
@spring_raining
そういうとこです。
@potato4d
やまこう、リッチな機能作る分、メンテナンスもこうしやすいように、できるだけしたかったみたいな意が
@potato4d
強さそうですかね。確かに、
@spring_raining
いや、あんまあんまり考えて、あんま
@spring_raining
までも結果的にそうなってるかもしれないですね。うん、
@potato4d
なるほどいいですね、その他で、このあたりも結構気合入れてやりましたみたいなあったりしますか。
3. ダークモード対応
@spring_raining
そうですね、ダークモード対応、あはいかにしましたもう、気づかれてる方だとは思うんですけど。と、右上に ダークモード、切り替えボタンがはいついています。で、ま、昨日自体はそんなに普通のダークモードなんで、 話すこともないかなっていうところはあるんですけど。そうですね、工夫したところで言うと、今のuitinサイドのライトモードのサイトって、
@spring_raining
ただ単にその色を反転させると大丈夫っていう感じでもないなんていうかは、背景の色が比較的派手な感じに
@potato4d
な。あ、あ、はい、そうですね、
@spring_raining
そのままなんかハチ黒くすると目立ちすぎるから、ダークモードだと、後ろのこうストライプがおとなしめの色になったりとか。
@potato4d
ああ、そうですね、はい、結構もうメイドのサイドもがっつり落としてって感じ
@spring_raining
なってます。はい、そうですね、あとはあのあれですね、その書き起こしの あのパネルの色なんですけれども、そのライトモードとダラックモードで微妙にこう色を書いたりとか。あの
@potato4d
あ、はい、なんかあれですよね。あの、ライトモードの時はもうほんとにがっつり黒系に寄せてるけど、ダークモードの時はどっちかっていうと、ブルー系のはい、 ダークモードのイーザインターフェースにあるこう、がっつり黒じゃない方のダークモードないよ、みたいな感じですよね。
@spring_raining
あ、そうです、そうですあの青系の色になってますで、これはダークモードの色のままにすると、そのコントロールバーの 色と、全体の背景の色と同一化しすぎてしまう。みたいな問題があったりとかあって、個人的にあんまりダークモード対応って、今まで してくる機会なかったんですけど、ただ、色をあの暗くするだけじゃないんだなっていうのは、今回結構やってて、面白かった。
@potato4d
ああ、そうですね、なんか、単純に黒くしてしまうと、その辺りってこう見通ってしまいすぎるみたいなとこありはいます。
@spring_raining
そうですよね、twitterとかもそうなんですけど、ダークものの中ですごいなんてすか。真の黒と こう、穏やかな黒みたいな
参加者 3
そうな
@spring_raining
使い方があるいて、なかなかい愛を考える上では、色々工夫しのあるところかなと。
@potato4d
ああ、なるほど、じゃ、ある意味こうそういうのも楽しみつけてきたみたいな、
@spring_raining
はい
@potato4d
や、感じ
@spring_raining
なかなかね、楽しかったです
@potato4d
ま、なかなかかなりな大体そうでしたけど、今後もアップデートしていけるといいですよね。
@spring_raining
はいや、そうですね、あの、アップデートしていきたいですね、
4. 後からつけた機能
@spring_raining
結構玉田さんも色々とアップデートを今後やっていってとか、あの、ちょうど今 きた Pull Request で書き起こしの今、そのクローバスピーチで、そのまま出てきたものを貼り付けているだけの 書き起こしの内容をめっちゃいろんなところを修正してもらうと、リクエストをえっと、投げてもらったんですけど、結構
@spring_raining
あれですか。こういう変更とかなかなか大変、
@potato4d
まあ、でもこうだんだん大変じゃなくなっていくはずなので、aiの進化に
@spring_raining
そうですよね。なんか、いや、ほんとにいや、進化していってもらいたい。それはあれですよね、そう書き起こしもそうですし、 私たちのサイトの方を進化していかないと。
参加者 3
そうですね。いですね、
@potato4d
まあ、でももう結構 この間リリースしてからでも、ニュースの一覧ページできたりとか、出演者のフィルタリングとかもできるようになってきて、結構エサイト内の機能も増えてきてるかなとは思うんで、 なんかこうこれまで結構要望がもらってるものも多いんで、そろそろ反映していきたいなとは思いますよね。
@spring_raining
そうですよね、結構あの、なんて言うか、あの感想を見てますって毎回言ってるんですけど、それに しては、あんまりこれまで対応できてなかったなっていうところとかもあってま。今回まあ、すごいいいタイミングなので、 色々とこう修正したりとかもはいやっております。
@potato4d
そうですね、ぜひやっていきましょう。なんか、他にも 技術ごとにラベリングしてほしいとか、あと、英語のエピソードだけ表示できるようにしてほしいっていう要望も、社内から買ってきたりとかしてるんで、はい、 結構ちょっとやっていければなと思いますね。
@spring_raining
そうですね、ラベリングや、それはほんとにやりたいです。あの、 しらさらっとあの英語対応っていう話もあったんですけど、あの、結構今後もなんていうんですかね。いろんな 英語のエピソードもま、今までで1回とったりとか
@spring_raining
あるんですけども、結構そういったいろんなジャンルの内容をすごい今まで取ってきたんですけど、もま結構数も増えてきたっていうところもあって、自分の興味のある エピソードをフィルタリングしたいっていうのは、そうですね、だんだんとそういう需要は増えてきて。そうですね。
@potato4d
そうですね、なんかかなりそのあたりはこう取り扱ってる手も多岐に渡るんで、だからこそ、やっていかないとなとは思いますね。
@spring_raining
逆にこう、こちらからこういった機能をつけたいとかっていうのを考えてみてもいいかもしれないですね。
@potato4d
ああ、確かに確かになんかでも、まずは結構要望をちゃんと答えていかないと、
@spring_raining
確かにそうな気も、 それで言うとあれですかね。そのあの話者ごとのそのエピソードの絞り込みみたいなのは、個人的な要望でつけたんですかね。
@potato4d
ああ、そうですね、なんか、あのか、前から紹介ができるページがあった方がいいよね。みたいなのは、何度か上がってたと思うんですけど、こう具体的なこうケース として形にはしてなかったなと思って。はいはいま、とりあえずあって困ることはないよなと思って、結構社内とかだと、その人事の表示でみたいみたいな。ま、実は運用してて、何度か話が上がったことはあって、毎回作ります。って言って作ってなかったんで、 あの思い出したのでやったみたいなこうきかったりしますね。
@spring_raining
いや、でもめちゃくちゃ便利そうですね、あと、あれですね、そのアカウントごとのギターブリンクとかも、もしかしたらつけた方がいいかも。
@potato4d
あ、あ、そうですね、なんか、もうそのあたりも全然できてないんで、やらないとなとは思いますね。やりたいですねしにちょっとなんかこう。内部的なことを言うと、 あのエピソードの管理にrdbを使ってるせいで、てか、データ全般にrtv使ってるせいで、そういうメタ情報を1個タコスとか。
@spring_raining
ああ、はい、
@potato4d
結果的になかなかアップデートできてないっていうのが結構あるなと思っていたりはしますね。
@spring_raining
そうですよね、
@potato4d
ジェイソン、プラス、スタティックサイト、ジェネレーターとかだったらもうちょいこう。多分、気軽に達してるんですけど、
@spring_raining
うんまでも逆にいい面で言うと、今回とかのケースだと、そのその書き起こしの機能をつけた ので、そのま書き起こしのテキストを追加するカラムを追加したんですけども、結構これをなんて言うんですかね。ジェジソンに埋め込んだら、 なかなかのサイズになってしまって、単純に全部取ってくる。あの、エピアになっていくと、すごいサイズがでかく
@spring_raining
りがちっていう懸念はあったんですけども、そういったところを具体的にタイプormを使ってるんですけど、 ま、そういったところ、このカムはあのこのエビアでは返さないみたいな、そういった制御ができるっていうところは、
@potato4d
ああ、確かに確かにいいかもしれない。そうですね、その辺りは、rdvueのニュースが出ているは
@spring_raining
します。そうですね、あ、あともう1つで言うとあれですね。その結構エピソードが多い くなっているので、新しいカラムを追加して で、いざそれをあのは対応しようとなった時に、過去のエピソードをさぼって、全部つけないといけないっていう問題が残されていますね。例えば、
@spring_raining
多分これからそのなんていうんですか。そのエピソードごとに、あのジャンルの分類まタグ付けみたいなのをつけたとして、それを 過去のエピソードを全部聞いてからもつけないといけないっていう問題も残されてますね。
@potato4d
ああ、確かにそうです。まだまだ道のりがなんか色々アップデートするや、道のりがとうそうな気がしてきました、
@spring_raining
頑張りましょう、
@potato4d
頑張りましょうっていう感じで、なんかこれからも頑張っていくので、皆さんぜひぜひエピソード聞いていただければ、という 感じですかね。はい、よろしくお願いしますお願いします。あ、あとあれですね、えっと、実はこう姉妹サイト的なもので。 えっと、lfkdposというiosの話が中心になってる。えー、ポッドキャストがペット
5. 他のポッドキャストサイトの状況
@potato4d
lineから出てるんですけど、なんか、そっちも同じシステム使ってるんで、なんか今後上手く転用とかしていけたらいいなとか思ってたりするんで、ぜひぜひそっちもはい、お願いいたします
@spring_raining
よろしくお願いします。
6. クロージング
@potato4d
というわけで、今回はuitinサイトの、ウェブサイトのリニューアルとトランスクルプと、えーまたまラックモードの話などなどをしていきました。 line株式会社では、このようなフロントエンド技術に対する議論や、意見交換を日々行っております。ゆえて、インサイトで公開されるものの、中では社内の勉強会などで始まった企画も多くありますので、今後も様々な情報を発信していければと ております。また、はい、株式会社では、現在新卒中と採用とにレッサン募集中となっております。
@potato4d
ぜひ、このエピソードを聞いて、ラインに興味を持ってくださった方は Show Note 最下部の求人のリンクの方から、気軽にご連絡いただければと思います。 今は、ズームでのカジュアルメンダーなんかも行ってますので、時間気にせず、いつでもえー対応できるかなと思います。てことで、今回は
@spring_raining
ありがとうございました。