AMP TECHBLOG

AMP (Accelerated Mobile Pages) プロジェクト入門：新しいフレームワークとしての AMP HTML を用いてウェブサイトを制作する

モバイルでのウェブページの高速表示を可能にしてくれる Google の AMP (Accelerated Mobile Pages)プロジェクト。これは AMP HTML というオープンソースのフレームワークを用いて実現されます。これまでウェブサイトのコーディングといえば、HTML を書いて CSS を書いて（場合によっては Bootstrap 等のフレームワークを用いて）、jQuery のプラグインとかを突っ込んで動きをつける、みたいな感じだったと思います。今回はこの新しいフレームワークである AMP HTML を、従来のウェブサイト制作に置き換えるものにできるのかを試してみました。以下で作ったサンプルは2016年1月1日現在で AMP HTML の Validator をパスしていますが、今後の仕様変更によっては書き換えが必要な場合もあるので注意してください。

はじめに

ウェブサイトといっても必要なものは実はそんなに多くない場合がほとんだと思います。一般的なサイトで必要なものといえば

  • メニューボタンとメニューウィンドウ
  • ファーストビューでの画像のスライドショー
  • バナーなどのカルーセル表示
  • 画像をタップすると拡大表示されるスライドショー
  • 広告表示
  • Google Analytics

くらいじゃないでしょうか。普通はこれらを実現するために jQuery とそのプラグインをあちこちから探してきてあれこれ詰め込んだり、場合によっては自分で JavaScript を書いたりする思います。

AMP HTML ではこれらすべての機能を（まだ完全ではないですが）、jQuery だの何だのを入れずに実装することができます（というか jQuery を含む JavaScript は原則使用禁止になっています ）。ということでこれら一つ一つを、AMP HTML でどのように実装するか見てみます。

サンプルコードはGistにアップロードしています。

基本の基本から

まずは基本中の基本、AMP HTML での Hello World です。AMP HTMLのGet Startedに載っているものです。

<!doctype html>
<html ⚡>
  <head>
    <meta charset="utf-8">
    <link rel="canonical" href="hello-world.html" >
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>Hello World!</body>
</html>

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 ファイルです。

メニューボタンとメニューウィンドウ

ではウェブページに必要な機能を実装していきます。まずはメニューボタンとメニューウィンドウです。サンプルコードから該当部分を抜き出すとこんな感じです：

...
<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
...
</head>
<body>
...

<button on="tap:open-menu">MENU</button>

<amp-lightbox id="open-menu" layout="nodisplay">
    <nav>
        <header>
            <h2>MENU LIST</h2>
        </header>
        <button on="tap:open-menu.close">CLOSE</button>
        <ul>
            <li><a href="#">MENU 1</a></li>
            <li><a href="#">MENU 2</a></li>
            <li><a href="#">MENU 3</a></li>
            <li><a href="#">MENU 4</a></li>
            <li><a href="#">MENU 5</a></li>
            <li><a href="#">MENU 6</a></li>
            <li><a href="#">MENU 7</a></li>
            <li><a href="#">MENU 8</a></li>
        </ul>
    </nav>
</amp-lightbox>

クラスとか説明に不要なものは省いてあります。

メニューウィンドウには 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 を閉じてね、というのを設定しています。

ファーストビューでの画像のスライドショー

続いてファーストビューでの画像のスライドショーです。

…が、これは普通に CSS でできてしまうのでサンプルコードでは CSS Animation を使用しています。興味のある方はstyle要素を見るか、CODEPENを参照してください。

バナーなどのカルーセル表示

次いでバナー等のカルーセル表示です。サンプルコードの該当部分はこんな感じです：

...
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
...
</head>
<body>
...

<amp-carousel width="480" height="160" layout="responsive" type="slides" autoplay loop>
    <amp-img width="480" height="160" layout="responsive" src="#"></amp-img>
    <amp-img width="480" height="160" layout="responsive" src="#"></amp-img>
    <amp-img width="480" height="160" layout="responsive" src="#"></amp-img>
</amp-carousel>

カルーセルには 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-img
    on="tap:photogallery" role="button" tabindex="0"
    src="#" alt="image-1"
    width="480" height="480" layout="responsive"></amp-img>
<amp-img
    on="tap:photogallery" role="button" tabindex="1"
    src="#" alt="image-2"
    width="480" height="480" layout="responsive"></amp-img>
<amp-img
    on="tap:photogallery" role="button" tabindex="2"
    src="#" alt="image-3"
    width="480" height="480" layout="responsive"></amp-img>
<amp-img
    on="tap:photogallery" role="button" tabindex="3"
    src="#" alt="image-4"
    width="480" height="480" layout="responsive"></amp-img>
<amp-lightbox id="photogallery" layout="nodisplay">
    <amp-carousel width="480" height="480" layout="responsive" type=slides loop>
        <amp-img
            src="#" alt="image-1"
            on="tap:photogallery" role="button" tabindex="0"
            width="480" height="480" layout="responsive"></amp-img>
        <amp-img
            src="#" alt="image-2"
            on="tap:photogallery" role="button" tabindex="1"
            width="480" height="480" layout="responsive"></amp-img>
        <amp-img
            src="#" alt="image-3"
            on="tap:photogallery" role="button" tabindex="2"
            width="480" height="480" layout="responsive"></amp-img>
        <amp-img
            src="#" alt="image-4"
            on="tap:photogallery" role="button" tabindex="3"
            width="480" height="480" layout="responsive"></amp-img>
    </amp-carousel>
</amp-lightbox>

上の４つがトリガーとなる画像、それらをタップして拡大表示されるものが amp-lightbox の中に入っています。amp-lightbox の中でスライドショーにするために amp-carousel をさらにいれています。amp-lightbox と amp-carousel についてはそれぞれ上で説明したのでもう大丈夫だと思います。

実際には amp-lightbox の中の amp-carousel を画面中央に表示させるために、クラスをつけて CSS を当てています。その辺はサンプルコードをたどってください。

広告表示

さて、広告表示です。Google Adsense の場合は例えば

<amp-ad width=300 height=250
    type="adsense"
    data-ad-client="ca-pub-7999477986195214"
    data-ad-slot="1761149686"></ins>
</amp-ad>

のようにすることで300×250の広告を表示させることができます。2016年1月1日現在で以下の広告ネットワークに対応しています：

Google Analytics

Analyticsに関しては別の記事にまとめていますのでそちらを参照ください。

まとめ

という感じで、まだ完全ではないものの、一般的なサイトは AMP HTML を使って普通に作れるんじゃないかと思っています。2016年は AMP HTML という新たなフレームワークを共通で使用することで、未だに jQuery 依存症に溢れた人たちを脱皮させて、フレームワークに触れるきっかけを与えれるんじゃないかと期待してます。

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です