AMP の Standard に 挑戦してみる

現在 Website Mode を Reader で 設定していますが Standard で 動くように Theme を 修正していきたいと思います

目標 : Website Mode を Standard で 運用する

Standard にすると サイト全体 が AMP になり JS が 動かなくなってしまいます

JS が 動かなくなって困ってしまう所は SP表示時 の メインメニューの開閉 と サイドメニューの開閉 です

メインメニューの開閉

今までは Bootstrap の navbar の 機能を利用して ボタンを押したら メニューが 開閉していました

JS が 動かなくなった事で メニューの開閉が出来ないのですが
AMP では on=”〜” という クリックイベントを タグ内に 埋め込むことで 現在の状態を 更新することが出来ます

on="tap:AMP.setState({ main_menu_open : !main_menu_open })"

こんな感じです
vue.js 等 を 触ったことがある人は なんとなく 理解ができるかもしれません

これを利用して class の 追加 削除 を 行うことで 開閉 を 表現できます
class の 付け替えは [class]=”〜” という記述をします

[class]="main_menu_open?'show':''"

こんな感じで 三項演算子 を 使って 追加 削除 が 出来ます

現状 アニメーションはしませんが そのうち 対応していきます

サイドメニューの開閉

サイドメニュー に 関しては <amp-sidebar>〜</amp-sidebar> というタグがあるので そちらを使って 表示します

<amp-sidebar id="amp-sidebar" layout="nodisplay" side="right">
〜ここにサイドバーの出力〜
</amp-sidebar>

そして メインメニューの開閉 で 使った on=”〜” で サイドバーの 開閉をします

on='tap:amp-sidebar'

とりあえず メニューの開閉が出来たので このサイトで 公開してみます

どこか表示崩れがあったら コメントください

と思ったら Disqus は 表示されない…
広告は ブロックからはみ出る…
という ダダ崩れの状況…

一旦 戻します…
(;´д｀)ﾄﾎﾎ…