AMPページにサイドバーを追加してみる~WordPress AMP使用~

AMPプロジェクトが拡張機能を公開

もともとモバイルページの高速表示を目的としたAMPプロジェクトですが、ここにきて大きく4つの拡張機能を公開したようです。

拡張機能について

この記事によると、サイドバー、アコーディオンメニュー、ソーシャルシェア、動的CSSが可能となるようです。

今回はサイドバーとソーシャルシェアについて試します。動的CSSというのは、リファラーに応じたCSS定義が可能になるということでしょうか、アコーディオンメニューと一緒に、いつか試したいと思います。

サイドバー

<amp-sidebar>というタグを使うと、AMPページにサイドからスライドしてくるメニューを実装できるようになります。

amp-sidebarについて公開されたGitHubページです。

<amp-sidebar>

公開情報を見ると、<amp-sidebar>は「<amp-sidebar>タグはbody直下に置く」などの制約があるようです。詳しくはGitHubを見てください。とにかくまずは動かしてみようということで、サンプルページを元に本サイトで試しに導入してみました。

本サイトはWordpressで作られていて、AMP対応するためにAMPプラグインを導入しています。ところが、AMPプラグインはおそらくまだ今回の拡張機能には対応していないようですので、ひとまず無理やりプラグインをカスタムして動きだけ見てみることにします。それほど待たずに対応してくれるような気がするので(AMPプラグインとは別のプラグインが対応する可能性の方が高いかもしれません)、焦って変な実装するよりかは動作テスト済のプラグインが出てくるのを待った方が確実ですね。

ひとまず実装してみた結果が以下の画面です。

amp1

まず、headタグ内にamp-sidebar用のスクリプトを読み込むタグを入れます。これは必須です。今回はAMPプラグインの「amp/templates/single.php」というファイルを編集しています。どうせプラグイン更新したら消えてしまいますし、適当に修正してます。

同じくheadタグ内に、styleタグを追加します。これはサンプルコードなので、必ずこの定義でなくてはいけないということはないです。適宜変更してください。ただし、styleタグのamp-custom属性は忘れずに。

次に、今回の私のサンプルでは、メニューの開閉に画像ボタンを使用しています。そのHTMLは以下のとおり。

この開閉ボタンの中で「on=’tap:sidebar.toggle’」という部分が、サイドバーを開くトグル処理の定義です。他に開くボタン用の定義や閉じるボタン用の定義もあります。「role=”button”」で画像ボタンにできます。この画像ボタンを適宜コンテンツに配置します。

あとはamp-sidebarタグをbodyタグの直下に記述します。body直下に置かないといけないようです。

これでサイドバーが追加できました。amp-fit-textタグは領域幅に収まるようにテキストサイズを調整する機能です。このタグを使う場合は、headタグ内に以下のscriptタグを記述します。

ソーシャルシェア

<amp-social-share>

ソーシャルシェアはTwitterやFacebookなどに記事をシェアするためのボタンを設置できる機能です。今回はTwitter、Facebook、Pinterest、Google+を試します。

ソーシャルシェアを行うためには、headタグ内に以下のscriptタグを記述します。

次に、それぞれのソーシャルに合わせてamp-social-shareタグを追加していきます。

Facebook以外は簡単ですね。type属性にソーシャル名を記述するだけです。Facebookの場合はちょっと面倒です。

まず、data-param-text属性には記事タイトルを定義します。ここではAMPプラグインを編集しているので、wordpressの記事タイトル取得の関数ではないことに注意してください($this->get( ‘post_title’ )の部分です)。

次にdata-param-href属性には記事URLを定義します。ここもAMPプラグイン用の記事URL取得方法を用いていることに注意してください($this->get( ‘canonical_url’ )の部分です)。

最後にdata-param-app_id属性にはFacebookページのApp IDを定義します。FacebookページのApp IDは、Facebook APIにアクセスするためのアプリ登録をしていないと取得できません。そのあたりはたくさん情報あるのでそちらを参考にしてください。

上記の画像のように、デフォルトでは各ソーシャルロゴがそのまま表示されますが、このシェアボタンのスタイルはある程度変更できるようです。公開ページにはこういったサンプルが書かれています。

以上で、拡張機能のお試しはいったん完了です。

GitHubを見ていると、他にもカルーセルやアニメーションやlightbox風表示などいろいろな機能を用意しているようです。もしかして廃止になる機能も出てくるかもしれませんが、できる内にどんどん試していきたいですね。

AMP拡張機能一覧 – GitHub

広告
  • LINEで送る