音声書き起こし
1. オープニング
Guest
こんにちは
Guest
こんにちは
Guest
それでは、今日もユテンサイドやっていきましょうよ。テサイドは、ユザインターフェースと、テクノロジーを愛する開発者めの者のためのポッドキャストです。
Guest
最新の指標準は、もちろん開発、フレームワークの変遷や、uiウェックに関する言葉で、様々なフロントエンドの情報をキャッチアップできる、ポットキャストをお送りしております。
Guest
twitterでのハッシュタグは、シャープuyt、アンダースコアインサイド、エピソードのご意見やご感想、リクエストなどなど、ぜひぜひ気軽にツイートしてください。
Guest
で、今日はですね。ラインのフロントデンジニアのゴールデンウィークの第2回目ということで、
Guest
今回、三好さんをお呼びして、お話を伺いたいと思います。
Guest
はい、よろしくお願いしま
Guest
すよろしくお願いします。今回はみよさん
2. miyoshi さん自己紹介
Guest
のまあ、作成されたfsvgのまあ、マップついてのまあ、お話を伺いたいと思います。
Guest
まず、ちょっとよさんあの、所属など自己紹介をいただきたいですが、よろしいでしょうか。
Guest
はいえ、ですね、LINE株式会社のフロントエンドデブ1の
Guest
UITチームですかね。に所属しています。はい、でと、主にLINEnewsの開発を担当しています。
3. GW の自由研究結果について
Guest
早速ですけれども、ゴールデンウィーク中に作られた成果物について、ちょっとご紹介いただきたい。
Guest
はい、まあします。正確に言うと、ゴールデンウィークをちょっとまたいでるんですけど、前から作ってたので、
Guest
ま、あと、ちょっとあのコビットlintがあって、ゴールデンウィークがいつからかって、なんか割と曖昧な感じで始まってしまったので。
Guest
っていうのもあるんですけど、元々はですね。あの、まあ、LINEnewsので、今えコロナタというのを出してまして。
Guest
はい、ニュースのトップの1番上に出てるバーナンスと行けるページなんですけれども
Guest
ま、今緊急事態速報とか、コロナの感染者が増えた、減ったみたいなニュースをLINEニュースでも結構して、今出してるので、
Guest
そこに出す。情報がいくつかありましてま、外部のAPIからもらってるんですけれど、
Guest
うん、まあ、リアルリアルタイムの感染者と、あと、都道府県で、
Guest
今今累計で感染者がこのくらいで治った人がこのくらいです。とかっていう。あと、死傷者といかっていう一覧のマップが、
Guest
マップとグラフと一覧表みたいのを出してるんですけれどもあります。その地図の方を元も内部で作るという予定だったんですね。動的に
Guest
うんというので、それを作って試してたんですが、まあ、結局これは採用はされなかったんですけれども、
Guest
あ、そう。
Guest
はいはそうですね。されなかったのですけれども、一応もうかなり作り込んでしまったので、あの内部的に
Guest
んで。あと、これって、地図を動地図に動的にデータをマッピングして出すっていうものなので、あの割と汎用で使えるんですよね。
Guest
はいはいはい、
Guest
あのまあ例えば交通事故、車数とか
Guest
そういうのも出そうと思えば出せるので、なんでも。日本のデータであれ、あれさせば出せって割と汎用でニュースで使えそうなので、
Guest
完全に汎用化してしまって、これは作り切ってしまおうかなと思ったのが、そもそものきっかけですね。はい、
Guest
LINEnewsもうまさに、こういう各都道府県の情報を出すみたいなの。もうそれそれこそこの
4. 開発の経緯について
Guest
感染者だけでなく、何でも使えるところではあるので、結構あれですよね。どこでも使えそうですね
Guest
あと、あると結構すぐ使えるんですけど、用意するのが結構めんどくさいんですよね。な。通常ライブラリを使うと思うんですけど、こういうのって
Guest
で、まあ、はい。実際、社外性のライブを最初テストで使ってみたんですけれど、あのはい、結構まあ、結。LINE社って、デザインのカスタムしいことが多いというのと、
Guest
あとの描画が結構どうしても細くなってしまうんですよね。社外だと
Guest
思ってたよりも、遥かに時間がかかってしまってですね。使ってみたところ、あの特に地図は重いんですよね。
Guest
はいはい、
Guest
なので、まあ、そうだったら中で作った方が実際自作した方が10倍近く早いので、地図に関しては
Guest
あ、そうなんですねえ、え
Guest
まというのもあるので、中で作ってみたという感じですね。
Guest
はい、お、そうですか、結構そうです地図今パッと見たとこより重そうだなと思ったのは、あの、あれですね。そのsvg自体の重さみたい
Guest
そうですね、それが1番ボトルネックになりますね。うん、あというところか、これ地図と言っても著作権があるので、
Guest
あの結構簡単に使えないんですよ。そこら辺にあるやつを
Guest
あ、はいはいはい、そうです。え、じゃ、ここの地図はどうやって用意して、
Guest
今汎用でとりあえず出すようにしてるのは、あの著作権のフリーなやつなんですけれど、はいはい、ま、今って割とリアルな地図を出してるんですけれど、
Guest
例えば、あの天気予報とかでこうち抽象化された地図というか、四角います。手道府県みたいなのが出てたりするじゃないですか、別にあれでも行けるので、
Guest
要はサービスで流して、デザイナーさんが用意してくれれば、そのまま使えるっていう感じですね。
Guest
うん、あ、なるほど、じゃああれですね、この今のそのリアルなそのなんていうんですか。境界線だけじゃなくて、もっとこう抽象化した
Guest
日本の都道府県をこう表示させるみたいなのもま、今後はそうで
Guest
ですね。物自体はあの、まあデフォルトに入ってるのが地図なだけで、svgにマッピングデータをこうバインドするみたいな仕組みなので、うん、例えばなんだろう関東だけとか、
Guest
あ、その関東だけのデータを用意してくれれば、別にそれはそれで出せるっていう感じになるので。
Guest
だから、まあ、形としてあると、ベースとしてあると、割と何かに使いそうかなと思ってます。
Guest
それは便利ですね。なんなんて言うんですか。あの
Guest
ま、そのエンジニアリングっていうところもそうですけど、あれですね。そのデザイナーの側もそういう汎用的に使えるし、
5. コンポーネント共通化事例
Guest
そういう日本地図とか、そういう情報は欲しいのかもしれない。これは結構あり
Guest
そうですね、まあ、あれば何かに使うかなといううん感じはしてます。
Guest
なんか、ゴールデンウィークのところっていうよりは、普通になんか業務として用意する意義があるところな。
Guest
そうですね、まあ、何かで活用できればいいかなと思ってます。
Guest
今回、日本地図の梱包、念頭っていうのを作られたと思うんですけれども、あの、
Guest
こういう何て言うんすかね。あらかじめ。こういうコンポーネントを汎用化したものをなんか作っておくっていう事例っていうのは、なんか他
Guest
ありましたかね。そういう、そのLINEnewsに限らなくてもいいですけど、こういうあらかじめあるみたいな。そう
Guest
そうですね、あったらま。今bugsを主に使ってるんですけど、まあ、ちょっと。今コロナで今やってないんですけど、試合があのjリーグのはい、専用のページみたいのがレアインデースにありまして。あ、
Guest
はいはい
Guest
でそこで、スタッツって言って、パスがこのくらいの数を通してます。とか、
Guest
アシストがこのくらいあります。とかっていうこう、サッカーでよく出るスタッツっていう6角形のチャートが出るんですけど、あ
Guest
はいないので、まあなんだ敵チームとみか敵と味方というか、まあ、ホームとアウェイのチームの
Guest
2つが出てこう重なって、うん、うん、こうなこのくらい差があります。みたいなやつが出るんですけれど、えっ、はいと、それは完全に
Guest
汎用で使えるチャートを作って用意してあるので、他のチームでも他のチームというか、まあ、スポーツ以外でも使う気になれば使えるってやつは用意してますね。
Guest
おお、すごい。なんか、LINEnewsならではって感じ
Guest
そうですね。ま、あと、ビーだから。あと、作っておくと簡単に使い回しができるので、あのちゃんと汎用に作っておけばっていうのは大きいですね。
Guest
もうすごいLINEnewsには、あんまりかん関わりのない仕事をしてると、結構
Guest
な、なんて言うんすかねたためになるっていうか、なるほど、っていう感じはしますね。それは面白そう、面白いっていうか、いや、
Guest
多分あの
Guest
結構LINEnews以外で使うことっていうのは、まあ、確かにあのすぐにはないかもしれないですけど、すごい
Guest
あれですね、あの、もっと聞きたいです。そういう話が
Guest
ま、そのまま使えなくても、なんかあると、ある程度カスタムして使うときに楽なので、やっぱり0からだと結構は難しいですからね。svg0から書くのは、
Guest
うんうん、というのは大きいですね。
Guest
おお、すごい。じゃあそう。あと、
Guest
じゃあ、マップにちょっと戻りまして、結構さっきのそのなんていうんですかね。デフォルメされたマップであったりとか、あと、こうリアルなマップっていうパターンとかもあるあったと思うんですけれども、なんかそれ以外になんかこう
Guest
マップこういう機能があった方がいいみたいなのをそう、LINEnewsの観点から見て、なんかあったりしますか。
Guest
ま、そうですね、ま、マップというか、もうちょっとなんて言うんですか。ビジョライゼーションを
Guest
まあ、評価していきたい。こういうライブラなると結構すぐに使えるので、ってのも。はい、今、実はあのグラフとかも作ってるんですけど、実は
Guest
はいはい、
Guest
そういうキャンバスとか、svgとかを割とそのジェース専門でやってる人って、突然キャンバスかいてくれとか言われると、ハードル高いじゃないですか。
Guest
そうですね、それはちょちょっと待ってください。そう
Guest
あの、あれ、しかもなんか結構数学がわからないと、あれってすごいやりづらいじゃないですか。図計画の
Guest
うんうん、うん、うん、はいはいはい
Guest
とかったらsvgってあのまあsv自体ま要はxmlの一種なので、あのはい、例えばbgsとかリアクトみたいに。
Guest
その道具に直接バインドして、動的にコントロールします。みたいなやつとの相性がすごくいいんですよね。普通のタグと一緒に使えるので
Guest
は。要は、タグのなんとか属性を変えるのとかと、感覚としては全く同じで使えるので、
Guest
うんがあるので、ま、あんまり選択肢に上がらないとは思うんですけど、結構キャンバスとか、そういうsvgとかをできるだけ積極的に使っていきたいな、という感じはあります。うん、
Guest
確かに結構あのsvgで
Guest
つかあの実装できる局面かと思いきや、あのキャンパスで実装するっていうところもあったりっていうの意外と
Guest
あったりして。あの、僕、最近そのpaperdojasっていうライブはいはいはいつ
Guest
たりするんですけども、あの、あれはなんなんて言うんですかね。
Guest
あの、あの、APIとしてはそのsvgなんですけれども、その
Guest
実際に描画するところは、キャンパスっていうところがあったりして、そこは
Guest
なんですかね。やっぱり、そのパフォーマンス的なところかなとは思うんですけれども、
Guest
そういうsvgかキャンバスかっていうのを、こう選定するところをちょっと。もし
Guest
あのあったら聞きたいなっていう。そういうインタラクティブなところ以外で、そういうあのキャンバスを選択したり、gを選択したりっていう決めてみたいなの。
Guest
そうですね。svgの方がsvgのメリ1番のメリットは何かって言うと、まあ、さっきの書きやすいっていうのもあるんですけど、あの、デフォルト描画ができるんですよね。
Guest
あの、あの画像みたいに読み込みは必要なんですけど、最初に出てくれるやつがあるんですよ。計算しなくても、svg自体が表示できるので、
Guest
1回そう空で表示してから、あのう上乗せでこう動的に変わっていくみたいなことができるので、
Guest
割とその初期描画が早くていいっていうメリットがまずsbgはありますよね。
Guest
なるほど
Guest
で、キャンバスはその初期の描画ができないんですけれど、ま、逆にあのリアルタイムに激しく動くみたいな。
Guest
個人的にはあのオーディオAPI、オーディオコンテキストAPIってのがウェブにあるんですけど、まあ、音楽の音を取るAPIみたいなあ、はいはいで、あの、
Guest
なんていうんですかね。ビジュアライザーつって、あの、なんて言うんですかね。あの、よくあのプレイヤーの横についてるあの動くやつ
Guest
ありますねお、あの音程のヘルプで出してくるやつがありますよね。はい、ああいうのって、リアルタイムにあれは実際はすごい
Guest
なんて言うんすかね。と取れば、取るだけ細かい時間で取れるみたいなやつなんですけど、あれって、実はそのくらいの激しい描画になると、多分キャンパスの方がやりやすいかなっていう感じですね。
Guest
ああ、確かに
Guest
まだから、ずっと変化があるようなやつは、キャンパスの方が良くて。っていう。うん、デフォルトロがあって、そっからちょっとずつ変わっていきます。みたいな場合は、svgでいいのかな。
Guest
職業がは、確かにちょっとなるほど、っていう感じがしましたね、結構そこのあの、こういう
Guest
あれですよ、レスポンス性を高めるっていう上では、大事なと
Guest
そうですね、地図の例で言うとで、結構大きいんですよね。領域がだから、あれが最初に何も秒ができないと、画面真っ白なんですよ。ほとんど
Guest
はいはいはいそうです。
Guest
だから、何がしか出すやつがないと、結構他のライブやれると、そういう感じになってしまったりするので、あと、突然でっかくなったりするじゃないですか。何もなかったところが、
Guest
そうそう読み込んだ後に、ジースがはめ込んできて
Guest
と、全パコンとの画面分ぐらいの大きさになっちゃうみたいなことがあったりするので、ま、それが防げるっていうのは結構大きい。
Guest
なるほど、おお、それは確かにsvgoはい、すごい
Guest
ま、今回活用されてるというところだと思うんですけども、あの、意外とそのsvg
6. 実装上の悩みや体験談
Guest
のあの使用とか、そのAPIに詳しいっていうのを意外と少なかったりするかなと思うんですよね。結構あの、例えば、
Guest
あのそのsbgoを組み立てる時とかも。そのなんていうか、ドムを組み立てる時とは、また別の専用のAPIとかがあったりして、意外とその
Guest
まあのドムとま似てるけれども、ちょっと違うとかがあったりして、そういうところの知識があるっていうのは、意外と
Guest
あのない難しいところではあると思うんですけど、お。
Guest
ただ、あの割と既存の知識にちょっと上乗せするだけで、できることが一気に増えるイメージがあるんですね。svgだと、あのモーフィングとかもできるので、
Guest
例えば、ああ、はいはいで。あと、スタイルもあのcsを直接当てれるんですよね。タグなので、
Guest
あ、そうですね、そうですね、
Guest
っていうのがあったりして、割と使い勝ってはいいかなとは思ってます。個人的には、あの最初に確かに0から最初書くのは大変なんですけど、
Guest
うん、うんうん、結構そうですね、うん、
Guest
まあ。でもcssを書いてくださいと頼んだ時はcs書く人がやったことなかったんで、結構困ってますよ。最初はこれどうやって書いて、そっかいう
Guest
そうですよね。なんか、gとか普段見ないとか出てくる
Guest
単位があのcssと違う単位なので、あのあェクターなので、あの大きさいくらでも変えれるんですよね。
Guest
はいはいはい、だから、あいつの中でのサイズになってしまうんだタが
Guest
確かになんかちょっとそのびっくりします。そうですね、なんかうん、
Guest
じゃあそうですねあとはそのsbgをこう
Guest
まあ、
Guest
実装していく上で、そのまそのsvg単体っていうのは、実装のあと、その結構理由のコンポレントとして、ま
Guest
ばい。提供するっていうことだったと思うんですけど、もま、そういったところでこう苦労して点とかはあったりし。
Guest
まあ、最初はニュース専用のフレームワークみたいのがありまして、社内で独自に作っているまいはい、ただ、各感じは、ネイティブのjsとあんまり変わんないんですよね。それに関して言うと
Guest
で作ってたのをま美に持ってきたんですけど、むしろさっきちょっと話したみたいに、バインディングできるライブラリの方が全然相性が良くて、
Guest
なので、あの移行は全然苦労しないですね。
Guest
そっか、そうなんですね、うん。
Guest
あと、この手のやつはsvgが用意できればなんとかなるんですよね。基本的には、
Guest
あのちゃんと整理されたsvgを用意するのが1番大変なので、もうそれができてる状態だと、割と
Guest
それを移行すること自体はそんなに難易度は高くないって感じですね。
Guest
ああ、そっかそうですね、ま、あれですよね。そのビのデータバインディングみたいなところをこううまくそのsbgと繋ぎ込めそうです。そうです
Guest
ところぐらいじゃあ、逆にそのsbgをこうなんて言うんすかね。組み立てていく上で、なんかここはまったみたいなと。こ
Guest
こう大変なのはに日本全体のなパスと都道府県別のパスが必要なんですよ。
Guest
ああ、要は都道府県別で色が変わる、はいででなるその2個が矛盾なく合体できないといけない
Guest
回線だけ用意して、それそれは
Guest
てるところが違うみたいな。あと、例えば沖縄とかだと今回クリックできるんですけれど、クリックすると、沖縄の情報が出るとま、感染者が何てます。とかっていうのが出るんですけど、はい、ちっちゃいじゃないですか。沖縄って
Guest
なので、実際の表示用のパスタは、別にクリック用のパスをそれは用意したりしてるので、ああ、はい、そのパスタはちょっとずつ必要っていう感じはしますね。
Guest
なるほど、そうり領域のあのあれですよね、そのあた当たり判定そうですか、そういう領域を指定するそれはあれですかね、結構
Guest
なん
Guest
もう手手でやった感じですか。そう、イラストレーターとか、そういうあ
Guest
くは直接。あの、まあコ動で書いてるというか、あの直接落ち込んでる感じですね。
Guest
逆にそれはそれで大変そう。
Guest
あま、ちょっと直すくらいだったらいいですね。あと、あのモーフィングする時に、あのモーフィングって、あの頂点
Guest
に対してなんちゅうんすかね。パスの頂点に対して、モーフィングかけてくんですけど、それがつつも合わない時が結構あったりするんですよ。
Guest
会わないと、なんか、ぐるんって裏返るみたいなアニメーションになってしまって、
Guest
減ったりするので、なんかそれでうまいこと調整する時とかもありますね。カスタムする時は、
Guest
手で書くのは。それはすご
Guest
うん、あれ、僕だともういや、イラストレーターでsvg出力して読み込ませるぐらいしか。あ、でも
Guest
1発目だこちの方が楽じゃないですか。
Guest
最初にそれで出した方がっていう気はしますね。うん、結構あと入られてもらうと、ちゃんとパスが繋がってなかったりするんです。
Guest
ああ、そうですよね、うん、
Guest
というのがあるんですか。このデータの精査が結構1番大変ですね、おそらくやろうとするのであれば、
Guest
そうですね。なかなか自動化っていうところは難しいし、イラストレーターから、こう出力されたsvgとかもなんか微妙に。
Guest
例えば、デザイナーの人からこれsvgにして、モーフィングかけてみたいな依頼を受けることもあると思うんですけれど、
Guest
あ、はい。それって、あの、もうsvgがちゃんとモーフィングできるようにできてないといけないので、そもそも
Guest
作る側からしたら、
Guest
それを説明して、それがそれをちゃんとやってもらうっていうのは、多分大変だと思うんですよね。おそらく
Guest
うん、うん、
Guest
そうですね、そこは割とそのポイントですね。
Guest
うん、
Guest
いや、ありがとうございます。結構なんか
Guest
最後の方、結構svgの辛さみたいな話になってしまったんですけど、ま、それをこうまちゃんとして上げさえすれば、もうそういうエンジニアで、フレンドリーな、そういう地図がもう簡単に作れる、
Guest
なんでもちゃんとデータさえ用意してもらえればできるって感じなので、割とうん、やったことがない人が結構多いと思うので、
Guest
機会があれば選択肢にあげてもらえるといいかなと思ってます。
Guest
うん、そうですね、そうですね、もう是非sbgをつか、
Guest
多分パッと思いつかないですからね。普通、
Guest
日本地図とかもうまさにsegが生きるところかなと
Guest
えというわけで、今回はみさんに、日本地図のま、汎用コンポーネントを作った話を伺いました。
7. クロージング
Guest
私たちUITのメンバーが所属するLINE株式会社では、このようなフロントエンドに関する議論を行っていまして。ま、こういったゴールデンウィークの
Guest
テーマであったりっていうのとかをこう話し合ったり、ということをやっています。
Guest
またえ、ポットキャストをえ通じて、またLINEに興味を持っていただいた方は、また、カジュアルメンダーなどをお待ちしておりますので、またぜひぜひご連絡お待ちしております。
Guest
またフロントインドインジニアのゴールデンウィークはあと3回残されていますので。まあ、今後ともまぜひ聞いてみてください。
Guest
それでは、また明日のエピソードでお会いしましょう。えにゃすさんどうもありがとうござい
Guest
ありがとうございました。
