モバイルでのWebページの高速表示を可能にしてくれる
GoogleのAMP (Accelerated Mobile Pages)プロジェクト 。これは
AMP HTML というオープンソースのフレームワークを用いて実現されます。これまでWebサイトのコーディングといえば、HTMLを書いてCSSを書いて（場合によってはBootstrap等のフレームワークを用いて）、jQueryのプラグインとかを突っ込んで動きをつける、みたいな感じだったと思います。今回はこの新しいフレームワークであるAMP HTMLを、従来のWebサイト制作に置き換えるものにできるのかを試してみました。以下で作ったサンプルは2016年1月1日現在でAMP HTMLのValidatorをパスしていますが、今後の仕様変更によっては書き換えが必要な場合もあるので注意してください。
Table of Contents はじめに
Webサイトといっても必要なものは実はそんなに多くない場合がほとんだと思います。一般的なサイトで必要なものといえば
メニューボタンとメニューウィンドウ
ファーストビューでの画像のスライドショー
バナーなどのカルーセル表示
画像をタップすると拡大表示されるスライドショー
広告表示
Google Analytics
くらいじゃないでしょうか。普通はこれらを実現するためにjQueryとそのプラグインをあちこちから探してきてあれこれ詰め込んだり、場合によっては自分でJavaScriptを書いたりする思います。
AMP HTMLではこれらすべての機能を（まだ完全ではないですが）、jQueryだの何だのを入れずに実装することができます（というか
jQueryを含むJavaScriptは原則使用禁止になっています ）。ということでこれら一つ一つを、AMP HTMLでどのように実装するか見てみます。
サンプルコードは
Gist にアップロードしています。また
yukiyamashina.com/playground/amp.html にアクセスすると、サンプルコードが実際にどんな感じになるのかを確認できます。スマホやChromeのDeveloper Tools、SafariのResponsive Design Mode等でみてください。
基本の基本から
まずは基本中の基本、AMP HTMLでのHello Worldです。
AMP HTMLのGet Started に載っているものです。
html要素でいきなり絵文字が出てきてびっくりしますが、
<html amp>でもOKです。必要なのは
html要素にamp属性、もしくは⚡をつける
非AMPページがある場合はrel-canonicalでそのページを、なければAMPページそのものを指定する
CSSを追加で指定する場合はstyle要素でインラインスタイルを当てる
https://cdn.ampproject.org/v0.jsを読み込む。これで以下のビルトインのコンポーネントが使えるようになります：
amp-ad
amp-img
amp-pixel
amp-video
これが最低限のAMP HTMLファイルです。
メニューボタンとメニューウィンドウ
ではWebページに必要な機能を実装していきます。まずはメニューボタンとメニューウィンドウです。サンプルコードから該当部分を抜き出すとこんな感じです：
classとか説明に不要なものは省いてあります。
メニューウィンドウには
amp-lightbox要素 を使います。これは拡張コンポーネントなのでhead要素内で専用のスクリプトを読み込む必要があります。amp-lightboxはjQueryのlightbox的なものを実装できるもので、amp-lightbox要素の子要素が画面全体を覆い尽くすようになります。このときにトリガーとなるのがon属性を指定した要素で、ここの場合はbutton要素がそれに当たります。on属性の値には
tap:...を指定し、…の部分にはamp-lightboxのid属性の値を入れます。これで『
button要素（メニューボタン）をタップしたら、amp-lightboxの子要素（メニューウィンドウ）が画面一杯に表示される 』ことが可能になります。
また、amp-lightbox内のbutton要素には
on="tap:open-menu.close"が指定されています。ここで、buttonがタップされるとamp-lightboxを閉じてね、というのを設定しています。
実は…
現時点ではamp-lightbox内のanchor要素をタップしてもリンクに飛ばずにウィンドウが閉じてしまいます。タップじゃなくてクリックするとちゃんとリンク先に遷移してくれるので、amp-lightboxでのtouchイベントがその辺にまだ対応してないようです。一応AMP HTMLリポジトリのissuesに上げておいた ので、今後改善されてちゃんとリンク先にタップで移動できるようになるのを期待しています。
【2016年1月10日追記】
#1327 でこのバグは無事解決されました。
ファーストビューでの画像のスライドショー
続いてファーストビューでの画像のスライドショーです。
…が、これは普通にCSSでできてしまうので
サンプルコード ではCSS Animationを使用しています。興味のある方はstyle要素を見るか、
CODEPEN を参照してください。
バナーなどのカルーセル表示
次いでバナー等のカルーセル表示です。
サンプルコード の該当部分はこんな感じです：
カルーセルにはamp-carousel要素を使用します。amp-carouselも拡張コンポーネントなので、scriptの読み込みが必要です。amp-carouselにはtype属性があり、これをslidesにすることでスライド式のカルーセルになります。またautoplayやloopといった属性を指定しておくと自動再生＆ループさせることができます。
左右のコントロール矢印はデフォルトでは
visibility:hiddenになっています。なので矢印を表示させたい場合はCSSで
visibility: visible;を指定する必要があります。
amp-carousel要素とamp-img要素にそれぞれlayout=responsiveが指定されていますが、これをするとwidthとheightで指定した縦横比のままにデバイスの幅にあわせてくれます。layoutは他の値も取れるので（要素によってはどの値をもてるかが決まってたりします）、
AMP PROJECTの”How to Control Layout” を見てみてください。
画像をタップすると拡大表示されるスライドショー
画像タップからの拡大表示＆スライドショーにはamp-lightboxとamp-carouselを組み合わせて作ります。こんな感じになります：
上の４つがトリガーとなる画像、それらをタップして拡大表示されるものがamp-lightboxの中に入っています。amp-lightboxの中でスライドショーにするためにamp-carouselをさらにいれています。amp-lightboxとamp-carouselについてはそれぞれ上で説明したのでもう大丈夫だと思います。
実際にはamp-lightboxの中のamp-carouselを画面中央に表示させるために、classをつけてCSSを当てています。その辺は
サンプルコード をたどってください。
ここでも…
現時点ではコントロールの矢印をタップしても画像が切り替わらずにlightboxが閉じてしまいます。クリックイベントだとちゃんと画像が切り替わるので、メニューウィンドウと同様にamp-lightboxのタップイベントの処理の問題かなと思っています。なのでメニューウィンドウの方の問題が解決すれば、こちらも動いてくれると期待してます。
【2016年1月10日追記】
メニューウィンドウでのバグと同様に
#1327 でこのバグは解決済みになってます。
広告表示
さて、広告表示です。Google Adsenseの場合は例えば
のようにすることで300×250の広告を表示させることができます。2016年1月1日現在で以下の広告ネットワークに対応しています：
Google Analytics
Analyticsに関しては
別の記事にまとめています のでそちらを参照ください。
まとめ
という感じで、まだ完全ではないものの、一般的なサイトはAMP HTMLを使って普通に作れるんじゃないかと思っています。2016年はAMP HTMLという新たなフレームワークを共通で使用することで、未だにjQuery依存症に溢れた人たちを脱皮させて、フレームワークに触れるきっかけを与えれるんじゃないかと期待してます。