HOME > コラム > WEB全般 > AMP HTMLのサイドバーを実装しました

AMP HTMLのサイドバーを実装しました

コラム

つい先日、2016年5月24日にAMP Projectが幾つかの拡張機能をリリースしました。
サイドバー、アコーディオン、SNSのシェア、ダイナミックCSSの4種です。
ということで、今回、当サイトにサイドバーを実装しましたので報告です。
少し問題があったように思いましたので、メモ代わりに記事に残しておきたいと思います。
「ちょっとは役に立ったかな?」や「ちょっと面白いな(笑)」みたいなことを感じられましたら、シェアして頂けますと幸いです。

WEB全般に投稿したコラム記事

AMP HTMLのサイドバーを実装しました

AMP HTMLサイドバーイメージ
AMP Projectの情報

2016年5月24日、AMP Projectが4種の拡張機能をリリースしたことを発表しました。
サイドバー、アコーディオン、SNSのシェア、ダイナミックCSSの4種です。

Menus, sharing, and dynamic CSS classes in AMP

ということで、早速当サイトに導入してみたいな・・・と思いまして、サイドバーを導入致しました!
サンプルソースも公開されていましたので、すぐに取り組めました。

AMP by Example

実装されたページは本記事のAMPページで確認してみて下さい。
ブラウザ上の右上に(静的な)ハンバーガーメニューを設置しまして、ハンバーガーメニューボタンをタップやクリックすると、左側からメニューが出てきます。
デザインはスマホで閲覧した時に出るドロワーメニューと同じような感じにしました。
アコーディオンは実装していません。

AMP HTMLのサイドバーを実装しましたのAMPページ

サイドバーを導入するにあたって注意すべき点について

特に注意する点があったかどうかは分かりませんでしたが、古いスマホ端末向けの表示は考えた方がいい気がしました。
iPhone6であれば何不自由なく動作してくれましたが、android SO-02F(ブラウザ 4.4.2-1)だと綺麗に動作してくれませんでした。

具体的に、サイドメニューの縦が長い時、iPhoneでは縦スクロールが自動で入ってくれたのが、android SO-02Fでは縦スクロールが入りませんでした。
CSSの制御で何とかなるかもしれませんが、共通しない動作を制御するのも変な感じがしましたので、縦スクロールが入らないようにメニュー数を抑えました。

また、サイドメニューのオープンとクローズの動作にも若干の差異がありました。
この辺りはCSSの仕様というより、ブラウザやAMPの仕様に影響することでしたので、致し方なしなところでした。

とりあえず目に付いたところで言えば、上記のような感じでした。
装飾などは普通にいけまして、チェックでもエラーは出ませんでした。

他の拡張機能は・・・

追って実装していきたいと思っています。
特にSNSシェアのボタンについては、早いうちに実装してしまいたいところです。

その他は特に困ってない感じなので、仕様の把握に留めておこうと思っています。
AMP ATML同梱の簡単WEBサイトテンプレート(PHP)にも組み入れたいと思ってたりしています。
参考ソースになればと思う次第です。

ということで、色々見ておきたいところなので、何かをした時には都度都度記事に残していこうと思います。

締め

どうでもいいことかもしれませんが、実は当サイトが日本で最初にAMPのサイドバーを実装したサイトになるんじゃないかな?なんて思っています(笑)
twitterなどで検索してみましたが、見当たりませんでした。

サンプルで公開されているソースを理解出来ればすぐにでも導入出来るような感じでした。
難しいモノではなさそうですので、慣れのない方にとっては取り組みやすい案件になるのではないでしょうか、そんな気がします。

しかし、、、AMPページの目的や意図としては速報的な意味合いが強いイメージがありますが、今回の拡張機能はそれらの目的や意図とはそぐわないような・・・そんな気もします。
何でもかんでも実装というわけでもないと思うので、どこに向かっているのか、そういうことは常に意識しておきたいところです。

執筆 : 清水 隼斗

AMP HTMLのサイドバーを実装しましたのAMPページ

Facebookコメント

他のカテゴリ記事は下記からお選び下さい。
SEO対策に関する記事を投稿するカテゴリです。とにかく、SEO対策のことのみを記事にしようと思います。弊社の本業です(笑)
インターネットやWEBに関する総合情報に関する記事を投稿するカテゴリです。技術的なことでも出来るだけ分かりやすくしていこうと思います。
社内での出来事やランチのことなど、小さなことから大きなことまでを投稿するカテゴリです。少人数なのでネタは限られてますが面白可笑しくいきます!
その他、上記に当てはまらないことは全てこのカテゴリに投稿します。弊社の歴史・・・というわけではありませんが、後になって懐かしむことが出来る記事を投稿します。
株式会社SEMラボラトリー
TEL : 06-4394-8427
MAIL : info@oosaka-web.jp
PAGE TOP