1. ManaのWebクリエイターカフェ
  2. #022 JavaScriptとアニメーシ..
2022-12-02 29:49

#022 JavaScriptとアニメーション〜JavaScriptを学ぶコツは視覚的的変化を伴う実装!おすすめのライブラリはGSAP〜

<アンケートの回答はこちら>

https://pitpa.cc/mwcc-2307


ウェブ制作会社ICS代表の池田泰延さんがゲスト。

<トークテーマ>

・「JavaScript コードレシピ集」執筆の経緯

・新しい技術への対応

・Flashの終了と制作の変化

・最適解とオリジナリティ 

・JavaScriptを学ぶコツ

・アニメーション不要へのアプローチ

・視差効果を減らす

・おすすめのJavaScriptアニメーションライブラリ

・ライブラリとCSS トランジション

・アニメーションに関するデザインシステムの構築

<番組内で紹介した記事>

現場で使えるアニメーション系JSライブラリまとめ(2022年版)GSAP, CreateJS, WebAnimation, Velocityなど

最速のアニメーションライブラリはこれだ!JSライブラリの性能をDOMとWebGLで比較検証

<番組へのメッセージはこちらから>

https://pitpa.cc/3I3r0JI

Twitterハッシュタグは「#ウェブカフェ」

See Privacy Policy at https://art19.com/privacy and California Privacy Notice at https://art19.com/privacy#do-not-sell-my-info.

00:03
ManaのWebクリエイターカフェからのお知らせです。現在、リスナーの皆さんへ、番組に関するアンケートを期間限定で実施しています。
回答していただいた方の中から、抽選で10名様にAmazonギフト券1000円分をプレゼント。
詳細は番組概要欄のアンケートはこちらをご覧ください。
WebデザイナーでWebクリエイターボックスを運営しているManaです。
この番組では、私やゲストの経験談をもとに、Webコンテンツ制作で役立つ知識やノウハウ、キャリアのお話をしていきます。
今回のテーマは、JavaScriptとアニメーション、です。画面をパッと彩る動きのあるウェブサイト作りについて語っていきます。
ゲストには前回に続いてWeb製作会社ICS代表の池田康信さんにお越しいただきます。
私は池田さんの書いたブログ記事やTwitterからJavaScriptの最新情報を得ることが多いので、そんな池田さんにJavaScriptの話をたっぷり聞いてみたいと思います。
ManaのWebクリエイターカフェ、本日のゲストをご紹介します。Web製作会社ICS代表の池田康信さんです。
こんにちは、ICSの池田です。今日はよろしくお願いします。
はい、よろしくお願いします。前回、池田さんにはフロントエンドの面白さをテーマにお話を伺いましたので、今回はJavaScriptやアニメーションをテーマにお話をお聞きしていきたいと思います。
そもそもJavaScriptの本を出版されているんですよね。JavaScript Code Recipe集という本を書かれていて、私もいつも手元にある状態でお仕事をしているんですけど、これを書いてみようと書こうと思った経緯って何かあったんですか?
そうですね。JavaScriptを結局、私がWeb業界に入ったのは2005年頃からなんですけれども、この本を書く話をもらうまで11年くらいたくさんJavaScriptを書いてきたわけですね。
ウェブサイトを作る上でいろんなJavaScriptの書き方があるし、当時エクマスクリプト2015というのが出て、JavaScriptの仕様が大きく変わったみたいなところがあったので、この知見を早くまとめて日本のWeb業界でJavaScriptの新しい書き方をみんな移行していってほしいという気持ちがあって、それでこの本を書きたいという話につながっていきました。
そうなんですね。出版社さんからお声掛けがあった感じなんですか?
そうですね。出版社の方から声がありまして、当時それまでに私10冊ほど書いていて、いくつか技術評論者さんからの本も書いていたんですけど、このコードレシピシオも技術評論者の担当者の方で、昔からずっとお付き合いある方だったんですけれども、
03:04
もう久しぶりに本を書くので、思い切って書いてみようかと。いつも300ページぐらいだったんですけど、この本600ページ超えで、かなり思い切って、今までにないぐらいのボリュームで書いちゃおうというので書きました。
ものすごい時間かかったんじゃないですか?600ページですよ。
そうですね。かかりました。内容もそうなんですけど、やっぱりデモが必要かなと思いまして、そこはやっぱり時間かかりますよね。
そうですよね。少し前発売されたのが2019年ですね。なんですけど、今でも使えるものばかりなんですね。だから未だに私もあれ、どうやって書くんだっけ?という時は確認しながらやってるんですけど、そうやってですね、書籍にまとめるまでにJavaScriptを極めると、そこまでに至った経緯というのも聞いてみたいです。
極めたとは自分では思ってはいないんですけれども、いろいろ開発をしている中で、JavaScriptにもいろんな書き方があって、昔風の書き方、インターネットエクスプローラーとか、ちょっとインターネットロジカルの話なんですけど、ネットスケープとか、互換性が若干悪かったJavaScriptの時代から、
フラッシュが隣にいて、JavaScriptが隣にいるみたいな時代で、次、JQueryが出てきて、ブラウザー交換を禁止せずにJavaScriptを書ける時代、そして、エクマスクリプト15以上のモダンなJavaScriptを書ける時代といろいろ経験していく中で、JavaScriptの挙動もちょっとずつ変わってたりするところがあるんですね。
そういったところを面白いなと思って、いろいろ調べたり、使用書を読んだりすると、極めるほどではないけれども、書きたい、伝えたいみたいなことがたくさん出てきたというようなことがありました。
なるほど、今はさらりとJavaScriptの歴史みたいなのをおさらいしていただいたんですけど、そうやってすごく移り変わりが早いじゃないですか、フロントエンドっていうのは。なんか嫌になったりしないんです?うわ、また変わったわ、みたいな。
そうですね。私は変わること楽しいと思ってしまう方なので、新しくなったら追いかけたいみたいな気持ちの方が大きいです。
そうなんですね。それも含めて、フロントエンドってこういうものだと楽しいなって思った方がいい感じですかね。
そうですね。あえて言うと、新しい書き方ができるようになると、そもそもなんで新しいものが出てくるかというと、今やってることがちょっと不条理な部分とか、周りくどいとか、あんまりここで書いてると気持ちよくない部分ってあったりするんです。
それが新しい仕様が出てきたり、新しいライブラリとかが出てきたら、その今ある問題を解決するために出てたりするので、新しいものを導入した方が負担が少ないみたいなことになっていくので、なんであんまり新しいものをできたら覚え直さなきゃいけないっていう気持ちはあんまり出てこないっていうのはあります。
06:04
そうですね。今おっしゃってたみたいな問題があって、衰退していって、違うものが新しいものになったっていう最たるものがフラッシュになるかなと思うんですけど、ずっとフラッシュをされてきて、ある時ですね、2007年、スティーブ・ジョブスさんがですね、もうフラッシュやらないよみたいな感じで、そこからフラッシュ滅亡へのカウントダウンが始まったわけなんですけど、その時正直どう思いました?
そうですね。その時、今もですけどフラッシュラバーなので、やっぱショックが大きかったですね。
アップルが初めiPadを出した時に、それにフラッシュが乗らないとアップルが発表して、大きな反対意見が出たっていうのがありました。
アドビのエヴァンジェリストの当時のリーさんという方が、ブログ記事に反対を示すメッセージを投稿したことがあって、それが日本のメディアの取り上げであったみたいなことがあったんですけれども、私の心境も同じで、アップルがフラッシュをやっているのはあまり現実に即さない。
世の中多くのウェブコンテンツがフラッシュを使われて作られているのに、それらが見れなくなるというのは、ユーザーにとっても不利益になるんじゃないかという意見の方が私は当時強く持ってましたね。
それを押し抜けて、iPhoneとかiPadに実装されなくなって、それでだんだんフラッシュも終了に向かっていったんですけど、制作に変化というのはありましたかね?
そうですね。フラッシュが動かないというのがインパクトが大きくて、スマートフォンだとまずフラッシュが動かないというのがあったので、スマートフォンをどうするのかみたいなところとか、いろいろ検討することが増えたみたいなことが多かったです。
フラッシュがいきなり使えなくなったわけではなくて、段階的に使えなくなっていった。パソコンはずっと使えるままだったけど、スマートフォン、タブレットは動かなかったとか、
当時アンドロイド2.3とかの時代だったんですけど、その時はフラッシュプレイは実はアンドロイドで動いていたんですね。
そういったところを見ると、実はこの環境は使える、この環境は使えないというのがあるので、パソコンの場合はよりグラフィカルなものをユーザーに伝えた方がウェブコンテンツとしての訴求力が高いから、
パソコンはフラッシュを使って、スマートフォンはどうせHTML当時のファイブのキャンバスとかを使っても別にそんな動かなかったので、スマートフォンはシンプルなサイトにするみたいな区切りができたみたいなことがありました。
なので徐々に完全にフラッシュが使えなくなるまでは、一部ではフラッシュを使って、他のどもはHTMLで作るみたいなのが、徐々にパーセンテージが置き換わるみたいな形で、徐々に徐々に縮小していくみたいな作り方をすることがありましたね。
なるほど。以前はモバイルはこう、PCだったらこうみたいな感じで、完全に作り方も考え方自体も違ったりしたんですけど、今はもうレスポンシブになって、同じような環境で動いてってなると、また考えることもすごく増えてきたんじゃないかなと思うんですね。
09:07
その辺は結構大変じゃなかったです?
そうですね。レスポンシブで作るというのも、今はもうみんな当たり前のように作ってると思うんですけれども、やはり当時パソコンで見てるものを縮めていったらうまくなるっていうのは、メディアクエリ使えばできたけれども、なんか簡単じゃないというか、整合性を取らないといけないというところが、
HTMLコーダーの方もそうだけれども、デザイン側でも実はそこまで、まだみんな経験値詰めてないから、同じデザインを縮めて成立するかって、なかなかそうではなかったようには思います。
そうですよね。モバイルだったらこのコンテンツは消しておこうとかいうのも、当時はあったんですけど、今それやったらなんかちょっと違うんじゃないっていう流れにはなってると思うんですね。
この辺やっぱり時代に沿って合わせて変えていかないといけないマインドではありますかね。
そうですね。作っていくと時代もどんどん良くなってきてると思うので、今だとリスポンシブデザインを作るの結構楽になってきたかなと思いますし、デザインツールの方も進化していたりするので、
昔だったらフォトショップでパソコン版とスマートフォン版で別のを作っていたりしましたけど、今だと例えばX3でアートボードを狭めると自動的にリスポンシブでモバイルものを作っていたりするので、あまり整合性が破綻してるみたいなケースが少なくなってきたりとか、そういうのもあるので結構作りやすくなってくるみたいな時代が進むとそういう傾向があるのかなと思います。
確かにそうですね。もうなんか最適解みたいなのがある程度出てきてるので、それに合わせてオリジナリティをどう乗せていくかっていうところになってきますよね。
そう思いますね。
なるほど、わかりました。
じゃあこれから駆け出しの方のお話になってくるんですけど、これからウェブデザインとかフランタインダやってみたいっていう方とお話ししてるとよく出てくるのが、JavaScriptって聞くともうちょっと怖いですとか苦手意識を持ってる方って結構いらっしゃるんですね。
そういった方がJavaScriptを学ぶってなるとどういうコツみたいなのはありますかね。
そうですね、コツはなんか表現が変わるスクリプトを書くのがお勧めかなと思います。
プログラミングの世界って内部で変数の値が変わるとか、なんか目に見えないところが変わることをやってても何が変わったのか、それが何が面白いのかってなかなか分からなかったりすると思うので、
何かしら操作した時にHTMLのどこかが変わるとか、色が変わるとかでいいと思うんですけれども、何かしら視覚的な変化を伴うようなJavaScriptの方がやりがいを感じやすいのかなと思うので、そこからやるのがお勧めかなと私は思ってます。
そうですね、初心者向けのサイトとか本とか見てるとコンソールで3たす5の答えが出ますみたいなところから始まるのが多いと思うんですけど、それよりも文字の色変わりましたとかクリックしたらこうなりましたとかの方がやりがいは感じますよね。
12:06
はい、何か応用できそうな感じがすると思うので、まずはそこからやっていただいて、結局例えばJavaScriptでやっていくと長いこと、頭の中でどう動いてるのかみたいなことを理解しながらやらないといけなくなってくるっていうのはあるので、大変なところはあると思うんですけど、私自身も昔スクリプト書くのはそんな得意じゃなくて、初めプログラミング、学生の時とかプログラミングって一生触れたくないと思ってたくらいで、
学校の授業もプログラミングは嫌いだったし、ウェブ制作、当時自分のホームページ作るみたいな意味合いで使ってはいたんですけど、よくわからんからとりあえずコピペして動かしちゃえみたいな感じだったんですけれども、ある程度大きなものを作ろうとするとこれ覚えないとどうにもならんのじゃないかと思うことがあって、
ちょっと視覚的変化を伴うものを少しずつやっていったら、これはこういう仕組みなんだって少しずつわかるようになっていって、結構学習曲線というか、わかればわかるほど一気にわかることが増えてくるので、始めはゆっくりでもそこの山を越えれば一気にわかるようになるっていうフェーズがあると思うので、そこを目指していただけたらいいんじゃないかなと思います。
たしかにたしかに。コピペとかしてても、あれこれよく出てくるなみたいなのが出てきたりして、それが点と点が線につながってきてってなった時に一気にモチベーションも上がりますよね。
まさにその通りです。
そういうところを探しながらやってみるといいかなという感じですね。
そうなんです。駆け出しの方とお話しする機会もすごくたくさんあるんですけど、やっぱりアニメーションをつけたいと、アニメーションの話になるとモチベーションが上がってくるという方も結構いらっしゃって、難しそうだなという方もたくさんいるんですけどね。そういう方にはCSSだけでもできるアニメーションも最近増えてますので、そういったところを説明したりしてます。
動くとなんか面白いですよね。
面白い。そうなんですよ。ちょっとカーソルを合わせたら色が変わるっていうのは、ふわっと変わるだけでなんかテンション変わりますよね。
そう。パソコンの中ってなんかすごいことやらないとなんか変わらないみたいな思うんですけれども、なんかちょっと実はちょっとしたコード書くだけで反応するっていうのを体験をすると、なんか自分もできるんじゃないかって思えてくるんですよね。
そうなんですよね。画面の結構派手にバーっと変わるようなものも意外とコード見たらあれ数行で済んだみたいなこともあったりするので、やってみたらいいんじゃないかなと思いますね。
ただアニメーションの話をしているとアニメーション見づらいとか、いやなくていいよという声もあると思うんですね。そういったユーザーに対してはどう対応しましょう。
そうですね。アニメーションがいらないっていう必ずいてですね、情報をパッと見れた方がいいんじゃないかって提案してくる方もいます。
15:01
多分インターネットの歴が長い方とか、アニメーションあるから何かしらすぐにたどり着けなくてイライラしたことがあるっていう人だと思うんですけれども、一定数いると思ってます。
これはちょっと一部のサイトでしかされてない話なのであまり一般的ではないと思うんですけれども、アニメーションを不要としている方にアニメーションがないウェブサイトを提供するという選択肢を設けるのが解決案の一つになっているかなと思います。
具体的にはOSの設定でiOSとかmacOSとかWindows10、11でOS自体でアニメーションを切るという選択肢が用意されているので、そこを選択している方にはウェブサイト自体も演出をオフにして表示するってことがCSSでできるんですね。
今OSがメインですよね。これが試作効果を減らすというメニューがあるかなと思うんですけど、そこを設定している方にはちょっと表現を少なくしようというようなことができるということですね。
はい、その通りです。ちなみに余談なんですけど、試作効果を減らすというと、iPhoneとかだとスマートフォンを傾けた時に背景がちょっと遅れてくるみたいな、それが試作効果のことを指すんですけれども、
実はこのiPhoneを英語モードにすると、その試作効果を減らすのメニュー項目がReduced Motionになるんですね。動きを減らすってことになって、実は試作効果を減らすは日本語なんだけど、海外の方だと動き自体を減らすという設定項目だったりするので、目が疲れるとかそういった方に対するアプローチだと思うので、
ウェブサイト側もそれに応じて、CSSでReduced Motionって書けばアニメーションを無しにすることができるので、そういうのを実装してあげると、アニメーションがなくても良いってユーザーは、じゃあOSの設定聞いてくださいと案内するだけで有効なので、これを解決案にしてます。
それ実際に使ったりもします?
使ってます。今我々ICSの会社、オンドメディアのICSメディアとか、周辺にある会社のサイトとかも全て実装しているので、アニメーションが苦手って方はOSの設定聞いていただくと、一切うちのサイトはアニメーションなくなります。
そうなのですね。じゃあそれの設定でまたテストしてみないと、ちゃんと表示されているかどうか分からなかったりしますよね。
そうなんです。OSの設定をオン・オフにするだけでバリエーションが変わるので、テスト効数が2倍になるというのは極端ですけれども、そういう受託案件だとなかなか提案しづらくて、わざわざ効数が増えることを提案するのは嫌なので、
普通のウェブサイトだったらアニメーションオフにするオプションなんかは用意せずに納品するんですけれども、自社コンテンツだったらそこは頑張ってみようというのでオプションも受けています。
結構目が見づらい方とかそういう方も使うコンテンツだったら提案しやすいかもしれないですね。
そう思います。
アクセシビリティをちょっと考えて。
18:00
やっぱり同時に別のものがいっぱい動いていることで情報が認識しづらくなるという方もいるので、そこを対策するというのは効果的にはあるのかなと思います。
なるほど、わかりました。
IT・インターネット業界に強い転職アプリGreenは、今話題のテック企業、プロダクト開発、DX案件などGreenだけの良質な求人を数多く揃えています。
正式応募前に企業の中の人とカジュアル面談ができるので、仕事内容やメンバーのことをしっかり理解した後に先行に進めます。
カジュアルに始める転職活動にGreenをご活用ください。
では、ショートコメーションブレイクです。
ブログの記事でも解読させていただいたんですけど、やっぱりわかりやすいですよね。一行でパッとできちゃう。そんな手軽さもありますし、動き自体がすごく滑らかだったりするので、これはただなぜかはよくわからないという感じですかね。なんで盛り上がっているのかはちょっと不明。
そうですね。このライブラリー自体すごく昔からあって、フラッシュ時代から実はあるんですね。当時はTwinMaxという名前だったんですけれども、名前が一回GSUPに完全に変わってというので、十数年以上の歴史があるライブラリーなんですけれども、
今年の9月に私の友人のfeb19さんという方が記事を書いて、ウェブサイトの中でも世界的にデザイン的に優れたものをピックアップするというアワード系のサイトというのがあるんですね。このサイトはクールでかっこいいデザインで作られているからアワード賞をあげるみたいなサイトがあって、そのアワード系のサイトに取り上げられているサイト50個か100個かで調べて、その中に何のライブラリーが使われているかそのfeb19さんが調べましたと。
それと実はGSUPを使っているものが海外だと40%強あったというレポートを報告してたんです。
40%で結構高くて、
すごいですよね。
そうなんです。
JQueryが何割使われているとか、そのレベルに匹敵する採用率だなと思いまして、
実は結構ハイエンドなウェブサイトというか表現的に優れたものはGSUPというのを使うことが増えているという報告があって、
日本のツイッターとかでもヤフーのリアルタイム検索とかで検索ボリュームを見るとどんどん上がっているんですよね。
21:01
なので結構これから盛り上がってアニメーションを作っていきたい、また楽に実現できるライブラリーを使いたいという方はGSUPは結構おすすめなんじゃないかなと今注視してます。
なるほどなるほど。
これが今までいろんなライブラリーもある中でGSUPがすごく人気っていうのが、先ほどおっしゃっていただいたfeb19さんのブログ記事ですね。
私も今ちょっと見てみたんですけど、やっぱ更新がすごく頻度が高く更新されていると、ライブラリー自体ですね。
メンテナンスもすごく頻繁にされていたりとか、手軽、軽量、そういったものが理由なのかなというふうには挙げられてますね。
そうですね。私実はこのGSUPというライブラリー、フラッシュ時代からあるという拝見を通してですね、すごく愛着がありまして、
いろんなライブラリー、GSUPとか他のJQuery、Velocity、Web Animations API、それぞれ比較したことがありまして、
その中で書き味みたいなのとか、あとドキュメントの充実度とか更新頻度であるとか、そこを調べるとやっぱGSUPが一番、
容量もそれほど大きくなく高速に動いて、やりたいことをほぼすべて網羅できていて、そういうものがGSUPは一番強かったというのがあります。
なるほど。これ、記事の一番下の方に表でまとめられているんですけど、丸ばっかりですもんね。
そうなんです。丸が多くて、本当に力を入れて作られているというところと、あともう一個ですね、記事を紹介させていただくと、
アニメーションは非常にマニアックなので、そのライブラリーというのがどのぐらいパフォーマンス出るかというのを大量のパーティクル、
これは数万個飛ばしてどれぐらい同時実行できるかって調べたら、それで一番性能良かったのがGSUPという報告記事なんですけれども、
そういうWebGLとかし始めると、たくさんのものを動かした方が表現的に有利だったりするので、それを調べたりする、
マニアックなことをやっていて、そういったところからも非常に性能が良かったみたいなところもあってですね、
これがGSUPを盛り上がってきているのが嬉しいなと思っているところです。
そうなんですね。こういったライブラリ本当にたくさんある中で、比較してみるとGSUPいいんじゃないかということなんですが、
そもそもライブラリを使わなくても、最近だったらCSSのアニメーションとかWebアニメーションのAPIも出ていると思うんですね。
ライブラリを使わずにもアニメーションの実装ができるようになってきているんですけど、この辺はどう思います?違いだとか使いどころだとか。
はい。まずCSSアニメーション、特にCSSトラディションで実現できることはCSSトラディションでやった方が私は今も良いと思っています。
コードの書く量も少ないですし、あと直感的にCSSの宣言が入っているだけなので、コード的にもわかりやすいと思うんですね。
24:04
なのでCSSトラディションで実現できることはトラディションであると。
で、じゃあなんでこのGSUPとかライブラリを使うかというと、それだけじゃできないような表現を作りたいときに役立つからです。
例えば今Webサイトの演出手法としてよくあるのは、画面をスクロールしていってビューポート、要は画面上に見えているところに入ってきたら要素がふわっと出てくるとか、
スクロールに連動したような演出、インターセクションオブザーバーとか専門的な技術があるんですけれども、それを作るのって結構大変なんですね。
それをCSSだけじゃできないんですけれども、JavaScriptで生のJavaScriptだけで作ろうとしても、先ほどお伝えしたインターセクションオブザーバーという言葉自体も長いよとは
難しいですね。
難しそうだなと思うと思うんですけど、それを使わないとできなかったりするのがGSUPの中にもミニライブラリみたいなものがあって、
それに導入するとスクロールに連動して出すとか、すごく手軽に作ることができるんです。
それがむちゃくちゃ高機能で、表現がすごく多彩に作れるので、そういったところが生のCSS、生のJavaScriptだけじゃできない、
さらに1個、1カヌケタ、赤ヌケタみたいなところにたどり着けるのがライブラリを使うメリットかなと思います。
分かりました。このGSUPの今言ったスクロールに合わせて動くとかいうのも、ICSメディアさんのブログの方で、あれは確か後編の方だったと思うんですけど、
しっかり読み込んでますので、そちらすごく分かりやすくデモもあってやってますので、よかったら皆さんも見てみてください。
そしたら、池田さんが今取り組まれていること、現在の活動内容などあれば教えていただければと思います。
そうですね。今、ICSの方でオープンソースのプロジェクトというのを進めています。
昔から進めていて、いくつかリリースしているものもあるんですけれども、新しいものを作ろうとしていて、それが1つがデザインシステムを作ろうとしています。
アニメーションに関わるデザインシステムというのを出したいなと思っています。
デザインシステムというと、例えばGoogleのマテリアルデザインであるとか、AppleのHuman Interface Guidelinesであるとか、
AdobeのSpectrumとか、そういったデザインシステムがあるんですけれども、
ウェブ制作をする中で、よく出てくるユーザーインターフェースってあると思っていて、
それのアニメーションはこう作るといいですよっていうようなデザインシステム、オープンソースとして出したいなと思っています。
例えばアコーディオンとかFAQとかにあるような、押したらピュッと下が出てくる、Qを押したらA個体が下に出てくる、
あれとかってアニメーションしながらふわっと出てくるってよくあると思うんですよね。
でもそれってどのくらいのアニメーションで作っていいかってあまりわからなかったり、
デザイナーの方はそこまで考えずに、エンジニアに任せておけばやってくれるだろうと。
でもエンジニアはどのくらいのスピードでやっていいのかとか、開く時の加減速、イージングって言うんですけど、それをどのくらいしていいのかってあまりわからないと思うんです。
27:09
そういう検出するユーザーインターフェースに対して、こういうアニメーションを入れると作りやすいんだよっていうのが、
コードのコピペで済ませられるような、そういうデザインシステムを作って公開したいなと思っています。
いいですね。そしたら、コードが書けないデザイナーさんでもカタログ感覚で、ここはこうします、みたいな感じで指示しやすいかもしれないですね。
そうなんです。デザイナーからエンジニアに伝える時、ここはこういうアニメーションしてほしいみたいなのをURL付きでピッて送ったら、エンジニアに伝わるみたいなことができたらいいなと思っていて。
いいですね。アニメーションカタログ、素晴らしい。ちょっとそれは楽しみにしております。
ありがとうございます。
では、池田さん、今回もありがとうございました。いかがでしたか?
そうですね。JavaScriptの話からアニメーションの話まですることができて、めちゃくちゃ楽しかったです。
はい。お話ししている間にもいろんなURLを送ってもらって、ここはこうだよっていう風に教えてもらいながらの収録でした。
じゃあ、最後に告知などあればお願いします。
まず一つ目、12月3日、明日ですかね、PWAナイトカンファレンス2022というのが行われまして、これオンラインでも申し込めるんですけれども、実はここに私登壇します。
私のセッションはですね、先ほどこの収録中にもあったGSAPのライブラリを紹介するというような内容になっています。
今日、音声でどういったものが流行っているのかというGSAPで、多分あまり具体的なものがわからなかったと思うので、
このPWAナイトカンファレンスではですね、動きを伴いながらどんなことができるのかというのを紹介しようと思っていますので、
もし時間がある方がいらっしゃいましたら、今すぐ申し込んでですね、明日見ていただければと思います。
はい、わかりました。
で、もう一個、ICSではですね、社員を募集していまして、フロントエンドエンジニアを募集しています。
中等でも大丈夫ですし、新卒での入社も受け付けていますので、もしこれから一緒に、我々も持っている知識をお伝えしたいと思っていますし、
なおかつ入ってきた方から、もう我々は一緒に学んでいきたいと思っていますので、
そういう一緒にフロントエンドのことを極めていきたいと思っている方がいらっしゃったら、ぜひICSの採用サイトの方を見ていただければと思います。
はい、わかりました。
では、池田さん、2回にわたりありがとうございました。またお待ちしております。
はい、ありがとうございました。
FlushからJavaScriptに変わって、JavaScriptでもいろんなライブラリーがあって、移り変わりの激しい領域ではありますが、
興味があれば怖がらずに試してみること、あとは見栄えの良さだけではなくて、使い勝手まで考えたアニメーション制作ができるといいかなと思います。
池田さんとは前回のポッドキャストで、フロントエンドの面白さというテーマでお話ししました。
こちらもぜひ聞いてくださいね。
30:01
さて、この番組では感想や質問、リクエストなどをお待ちしております。
番組詳細欄にあるリンクよりお気軽にご投稿ください。
TwitterではカタカナでハッシュタグWebカフェをつけてツイートしてください。
そしてApple PodcastやSpotifyのPodcastではデビューもできますので、こちらにも感想を書いてもらえると嬉しいです。
ここで私がメンターをしているTech Academyについてのご紹介です。
Tech AcademyはWebデザインやプログラミングをオンラインで学べるスクールです。
現役エンジニアや現役デザイナーからマンツーマンで学ぶことができます。
副業案件の提供を保証するTech Academy Worksもあるので、ぜひTech Academyと検索してチェックしてみてください。
またお会いしましょう。Webクリエイターボックス、マナでした。
29:49

コメント

スクロール