AMP for eコマース・モバイルアプリケーション 第1回：AMPを使った基本的なビルディングブロックとUI

この3部構成のチュートリアルでは、**AMP**を使用して完全に機能する**Eコマースモバイルアプリケーション**を作成する方法を探ります。

*本ブログは英語版からの翻訳です。オリジナルは[こちら](https://www.alibabacloud.com/blog/amp-for-e-commerce-part-1-basic-building-blocks-and-ui-using-amp_587356)からご確認いただけます。一部機械翻訳を使用しております。翻訳の間違いがありましたら、ご指摘いただけると幸いです。*

[Alibaba Cloud Tech Share](https://www.alibabacloud.com/campaign/techshare?spm=a2c65.11461447.0.0.4ea24c9783dVZT) 執筆、Sai Sarath Chandra。

[前回の記事](https://www.alibabacloud.com/blog/speed-up-mobile-apps-and-websites-with-amp_587088?spm=a2c65.11461447.0.0.4ea24c9783dVZT)では、AMPの基本と、その恩恵を受けるにはどうすればいいのかを見てきました。

AMP を使って魅力的な UI を作成するには、AMP フレームワークの基本、コンポーネント、基本的なビルディングブロックを理解する必要があります。私のチュートリアルでAMPのすべての情報を網羅することはできないかもしれませんが、あなたがAMPを始めるのに十分な情報を提供できるはずです。もっと知りたい場合は、いつでもAMPの公式ドキュメントセンターを覗いてみてください。

技術的な議論に入る前に、次のような質問に答えていきたいと思います。

###AMPの信頼性は？ 本番まで持っていけますか？
この記事を書いている時点では、AMPはベータ版です。モバイルアプリ開発者にとっては、AMPが本番プロジェクトに適しているかどうかという疑問が残ります。私の意見では、はい、準備ができていると感じています。

私は、頻繁な機能変更、バグ、頻繁なアップデートなど、ベータリリースにありがちな問題を認識しています。しかし、私にとっては、AMPの利点はその欠点を上回るものです。ウェブマスター/ビジネスオーナーであれば、検索エンジンのランキングの重要性を知っているはずです。Googleなどの主要な検索エンジンは、すでにモバイル検索でAMPを搭載したサイトのランキングを開始しています。

もちろん、これは従来のHTMLページを捨てるべきという意味ではありません。あなたのビジネスにより多くのトラフィックをもたらすために、AMPページと並んで通常のページをサポートするべきであることは間違いありません。

###AMPの基本
**AMP HTMLフォーマット**

下記のコードを使用して、AMPの基本を理解するための基本的でシンプルなAMPページを作成してください。

```
<!doctype html>
<html >
  <head>
    <meta charset="utf-8">
    <title>Sample document</title>
    <link rel="canonical" href="./regularpage.html">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <style amp-custom>
      h1 {color: red}
    </style>
    <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "NewsArticle",
      "headline": "Article headline",
      "image": [
        "thumbnail1.jpg"
      ],
      "datePublished": "2015-02-05T08:00:00+08:00"
    }
    </script>
    <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
    <h1>AMP Simple Page</h1>
    <p>
      Text to fill the paragraph tag
      <amp-img src=sample.jpg width=300 height=300></amp-img>
    </p>
    <amp-ad width=300 height=250
        type="a9"
        data-aax_size="300x250"
        data-aax_pubname="test123"
        data-aax_src="302">
    </amp-ad>
  </body>
</html>
```

この基本ページから学べることはたくさんあります。以下にそれらを読んでも無視してしまうかもしれませんが、私を信じてください、AMPはルールに関しては非常に厳しいです。なので、自分で開発を行う際には必ずこれらのルールを守るようにしてください。

AMPのHTMLドキュメント：

- doctype で始まります。

- トップレベルの＜html ＞タグを含めます（＜html amp＞も可）。
記号を入力するのに苦労したら、コピペすればいいだけです。私は＜html amp＞だけを使う方が好きです。


- ＜head＞タグと＜body＞タグを含めます（これらはHTMLでは任意）。
HTMLページ内に内容がなければ無意味です。


- ＜link rel="canonical" href="$SOME_URL"＞ タグを含みます。これは、AMP HTML ドキュメントの通常の HTML バージョンを指し示すもので、もしそのような HTML バージョンが存在しない場合はそれ自身を指します。

これは、AMP版のページが利用できない場合のフェイルオーバー計画です。自動的に通常のページにリダイレクトされます。


- headタグの最初のchildとして＜meta charset="utf-8"＞タグを含めます。
- ＜meta name="viewport" content="width=device-width,minimum-scale=1"＞タグをheadタグの中に含めます。initial-scale=1を含めることも推奨されています。
- headタグ内に＜script async src="https://cdn.ampproject.org/v0.js"＞ タグを含める。
- headタグ内にAMPのボイラープレートコード（head ＞ style[amp-boilerplate]とnoscript ＞ style[amp-boilerplate]）を記述してください。

[AMP ボイラープレートコード](https://github.com/ampproject/amphtml/blob/master/spec/amp-boilerplate.md?spm=a2c65.11461447.0.0.4ea24c9783dVZT&file=amp-boilerplate.md)は、完全なページの検証をするために必要です。ウェブサイト内のAMPページを動的に生成する場合は、スペースが発生しないように注意してください。

これは、AMPページを作成するために知っておくべき基本的な情報です。AMPの機能や制限事項については、[こちらのリンク](https://www.ampproject.org/docs/fundamentals/spec?spm=a2c65.11461447.0.0.4ea24c9783dVZT)を参照してください。


###デザインとレイアウト
**CSS**
Webページのデザインといえば、CSSを思い浮かべますよね。確かにAMPはCSSをサポートしていますが、フォント以外はCSSスタイルシートを参照することができません。CSSは全てインラインにして、タグ内で囲むようにします。AMPはページの読み込みを速くすることを目的としているので、表示のために外部のCSSに依存することはないはずです。
これは今となっては苦痛に思えますが、既存のバージョンにありそうな余分なCSSをカットするにはこの方法で良いと思います。この仕事をするためにいくつかのオンラインコンプレッサーを使用することをお勧めします。私は [https://csscompressor.com](https://csscompressor.com./?spm=a2c65.11461447.0.0.4ea24c9783dVZT) をよく利用しています。


**レイアウト、メディアクエリ、レスポンシブ画像**
AMPは「メディアクエリとエレメントクエリ」の両方をサポートしており、個々の要素のレイアウトを制御するための強力なビルトイン方法が付属しています。layout 属性を使用すると、CSS だけを使用する場合よりも、完全にレスポンシブなデザインを簡単に作成することができます。

layout 属性を使用すると、要素が画面上でどのように表示されるかを要素ごとに簡単に制御することができます。これらのことの多くは純粋な CSS で可能ですが、それよりもはるかに難しく、無数のハックが必要です。代わりに layout 属性を使用してください。

AMP を使用すると、AMP 簡略化された html タグを使用してレスポンシブサイトを簡単に作成できるというもう一つの利点を得ることができます。

```
<amp-img alt="Hummingbird"
  src="images/hummingbird-wide.jpg"
  width="640"
  height="457"
  srcset="images/hummingbird-wide.jpg 640w,
            images/hummingbird-narrow.jpg 320w"
  sizes="(min-width: 650px) 50vw, 100vw"
  heights="(min-width:500px) 200px, 80%">
</amp-img>
```

画像はウェブサイトの重要な部分であり、多くのことを表現しているので、この例を再確認したいと思います。

**ampimg**
これは、多くの機能を搭載したタグのAMPバージョンです。

**srcset**
srcset 属性を使用して、様々なメディア表現に基づいて要素のアセットを制御します。特に、これをすべての amp-img タグに使用して、異なる画面サイズに基づいて使用する画像アセットを指定します。

この単純な例では、 srcset は画面の幅に基づいて使用する画像を指定します。w' 記述子はブラウザに各画像の幅を伝えます。

**Heights**
レスポンシブレイアウトを可能にするすべてのAMPカスタム要素は、heights属性もサポートしています。この属性の値は、img sizes属性と同様にメディア表現に基づくサイズ表現ですが、2つの重要な違いがあります。

1、要素の幅ではなく高さに適用されます。
2、パーセント値が許可されています。パーセント値が使用された場合、それは要素の幅のパーセントを示します。

幅と高さと共にheights属性が指定されている場合、レイアウトはレスポンシブにデフォルトで設定されます。

**カスタムフォント**
**＜link＞を使用：**

`<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine”>`

これが＜link＞タグの通常の使い方です。特別な構文は必要ありませんが、すべてのドメインがAMPでホワイトリストに登録されているわけではないことを強調しておきます。特定のドメインのみを使用する必要があります。そうしないと、あなたのページはコンソールでエラーになります。ホワイトリストに登録されているドメインは以下の通りです。フォントを安全なプロトコル(https)経由で取得していることを確認してください。

- Typography.com: [https://cloud.typography.com](https://cloud.typography.com/?spm=a2c65.11461447.0.0.4ea24c9783dVZT)
- Fonts.com: https://fast.fonts.net
- Google Fonts: https://fonts.googleapis.com
- Typekit: [https://use.typekit.net](https://use.typekit.net/?spm=a2c65.11461447.0.0.4ea24c9783dVZT)
- フォントオーサム：[https://maxcdn.bootstrapcdn.com](https://maxcdn.bootstrapcdn.com/?spm=a2c65.11461447.0.0.4ea24c9783dVZT)

**font-face の使用：**

font-faceを使用してフォントを参照することで、タグの制限を克服することができます。以下のスニペットを参照してください。


```
<style amp-custom>
  @font-face {
    font-family: "Bitstream Vera Serif Bold";
    src: url("https://somedomain.org/VeraSeBd.ttf");
  }

  body {
    font-family: "Bitstream Vera Serif Bold", serif;
  }
</style>
```

ここでは、必要に応じて、HTTPまたはHTTPSを介して参照することができます。

###アクションとイベント
AMPはサードパーティのJavaScriptを許可していないため、AMPはJSをあまり使わずにイベントを使用する簡単でクリーンな方法をいくつか提供しています。以下は、AMP HTML タグの典型的なイベントの構文です。

`eventName:targetId[.methodName[(arg1=value, arg2=value)]]`

また、';'演算子を使って複数のイベントを聞くこともできます。例えば、以下のようになります。

`on="submit-success:lightbox1;submit-error:lightbox2”`

イベントに対して複数のアクションを実行するには、','演算子を使用します。例えば、以下のようになります。

`on="tap:target1.actionA,target2.actionB”`

AMP は、任意の HTML 要素（AMP 要素を含む）でリッスンできるタップ イベントをグローバルに定義しています。また、任意の HTML 要素上でトリガーできる非表示、表示、およびトグル表示のアクションもグローバルに定義しています。以下は、この機能を使用した例です。



```
<div id="warning-message">Warning...</div>
<button on="tap:warning-message.hide">Cool, thanks!</button>
```

理解度をより高めるための要素別イベントがいくつかあります。興味のある方は[こちらのリンク]()をご覧ください。

**マルチメディア＆アニメーション**
疑問に思うかもしれませんが、なぜAMPは＜img＞, ＜video＞, ＜audio＞タグを許可しないのでしょうか？これは、AMPが従来の要素に頼らず、これらのファイルに対応する要素を提供しているからです。ここでは、画像、動画、アニメーション、iframeに関連する要素について説明します。

**amp-img**
amp-imgタグは、AMPを使用しているWeb開発者であれば誰でも使える非常に基本的なタグです。

```
<amp-img src="images/sunset.jpg"
  width="264"
  height="195"
  layout="responsive">
  <noscript>
    <img src="images/sunset.jpg" width="264" height="195" />
  </noscript>
</amp-img>
```

layout="responsive" は、異なるレイアウトでも画像が反応的に表示されるようにします。

＜noscript＞は、クライアントがJavaScriptを無効にしようとしている場合に使用されます。無効にすると、＜amp-img＞要素は動作しません。クライアント側でJavaScriptが無効になった場合に画像を表示するためにこの要素を使用する必要があります。クライアント側でJavaScriptを無効にすると、AMPの機能が失われます。

**amp-anim**
この要素は amp-img と同じですが、 gif がサポートされていない場合に .gif 画像をフォールバック画像と一緒にサイト内に表示する方法を提供します。

```
<amp-anim width="400"
  height="300"
  src="images/wavepool.gif">
  <amp-img placeholder
    width="400"
    height="300"
    src="images/wavepool.png">
  </amp-img>
</amp-anim>
```

構文は明白に見えますが、これを動作させるためには、この依存関係を含めることを念頭に置いておく必要があります。

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

**amp-video**
この要素は、ページに動画を表示する役割を担っています。

```
<amp-video controls
  width="640"
  height="360"
  src="videos/kitten-playing.mp4"
  poster="images/kitten-playing.png">
  <div fallback>
    <p>This browser does not support the video element.</p>
  </div>
</amp-video>
```

posterは動画のサムネイル画像を表示するために必要で、動画のフォールバックテキストも＜div＞に用意されています。要素には 'layout=responsive' を適用することもできます。

**amp-audio**
これは、ページにオーディオリソースを含めるために必要です。これは HTML5 オーディオをブラウザに埋め込みます。

```
<amp-audio width="400"
  height="200"
  src="audio/cat-meow.mp3">
  <div fallback>
    <p>Your browser doesn’t support HTML5 audio.</p>
  </div>
  <source type="audio/mpeg"
    src="audio/cat-meow.mp3">
  <source type="audio/ogg"
    src="audio/cat-meow.ogg">
</amp-audio>
```

上記のコードスニペットは1つの音声ファイルしか埋め込んでいませんが、ブラウザ用に複数のフォーマットを用意しています。音声ファイルの読み込みは、AMPの判断で遅延していることに注意してください。

以下の依存関係を必ず含めてください。

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

**amp-iframe**
あなたがウェブサイトに任意のサードパーティのページを含めたい場合は、その後、あなたは、アンプ-iframeを使用することができます。この要素はHTML5のiframeに似ていますが、amp-iframe要素には一定の制限があります。

- 少なくとも600px以上、または最初のビューポートの75%以上を上から離して表示する必要があります（プレースホルダを使用するiframeは除く）。
- リソースは HTTPS 経由でのみリクエスト可能であり、 allow-same-origin を指定していない限り、コンテナと同じオリジンであってはなりません。

以下のスクリプトを必ず要素に含めてください。

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

iframeの典型的な使い方は以下の通りです。

```
<amp-iframe width="200" height="100"
    sandbox="allow-scripts allow-same-origin"
    layout="responsive"
    src="https://www.google.com/maps/embed/v1/place?key=AIzaSyDG9YXIhKBhqclZizcSzJ0ROiE0qgVfwzI&q=europe">
</amp-iframe>
```

ここで注意したいのは、iframe内のページのDOMにアクセスできないことです（執筆時点）。

###AMPで広告を配信する
そこにあるウェブサイトのほとんどは、広告から利益を得ています。AMPに広告を統合するにはどうすればいいのかと思うかもしれません。繰り返しになりますが、AMPページは他のウェブページと同じように一定の制限があります。広告を表示するには、amp-ad要素を使用する必要があります。

**amp-ad**
次のコードを要素に追加します。

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

＜amp-ad＞の構文は以下の通りです。


```
<amp-ad width="300"
    height="250"
    type="a9"
    data-aax_size="300x250"
    data-aax_pubname="test123"
    data-aax_src="302">
</amp-ad>
```

注：広告プロバイダがAMPでサポートされているかどうかを調べる必要があります。詳細については、[このリンク](https://www.ampproject.org/docs/reference/components/amp-ad?spm=a2c65.11461447.0.0.4ea24c9783dVZT#supported-ad-networks)を参照してください。

###アナリティクス
AMPは、分析と測定のニーズを満たすために、amp-pixelとamp-analyticsの2つのコンポーネントを提供しています。どちらのオプションも、定義されたエンドポイントに分析データを送信します。

単純なトラッキング・ピクセルのような動作を探している場合、amp-pixel コンポーネントは基本的なページビューのトラッキングを提供し、ページビュー・データは定義された URL に送信されます。ページビューデータは定義された URL に送信されます。ベンダーとの統合によっては、このコンポーネントを必要とする場合がありますが、その場合は正確な URL エンドポイントが指定されます。

ページでは amp-pixel と amp-analytics の両方を使用することができます。単純なページビューのトラッキングには amp-pixel を、それ以外のすべてには amp-analytics を使用します。また、各タグを複数個追加することもできます。複数のアナリティクスプロバイダーと連携している場合は、ソリューションごとに1つのタグが必要になります。ユーザーにとってはシンプルなAMPページの方が良いので、余分なタグが必要ない場合は使用しないことを覚えておいてください。

**amp-analytics**
シンプルな amp-analytics 設定を作成するには、まず、AMP ドキュメントの ＜head＞ にこのカスタム要素を含める必要があります。


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

ページが表示されるたびにトリガーイベントが発生し、ページビューデータをランダムなIDと一緒に定義されたURLに送信します。

```
<amp-analytics>
<script type="application/json">
{
  "requests": {
    "pageview": "https://foo.com/pixel?RANDOM",
  },
  "triggers": {
    "trackPageview": {
      "on": "visible",
      "request": "pageview"
    }
  }
}
</script>
</amp-analytics>
```

上記の例では、pageviewというリクエストを [https://foo.com/pixel?RANDOM](https://foo.com/pixel?spm=a2c65.11461447.0.0.4ea24c9783dVZT&RANDOM.) と定義しています。前述したように、RANDOMは乱数で置き換えられているので、リクエストは実際には [https://foo.com/pixel?0.23479283687235653498734](https://foo.com/pixel?spm=a2c65.11461447.0.0.4ea24c9783dVZT&0.23479283687235653498734.) のようになるかもしれません。

ページが表示されるようになると (トリガーキーワード visible の使用によって指定された)、イベントがトリガされ、ページビュー要求が送信されます。triggers属性は、ページビュー要求がいつ発生するかを決定します。

###まとめ
このチュートリアルでは、AMPフレームワークの基本的な構成要素を見てきました。しかし、動的なWebサイトを作るためには、機能的なデータベースが必要です。[次回のチュートリアル](https://www.alibabacloud.com/blog/amp-for-e-commerce-part-2-creating-backend-with-alibaba-cloud-apsaradb-for-mongodb_588411?spm=a2c65.11461447.0.0.4ea24c9783dVZT)では、Alibaba Cloud ApsaraDB for MongoDBを見て、AMPの電子商取引ウェブサイトのデータベース（バックエンド）として使用します。

*アリババクラウドは日本に２つのデータセンターを有し、世界で60を超えるアベラビリティーゾーンを有するアジア太平洋地域No.1(2019ガートナー)のクラウドインフラ事業者です。
アリババクラウドの詳細は、こちらからご覧ください。
[アリババクラウドジャパン公式ページ](https://www.alibabacloud.com/ja)*