音声書き起こし
1. オープニング
Guest
はい、こんにちは
Guest
こんにちは
Guest
今週もテンサイドやっていきましょう。え、ユテンサイドは、ユーザーインターフェースと、テクノロジーを愛する開発者のためのポッドキャストです。
Guest
最新のeb標準はもちろん開発、フレマークの変遷やuixに関することまで、様々なフロントエンドの情報をキャッチアップできるポッドキャストとしてお送りしております。
Guest
twitterのハッシュタグはシャープUIT、アンドスコアインサイド
Guest
エピソードに関するご意見やご感想え、こういったことをしてほしいといった。リクエストについては、お気軽にこちらにツイートください。
Guest
そして、今回ですけれども、えーパーソナリティはえ、私、ポテトフォーデとえはくんの2人でお送りしたいと思います、よろしくお願いします
Guest
よろしくお願いします。
2. UIT INSIDE Live! と Lottie
Guest
はい、というわけで、今回なんですけど、皆さんも今このポテトキャストのサイトの上のバナーが多分今表示されてると思うんですけど、
Guest
UITインサイトライブっていうのをやります
Guest
とですね。これは何かというと、私たちがえといつもやってる。UITサイトですけど、このエピソードが多分40エピソード目ですかね。
Guest
で、1年ちょいやってきたんですけど、まあ、せっかくなんでま。今のご実際、結構オンラインの催しとかも増えてるかなと思ってるんで、ええとま、ラジオ生配信をやろうと思ってまして。
Guest
今、お便りとかえ、絶賛募集中ですので、えま、こういったことを聞いてほしいとか、こういった話えをえ、やってみてほしいみたいなところがあれば、ええお便りお待ちしております。という状況なんですけど、
Guest
本日の話題は、ライブではなく、今日はですね、ロッティーの話をしたいと思うんですよね。
Guest
はい、
Guest
なんでかって言うと、実はこのインサイドライブの左上のバナー。バナーの左側に出てるメールのアイコンみたいなやつがあると思うんですけど、これをですね。今回ロッテを使ってえ、実現してまして。
Guest
なんか私自身、半年ぶりぐらいに使ったんで、ちょっとそのロッティーとか、アニメーション系の話、全然ポードキャストでしてこなかったなと思うんで、
Guest
ちょっとしたいな、したいなと思っております。じゃあですね、まず初めにロケについて、はめくん絶対使ったことありますよね。
Guest
そうですね、僕は使ったことありますねあの、まあなんていうんですか。割とし興味本位でまあ使っていたっていう感じなんですけど、もま
3. Lottie とは？
Guest
そうですね。1、2年前ぐらいにこう、自分で簡単なアニメーションを作ってみて、それをこうエクスポートして、読み込ませてを動いてるっていうところまではやりましたね、
Guest
私も大体そんな感じです。あの、ちょっとまず初めにロッキーについて、そう説明させてもらうんですけど、
Guest
ロッティーってのは何かって言うと、あのエアビアンドbが作ってる、もう、もはやjsツールを作ってる会社じゃないかという気がするんですけど、あの、エアアンドbがえ
Guest
作ってるアフターフェで作ったモーションっていうのをwebとか、あの、ios、あと、androidとかで動かすことができるaライブラリとなってます。そもそも、アフターフェのアドベが作ってる、
Guest
あの、映像関連の制作ツールなんですけど、ま、それで、ある程度ベクタデータも扱うことができて、完全に同じではないんですけど、機能は制限されてるものの、
Guest
まあ、あのアフターフで作った、いわゆるモーショングラフィックスみたいなものえをある程度、ウェブで再現できるような。ツールとなっております。
Guest
でま、オフィシャルに。結構ロッテのウェブ用のsdkみたいなのがあるんですけど、ま、その他にですね
Guest
リアクトロッキーとかま、今回あのポトキャストのサイトに使ってるえ、ロッティビみたいな形で、ラッパーとかも存在しててですね。結構簡単になんか、ベクトルアニメーションをウェブサイト上で、リッチなものを実現できるみたいなツールになってます。
Guest
私もなんか、私もその実際仕事で使う時はいつも後から話すんですけど、そのロッティーのファイルが集まってるサイトみたいな
Guest
あ。配配布されたり、販売されてるサイトがあるんで、
Guest
そこから選んで、あの細かいそのサービス上に組み込むって感じで、私、どっちかっていうと、使う側で作る側ではないんですけど、結構社内だと、いろんなところで、アニメーションの実現に使われてるみたいです。
Guest
そうそう、割と使われてるかも、
4. LottieFiles による簡単な資産の活用
Guest
あの、そんな感じで現場でも使い使いはするけど、あり物を使うっていう感じでやっております。
Guest
ああ、そのさっき言ってたそのロッティーのあれですか、共有サイトみたいなのがあるんですかね、か
Guest
あるんです、あるんです、ちょっとその話も
Guest
したいなと思います。はいま、そもそも結構そのあ、あの、ロッピー自体の面白さっていうのがまいくつかあるかなと思っててま。1つはもちろん、そのアフターフェクトを使える。
Guest
あの映像系の人たちがま、その自己表現みたいなのを、なんか結構そのウェブとというプラットホームでじ実行できるみたいな、生かせるみたいなところもあると思うんですけど、
Guest
やっぱなんか我々フロントエンドインジニアが、まあ、その
Guest
あの、こういったアニメーションツールの嬉しいところでま。今まであの、例えばcssとかま、そのあのgsap。あの、ツリーンマックスとか、ツインライトって呼ばれてた
Guest
やつ、ライブラリとかでま、ちょっとずつ作ってはいるけれども、やっぱなんか、その複雑なレイヤーを持つものとか。ま、その
Guest
めちゃめちゃリッチなものってま。作れなくはないかもしれないけれども、なんか実質
Guest
メンテナンス負荷だし、辛いし、みたいなのとか結構あるかなと思っててま。そういったリッチなマイクロインタラクションみたいなのをま、気軽に実装できるみたいなんが結構面白さかなと
Guest
思ってるんですけど、なんかまあ
Guest
今言った通りいかせ。このアフターフェスっていうなんか、ガチガチのデザインツールがもうガチガチの映像ツールを使わないと作れないんで、ま
Guest
あの、普通に作るのはそもそもまあコード書いた方がマシレベルで、なんか多分我々作るのが難しいと思っていて、まあ、なんか、
Guest
じゃあそういった時にこういったアニメーションツールって、なんか我々が知ってて、意味あるんだっけ。っていうのってよくあるんですけど、なんか、ロッティに関しては結構そこが優秀で、あの自由に使えるサイトとして、オフィシャルではなくて、
Guest
あの海外のベンチャーが立ち上げてるようなサイトなんですけど、あの、ロッティファイルスっていうま、いわゆるあのcgmっていうんですかね。あの、自分たちで作ったその
Guest
アニメーションを配布したり、販売したりできるサイトっていうのがあって、ちょっと
Guest
ョノートにも貼っておきます。しこすね、ロッティfilesっていうサイトがあって、ですね。これもここに書かれてる通り、なんかうgoogleもそれこそarbandb本家もいっぱい使ってるっていうアニメーションサイトなんですけど、
Guest
今日つく。今回のこのドキャストのサイトやのやでつく使ったやつもですね。なんか、なんでしたっけね、
Guest
なんか、イメールかレターかなんかで調べたら、なんかこうすごい大量のはいはい、なんかやつが出てきて、レターかな。レターとかで調べると、
Guest
こうこういったアニメーションがめちゃめちゃできて、この上に出てきているものは、あのマーケットじゃない方が全部こっち無料で使えるみたいな
Guest
感じになっていて、まあ、この
Guest
まちょっと。例えば、よくあるやつだったら、多分そのいいね。ボタン押した時のハートのマークとか。はいはい、あの、twitterみたいにこう豪華にしたいよね。あ、あ
Guest
から押した時のはいあ、そうそうす
Guest
とか見たら、まあこうやってなんかハートで調べたらまあなんかたくさん出てくるし、この中から選ぶだけで、まあ、結構
Guest
普通の現場だったら、じゃあ、ハートのアニメーションデザイナーさんに作ってもらってお願いして、うん、これちょっと違うんですよね。とか、なんかこれめっちゃいいですね。とかっていう話が結構多分出てくるし、みんなで合意とるのも大変みたいなやつ結構あると思うんですけど、
Guest
ま、そういったもの。じゃあ、そうそうそうめっちゃめちゃあるんですよね。これ、何件あるかすら出ないぐらいあるんですけど。
Guest
サービスを利用することで、このロッティファイルスを利用することでま、フロントエンドエンジンアの材料で、
Guest
ま。このいいねのとこなんですけど、こういうの使ってみるとどうですか。とかっていうのが、結構相談しやすいっていうのがいいとこかなと思ってまして。と、販売してるもの以外は、crativecomonsで
Guest
実現されてるんで、
Guest
なんかあのはい。基本的にクリエイティブコンモンズの範囲なんで、自由に使って、あの授業に使ってもオッケーみたいな形になってるんで。まあ、
Guest
これを使うとまあ、もちろん仕事でもそうですし、なんか個人でなんか作りたいなっていう時もそうですし、ま、いろんなケースにおいてま。アニメーションプロの作ってるアニメーションってのを、気軽に採用できるっていうのが、
Guest
結構ロッテファイルスとかを使うと、なんか面白いんじゃないかなと思っております。
Guest
いや、いいですね、
Guest
まですし、単純に自分の中でま、これをなんか別の技術で実現しようとか思った時の引き出しを増やす意味でもいいのかなとは思いますしね、
Guest
これを参考にま、自分で作ってみるっていうのも、まあ確かに
Guest
全然ありですし。そうっすねし、選択肢もどんどん増えると思うんで、多分いいね押したら、
Guest
はいはい、
Guest
このいいねのひあのぽっぱ、こうちょっとおっきくなる、いいにしようみたいなんとか使えるのが結構いいとこかなと思っております。
Guest
そうですね、なかなかやっぱり2重い。まずは2で作ってっていうところはハードルは高い
Guest
ですし、結構割とそのロッティ自体のもうそのなんて言うんですかね。そのアニメーションデータも
Guest
確か単なるジェイソンみたいな感じになっていて、
Guest
そうっすね、そうっすね、
Guest
割とそういうなんなんて言うんですかね。そのほんとに見た目以外あまり気にすることはない。
Guest
その例えば、容量とか、そういうそういう縛りみたいなのはなくて、割とす、すぐにどれでも使えるみたいな。そうす
Guest
ね、あ、それもめちゃめちゃいいとこですね。一応、完全に言及忘れてましたけど、やっぱこういうのを映像とかでとか、なんか、画像ファイルでやっていくってなると、結構そのサイズが大きくなれば、大きくなるほど重いっていうのがあるかなと思うんですけど、
Guest
この場合、ベースがジェイソンデータですしま。その上描画するときは、そのロッティウェブの方で、sdkの方で、自動的にsvgとかキャンバス
Guest
にえの形式でどしてくれるんでま。大体svgかなと思いますけど、なんか、svgアニメーションとして動いてくれるみたいなところも、まあ結構いいところかなと思いますね。これまで、あの、ちょっとアニメーション入れたいけど、
Guest
まあ難しいしなみたいなんで結構悩んでた。フロントエンドエンジニアの救世主にはなってくれるんじゃないかなと思って
Guest
盛りますよ。さそう
Guest
っていうような話です
Guest
なんで、もし、このポートキャスト聞いてる人で、ま。こういったところにちょっとしたも、どかしさとか感じてる人がいたら、ぜひぜひちょっと使ってみてくれると面白いんじゃないかなと
Guest
思っております。でも、ただですね、じゃあ、こういうアニメーションって、まあその
5. アニメーションの使い所
Guest
結構綺麗だし、まあ見てて面白みはある
Guest
ので、ま、あとしてはいいかなと思うんですけど、なんか一方で。多分ウェブサイト中、アニメーションだらけだったら売ってほしいじゃないですか。
Guest
そう、俺は
Guest
これはこれは何のサイトみたいな感じになってしまうと思うんで、
Guest
なんか、そういった時にアニメーションってどういうとこで使うといいのかなとか、そもそも、ロッティーってどういうとこで使うといいのかなっていうところを、なんかちょっと今日話したいなと。
Guest
ああ、そうですね、割と
Guest
なんか
Guest
例えば、まあ、そのあ、そもそもアニメーションって概念自体だったら結構ま。例えば、スプラッシュスクリーンとかで使うとかは全然ありかな。とか、はいはいはい。あと、なんか
Guest
例えばその特定のアクション。
Guest
やっぱそのウェブサービスって、リピート率みたいなとこに、その気持ちよさみたいな。触ってて、触ってて、気持ちいいみたいなとこって結構あると思うんで。まあ、なんかのコンバージョンケーキとか、ま、ただそのいいねボタンとか、リツイートボタンもそうですけど、twitterとかの
Guest
なんか、押した時に押した感がある方があまあ楽しいみたいな
Guest
ところで数値上げたい時とかにいいのかなとか。あと、単純に今回のポッドキャストのサイトもそうですけど、ま、ちょっと目を引きたい時とか、単純に全部止まってる。
Guest
ウェブサイトという中で、1個動いてたら気になるよねっていうのかなのかなと思うんですけど、なんか、そもそもアニメーション自体のところで、なんか
Guest
こうこういうとこで使ったらいいんじゃないかなとかって、なんかイメージとかあったりします。
Guest
ああ、そうですね、結構あのさっきのロッティファイルズとか。でも、まあ、
Guest
大体のあのアニメーションはそうだと思うんですけど、なんなんて言うんですかね。そのページ全体のぐわっと
Guest
ダイナミックに変わるようなアニメーションっていうよりは、まさっきのそのtwitterのイボタンみたいな感じで、こう
Guest
ポイントポイントで、こう使えるけれども、すごい身を引くみたいな使い方
Guest
がやっぱりメインなのかなうんと思いますね。うん、
Guest
そうですね、やっぱずっとあると鬱陶しいですもんね。
Guest
そうですね、なんか、多すぎるとすごい一気に安っぽくなってしまうっていう。いや、こう
Guest
ここぞという時に使いたい。
Guest
そうっすね、
Guest
うん。あとはま。例えばアニメーション、
Guest
そのえ、ロッティ以外にも結構ま色々。そのcscsアニメーションもそうですし、ま、自フ使ったりもありますし、動画使ったりっていう
Guest
ま色々選択肢はある中でまロッティーを使う。もう1つ利点としては、
Guest
あの、そのアニメーション、そのロッティーの出力するアニメーションって、その時系列でこう変化するっていうアニメーションになってるんですけども、
Guest
そのなんて言うんですかね。あの、スピードとか止めるみたいなのは、すごいおってすごい簡単にできるんで。うん、うんうん。例えば
Guest
なんかこう。アニメーションをこう巻き戻したいみたいなこともできる
Guest
とですよ。でま、これが例えば使えるところで言うと、
Guest
なんて言うんですかね。例えば、こうスクロールによってこう、徐々にスクロール用によってこう変わるようなアニメーション。うん、うん、まあ例で言うとあれですね。appleの
Guest
サイトみたいな感じで、こうこうスクロールすると、なんかだんだんこうものが変化していくみたいな。あと、あれですね。その
Guest
アプリの最初のランニングみたいなので、こう横にスワイプするあの、いいですか。はい、あれとかの
Guest
その横にスワイプしてる間のあれですね、イージングはすごい簡単に。
Guest
ああ、そうですね、そうですね、
Guest
なんでそういう使い方がまあ向いてる感じかなと。
Guest
そうっすね。特になんか戻す行為があるものには、結構強い印象はありますね。
Guest
そうそうですね、結構なかなか難しいと思うんです。それ以外のライブとかだと、そ、
Guest
そうっすね、なんかそういうのって、例えばあのありがちですけど、あれも大きいかなと。なんか、例えば、あの
Guest
cssであの上書きして、チェックボックス描いた時のも、あのオフにする時のアニメーションのめんどくささあるじゃないですか。
Guest
そうですね、そう、あの、いい感じにチェックが入るようなcss書いたのはいいけど、え、これチェック外れた時どうすんだみたいなんよくあると思ってて、ああいう時にも強いのかなとか思ったり
Guest
します。はいはい、はいはいいや、そうですよね、それやろうと思ったら、もうcss職人になるか、
Guest
やっぱりジで言うと、ロッティーの方が
Guest
そうっすね。うん、結構それこそあのロッテ行って、チェックボックス系もいっぱいあるんで、アニメーションとか。
Guest
ああ、こういう素晴らしい。はいはい、
Guest
なんかそういうのとこでも役立ちそうだなとか色々思いますね。
Guest
そうですね、まあ、多分チェックボックスみたいな感じで数置いてもそんなに困らないと思う。
Guest
そうっすね、まあ、基本的に言うてjysonですし、初めにバンドルされてしまってて、もうダウンロード終わってるんで、そんなに
Guest
くはないかな、という印象がありますね。あと、なんやかんや言うてsvgですしね、最終
Guest
にあ、そうそう普段は
Guest
なんかその辺も結構っていうのもいいとこかなと思うんで。
Guest
そうっすね、今までだと結構もう画像として書き出してしまって、それをこの。例えばcssのバックグラウンドに入れて、なんかこう
Guest
パラパラアニメみたいにするとかもよく、はいはいい思いますけど、なんかもっと使いやすいし、もっとなんでしょう。ベクタに優しいような、今の
Guest
なんか、あのアニメーション全部2x3とかで書き出すのも大変だと思うんで、そこも結構大きいとこかな。うん、
Guest
乗ったりしますね。
Guest
最近あい、あの、apple端末とかだと、3倍とかの改造度持ってるやつも結構多いんで、2倍だけじゃなくて、最近2倍だとちょっと荒い倍も出てきたの
Guest
かなと思うんで、そういう時にもいいかな。
Guest
そうですね、それを使い分けるっていうめんどくささを考えると、やっぱりsgで完結してるとありがたい。
Guest
そうっすね、やっぱsvgはいいという話もあるかなと思います。
Guest
そうですね、ま、多分ろあと、そうですロッティのま、
Guest
そのアニメーション、そのなんて言うんすかね。時系列で進むっていうアニメーションが進むっていうのは、利点でもありま。逆に、その欠点みたいなのもあると思っていて、うん、うん、なんなんすかねえ
Guest
え。gssのトランジションとかだと、まそのポイントをしてしてあげれば、その
Guest
そのまろんなこのコバみたいなインタラクションにますごいよく反応して、
Guest
アニメはい、ションしてくれるっていうところみたいな柔軟性は、まあ、あんまりおきにはないですね。その一次元の変化軸しかないので。
Guest
そうっすね。そうっすね、
Guest
例えば、そのなんていうんですかね。に、2次元の変化軸を持っていると、こうなんすか。目を動かすみたいなアニメーションとかで、その上下、左右動かすみたいなっていうのは
Guest
できない。そうっすね、急にはできない、基本
Guest
ほんまかオフかみたいなとこですもんね、
Guest
そう、そうすうん、うん、うんま、それぐらいじゃないですかね。なんか、使いどころ。
Guest
私もなんかロッティあったらまあなんかいい使い使える素材とかが、もし見つかったりとか、誰かが作ってくれるのであれば、結構できれば使いたいなと思いがちな
Guest
ところはあります。まあ、なんやかんで、あのロッティの嬉しいところは、エンジニア的に言うと、もう1個。そのコードにいびさが生まれないって結構嬉しいとこではあるんで、あの、頑張って書いた。cssとか、jsコードって、結構後から読む人の負担にななりがちみたいなところ。あ、
Guest
あ、はいはい
Guest
まそういった意味でもま、こういうので解決できるなら、後から読む人も優しいよなとよく思ったりしてます。
Guest
まあ、そうですよね、なんか、あんまり再利用性みたいなのは必要ないところではあるま、それこそ、
Guest
あの、その出力前のアフターフのファイルを保存しておけば。そうですね。そうですね、それを編集して、また出力し直すみたいな感じなんで、
Guest
ま。逆にジェイソンで閉じてる方がありがたいです
Guest
かなと思ったりしますね、でし。やっぱ、そのデザイン用件への柔軟な対応性とかも考えると、うん、まあ、もちろんそれはae使える人がやった方が、
Guest
なんかこう頑張って。jsとかで書いてるよりは、綺麗なのかなとか色々
Guest
思ったりしますね。
Guest
えーというわけでですね。今週はえ、ロッティーとロッティファイルスでえ、実現する、ちょっと嬉しい
Guest
アニメーションということで、え、ロッティとえま、それをですね、フロントエンドエンジアでも、ま結構色々使えるようにするためのサイトであるえ、ロッティファイルスについて紹介してきました。
Guest
ライン株式会社では、え、このようなフロントエンドやえ、フレントエンドに関するえま議論やえて、トークをえ、日々行っております。
Guest
例えばえ、直近のエピソード39で話したような。ビーススタディみたいな。社員から始まった勉強会などもえありますので、ま、そういった話も含めて、え、どんどんこれからコピキャストで引き続き、配信していただけるえ、いければと思います。
Guest
またですねえ、最後にえ、初めに話しましたけど、今回ですね。UITのえ、UIT INSIDEのですね、ライブ配信を行います。
Guest
今回のえ、UIT INSIDEライブえ、特徴するこのライブ配信ではですね。
Guest
これまで基本的に収録したものをそのまま流すという形でやってきたえ、このポッドキャストの形をですね。たまにはえ、ラジオ形式でやってもいいんじゃない。いいんじゃないかというところでえ、生配信でやろうかなと思っております。
Guest
日程はですね、5月13日のえ、17時から18時の1時間
Guest
で、まあ、業務中でもはえ、聞いてもらえるように。え、基本的なえ、フロンテドに関する技術をテーマにですねえ、1時間え、お便りをベースにえ、トークを行いたいと思っております。
Guest
またですね、それにあたってま、こんな人え、ラインのこんな人に話してほしいとか。ま、例えば、こんなテーマで話してほしいみたいなお便りを大募集しております。これがないと全然え、この企画は始まりませんので、
Guest
是非是非ですねえ、何かえ、普段のポストを聞いていてですね。こういう話をしてほしいとかがあれば、ええ、お送りいただければと思います。
Guest
基本的にえ、要望をいただいたえ、LINE社員メンバーであれば頑張って連れてきますので、まあ、どんな人でも構いませんので、え、ご連絡いただければと思います。
Guest
というわけで、今週のテンサイドはえょっとさせていただければと思います。え、ありがとうございました、
Guest
ありがとうございました。
6. クロージング
