みなさん、jQuery、使っていますか？
先日ウェブサイトの制作をある会社さんに発注したところ、jQuery満載のコードが納品されました。
「うわぁ…」ってなったんですけど、（主に発注ノウハウの）のいい勉強だなあと思ってjQuery排除のリファクタリングをしました。
リファクタリングしている中で、AMPのライブラリ便利だなあって思ったのでここにまとめます。
#AMPとは？
Googleが推進している高速なWEBサイト表示技術です。
詳しくはこちらをどうぞ。
https://www.ampproject.org/
#AMPのUIライブラリは非AMPページでも使える
AMPに対応するためにはいろいろ規則を守らなければなりませんが、それを守っていられない案件もあるでしょう。
しかし、AMPのための公式JavaScriptライブラリは、非AMP対応ページでももちろん使用可能です。
<script async src="https://cdn.ampproject.org/v0.js"></script>
基本はこれだけです。あとはこれに含まれない拡張コンポーネントを使いたい場合にはそのスクリプトを読み込む必要があります。
現時点でも非常に多くのコンポーネントが提供されていて、UIライブラリとしても優秀です。
https://www.ampproject.org/ja/docs/reference/components
このライブラリを使ったからと言って、AMP対応を頑張らないといけないわけではありません。
formだって使っていいし、aタグにJavascriptを仕込むのも自由です。
なんだ、ただのGoogle製のUIライブラリじゃないか。
まずは amp-img から
これは有名だと思いますが、遅延読み込みができる画像表示コンポーネントです。
<img>の代わりとして使うだけで、
- 遅延読み込み
- レスポンシブ対応などの柔軟なレイアウト
が簡単に実現します。組み込みコンポーネントなので、上記の基本ライブラリをリンクし、
<amp-img alt="A view of the sea"
src="images/sea.jpg"
width="900"
height="675"
layout="responsive">
</amp-img>
のように記述するだけです。
width, heightを記述し描画速度を高めた上で、レスポンシブ対応までできる方法ってなかなかないのではないでしょうか。
これをjQueryなどで実現しようとすると、jQueryを読み込み、lazyloadを読み込む必要があり遅いです。
もちろん遅延読み込みだけなら他にもjQuery依存のないものがたくさんありますが、AMPはそれだけではないのです。
便利コンポーネントたち
下記のようなコンポーネントが提供されています。いずれも、よく使うけどちょっと厄介なやつらです。
カルーセル
アコーディオン
lightbox
他にもたくさんあります
amp-fx-collection でアニメーション
これを推したくてこの記事を書きました。すごく強力です。
- 要素が見えるとふわっとでてくるやつ
amp-fx="fade-in" -
パララックス効果
amp-fx="parallax" - スクロールに応じて透明度がかわるやつ
amp-fx="fade-in-scroll" - スクロールすると横からヒュッとでてくるやつ
amp-fx="fly-in-right"etc.
などが簡単に実現できます。
こちらに例がたくさんあるのでみてみてください。
https://ampbyexample.com/components/amp-fx-collection/
効果の重ねがけ
すごいのは、上記の効果の重ねがけもできるところです。
効果の個別のライブラリを使っている場合には、競合したりして難しいところがありますが、AMPなら心配いりません。
例えば、
<div amp-fx="fade-in fly-in-right" >
~
</div>
と書けば、ふわっとフェードインしつつ横からヒュッと出てくる、という効果が実現できます。
（ただし、一部、同時に使えない効果があります）
細かい調整もできる
じわ〜っと変わってほしいときか、
最初速くてだんだんゆっくりになるとか、
いろいろ好みがあるとおもいますが、かなり柔軟に指定できます。
- 効果の持続時間の指定
data-duration="1000ms" - 効果のイージングをキーワードで指定
data-easing="ease-in-out"data-easing="linear"など - 効果のイージングをベジェ曲線で指定
data-easing="cubic-bezier(1.000, 0.005, 0.725, 0.055)"
自分はベジェ曲線指定が好きなので、できて嬉しいです。
読み込みはasyncで
jQuery系のライブラリでは、asyncで読み込むとうまく動かないことが多い印象です。
ていうかjQuery自体、ふつうは同期で読み込むと思います。
https://jquery.com/
この公式サイトでも下記のように同期で読み込んでますね。（ていうか公式サイトなのにめちゃ古いバージョン使ってて驚く）
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
もちろん、WEBサイトの描画をブロックしないためには、JavaScriptはなるべく非同期で読み込んだほうがよいです。
その点AMPは、拡張コンポーネントのみならず、基本のコンポーネントも非同期読み込みを前提に作られているので、いつ読み込んでも大丈夫です。描画をブロックしません！
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-fx-collection"
src="https://cdn.ampproject.org/v0/amp-fx-collection-0.1.js"></script>
結論
というわけで、AMPのライブラリはとっても便利でパフォーマンスも良いです。
みんな使いましょう！