AMPサイトでも、通常サイトみたいにいろんなことをしたい！The AMP Componentを利用して、機能を追加する方法の紹介

AMPサイトでも、通常サイトみたいにいろんなことをしたい！でもJavascriptが使えない！困ったどうしよう。。そう思ったときにはThe AMP Componentを探すと良さそうです。

[toc]

The AMP Componentとは？

AMPを利用するときにはHTMLを拡張したようなAMP HTMLというのので書く必要があります。WordPressの場合にはこのあたりをAMPプラグインがやってくれるので、余り考える必要がなくて楽ちんですね。

そのAMP HTMLの中で、メディアサイトなどでよく使われる機能を実装するめに提供されているAMP HTMLの拡張機能というようなイメージです。

The AMP Componentで提供される機能は？

ひとまずThe AMP Component の内容と使い方が紹介されている The AMP Component Catalogue の中を数えてみたら120個以上ありました！(記事投稿日現在)。なんだか、十分足りそうな気配ですね。

すっごくたくさんあります。

当サイトで利用しているThe AMP Component

当サイトは常にAPM対応のページとして表示していますので、Javascriptっぽい動きをしている部分はすべて、The AMP Component を利用しています。

アドセンス
GTMの導入
上に戻るボタン
SNSブックマーク
ドロワーメニュー
カルーセル
lightbox
等など

The AMP Component の利用イメージ/SNSブックマークボタンの導入

The AMP Componentを利用するために、The AMP Component Catalogueのサイトを参考に作業します。SNSブックマークボタンの利用を例にご紹介します。コピペが主なので、そんなに難しくないですよ。

利用するコンポーネント “amp-social-share”

SNSブックマークボタンを導入するためにはamp-social-shareを利用します。参考にするのは以下の2ページです。

amp-social-shareコンポーネントの読み込み

ヘッダー内にて、下記のスクリプトを読み込みます。

<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>
Code language: JavaScript (javascript)

SNSブックマークの場合にはシェアの際にURLが利用されるので、カノニカルURLの記述が必要になります。SEO系のプラグインを入れていれば、自動的に表示されている可能性が高いです。ない場合は、この部分は自分で実装となります。

<link rel="canonical" href="https://www.megane-blog.com//">
Code language: HTML, XML (xml)

ソーシャルブックマークボタンの設置

つづいて、ソーシャルブックマークボタン自体の設置です。例えばTwitterの場合は以下のようになります。

<amp-social-share type="twitter"></amp-social-share>
Code language: HTML, XML (xml)

Lineの場合は、以下のような感じに。typeのところだけ、変えれば良さそうですね。

<amp-social-share type="line"></amp-social-share>
Code language: HTML, XML (xml)

Facebookはapp_idが必要になります。

<amp-social-share type="facebook" data-param-app_id="xxxxxxxx"></amp-social-share>
Code language: HTML, XML (xml)

基本的にはそれぞれのSNSの色が背景色について、その上に白のアイコンが表示されます。

SNSボタンを並べたイメージ
The AMP Component Catalogueより

ソーシャルブックマークボタンのカスタマイズ

見栄えを調整するためにはCSSを利用します。その為に、それぞれに任意のclassをつけることが可能です。サイズを直接設定することも可能です。

以下では、classとしてroundedを付与し、widthとheightを48に設定しています。

<amp-social-share class="rounded" type="email" width="48" height="48"></amp-social-share>
Code language: HTML, XML (xml)

こちらにあわせてCSSを設定します。

amp-social-share.rounded {
  border-radius: 50%;
  padding: 8px 8px;
  margin: 0 4px;
  background-size: 75%;
  color: #000;
  background-color: #444;
}
Code language: CSS (css)

以上で、このページで表示されているような丸いソーシャルブックマークボタンが設定できました。

このように、コンポーネントの有無を調べる、あれば、カタログを参考にスクリプトを読み込み、内容を設定する。というステップで実装が可能です。

いろいろコンポーネントがあるので、どれを使おうかなと選んでいると楽しくなります。ぜひ色々使ってみてくださいませ！

ではまた！

次回予告

AMPでのアクセス解析
- クリックイベントの取得
AMPとカスタムメニューの組み合わせ
AMPでアドセンス自動広告
Backlog World 2020で話す、”リモートワークでプロジェクトマネジメントを上手く行うための技術” について
2月に行われる自分主催のイベント”めがねさんと。“について
WordCamp ASIA 2020について
日記的なYoutubeを再開したい。
毎日続けられるかどうか。
ロゴをかっこよくする
メニューをサンドイッチぽくする