Blog

  • 先日、3月26日にGoogleからGmailでAMP for Emailのサポートが発表されました。AMP(Accelerated Mobile Pages)とはスマホでWebサイトを高速に表示するための規格ですが、AMP for Emailを利用するとWebサイトのような動的な画面をEmail画面上で表示する事ができるようになります。 この記事では具体的なサンプルを用いてAMP for Emailの実装についてご紹介していきます。 開発・テスト環境の準備 AMP Emailでは基本的にHTML、CSSを用いてメールを作成することができます。とはいえ、 Googleが提供しているではメールがA...
  • AMP for Emailを利用することでする事ができるようになります。この記事ではAMP for Emailを利用するにあたってどの様なことを準備する必要があるかをご説明します。 GoogleへのAMPメール利用者申請 AMP for Emailを利用するにはGoogleに利用申請を行い、審査を受ける必要があります。 審査は以下の項目を基準に行われるため、事前に準備しておく必要があります。 1.DKIM/SPFのドメイン認証 DKIM/SPFとはメールの送信元が偽装されていないことを証明するための認証方式です。AMP版Emailではこれらの認証方式でドメインの認証を行う必要があります。SPF...
  • AMP for Emailとはのことを指します。もともとAMP(Accelerated Mobile Pages)とはGoogleが中心になって開発された技術で、スマートフォンでWebサイトを高速に表示するために現在も利用されています。AMP for EmailはこのAMPの技術をEmailでも使用できるように拡張されたもので、すでにウェブサイト用に用いられている文法で動的な画面を簡単に作成することができます。 現状、AMP for EmailはGmailでのみ受け取り可能ですが、その他のメールプロバイダやメールクライアントも順次対応を表明しています。 AMP for Emailのメリット・デ...
  • この記事ではChromeのDevtool(開発ツール)を使ったパフォーマンスの調査方法についてご説明致します。アニメーションがカクカクする、画面がちらつくなどの問題が起こった場合にパフォーマンスの観点から問題を解決しましょう。 では、まずはRenderingパネルを用いた調査方法からご説明します。 方法1. Rendering(レンダリング)パネルで調査する はその名の通り、レンダリングに関連するパフォーマンスを調査するためのパネルです。ページ全体でアニメーションを多用していたり、スクロール時に画面下部の表示が遅れる場合などはこのパネルで調査します。 すると、Paint(ペイント)の処理に影響...
  • animationやtransitionを使ってCSSアニメーションを行った際に、アニメーションがカクついて困った経験はありませんか?そんな時は この記事ではwill-changeの使う際の実装方法についてご説明します。 will-changeのブラウザサポート状況(2019/3/10時点) Edge、IE以外の主要なブラウザで利用可能です。 will-changeって何してくれるの? will-changeを指定することによって、アニメーションのパフォーマンスを上げる事ができます。 アニメーションするプロパティーをwill-changeで指定することによって、ブラウザは事前にアニメーションの...
  • この記事ではIntersectionObserverの使い方を説明します。IntersectionObserverを使うと簡単にスクロールの非同期処理を実装することができます。 各ブラウザの対応状況 こちらは各ブラウザの対応状況です。IEはさておき、EdgeとSafariが一世代前のバージョンで対応していません。本格的に利用する場合はPolyfill*1を使用してください。 従来の実装とIntersectionObserverのメリット これまでのスクロール処理は以下のような処理をつらつら書く必要がありました。 [crayon-5e8096b519429513954267/] 従来の処理では様...
  • Webサイトを閲覧している時にスクロールがガタついたり、スクロール中にページの下の方が真っ白になっているサイトを見たことはありませんか?もしかしたら、それはホバーエフェクトによるものかもしれません。 問題点 スクロール中でもホバーエフェクトは有効なので、スクロールによってホバーが連続的に有効になるとブラウザに大きな負荷を与えてしまいます。 この動画ではホバーがブラウザに与える負荷について詳しく説明しています。(英語です。) 解決方法 スクロール開始時にbodyにpointer-eventsプロパティーを設定する事によって、スクロール中のホバーを無効にすることができます。 コードは次のとおりです...
  • 記事の前半では実例を交えながらrequestAnimationFrameの仕組みと使い方をご説明します。 また、記事の後半ではrequestAnimationFrameを使った繰り返し処理、setTimeout、setIntervalのように時間指定を行って使用する方法もご説明します。 requestAnimationFrameとは Javascriptでアニメーションを行う時にrequestAnimationFrameを使うとパフォーマンスの低下を防ぐことができます。 簡単にいうと 基本文法 [crayon-5e8096b5198c1193794162/] 言葉ではなかなか伝わりづらいので、...
  • Web Workerを使用することで負荷の大きな計算処理をWorker Thread(ワーカースレッド)で実行することができます。これによりMain Thread(メインスレッド)を空き状態にすることができるため、ブラウザのパフォーマンスが向上します。 この記事ではWeb Workerの仕組みと使い方をご説明します。 Web Workerって何? ブラウザでは主にMain Thread(メインスレッド)、Worker Thread(ワーカースレッド)、Raster Thread(ラスタースレッド)、Compositor Thread(コンポジタースレッド)の4種類のスレッドがそれぞれ割り当てら...
  • アニメーションで要素を動かす際に、left、right、top、bottomを使用しているコードを見かけることがあります。 しかし、leftなどの位置調整を行うプロパティーはレンダリングのパフォーマンスの低下を起こすため、アニメーションには使ってはいけません。 この記事では使用例を交えながら、transform、opacityの使い方を見ていきましょう。 TransformとLeftを使ったアニメーションのパフォーマンス比較 まず、transformとleftをそれぞれ使用した際のパフォーマンスの比較を行います。ここでは、パフォーマンスを比較しやすくするために、以下の条件を用意しました。 これ...

最新記事