MAPJP/ENTIPS2015.03.24vol.24WEBHTML+CSS3で軽快アニメーション!Web制作にGPU処理をB!こんにちは。Webエンジニアの毛利です。今回はWebページ制作で軽快なアニメーション表現をしよう!がテーマです。CSS3が本格的に浸透し始め、Webページにアニメーションを取り入れたい!とかんがえる場面も多くなりました。CSS3を用い、アニメーションを実装するコツをお伝えします。CPU?GPU?GPUを取り入れる軽快なアニメーションを表現するには「GPU」を使います。Webページのレンダリングには「CPU」を使います。「CPU」とは、かんたんに表現すると、司令塔です。パソコンでは一番大事な部分で、ファイルを保存する、画像を開くなどの役割をしています。レンダリングレンダリングとは英字や数字の羅列を、画面に画像として表示したり文章として表示したりすることをさします。Webサイトで例えると、ソースコードの集合であるHTMLを画像や文章に変換しています。HTMLにかかわらず、コードで記述したものをビジュアルで見せる一連の流れのことをレンダリングと呼びます。GPU「GPU」とは、司令塔の役割をする「CPU」と比較すると描画の表示に特化しています。画像やアニメーションを表示することが専門です。「CPU」はアニメーションの表現もできますが、他にも作業をたくさん行っているため、アニメーション処理は片手間でしか行えません。簡単なアニメーションであれば表現できますが、複雑なアニメーションはオーバーワークのため、もたついた動きになってしまいます。スマートフォンなど小さく、性能が低い端末では、特に目立ちます。アニメーションを最適化していくGPUで処理をするCSS3プロパティをつかいます。スマートフォンのレンダリングエンジンに用いられているWebKitではCPUで処理をするプロパティと、GPUで処理をおこなうプロパティにわかれています。matrix3d,translate3d,scale3dなど)これらを取り入れることで、アニメーション処理をGPUに任せることができます。CSSはたくさんのプロパティがあるため、アニメーションの実装方法は様々です。例にあげた以外にもプロパティはたくさんあります。実装できているか確認してみようMacの開発ツール、xCodeにインクルードされているiphoneシミュレーターを用います。Storeより入手できます)アプリケーション>xcode.appをアクション(右クリック)から「パッケージの内容を表示」を選択します。Simulator.appより開きます。Layers」にチェックします。設定すると画面が緑と赤に色づけされされます。一瞬赤色に変化します。「赤色はGPU」「緑色はCPU」で処理を行っていることをさしています。これでどちらが処理を行っているか、視覚的に確認することができます。リアルタイムでどちらが描画しているか確認できる便利な機能です。メニューのアニメーションでGPU処理を行っています。動きのあるところが少ないですが、的確にGPU処理を取り入れています。サイト全体にGPU処理を行っています。メニューのアニメーションに対してもGPUをつかっていることがわかります。こちらもサイト全体にアニメーションを取りいれています。ここまでの動きもGPUをつかうことで軽快に表現できてますね。まとめとても便利なGPUですが、アニメーションを表現するにはGPUに全て任せればよいのでしょうか。アニメーションの処理が得意とは言っても、やはり限界があります。限られた性能の中で気持ちの良い表現をするには、今ユーザーが使っているPCやスマートフォンなどの性能を知ることも重要なポイントです。PointCPUとGPUをCSS3プロパティで振り分ける。みんなが持っているデバイスの能力を把握する。ユーザーのことを考えて、バランスの良いサイト設計をすることが気持ちいいサイトづくりの一歩になります。今回はCSS3での解説が中心となりましたが、Javascriptを使って、より複雑に処理を分岐し、アニメーションを表現するために検証をしているサイト、独自の視点から検証を提供しているサイトを参考としてご紹介します。POSTS新着TIPSvol.1012019年ロゴマークをリニューアルしたブランド5選2019年にロゴをリニューアルした企業6選vol.100BOELのスタッフが大切にしていることBOELのスタッフがオフィスでの過ごし方を通じてたいせつにしていることをご紹介します。7選WEB業界でよく使う単語の中でよくあるスペルミスと間違えやすい点をいくつかリストアップします。vol.98ブランディングで動画を活用するメリットと成功のポイント!ブランディング動画を活用するメリットや成功のポイントを事例と合わせて紹介します。幾何学フォントTOP32019年の幾何学書体トップ3をご紹介いたします。一時的な流行ではなく多くのサイトで一般的に見られるようになったWebデザインvol.43動画コーデックをマスターしよう映像データのエンコード、動画メディア配信の基礎からターゲットに合った圧縮方法vol.45すぐに使える!アコーディオンメニューの実装アコーディオンメニューをよりリッチに。日本古来より伝わる色。デザイン、アートディレクションなどクリエイティブワークを得意とするブランディングオフィスです。ブランディング・Webサイト・印刷物、システム開発等を通じ、ビジネス価値向上をお手伝いします。お問い合わせをするオンライン見積もりフォームさまざまなブランディング事案に対応します。お気軽にご依頼ください。PERMISSION.。