AMP Startを使ってみる

2018年3月2日2018年5月31日

AMP対応テーマを使ってWordPressサイトをAMP対応しましたが、CMSを使わないサイトをAMP対応する場合にはAMP対応フレームワークを使うのがよさそうです。

AMP Start

AMPプロジェクトが提供しているAMP Startというフレームワークがあります。何種類かテンプレートがあって、このファイルを書き換えるだけでAMP対応サイトができてしまいます。

グリッドレイアウトやコンポーネントの配置など、Bootstrapなどのフレームワークを使ったことがあれば馴染みのある手順でサイトを構築できます。

AMP Startテンプレートは様々なJavaScriptやStyle Sheetを読み込んで動作しますが、リセットにNormalize.cssを、デザイン用にBass.cssを読み込むので、それぞれのドキュメントに目を通しておくと一通りの動作が理解できます。

AMP対応ブラウザ

AMP専用タグは通常のhtmlタグとは異なります。iOSやAndroid用はよほど古いものでなければAMPタグに対応していそうですが、調べてみたらie以外のフルブラウザもWindows、MacともにAMP対応していました。

Luxeritasの場合はAMP非対応タグを書き換えて表示していたようですが、AMP StartテンプレートはAMPタグを使って書かれています。

更にレスポンシブ対応されているので、AMP対応ブラウザであれば単一のコードでスマホもタブレットもPCもちゃんと動作させることができますよ。

というわけでAMP Startを使って作ってみたサイトがこちら。

Cantonese Opera for Foreigners

AMPテストの結果、「amp-position-observerが使用されていない」とのエラーが出ましたが、当該コードを削除したところ問題なしとなりました。機能をいくつか削除した際に不要になったんでしょうね。