Accelerated Mobile Pages、略してAMP。
モバイルページが驚くほど早く表示されるこの技術。
リリース以降徐々に広がってきており、Googleの検索結果でもAMPのロゴをよく見るようになってきました。
※AMP表示の例
さて、弊社でもWordPress用AMPデザインテーマ「AWESOME」を無料配布しています。
AMPテーマ開発の際の難点が、成約が多すぎるという点が挙げられます。
やりたくても出来ないことが沢山あるからです。
AMP用のhtmlやcssの容量の成約（50kb以内)などなど。
その為、jqueryを使ってできていたことが、AMPでは出来ないためとてもシンプルなUIになりがちです。
ですが、実はハンバーガーメニューやスライダーといったアニメーションはAMPでも実装できることをご存知ですか？
今回はAMPでも実装できるハンバーガーメニューメニューやスライダーの作り方を解説していきます。
目次
AMP対応ハンバーガーメニュー＆スライダー実装方法
AMP対応Javascript
ampではjavascriptが使えないと思われがちですが、実は用意されているjavascriptに関しては使用可能です。
上記AMP BY EXAMPLEでは、様々なアニメーションのデモが用意されており、マークアップ方法が紹介されています。
- スライダー
- アコーディオンメニュー
- Google mapの表示
- iframe
- lightbox
といったAMPでは出来ないと思われがちな機能も実装可能です。
ハンバーガーメニューの作成方法
弊社のAMPテーマでもハンバーガーメニューを実装しています。
動作としては下記のような感じ。
メニューアイコンを押すと、横からスライドしてメニューが表示されるような仕様になっています。
ここで使用したのはamp-sidebarというjsです。
ハンバーガーメニューっぽくみせるための「三」のアイコンはSVGファイルです。
クローズの「☓」もSVGです。
マークアップ方法はいたって簡単
<script async custom-element=”amp-sidebar” src=”https://cdn.ampproject.org/v0/amp-sidebar-0.1.js”></script>
をheadタグの中に入れ込みます。
そして
<amp-sidebar id=”sidebar” layout=”nodisplay” side=”right”>
メニューの内容はここに
</amp-sidebar>
これだけでスライドメニューが作れてしまいます。
side="" の中のコードがどこからスライドしてくるかを示しています。
今回はright。つまりは右からのスライドで設定しています。
お好みでこのあたりはいじっていくと楽しそうですね。
アコーディオン、Google mapなども
https://ampbyexample.com/
サイトを覗くととても多くの、機能がAMPでも実装できることが分かります。
AMPページのDEMOなんかもいくつか紹介されていて、実際にレイアウトしていくときの参考になるのではないでしょうか。
是非重い腰をあげてAMPページの作成に挑戦してみてくださいね。
