ep.35 UIT 自由研究居残り編 - Live2Dを使ってCSSとSVGの限界を試してみた話 | UIT INSIDE

2020/03/12 に公開1213 views

このエピソードについて

@spring_raining が Live2D をモデルを CSS で再現してみた実験結果について、 @potato4d が色々と聞いてみました。

Live2D in CSS
- SVG+CSS AnimationでLive2Dを動かす - はるさめスープ
  - https://spring-raining.hatenablog.com/entry/2020/01/25/223809
- CSSLive2d Live demo
  - https://spring-raining.github.io/CSSLive2D/out
- GitHub Source Code
  - https://github.com/spring-raining/CSSLive2D
About Live2D
- Live2D
  - https://www.live2d.com/
Technique
- Cubism SDK
  - https://www.live2d.com/download/cubism-sdk/
- About SVG clip-path
  - https://developer.mozilla.org/ja/docs/Web/SVG/Tutorial/Clipping_and_masking
  - CSS clip-path
    - https://developer.mozilla.org/ja/docs/Web/CSS/clip-path
- CSS matrix
  - https://developer.mozilla.org/ja/docs/Web/CSS/transform-function/matrix

採用について

使用素材・クレジット

BGM&SE

音声書き起こし

1. オープニング 00:00

Guest 00:00
こんにちはえ、今週もアテンサイドやっていければと思います。え、まず、初めにこのポンテキャストについてご紹介いたします。

Guest 00:08
このポッドキャストは、ユーザーインターフェースとテクノロジーを愛する開発者たちがえ、毎週、最新のフロントのインドの動向について語るためのポッドキャストです。

Guest 00:17
最新のフロントエンドの動向や開発フレームワークの変遷はたまたゆいやゆxに関することまで

Guest 00:24
最新の情報をえ、話していく。えーものとなっております。え、今回はですねえ

Guest 00:40
ライブ2dのモデルをですね。cssだけで動かすっていうものについてえ、話していければと思います。よろしくお願いします

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

Guest 00:49
さて、今回ですけれども、ライブ2、dicssの続きっていうところでございます。けれども、あの、まず初めに

2. About Live2D 00:50

Guest 00:59
前回作っていたものと、今回作ったものっていうのを簡単に紹介してもらってもいいですかね。

Guest 01:05
あ、はい、ですね、その正月の時に1度そのライブ2dを

Guest 01:12
jsを使わず、cssだけで動かすっていうことを挑戦しています。っていうことを話したと思うんですけれども、

Guest 01:21
そのあ、1月のまあ中頃までかけて、cssアニメーションとsvg

Guest 01:30
をの機能を使って、ライブ2dのキャラクターを動かすっていうと、えことについて挑戦していました。

Guest 01:39
で、ま、それについては、私のブログにもまとめているんですけれども、

Guest 01:46
まえ、最終的にjsをほぼ使わずに、キャラクターを動かすっていうことができるようになりました。

Guest 01:55
で、多分小ノートに貼ってあるかな、ショートに貼ってありそう。あれですよね、確かこれブログ記事も書かれてましたよね。

Guest 02:03
あ、そうですはい、それを

Guest 02:05
ちょっと小のにはい、そうですね、詳しく聞いていければと思います。私も一旦はい、これ読んで読んできたんで、話聞ければと思います。で、え、

Guest 02:15
じゃあ、ちょっと詳しく聞いていきたいんですけど、ちょっとまずそもそもですね。ライブ2dっていうのがま、どういった感じのものかみたいなところも聞いていきたいよなと思ってて、なんか私、結構

Guest 02:25
元々あのソシャゲのキャラクター動かすようなツールみたいなイメージが結構強かったんで、なんかどういったとこで使われて、

Guest 02:32
どういう風なメリットがあるよみたいなの聞いていければなと思います。ちょっと教えても、

Guest 02:36
はいはい、

Guest 02:37
そうですね、ライブ2dについて、まあ、はい、説明すると、そのキャラクターの

Guest 02:46
アニメーションをモーフィングの技術を使って、実現するというソフトウェアです。で、まあ、モーフィングっていうのはどういうものかと言いますと

Guest 02:56
ま、3dのようになんて言うんですかね。そのモデルみたいなのは、用意せずに、2dの画像を

Guest 03:05
まパーツごとにこう組み合わせて、キャラクターを動かすっていうものですね。でまどんそ、

Guest 03:14
ツリーのキャラクターのモーフィングっていうのは、ま、簡単に言うと、

Guest 03:22
なんすかね。服洗いみたいな感じになっていて、ちょっと目と目のパーツであったりとか、口のパーツであったりっていうのを、それぞれレイヤーを分けて、

Guest 03:32
保存しておいて、それをライブ2dでうまい具合に偏見させることによって、まるでキャラクターが動いてるよう

Guest 03:41
なえ、表現をさせるっていう。

Guest 03:45
なんか、あのパーツをいっぱいバラバラにばらして動かしたら、そのツリーだけど、3ギっぽくっていうか、アニメーションしてるように見えるみたいな。

Guest 03:54
1枚の絵かなって感じですね。なるほど、なるほど、なほど、これってなんか例えば最近有名なやつだったらこういうので使われてるみたいなのってあったりします。

Guest 04:05
そうですね、ま、結構もうあの、スマホのゲームとかもほぼほぼほぼではないですけど、そういうラブ3dを

Guest 04:14
使って、キャラクターを動かすっていうのは、もうかなり定番になりつつありますし、最近だとなんですかね。ま、vtuber

Guest 04:24
で、元々3dモデルをま用意するっていうのがま、最初の1歩みたいな感じだったんですけれどもま、最近だと、

Guest 04:34
そのライブteのキャラクターを。その現実のまあ、vtuberのか、顔のま

Guest 04:46
顔にま進させるみたいなことをやることによって、まあ、そのvtuberのキャラクター

Guest 04:53
をライブツリーで動かすみたいなことも、最近はよくえー行われています。

Guest 05:00
ま、こういうのがあることによってあれっすよね、ま、結構今までモデル用意しないととか、モデル作れる人も限られてたし、コストも高かったってのが結構

Guest 05:10
そのあれですかね。民主化したきっかけというか、感もあるツールって感じですよね。

Guest 05:18
そうですね、そのライブツリは、あの、その読み込み元として、そのpsd。フォトショップの

Guest 05:28
ファイルとかも読み込めたりするので、ま、例えば、そのフォトショップでこうレイヤーを分けてま。前髪を書いて、あと身を書いて、

Guest 05:37
輪郭改訂っていうことをやって、そのままライブ3dのソフトウェアに読み込ませるっていうこともできるので、はい、

Guest 05:47
結構式としてはだいぶ低くなったと思います。はい、

Guest 05:52
まあ、ほんとに1枚用意するだけで、今までだったら、結構立ち絵だけ納品してたようなところが、そのままそれをレイヤ分割したら

Guest 06:01
そうですね。そうです、

Guest 06:02
ライブツイートして、使ってもらえるって感じですね。なるほど、なるほど、面白いですね、あ、ありがとうございます

Guest 06:09
じゃあですね、ちょっと次ライブ2d。そのcssで動かしたってやつについて、詳しく聞いていきたいんですけど、はい、

3. Live2D モデルデータのしくみ 06:10

Guest 06:16
そうっすね。まず、そもそもライブ2dのファイルみたいなんで。あの、なんか専用ファイルで動かすっぽかったんですけど、これってなんかどういう構造してた感じなんですかね。

Guest 06:26
なんか、そもそもオープンな。なんかま、例えば、

Guest 06:29
クリサだとえsqライトだったり、まあ、なんかオフィス製品だとzipだったりしようかなと思うんですけど、なんか、ライブ2dのファイルって、どんな感じなものなんですか。

Guest 06:40
そうですね、とま、ブロッグキリ

Guest 06:44
ま書いてあるんですけども、あのモデルデータいくつかありまして、そのまェソンのファイルでま

Guest 06:52
え保存されているっていうデータもあれば、あと、キャラクターのモデル自体

Guest 06:58
のデータは全部あのバイナリ形式で保存されてます。で、あの、モックスっていう拡張子で保存されてるんですけど、も

Guest 07:07
ま、これはその使用は特にあの明らかにはなってなくて、まあ、直接は見ることができない状態

Guest 07:17
ですね。で、ま、ただそのライブ2dのコアcdkが提供されていまして、

Guest 07:24
これを返して、このモックスモでえ。データを読み込むことで、その中の情報をま大体見ることができるっていう

Guest 07:33
感じになってますね。

Guest 07:35
じゃあまあ非公開、基本的な非公開であるものは、実際のまあ、その専用のsdkみたいなところから

Guest 07:42
見ていくと、まあ、そのライブ2dファイルってのを。じゃあ、例えばcssでかで、あとから実現するにはこういう構造になってるんだみたいなのは見ていけるって感じですかね。

Guest 07:51
はい、そうですね、で、その内容をま見ていきますとま、具体的にどういう情報が入ってるかって言うと、その

Guest 08:01
なんですか。オブジェクトで、まあ、そのsdkから撮ることができるんですけど、もま、その中のドロワーブルズっていうデータ

Guest 08:09
にま、大体、そのそのキャラクターの位置情報とか、パーツ情報自体はま、そこに大体入っ

Guest 08:17
はいはいはいはいはいですね。

Guest 08:19
でま、そのドアブルズはいをまさに見ていくと、ライブ2dはパーツがまいくつか用意されていて、ま、そのパーツ

Guest 08:28
の中になんて言うんですかねえ、ポリゴンというか、ま、その三角形みたいなのが、またさえ集合したものがま

Guest 08:36
1つのパーズになってるんですけど、もまそこで。例えば、

Guest 08:44
バーテックスポジションズっていうのがあるんですけど、もま、その中にその1つのパーツのま

Guest 08:52
ああ、はいはい、ポリゴンの頂点の集合が入って、情報が入ってたりっていう感じになってます。

Guest 08:59
これ見ていくことによって、最終的にえ作られ、そのドアブルというか、良化するためのポリゴン情報みたいなのが洗い出せるって感じですね。

4. 14000のdivを効率的に描画する 09:08

Guest 09:08
なんか、結構パッと見た感じなんか、データ量結構えぐそうですけど、これじゃ実際こういうの見て、

Guest 09:15
そのなんかcssで動かそうとしとしたみたいなところで、結構ブログ記事とかもざっと見てたら、結構重かったみたいな話があったと思うんですけど、

Guest 09:25
なんか、その辺、この実際、どれぐらいのデータをどういう形で動かそうと思って重かったかみたいなのと、そこをどうやって解消したかみたいな、ちょっと

Guest 09:35
説明してもらってもいいですかね。

Guest 09:37
そのまあそのポリゴンのま頂点情報からまあ、そのなんていうんですか。パーツごとにこう

Guest 09:45
1つ1つ分けるっていうことが、まあできるようになったんですけれどもで、最初はあれですね。その1つのパーツを

Guest 09:55
1つのドム要素として、まず取り出してで、それを正しい位置に配置するっていうのを試したのですね。

Guest 10:04
で、ま、そこはうまくいったんですけども、その後、1つのパーツごとではなくて、1つのポリゴンごとに。

Guest 10:12
今度は分けていって、そのポリゴンをそれぞれ正しい位置に動かすことで、モデルを動かすっていうことをはいはい、最初はやろうとしたんですね。

Guest 10:22
で、ただそれをやった時に、ポリゴンの数が大体1万

Guest 10:30
4000あったんですけども、それを全部ドム。そのポリゴンの画像を書き出して、

Guest 10:39
で、それぞれのドムに貼り付けるっていうことをやるとすごい

Guest 10:44
たんですね。で、まあ、さすがにそれをやるのはブラウザでは無理だったので、

Guest 10:52
でま、そこで解決策として、今回はsbg

Guest 11:00
の。クリップパスっていう機能とゆずっていう機能があるので、ま、それを今回使ったっていうものですね。で

Guest 11:09
ま、これがどういったものかっていうと、クリップパスっていうのは

Guest 11:16
あれですね。cssのクリップパスとま同じような感じで、ある要素から、まあ、1部分だけ消え出すっていう機能ですね。で、

Guest 11:26
ま、そこでクリップパスで切り出す対象を。それぞれのポリゴンの画像ではなくて、その

Guest 11:35
元々のテクスチャーデータがあるんですけども、そこから、融通関数、え関数ではないですね融通

Guest 11:44
要素からを使って取るっていうことをしました。でま、もう少しわかりやすく言うと、ま

Guest 11:54
そのポリゴンごとにと画像を作るっていうのではなくて、テクスチャーはテクスチャで持たせておいてます。その中から、

Guest 12:02
クリップパスで必要なところだけ切り出すっていう感じの、まあ、構成になってます

Guest 12:09
なんかあれですかね、そのcssプライトみたいな感じですかね、イメージとしては、あ、

Guest 12:14
そうですそうです、cssスプライトみたいな感じで、そのテクスチャっていうのは、まあ

Guest 12:21
今回2枚だけなんですよね。その1つのキャラクターをはいはいはい作るのにうんうん。そこが2枚のテクスチャーから必要な箇所だけき出すっていう

Guest 12:30
まさにcssスプライト的な感じで、今回作った

Guest 12:36
ま。これによって、実際画像を貸したやつを出していたら、毎回

Guest 12:41
その画像へのヒットが発生して、重かったみたいなやつがま、そこを採用できるようになったみたい。

Guest 12:48
なるほど、なるほど、ありがとうございます。

Guest 12:49
ちなみに、このクリップバスってほって、なんかどういったとこで、なんか他の技術でなんか使われてるのってありましたっけ。なんか、あの、私のイメージだったら、あの

Guest 12:58
リアクトコンテントローダーみたいな、ああいう、コンテントローダー使う時に、あのフェードの形を作るために

Guest 13:05
使う技術って感じが強いんですけど、クリップパスって普段結構使うこととかありますかね。

Guest 13:11
そうですね、クリップパスは結構それこそ、あのcssプライト

Guest 13:20
的な形であったり。はいはい、あとはそうですね

Guest 13:30
まあ、そのクリップパス自体はすごい複雑な複雑な形とかもま自由に切り出せるので、はいはいはい、

Guest 13:38
結構凝った装飾を実現するために、そのクリップパスを活用したりとか。あと、cassアニメーション

Guest 13:48
で、なんかすごい複雑なことをするっていう時に、フリップパスを使ったりっていうのがあったりしますよね。うんうん

Guest 13:56
で、今回はまあ、そのクリパスを画像を切り出すために使ったっていう感じですね。はい、

Guest 14:04
うん、うんうん、

Guest 14:05
いや、結構面白いアプローチですよね。まあ、実際ぎ着に使うよりは、あのオリジンというか、画像の元みたいなのを

Guest 14:14
別用意しとくことによって、

Guest 14:16
重さを軽減するみたいなのは結構なんかよくありそうだけど、あんまりcssでやることがないとか。まsvg今回svgですけど、あんまり普段触ることが多くはない気がするんで、結構

Guest 14:28
こ、こういう挑戦ならではだなと思って結構面白いなと

Guest 14:32
そうですよね、今回割とそこもまあ1つ試したかったなっていうのはありますね。その

Guest 14:39
ドム、1万4000個も通過することって、普通ないじゃないですか、ないないっすね

Guest 14:48
ま、大体どれぐらいの数がその

Guest 14:52
あの画像もたてばモテるかっていうとこところとか。もま、今回見たかったので、まあ、そのパーツ

Guest 15:00
数10個のパーツであったら、まあ余裕だけど。ま、1万4000個のポリオンをそれぞれ画像を持たせるっていうのは、今回のま

Guest 15:09
用途では難しかったっていうのが分かりました。うん、

Guest 15:12
なるほど、なるほど、いや、面白いですね普通だったらあれですもんね、ドム要素がすごい増えるのって、

Guest 15:18
あの無限スクロール実装しろやみたいな話とか。そのはいはいはい、実装面でドム要素を減らす側になりがちですけど、まあ、こういったそもそもが多かったら

Guest 15:28
工夫するしかないですもんね。

Guest 15:30
そうですよ、パスをこういう感じで使うってのはなんかあれですね、他のところでも、実は使えるかもしれないですね。

5. CSS matrix によるレイヤの実現 15:40

Guest 15:40
そうっすね、ちょっと次はその描画したさらに、後の話をちょっと聞いていきたいかなと思う。はいすけど、

Guest 15:50
ちょっとブロックキッシュ見てると、この

Guest 15:54
なんでしょう。顔があって、目があってみたいな形で、親の要素みたいな概念があって、それに依存するような

Guest 16:00
アニメーションみたいなのが、ライブにあるんだなっていうのをはいえ、それをディフォーマって書いてありますけど、はい、そうですか。なっていうのをちょっと見てたんですけど、この辺で。なんかその

Guest 16:09
ライブツはライブツ側で、あの、多分自分たちでレイヤー構造みたいなのを持って動かしてるんだと思うんですけど、今回の

Guest 16:18
cssを再現するにあたって、その親子関係みたいなのとか、まあ、どうやってこういった挙動を実現したか、みたいなところも

Guest 16:27
聞いていっていいですかね。

Guest 16:28
はい、じゃあそうですまず、デフォーマーの説明を

Guest 16:33
した方が良さそうですね。はいでフォーマそうですね、というのはですね、まあ、そのライブ2dでそのパーツを変形させる

Guest 16:41
なんて言うんすか。グループみたいなものでして、

Guest 16:44
で、そのライブ2dはデフォーマー2種類あって、回転デフォーマーとワープデフォーマっていうのがありますでま、回転デフォーマは、

Guest 16:53
そのデフォーマに属するパーツを全部回転させるっていうもので、ワープデフォーマっていうのは、その

Guest 17:03
なんですかね。変形を傾けたりとか、また歪めさせたりとかっていう変形をまあ実現するためのものですね。はいはいはい

Guest 17:13
で、このデフォーマーがそれぞれ親子関係を持たせることができて、例えばま親の

Guest 17:21
ワープリフォーマーがまこの上に動かすっていうことをやると、まこのに属するリフォーマーとか、パンスは全部上に動くみたいな形に

Guest 17:31
なっていましてま。これを上手いこと組み合わせることで、キャラクターを動かすっていう感じの動きに

Guest 17:39
合ってるんですね。

Guest 17:40
で、それをsvgとかcssでどうやってやったかっていうと、デフォーマ

Guest 17:48
の構造って、ドムの気構造とすごい

Guest 17:51
まあいてるっていうか、そのままなので、今回はそれをまそのまま紐付けるっていうことで実現できました。うんでま、具体的にそのワープレフォーマー

Guest 18:03
で変形をやる方法っていうのは、まあ、

Guest 18:08
ブログ記事が詳しいんですけども。そのますとポリゴンのま三角形を

Guest 18:15
ま自由に変形させる必要があってま。それをその3つの頂点を動かすために、今回はcssのマトリックか、マトリックス関数っていうのをえ、使いました。

Guest 18:27
でま、これはどういうものかと言うと、6つパラメーターを指定することができまして、

Guest 18:35
その6つのパラメーターに応じてま。拡大とか縮小とか、

Guest 18:40
あと、弱みとかへ。傾きみたいなのを自由にへんけ指定することができるっていうのを

Guest 18:47
ができます。でま、それをjsで、ガリガリ計算して、適切な6つの値を決めて入れるっていうことを

Guest 18:58
やることによって、ワープでフォーマを実現しています。

Guest 19:02
うん、

Guest 19:04
このマトリックスってやつ、私、今初めて見たんですけど、結構ほんとになんでもできそうですね。かいな。それこそ、cssってトランスレートとか、

Guest 19:13
スケールとかは。はい、使うことはあるかなとは思いますけど、なんかなんでもできそう感は

Guest 19:20
ありますよね。あ、ま、そうですね、まさになんでもできるというか、むしろ、そのトランスフォームとか、スケールとかは

Guest 19:27
全部、そのマトリックス感想に置き換えることができるものです。ね。んうん、うん、うん、

Guest 19:33
じゃあなんかな。内部的にはどうかわかんないけど、シンタックスシュガーみたいな感じなんすかね。トランスレートとそう

Guest 19:38
そうですどっちからトランスレートが、そのマトリックス関数のシタシュアみたいな形になってると思います。

Guest 19:45
うん、うん、うん、

Guest 19:46
色々できそうというか、

Guest 19:48
そうそう今回結構ssありましたね、ここは

Guest 19:52
あ、ありがとうございます。で、あと、その上で最終的なアニメーションもcssでやったっていうとこですかね。これは

Guest 19:59
はい、そうですね、

Guest 20:02
まあ、アニメーションのところはそんなにまあ、難しいことはやっていなくて、まさっき、そのマトリックスで、6つの

Guest 20:11
パラメーターを決めるってことはもうできてるので、ま、それで、はいはいえ、最初のえ、そのパポリゴンの三角形の1と、

Guest 20:20
最後のポリオンの三角形の位置とま、その中間にあたる位置をまあ3つ与えて

Guest 20:28
で、それでそれをえ、アニメーション、タイミングファンクションで、まあ、その今回首を左右に振るっていう動きなんですけど、も

Guest 20:37
まそれがままなめらかに動くような。タイミングファンクションを使って作ってでま、それを

Guest 20:45
それぞれのポリゴンに適応したっていう感じですね。なので、まあ、うん、ここ自体はそんなにまあこったことはしてないです。ああ、なるほど、

Guest 20:55
じゃあ、さっきのマトリックスのえ、処理によって、まあそのなんでしょう。狙っているそのモデルの最終的な形っていうのは、もう割り出せてるんで、え。それをベースに

Guest 21:05
えと、スタートの状態とゴロの状態っていうのをアニメーションで、はい、マトリックスとして書いてあげたって感じですかね。

Guest 21:11
そうですね、はい、でまただ

Guest 21:15
残念ながらあの最後の方にも書いてるんですけども、そのブラウザー。おそらくブラウザ上のま制約で

Guest 21:23
なその全てのえすぐを読み込んでから、アニメーションを開始させるっていうことができなくて、

Guest 21:31
多分はい、なんか数千ぐらいの。

Guest 21:35
sbg要素を読み込んだ時点で、アニメーションを開始させてしまうっていう問題があったんで、

Guest 21:42
そこだけはどうしても解決できなくて。さえアニメーションは、産み込みが終わるまでストップさせるっていうジェースを入れました。

Guest 21:53
ああ、なるほど、なるほど、じゃああの基本的にまあ、読み込んだ後は全部csで動かしてるけど、最初だけちょっとjsを動かしてるみたいな。

Guest 22:03
そうですね、なんなので、pcssは残念ながら実現できませんでしたっていう感じです。

Guest 22:11
ま、ただでも実際ほぼほぼま99パーセントっていうか、まほぼ全てcssって感じで動いたはいっていうか。そうですね、うん、うん、うん

6. これからについて 22:22

Guest 22:22
あ、ちょっとこんな感じで実際動かしてみて、そのまちょっと最後は軽くjs使うっていう話になりましたけど、やってみて、なんか

Guest 22:30
他もこういうことできたらいいよなとか。まあ、これcssに限らず、別にライブ2d自体でやってみて、面白かったなって思ったことでもいいんですけど、

Guest 22:38
なんかこういうのできたらなとかあったら、ちょっと教えてもらってもいいですか。

Guest 22:42
はい、

Guest 22:43
そうですね、ま、今回そのjsを使わずにcssだけで。まあ、アニメーションっていうのはまあ実現

Guest 22:53
できて思ったんですけど、もまこれ以上そのcssだけ

Guest 22:59
縛りみたい、シス縛りみたいなのっていうのは、あんまりもう意味意味がないというか、実用的ではないなっていうのを

Guest 23:08
思ったので、ま、今後あのもっと発展させるとすれば、ま、これを使ってま。jsとま連携させる

Guest 23:18
ような、何か、もっとっこう複雑なアニメーションだったりとか。はいはいはい、もっとこう、インタラクティブな

Guest 23:26
まあ、アニメーションみたいなのを、今回使ったような。csのテクニックと組み合わせてやりたいっていう。

Guest 23:40
いや、なんかライブツリとかま、今とか。はい、あの、実はこの収録もあのテレカでやってますけど、なんかみんな結構

Guest 23:50
なんでしょう。遊びがちとか

Guest 23:51
というはいか。はい、

Guest 23:52
このミーティングの時に、なんかアバターかってる人とかもいますし、結構最近ライブ2dとかもそれで注目されてる感あります。なんか、面白いと

Guest 24:01
できるとあ、それも白します。うん、はいはい、はい、あれあれですよね。そのライブ2dのキャラを

Guest 24:11
そのあればバビにして、バビニで自分え、そのライブのキャラで、テルカに出るみたいな話。あ、そうそう

Guest 24:21
そうそうたまにやってるのを見かけるんで、ああいうのが色々できても面白いなと思いますね。

Guest 24:28
それ、ブラウザオンリーでやるってのは、めちゃくちゃ面白そう。

Guest 24:32
そうですね、今だとそれこそ別にブラウザーだけで、画像の転送もウェブアル停止でできますし。はい、そういうのを1回ウェブ上で試してみたりとかしても、面白そうな感じはしますね。

Guest 24:43
面白そうですね、なんか、そのインカメラで、その顔そう。ピンクして、はいはい、それをブラウザー

Guest 24:54
とか、あと、cssのマギリスでやるっていう話ですよね。結構

Guest 25:00
そうそうそうそう

Guest 25:02
あれですよね、これ、その今回はcssでやりましたけど、普通のなんか、weglのstkも確かあるんですよね。

Guest 25:10
あ、はい、そうですね、いや、むしろこっちを使うべきなのかも。

Guest 25:17
普通にそうcss縛りはやめて、普通にそのebの技術ウェブ、一般の技術として、そういう

Guest 25:26
バビニ的なことをブラウザでやってみるとか、やってみると面白そうなそれはしますよ。それで、

Guest 25:34
面白そうじゃあ、いやいや、

Guest 25:37
ありますpssは難しそうな

Guest 25:39
いや、やってみるのもありかなと思いますね。

Guest 25:45
そりゃ、ちょっと

Guest 25:48
じゃあ、なんかやってみたら教えてください。感じですけど、

Guest 25:52
リモートワークの間、

Guest 25:54
いや、面白いですねライブ3リーはなかなかいいっすね、

Guest 25:58
はい。今回結構割とそのフロントエンドからでも、手が出せる技術っていうことがわかってよかったです。そう

Guest 26:09
いや、ありがとうございます。また、ちょっとなんかこういうのやってみたいみたいなのがあったら、ポッドキャストとかでも聞かせてもらえればと思います。

Guest 26:16
こんなバリバリの技術でよければ、はい、紹介します。

Guest 26:21
なんか、普段フロントエンドで触れないフロントエンドの機能ではあるけれども、マトリックスとかもそうですけど、これってなんか使わない技術を使ってるのを見ると、やっぱり

Guest 26:32
見てる方も面白いんで、あんならいいなと。

Guest 26:34
そうですよね、なんか、フロントエンドの技術使ってるけどない中身フロントエンドじゃないみたいな

Guest 26:41
ち内感ありますよね

7. クロージング 26:43

Guest 26:45
というわけでですね、今回はですねえ、ライブ2dのモデルをcssで動かしてみたという話をですねえはさんにしてもらいました。

Guest 26:53
LINEのUITsではですね。ま、こんな感じでえ、業務とか関係ないえ、課外活動みたいなところもですね。え、結構こんなんやってみたよとかっていって、コミュニケーション取る機会とかもえとあったりだとか、まあ、普通に業務のライズとかも含めて、

Guest 27:06
ディスカッションする場があったりします。え、毎週ですねえ、社内のギターブの方で、色々ネタを集めてですね

Guest 27:15
毎週金曜日の勉強会で、

Guest 27:17
えー民業界でえ、技術発表を行っていたりします。え、今ですねえ、何度かえ。ポンテキャストとして公開しているビー3サビ。え、なんかですね。

Guest 27:27
そっちの方から始まった企画なので、え。また、社内勉強会とかでも、白、黒いネタなどがあれば、

Guest 27:32
ポッドキャストでも発信していければと思います。その他にですねえ、このポートキャストについてのご意見や、ご感想もお待ちしております。え、ハッシュタグシャープUIT、アンダースコアインサイド

Guest 27:44
シャープUIT、アンダースコアインサイドにてえつぶやいていただきます。とえ、運営の方がえ、ひろ

Guest 27:50
いきますので、え、もし何かにであれば、ま、こういったテーマが聞いてみたいだとかえ、こういった風なえ、収録の形も試してみてほしいみたいなものがあれば、え、

Guest 28:00
ぜひぜひついていってもらえればと思います。

Guest 28:04
というわけで、今週はライブ2aecsというテーマで。え、私はたとえはさんの2人でお送りしましたお疲れ様でした、

Guest 28:13
ありがとうございました、ありがとうございました、

Guest 28:15
ありがとうございました。