音声書き起こし
1. オープニング
Guest
ユーザーインターフェースとテクノロジーアする、開発者のためのイークリーポッド、キャストイワイテインサイド。今週もやっていきたいと思います。
Guest
今週はですねえ、UITの上野さんをえ、ゲストにえ、招待して、webコンポリンズをえ、プロダクションで使って、うまく活用してるっていう事例について聞いていければなと思っております。
Guest
上野さんよろしくお願いいたします
Guest
よろしくお願いします。
2. ゲスト紹介
Guest
はいえでは早速ですけど、え、上野さん以前言われて、インサイドにえ出ていただいたことはあるかなと思うんですけど、かなり久々かなと思いますので、そうです。
Guest
ちょっとえ、自己紹介の方、お願いしてもよろしいでしょうか。
Guest
はいと、上野こうへと申します今は、フロントエンドデブキチームに所属しています。えーで、基本的に
Guest
LINEバイトのえ、フロンテの開発にえ、従事していますよろしくお願いします
Guest
はい、よろしくお願いいたします。
3. Web ComponentでLPの横展開を実現した話
Guest
ええ、それではもう早速本来に行きたいなと思うんですけど。まあ、LINEバイトを担当していて、ウェブコンポーネンツを使ってっていう話になってくるかなと思うんですけど、具体的にはどういうことやっていたかってのを、ちょっと概要を教えてもらってもいいですかね。
Guest
はい、そうですねま、元々LINEバイトはえ、まあ、数年前からあるプロジェクトなんですが、でま、LINEバイトの
Guest
LINEのオピシャルアカウントからユーザーに色々ま求人情報送ったりしているんですけど、ま、その中でえまlpを配信するっていうのも
Guest
はい、かなり前から運用していて、はいっていうのがあります。で、そのlpっていうのは、え、エンジニアが作ってるわけじゃなくて、
Guest
プランナー企画色の方が
Guest
はい、企画まlpに盛り込むコンテンツを考えて、lpを作成してで、それを配信するって形になっているんですけど、は、いま、そのlpを作成する
Guest
部分で、エンジには関わってないんですけど、それはま、社内のまlpを作成する自動で作成するツール
Guest
まlpジェっていうツールがあってま。それを企画色の方がつっている使ってルピを作ってるっていう現状になってます。あ
Guest
あ、なるほど、これはあれですかね。要は、LINEバイトのサービスとアは全然別のところにlpaとして作って、そこに公式アカウントから飛ばしてるっていう状態
Guest
そうです。
Guest
はいま、ドメインはラインバイトのドメインになるんですけど、中身は完全に別物になってます。はい、そうですね、まあその中で
Guest
まあそれで運用してきたんですけど、まあ、そうですね、まあ、先に概要だけ言うと、ま、その中に
Guest
lpjで実現できないようなuiを使って、え、求人情報をそのlpに掲載したいっていう
Guest
要件が出てきました。で、その中でwebコンポーネンツを使って、そのカスタムuiを表示するっていうプロジェクトを
Guest
やりました。っていう話です。はい、なるほど、
Guest
あ、ちょっとその性的サイトの生成ツールlpェだとまできない範囲の表現みたいなのを結構
Guest
やりたくなってきたけれども、まあ、あの開発の力も必要だっていうところで、開発者側がはい、ご実装したっていうとこですね。なんか、
Guest
具体的にlpgでできなかったことって、どういうことなんですかね。
Guest
そうですね、と、今までlpgに求人を載せるっていうと、企画の方がと求人を選んで、で、それを
Guest
ま貼り付けるって形貼り付けるといいますか。まあ、その求人情報をコピーアンドペースとして貼り付けるっていう運用
Guest
だったと思うんですけど、ま、そうじゃなくて、もっと動的に求人情報を取り出したいっていう要件がありましてま、例えば、
Guest
えま短期アルバイト特集みたいな。はい、lpを作成したい場合は、そのまに理想的には
Guest
自動で、例えば、うん、東京都のえ、バイトの種類が短期バイトっていうえ、ピアを叩いて、そこから帰ってくる求人情報を
Guest
自動的に載せたいって運用したいんですけど、それはlpジェではま、そういうスクリプトを埋め込むことができないので、
Guest
は。い、そこをどうにかしたいっていう相談を、企画の方から受けたっていうのが背景です。
Guest
じゃ、これまでは結構あれなんですね。サービス内で提供している実求人のデータを企画者がじゅ自分で引っ張ってきて、lpgを前上で表現してたっていうとこなんすね
Guest
はいます。それか、もはやlpを経由しないで、そのラインバイトのあそ1覧ページに直接飛ばしていたっていう部分もあります。
Guest
なるほどな
Guest
ただ、lpにすることで、まその1段階クッションとして、まいろんな求人がをユーザーに見てもらえるっていう部分を実現したいと
Guest
より、こうざっと見られるようなページとしてですね。提供したいとはですね、
Guest
はい。なので、その求人を載せるuiっていうのもまカルセル表示をしたいんですけど、ま、それも
Guest
既存のlpェのに組み込まれてるuiパターンでは再現できないっていうの
Guest
になってます。はいはい、はいはい
Guest
じゃ、その中であの動的に表示するの開発側で、協力したって感じだと思うんですけど、実際どういった形で、そのツールとの新話制とかもあると思うんですけど、どういう形で今回解決したっていうとこ
4. 企画者が触れるサイトを作るための手法
Guest
ですかね。
Guest
そうですね、まず、まあ、いろんな手法が考えられたと思うんですけど、まで、最初のミーティングの時点では。
Guest
はいま色々あったうちにま、その社内cmsとか社内cmsは我々iimsって呼んでる。はいはいはいですけど、はいま、社内cms
Guest
の中でま求人を動的に選べるようにしてで、
Guest
まあ、そのcmsでhtmlpのhtmlをジェネレートする。はいていはい、うま方法が1つあったりだとか、
Guest
ま、あと、非常に単純なやり方ですけど、フロントエンドエンジニアが、htmlとcssとジャパスクリプト。頑張って用意して
Guest
はいで、そのlpjにはそのカスタムhtmlっていうセクションがあって、まあ、生のhtmlを挿入できる場所があるんで、まそこに
Guest
えコピーアンドペーストしてもらうっていう部分がありますね。まあ、ははいま最終的に
Guest
我々が選択したやつですけど、ウェブコンポーネンツを使って、うんうん、うん、もらうっていうま大体3つぐらい考えました。
Guest
なるほど、なるほど、結構あれですね、そう考えると、1番辛くなすのは、確かにウェブコンポリントの採用っていうのが、
Guest
うん、そうですね。その社内cmsのやつだと、その
Guest
cmsの部分、はい、htmlpを生成するっていう部分の開発コストかなりあるのと、まあ、それって結局既存のlpジェ
Guest
pを自動生成してくれるツールの再開発になっちゃうよね。っていう話にもなっていたのでは。いま、ここはやっぱり
Guest
よるコンポネの出番かな、というはい、部分でした。
Guest
結構開発内で、webコンポネントを使うってなると、他のリアクトとかビーとかと比較するとかってよくあるかなと思うんですけど、こういうシチュエーションだと、確かにかなり昨日単位で
Guest
開発して、企画者に提供して、それによって動的にコンテンツを表示するっていう形だと、
Guest
という比較のあの土俵に立った時に、すごいカマエレメントって良さそうな選択肢ですね。
Guest
そうですね、もうまさになんかカスタムエレメントが欲しいっていう。はいはい、条件だったので、もうまさにこれからという。
Guest
確かに結構プランナーの方とかでも、hllとかcssは書いたことあるよって人は結構多いかなと思うんで、
Guest
なんかそうですね、確かに、タグを書くことによって表示できるっていうのだったら、すごい直感的な気がしますし、なんかまたあれですよね。ウェブコンポレント側に修正しないといけない、ロジックとかがあったときにいう、it以内で
Guest
直せる。あ、そうですよさ、そうではいす
Guest
はい
Guest
で、最終的にに動的表示っていうのをま、ウェブコンポネートを使って実装したっていう感じですね。はい、
Guest
あ、ちなみに結構なんかま主導でやるの辛いま、更新性とか考えると辛いとかってあるのかなと思うんですけど、なんかlpってそんなにこういっぱい作ることあるのかなっていうのがイメージとしてあって、なんかまあ最悪いた主導で、例えばUIT
Guest
で開発しちゃうとかってのもあるかなと思ったんですけど、なんか、結構lpの数自体は多かったっていう感じですかね。
Guest
そうですね、やっぱりえま求人の属性によって、まいろんな特集が組めると思っていてま。例えば、短期アルバイト
Guest
特集とか、学生向け、バイト募集、はいはいっていう部分で、まあそれだけでいろんな組み合わせがあるのと、あと、東京都の
Guest
ままなバイト特集とか、都道府県の部分の入ってくると、かなりの組み合わせになるので、で、それら全て
Guest
を指導で求人選んでとか、コピアノペーストってやると、かなりはいはいはい、大変になってくるのかなという感じでした。はい、
Guest
ああ、なるほど、確かに切り口1つや2つだといいですけど、複数あって、かつ都道府県ごとってなると、駆け算になってくるんで、かなり多い数の
Guest
ページを運用する必要があったって感じですね。
Guest
はい、
Guest
確かにそういう意味ではなんでしょう。うまく分業しながら、量産するための基盤としては、すごいエブコンポネットの採用良さそうですね。
Guest
はい、
Guest
まさに再利用可能なコトネットなの
5. 運用しての手応え
Guest
じゃ、結構えと、今採用に至るまでの経緯とか。他に比較した手法。え、手法なんかを聞いていったかなと思うんですけど、実際これでプロダクション乗ってって感じになったかなと思うんですけど、どういうふうに実装して、どう運用したかっていうの、
Guest
ちょっと教えてみてもらってもいいですかね。
Guest
はい、そうですね、まあ、完全にウェブコンポーネントを使って、配信を開始する前に、まその
Guest
カルーセルuyだったりとかま、求人特集のlpのま果たして、それを配信して、どれぐらい効果が得られるかっていうま、テストを最初に
Guest
テスト配信を最初にしました。でま、これはウェブコンポイントを使わないでま生のhtmlcssを渡して
Guest
は、いま、求人情報もコピーしてもらってまえ。全員じゃないですけど、ま、ある程度数を絞って、テスト配信をしました。
Guest
はいはい
Guest
はいでまあまあその結果なんですけど、まだ体求人詳細まで求人詳細
Guest
ページまで遷移したpv数が大体2倍ほどま、その普通のえ、これは比較対象はあれですね。オフィシャルアカウントから、
Guest
LINEバイトの検索結果一覧に飛ばしたのと、比較して
Guest
lpを経由した場合は、ま2倍ぐらいの大体pv数があったっていう部分があったので、効果が得られたので、ま、これははい、しっかり
Guest
プロジェクトとして運用していこうってなったんですけど、やっぱり指導は辛いのですね。
Guest
でも、これはそう指導でずっと運用していくのは辛いので、ウェブコンポーネントに
Guest
していく。
Guest
はい、していこうっていう背景もありました。
Guest
はい、あ、でも2倍ってすごいですね。
Guest
そうですね、結構まなんだろうき求人お求、食意欲の低い人。はいはいま、あんまりアグレッシブに求人を探してないけど、
Guest
まだだ求人情報は不完してみたいっていう傾向けに配信したので、だいぶそういった意味ではピークは増えました。
Guest
やっぱりこういうあれなんすね。あの、ウェブサイサイト自体の検索の窓とは、また別のそういったユーザーのステータスというか、モチベーションに応じたuiを
Guest
そうそう提供するってのが大事ですし、まあ、それ横展開したいってなっていくって感じですね。
Guest
はいで、まあそうですね、実際にウェブコンポーネント、あ、カスタメルメントを開発するっていう段階になったんですけど、はいまあ
Guest
結構意識したこととしては、そのま、やっぱり最終的に運用していくのは、エンジニアじゃない方なので、
Guest
なるべくそのヒエンジニアでも使いやすいインターフェースは、結構心がけていては、いま、カスタメルメンツ
Guest
書いたことある方ならわかると思うんですけど、まあ、好きなタグの名前を定義できて、で、あと、アトリビュートもま好きなものを定義できるので、
Guest
ま、例えば、今回はまジョブカルセルリストっていう名前のタグを作って、その中にクエリーってアトリビュートを付けてあげて、
Guest
まそのクエリにはま検索パラメーターみたいなものを、例えばプリそうですね。ちょっと口頭だと難しいですけど、あ
Guest
ああわかりますあのけん、検索サイトに
Guest
よくあるそうです。そうですプリフェクチャーd、イコール13とか、まあ、なんか色々url々まで、企画の方には、そのLINEバイトの
Guest
検索結果一覧にサインしてもらって、そこのurlをコピペすればできるよっていうはいは伝えてあるので、まそこをコピペしてもらって、あとまあタイトル
Guest
アトリビュートもつけて、それをつけると、まあ、タイトル部分のにそれが出るみたいなのだけをそこだけを意識してもらう。
Guest
はい、インターフェイスはしています。
Guest
あ、いいですね、なんかこう結構どういうアトリビュートの付け方しようって悩むところかなと思うんですけど、変にこだわらず、もはや
Guest
ウェブサイト側で検索したやつを、そのままクエリーっていうのに、与えるだけでいいよっていうのは、なんかお互いすごいやりやすい気がしますよね。はい、そうです
Guest
うん、なるほど、
Guest
はいで、まあ中で使用してる。まあ、パッケージとしてはまでペンテンシーに入ってるのはリッド。ま9
Guest
ちょっと前までリットエルメントって呼ばれてたやつ、はいはいはいですねま、これはエムリまはいまウェブ標準のカストメルメントを
Guest
ま簡単にラップしてるやつなんですけど、まあ、これを使えば結構宣言的に簡単にはいかけるはいので、これはかなり
Guest
便利でした。はいはいはい、
Guest
そんなに普段の開発と変わらない体験で
Guest
そうです。そうですは、いまそれが開発の部分ですね。
Guest
なるほど、なるほど、じゃあ結構シンプルな作りになって、かつまあお互い開発しやすいし、運用しやすい企画者にとってはいいよ。運用しやすい感じで、はい、作ったって感じですね。
Guest
そうですね、
Guest
ちょっと実際のコンポネントの書き方とか。口頭で分かりづらいとこはシノートに書いとくんで、ぜひぜひちょっと気になる人は見ていただければと思います。
Guest
じゃ、結構まそんな感じでま、今話聞いてるだけでも、えー。サイト内でえ、実際打ったクエリはつけるだけっていうので、かなりこう横に展開しやすいかなと思うんですけど、なんか実際lpの運用っていつぐらいから、どれぐらいの数
Guest
今運用されてるんですかね。
Guest
そうですね、と、この機能がリリースされたのが8月12日ぐらい
Guest
でま。大体これ、16日から1か月前とかだと思うんですけど、でま、大体カウントしてみたら、20個ぐらいのlpに使われていて、
Guest
まただそうですね。その20個のlpが20個ま20個少ないと思うんですけど、ま、ただ、それは
Guest
都道府県とかの組み合わせが入ってないやつ。うん、うん。なので、まあ、20個に対して、さらに都道府県のやつも、それはクエリの部分でカバーできるので
Guest
は。いま、20個
Guest
なるほど、なるほどとはあの切り口ごとで20個あって、それが都道府県ごとで提供してるって感じですね。なるほど、なるほど、
Guest
そうですそうですおーでも、切り口ごとで20個作れるだけで、すでにかなり
Guest
そうですね、それが本来これだったらだいぶ
Guest
そうですね、やってられないぐらいなんで、
Guest
やっぱりこういうところで、ある程度こうなんていうんでしょう。半自動家というか、全部が全部自動生成してるわけじゃないけど、みたいなのは
Guest
かなり量産の役に立ってる気がしますね。
Guest
はい、
Guest
実際20個、今運用されて1か月っていうところでなんかどうですかね。運用してみた所管みたいなところで言うと、開発を決めてって感じで言うと
Guest
はいま、まず、もう企画の運用側もま我々としても、非常に
Guest
コースもかかんないですし、やりやすくてとてもいいなと思ってるんですけど、ま、その中でもすごいいいなと思ってるのがま、冒頭でもあったと思うんですけど、
Guest
そのまあ、フロントの側UIT側でバージョン管理ができるってのはすごいはいとてもいいなと思ってて、
Guest
そのコピペとかだと、まあ、コピペするときの伝達ミスだとか。まあ、コピペ
Guest
うん。そうですね、そのコソースコードをギットで管理できないとかっていうのもあると思うんですけど。まあ、カスメレンベブ、コンポーネンツの場合は
Guest
ギターブ上で管理できてますし、まあ、プロリックとかではい、レビューもちゃんと取ってるし、しかも、リリース段階になったら、え。
Guest
はい、cdnにバージョニングした状態で、パブリッシュできて、で、そのバージョン
Guest
パスをパージョンを持ったパスを渡すことで、絶対に整合性がと、はいはい、常は常に取れた状態で、企画の方々も。はい、
Guest
使い回せるので、そういった意味ではすごいうん、まあ心配もない、安全でだいぶはい、
Guest
運用できてっていうのは、すごいとてもいいなっていう感じがあります。
Guest
開発面でミスしづらいけど、企画者にとっても、そんなにこうめんどくさくないっていう。ちょうどいいや、売が取れてる気がしますね、
Guest
なるほど、じゃ結構あれですかね。なんか、LINEバイトとしては、今回ウェブコンポに使って実装してよかったなっていう感じですかね。あ、
Guest
はい、間違いなく良かったです、
Guest
結構あれですか、なんか、もし次同じような案件とかが出て、やりたいなってなった時、またこの手法でやろうかなって感じですかね。
Guest
はい、いや、もう間違いなく、これを使ってやると思います。結構最近も新しくまトリベート増やして、機能追加、
Guest
既存のコンポーネントに対して基礎あの機能追加もしました。しま、もし、uiの変更とかが要請があれば
Guest
ま、新しいコンポネットを作って、提供っていうこともできるのでは。い、すごい。はい、今後もこれで運用していきたいと思ってます。
Guest
いいですね、ちなみに、あの、最近追加したアトリビュートって、どういうのだったんですか。
Guest
そうですね、と、LINEバイトはと企業別求人一覧ていうページも用意されてて、はい、例えばま、株式会社丸々の
Guest
求人一覧っていうのもapr取得できるんですけど、今回はカンパニーidっていうアトビュートを追加して、
Guest
乾杯にidを指定してもらえれば、え、そのき、その企業の求人情報だけを表示することができるっていう部分。
Guest
ああ、なるほどな追加しまし
Guest
じゃ、結構おっきな求人情報を多数掲載してるような、会社さんの求人にフィーチャーしたいった時に。
Guest
そうですね、使えるって感じですね、おお
Guest
いいですね、なんか、こう、ほんとに気軽に拡張ができて、勝つ協業しやすいってのは、ほんとにいい食だなと思いました。
Guest
そうですね、
Guest
結構webコンポネートって使いろ、難しい技術だなと思ってたんですけど、なんか、LINEバイトで使って見れるって話を聞いた時に、あのか、かなり
Guest
なんかいい使い方だなと思ってたんですけど、なんかこう聞くと、よりこう。こういったケースが出た時には、
Guest
1つの選択肢として、かなり濃厚なものとして、上がってきそうだなって
Guest
はいしましたね。まさに、ライブ実装を隠してま外側のインターフェースだけを提供したい。うん、うんっていうのはかなり
Guest
そうっすね。なんか、すごい興業に向いたというか、技術な気がしましたね。
Guest
はい、
Guest
あ、ありがとうございます
Guest
はい、
Guest
じゃえ、クロジング行きたいと思います。
Guest
はいえーというわけで、今回はえ、上野さんにLINEバイトでのえ、webコンポーネンツの活用について話を聞いていきました。
6. クロージング
Guest
ラインのフロントエンド組織UITでは、このようなフロントエンドに関するえ、議論やえ、相談などなどを日々行っております。
Guest
外部にですね。発信している、UIT、サイドミットアップなどなどのコンテンツでは、社内ペ協会などなどから始まった企画も多くございますので、今後もえ、LINEのフロンテント事情っていうのをどんどん発信していければなと思っております。
Guest
また、本エピソードについてのご意見やご感想などなどありましたら、ハッシュタグシャープ、UIT、アンダースコアインサイド見て、えーついていただきますと、
Guest
上の方でガシガシ拾っていきたいと思いますので、ぜひぜひお願いいたします。
Guest
またえ、最後になりますが、LINE株式会社では、クロンテドの開発を協力できる、してもらえる仲間を今募集しております。
Guest
小ノートのサカ部の方にですね、求人へのリンク、新卒中とともに貼っておりますので、え、ぜひぜひご興味のある方は、アライただければと思います。
Guest
カジュアル面談も、今はズームでやっているので、え、気軽にご連絡いただければと思います。というわけでえ、今回はですね。
Guest
タイムバイトのwebコンポーネンツについて、上野さんとともに話していきました、ありがとうございました、
Guest
ありがとうございました。