AMPサイトでも、通常サイトみたいにいろんなことをしたい!でもJavascriptが使えない!困ったどうしよう。。そう思ったときにはThe AMP Componentを探すと良さそうです。
[toc]
AMPを利用するときにはHTMLを拡張したようなAMP HTMLというのので書く必要があります。WordPressの場合にはこのあたりをAMPプラグインがやってくれるので、余り考える必要がなくて楽ちんですね。
そのAMP HTMLの中で、メディアサイトなどでよく使われる機能を実装するめに提供されているAMP HTMLの拡張機能というようなイメージです。
ひとまずThe AMP Component の内容と使い方が紹介されている The AMP Component Catalogue の中を数えてみたら120個以上ありました!(記事投稿日現在)。なんだか、十分足りそうな気配ですね。
当サイトは常にAPM対応のページとして表示していますので、Javascriptっぽい動きをしている部分はすべて、The AMP Component を利用しています。
The AMP Componentを利用するために、The AMP Component Catalogueのサイトを参考に作業します。SNSブックマークボタンの利用を例にご紹介します。コピペが主なので、そんなに難しくないですよ。
SNSブックマークボタンを導入するためにはamp-social-shareを利用します。参考にするのは以下の2ページです。
ヘッダー内にて、下記のスクリプトを読み込みます。
<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://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の色が背景色について、その上に白のアイコンが表示されます。
見栄えを調整するためには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)
以上で、このページで表示されているような丸いソーシャルブックマークボタンが設定できました。
このように、コンポーネントの有無を調べる、あれば、カタログを参考にスクリプトを読み込み、内容を設定する。というステップで実装が可能です。
いろいろコンポーネントがあるので、どれを使おうかなと選んでいると楽しくなります。ぜひ色々使ってみてくださいませ!
ではまた!