AMP対応の独自タグ
AMP対応ページでは【img】【video】【audio】【iframe】タグを使用することは禁止されています。 代わりに【amp-img】・【amp-video】・【amp-audio】・【amp-iframe】を使用する事になります。 ほぼ、通常のhtmlと同様の使い方でいいのですが、画像、動画に対しては、サイズ指定が必須なります。 先にサイズ指定をしておく事で、ソースの読み込み時にあらかじめ、表示する領域を確保することができ、 Webページ全体の表示速度の高速化につながります。 他にもAMP対応ページでは JavaScriptの使用が制限されているので、サイトの動的な部分はそのままでは表現できなくなってしまいます。 そのためAMP対応ページでは専用のタグが用意されています。| タグ | 説明 |
|---|---|
| amp-accordion | アコーディオン型メニューを設置 |
| amp-carousel | カルーセル（画像が横に並んだ、スクロール機能付きのエリア）を設置 |
| amp-fit-text | フォントサイズを要素の幅に応じて自動で調整 |
| amp-font | Webフォント読み込み時の動作を制御 |
| amp-form | 入力フォームを設置 |
| amp-fx-flying-carpet | フルスクリーンで画面を覆うように表示される「flying-carpet」を設置 |
| amp-image-lightbox | タップすると拡大表示されるようなlightboxを設置 |
| amp-sidebar | サイドバーを設置 |
複雑な動的ページを表現することは難しいですが、上の様なAMP専用のタグを利用することで、少しは動きを表現することが出来ます。
SNS埋込
SNSの記事などを埋込する場合も通常は埋込コードを利用しますが、AMP対応ページでは専用のタグが用意されています。| タグ | 説明 |
|---|---|
| amp-social-share | SNS（Facebook、G+、Twitterなど）のシェアボタンを設置 |
| amp-facebook | 記事を埋込 |
| amp-twitter | ツイートを埋込 |
| amp-instagram | Instagramのコンテンツを埋込 |
タグの使い方
[html] <head> <!– ↓ シェアボタン表示する為に｛head｝内に記述 ↓ –> <script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script> <!– ↓ Facebookの記事を表示する為に｛head｝内に記述 ↓ –> <script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script> <!– ↓ Twitterの記事を表示する為に｛head｝内に記述 ↓ –> <script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script> </head> <body> <!– ↓ Facebookのシェアボタン ↓ –> <amp-social-share type="facebook" data-param-app_id="FacebookのAppID"></amp-social-share> <!– ↓ Google+のシェアボタン ↓ –> <amp-social-share type="gplus"></amp-social-share> <!– ↓ Twitterのシェアボタン ↓ –> <amp-social-share type="twitter"></amp-social-share> <!– ↓ Facebookの記事を埋込 ↓ –> <amp-facebook width="600" height="200" layout="responsive" data-href="コンテンツのURL"> </amp-facebook> <!– ↓ Twitterの記事を埋め込む ↓ –> <amp-twitter data-tweetid="TwitterID" width="600" height="200" layout="responsive"> </amp-twitter> </body> [/html]まとめ
前回の記事を書いたのが、2017年2月だったのですが、Googleの対応もすすみ、どんどん新しいAMP対応タグが増えています。 少し前までは、表現がむつかしかった事が、今では単純に表現できるようになっていたりします。 まだまだ既存のWEBサイトをAMP化することには賛否両論ありますが、単純だとわかっているサイトをこれから作成する場合、ブログやニュースサイトを作成する場合には、ぜひ一度検討してみてはどうでしょうか？。
andspace
この記事を書いた人