herablogエンジニアアメブロでは2016年2月にAMPページの提供を開始し、リリース以降いくつかの改善を重ねてきました。2017年、できるだけオリジナルサイトのユーザー体験を再現できるようにAMPページをアップデートしました。本記事ではその一例をご紹介します。<amp-list>オリジナルサイトではブログ本文に関係ないページ下部の要素をLazyLoadし、表示速度を改善しています。AMPページでは<amp-list>を使用して同様のことを実現しています。<amp-list>ではXHRでデータを取得し、描画します。他の多くのAMPエレメントと同じように、スクロールに応じて画面表示領域に近付いた時にデータ取得・表示処理をおこなうので、LazyLoadを簡単に実装できます。ページ下部のモジュール群はスクロールに応じて遅延表示されます。<amp-list>のsrc属性には、データを取得するAPIのURLを指定します。データは配列で返却する必要があり、JSONのプロパティ名をitems属性で指定します。表示内容は<amp-mustache>テンプレートを使ってMustache形式で記述できます。fallback>データが取得できませんでした。</template></amp-list>CORSAMPで利用するAPIは、クロスオリジンリクエストに配慮する必要があります。Access-Control-Allow-Credentialなど)に加え、以下のようなレスポンスヘッダーを実装します。AMPをご覧ください。barを作成しました。<amp-bind>を使うと、AMPページ内で状態管理をすることができます。入力した文字列に応じて推薦ワードが表示されます。<amp-state>で状態(state)の初期値を設定します。</script></amp-state>次に、input要素の入力に応じてAMP.setState()メソッドで状態を更新します。イベントはon=”イベント名:処理”のような形式で設定できます。今回は、input要素の変化時のイベントであるinput-debouncedを利用しています。AMPで説明されています。}})"/>変更されたsearchState.autosuggestの値に応じて、<amp-list>によるXHRが発生し、その結果により画面を書き換えます。変更された値を使う属性は[src]のように[]で囲い、その中には従来のJavaScriptの式で文字列をつなぎます。すると、状態が更新されるたびに、APIリクエストが発生し、表示が切り替わります。barには、モーダル表示として<amp-lightbox>も同時に使われています。オーバーレイとなる要素のタップでlightboxもクローズできるようにしています。<amp-form><amp-bind>を応用することにより、AMPページでもオリジナルサイトのように記事へのいいね!(Like)リアクションをすることができるようになりました。AMPページ上でいいね!アクションができるようになりました。いいね!ボタンがタップされた時点で、現在のステータスを取得します。<amp-state>はsrc属性で、APIからデータを取得することもできます。credentials="include"></amp-state>取得できたステータスに応じて、いいね!を実行する、もしくはキャンセルするボタンの表示を出し分けします。表示の出し分けは、iineStateの状態に応じて、class属性で付与するクラス名を切り替えています。POSTリクエスト、その結果に応じてiineStateを書き換えています。<amp-dynamic-css-classes><amp-dynamic-css-classes>を使うとページが表示されている環境に応じて表示の切り替えができます。環境の値は動的にクラス名としてbody要素に付与されます。スタイルはCSS内に定義されるため、素早くレイアウトを反映できます。Viewer内かどうか判定でき、アメブロではTwitterアプリ内での表示カスタマイズに利用しています。-->Twitterアプリ上での表示のカスタマイズ。Workerをインストールします。Workerがインストールされた状態で開始することができます(アクティベートされるかどうかはタブなどブラウザの状態に依存します)。Google検索結果で表示中のAMPページ。Workerがインストールされている。Workerを登録する記述をします。Workerを登録します。Workerではアセットのプレキャッシュがされており、遷移時にはすでにそれらがキャッシュされた状態からページの表示が開始されます。改善や無駄なネットワークリクエストを削減することができます。本記事では、AMPに用意されている様々な要素を使って、オリジナルサイトと同様のユーザー体験を構築する方法を紹介しました。HTMLとCSSで宣言的に高品質のWebページを作れるところがAMPの良いところですが、さすがに<amp-bind>を使って状態管理をするとなるとプログラミング的な脳の使い方が必要そうです。それでも他のライブラリやフレームワークのようにインストールの必要がなく、HTMLさえ記述できれば利用できます。サブ的な機能から徐々に利用してみるのも良いかもしれません。アメブロでは今後も、AMPページでもオリジナルサイトのユーザー体験をできる限り再現できるように向上させていく予定です。Workerアメーバピグherablog2008年入社の新卒おじさん。Webフロント・サーバー・インフラなど。最近の趣味はねこの写真撮り。