こんにちは。UXデザインの土橋です。
すっかり暖かくなり行楽シーズンになってきました。
お子様のいらっしゃる方は特に外出する機会も増えていると思います。
そんな中旅行やピクニックの計画を立てながらお弁当箱や水筒、レジャーシートなど買い揃える際
ついついAMP対応したHTMLテンプレートを用意し忘れてしまう..という方も多いのではないでしょうか。
そんな方のために今回はAMP規格に準拠したHTMLテンプレートの生成タスクをgulpで構築してみようと思います。
AMPとは
AMP(Accelerated Mobile Pages)はモバイルサイトのUX向上を目的にGoogleが主導で開発・推進しているオープンソースのプロジェクトでありフレームワークの名称でもあります。
2016年2月にGoogle、2017年11月にYahoo!のモバイル検索アルゴリズムに組み込まれたことで浸透・注目され始めたのですが、ASKULでも表示速度の鈍重さが課題として挙がる事も多くなりUX改善の打開案として無視できなくなってきています。
AMP対応ページは、サーバーリクエスト数の削減や検索結果画面におけるファインダビリティ向上などwebコンテンツのボトルネックを解消するため独自のルールに準拠した実装が求められますが、厳密なルールが存在するということはフローを順序立てれば実装手順も明瞭に整理できるということです。
そこで、実装手順を整理・フロー化しAMPテンプレートを生成するタスクをつくってみます。
実装の流れ
Node.js、gulpと併せ各モジュールとファイルを用意(インストール)し順にタスクを回します。
流れとしてはjsonから基本構成、scssからスタイル情報を吸上げejsに流し込んで生成するというものになります。
取り入れるルール
- スタイルは特定箇所にインラインで挿入
- AMP js(独自コンポーネント)の利用
- 検索結果スニペット用JSON-LDによる構造化データの記載
- 独自仕様のマークアップ