AMPページにサイドバーメニューを取り付ける方法を解説

AMPにサイドバーをつけたい人？

過去に公開したamp関連記事がアクセス多いので、久々に書いてみます。

スマホに特化したAMPページではサイドバーはスペース的につけられません。でも、公式にはスクリプトが用意されています。
サイドバーというより、横からスライドして出てくるメニューです。

メニューアイコンを上部に表示させておき(別の方法も可)、クリックすると出てきます。
採用しているサイトは殆ど見かけないのですが、特に問題もなく動作するのでもっと普及してもいいのでは？

動的な動きのないampページが一気にクオリティがあがる感触。テーマファイルを編集するスキルと編集場所さえ突き止められるなら簡単です。

WordPress、テーマーはsimplicity2でのカスタマイズ例となります。

ampサイドバーの動作イメージ

アイコンタップで出現

右上のアイコンをタップするとメニューが出てくる。
常に同じ位置。

出てきたメニュー

本文に覆いかぶさる形で左から動的に出現。閉じるボタン付き。アイコンを再びタップしても閉じれます。

サンプルページ

AMPサイドバーサンプルページ

AMPサイドバーサンプルページ

slackline.jp

これがサンプルページです。サンプルページは通常の静的なHTMLにしています。
このブログはamp化してませんので、サンプルページ以外には実装していません。

PCだと右上のメニューアイコンにマウスオーバーしてもポインター変化しませんが、クリックすればメニューも出てきます。

１、ヘッダーに公式スクリプトを読み込ませる

ampには公式でサイドバー用のスクリプトが用意されています。

それをAMPのヘッダー部分で読み込ませます。AMPのテーマファイルに記載してください。
head内部でjsファイルが読まれている部分を探して付近に追加してください。

<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>

２、メニューを別ファイルで作る

amp-menu.php
という名前でテーマファイルを新規に作成します。FTPでアップロードしてください。

そして以下のコードをコピペして自分のブログ用にリンクするコードを書きます。

<?php //ampのメニュー ?>
<div id="amptglbtn"><amp-img src="アイコン画像URL" width="30" height="30" alt="サイト内メニュー" on="tap:sidebar1.toggle" role="button" tabindex="0"></amp-img></div>
<amp-sidebar id='sidebar1'
layout="nodisplay"
side="left">
<p class="menu-title">メニュー</p>
<ul>
<li><a href="/">トップページ</a></li>
<li><a href="https://slackline.jp/2010/04/08191200/">スラックラインとは？</a></li>
<li></li>
<li></li>
<li></li>
</ul>
<p>
<button class="close-menu-button" on='tap:sidebar1.close'>閉じる</button>
</p>
</amp-sidebar>

必須カスタマイズ二カ所

アイコンのurlとcss

アイコンの画像は自分で用意する必要があります。

<div id=”amptglbtn”><amp-img src=”アイコン画像URL” width=”30″ height=”30″ alt=”サイト内メニュー” on=”tap:sidebar1.toggle” role=”button” tabindex=”0″></amp-img></div>

アイコン画像url部分を変更してください。

何でもいいって人はこれをダウンロードしてご自身のサイトにアップロードしてください。
暗い色のブログでは使えません。

amp用のcss部分(ヘッダー部分に出力される)に以下をコピペします。必須です。位置は微調整してください。

#amptglbtn {
position: fixed;
top: 10px;
right: 10px;
}

メニュー本体のリンク

<li></li>の部分を自身のサイト用に変更してください。

メニューの本体部分になります。

<li>以外にも自由に記載可能です。

cssでの装飾はampルールにのっとりヘッダー内に直接記載する必要が当然あります。

お好みでカスタマイズ

<amp-sidebar id=’sidebar1′
layout=”nodisplay”
side=”left”>ここがメニュー内部</amp-sidebar>

このleftはメニューが出てくる方向です。rightも可。

↓この部分がメニューを閉じる部分

<button class=”close-menu-button” on=’tap:sidebar1.close’>閉じる</button>

3、AMPテーマファイル本体を編集

次にampページを直接吐いているテーマファイルを編集します。

ステップ1

新規作成したamp-menu.phpを読み込むように記載します。

以下のコードを読み込ませてください。

layout=”nodisplay”となっているのでどこに描写してもHTMLでは表示されませんが、<div>の内側に書くとampエラーと警告されるので</body>の直前がいいでしょう。

<?php get_template_part('amp-menu'); //追加AMPメニュー?>

お好みでステップ2

右上のアイコンとは別にボタンでも開ける。
アイコンは必須じゃない。

サイドメニューを開くボタンを別に記載したい場合は以下をコピペしてください。

表示したいところにコピペ

ボタン

<p class="open-menu">
<button class="open-menu-button" on='tap:sidebar1.open'>サイドメニューを開く</button>
</p>

テキストなどボタン以外
spanなどでも可能。ヘッダー部分においてもいい。

<p><span class="open-menu-button" on='tap:sidebar1.open'>サイドメニューを開く</span></p>

必要なのはこれら

必要なのはヘッダーのスクリプト、出すボタン、メニュー部分、メニュー部分に消すボタン。

サイドバーで出てくるメニューは自由に記載できるので工夫次第で様々なことができると思います。

AMPサイドバーサンプルページ

AMPサイドバーサンプルページ

slackline.jp

参考

＜amp-sidebar＞ - サイドバーを設置する

AMPのamp-sidebarは、サイドバーを設置するための要素です。ボタンをクリックするとサイドからメニューが表示されます。サンプルコード、デモなど。

syncer.jp