AMPにハンバーガーメニューなどのアニメーションを実装する方法

Accelerated Mobile Pages、略してAMP。
モバイルページが驚くほど早く表示されるこの技術。

リリース以降徐々に広がってきており、Googleの検索結果でもAMPのロゴをよく見るようになってきました。

AMPにハンバーガーメニューなどのアニメーションを実装する方法
※AMP表示の例

さて、弊社でもWordPress用AMPデザインテーマ「AWESOME」を無料配布しています
AMPテーマ開発の際の難点が、成約が多すぎるという点が挙げられます。
やりたくても出来ないことが沢山あるからです。

AMP用のhtmlやcssの容量の成約(50kb以内)などなど。
その為、jqueryを使ってできていたことが、AMPでは出来ないためとてもシンプルなUIになりがちです。
ですが、実はハンバーガーメニューやスライダーといったアニメーションはAMPでも実装できることをご存知ですか?

今回はAMPでも実装できるハンバーガーメニューメニューやスライダーの作り方を解説していきます。

AMP対応ハンバーガーメニュー&スライダー実装方法

AMP対応Javascript

AMPにハンバーガーメニューなどのアニメーションを実装する方法
▶AMP BY EXPAMPLE

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なども

サイトを覗くととても多くの、機能がAMPでも実装できることが分かります。
AMPページのDEMOなんかもいくつか紹介されていて、実際にレイアウトしていくときの参考になるのではないでしょうか。

是非重い腰をあげてAMPページの作成に挑戦してみてくださいね。

PR

Instagram Feed

Load More
Something is wrong. Response takes too long or there is JS error. Press Ctrl+Shift+J or Cmd+Shift+J on a Mac.

Instagram

WEB DIRECTOR

マンノカズミチ

バンドマンを経て、台湾で日本語教師をしてましたが、2016年より株式会社AWESOMEにてWEB開発とコンテンツ制作を担当しております。SEO対策と記事執筆が得意分野です。こっそり台湾と日本のハーフです。

他の投稿を見る →