Componentを利用して、機能を追加する方法の紹介2020年1月6日AMPAMPサイトでも、通常サイトみたいにいろんなことをしたい!でもJavascriptが使えない!困ったどうしよう。Componentを探すと良さそうです。HTMLというのので書く必要があります。WordPressの場合にはこのあたりをAMPプラグインがやってくれるので、余り考える必要がなくて楽ちんですね。HTMLの拡張機能というようなイメージです。中を数えてみたら120個以上ありました!(記事投稿日現在)。なんだか、十分足りそうな気配ですね。すっごくたくさんあります。Catalogueのサイトを参考に作業します。SNSブックマークボタンの利用を例にご紹介します。コピペが主なので、そんなに難しくないですよ。“amp-social-share”SNSブックマークボタンを導入するためにはamp-social-shareを利用します。参考にするのは以下の2ページです。<amp-social-share>amp-social-shareコンポーネントの読み込みヘッダー内にて、下記のスクリプトを読み込みます。src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>SNSブックマークの場合にはシェアの際にURLが利用されるので、カノニカルURLの記述が必要になります。SEO系のプラグインを入れていれば、自動的に表示されている可能性が高いです。ない場合は、この部分は自分で実装となります。href="https://megane-blog.com/">ソーシャルブックマークボタンの設置つづいて、ソーシャルブックマークボタン自体の設置です。Twitterの場合は以下のようになります。type="twitter"></amp-social-share>Lineの場合は、以下のような感じに。typeのところだけ、変えれば良さそうですね。type="line"></amp-social-share>Facebookはapp_idが必要になります。data-param-app_id="xxxxxxxx"></amp-social-share>基本的にはそれぞれのSNSの色が背景色について、その上に白のアイコンが表示されます。Catalogueよりソーシャルブックマークボタンのカスタマイズ見栄えを調整するためにはCSSを利用します。その為に、それぞれに任意のclassをつけることが可能です。サイズを直接設定することも可能です。以下では、classとしてroundedを付与し、widthとheightを48に設定しています。height="48"></amp-social-share>こちらにあわせてCSSを設定します。#444;}以上で、このページで表示されているような丸いソーシャルブックマークボタンが設定できました。このように、コンポーネントの有無を調べる、あれば、カタログを参考にスクリプトを読み込み、内容を設定する。いうステップで実装が可能です。コンポーネントがあるので、どれを使おうかなと選んでいると楽しくなります。ついて2月に行われる自分主催のイベント”めがねさんと。2020について日記的なYoutubeを再開したい。毎日続けられるかどうか。雑記AMP対応でもソースコードを見やすく、表示したい。雑記AMPでGTM経由でAnalyticsを設定する雑記ダークモードに対応する方法。Blocksがとても便利そう雑記megane9988。