AMP はじめ方

## この内容について
この内容は、AMPをはじめたい方に向けた基礎的な記事になります。

## AMPとは ( アンプ )
**A**ccelerated **M**obile **P**agesの略で、
モバイル端末向けに最適化したWebページの読み込みを高速化できるフレームワーク。
AMPは、WebページのデータをGoogle側がキャッシュしてくれており、リクエストがあった場合に
そのデータをレスポンスするので高速化が実現されています。

ちなみにAMPは、2015年10月7日に発表された新しめな技術です。

[AMP公式サイト](https://amp.dev/ja/)

## 導入方法
### HTMLファイルを用意する
作成するAMPページ用にHTMLファイルを用意します。
この後の説明は全てそのHTMLファイル内に記述してください。

### 必要な記述をする
#### DOCTYPE宣言

```html:HTML
<!DOCTYPE html>
```

#### htmlタグ
ページをAMPコンテンツとして識別します。
html開始タグの小なりの前に「⚡️(雷マーク)」か「amp」と書きます。

```html:HTML
<html ⚡️>
  <!-- headタグ -->
  <!-- bodyタグ -->
</html>
```

#### headタグ

```html:HTML
<head>
  <!-- headタグの中身 -->
</head>
```

#### bodyタグ

```html:HTML
<body>
  <!-- bodyタグの中身 -->
</body>
```

#### ページエンコード ( headタグ内 )
ページのエンコードを識別します。

```html:HTML
<meta charset="UTF-8">
```

#### AMP JSライブラリを読み込む ( headタグ内 )

```html:HTML
<script async src="https://cdn.ampproject.org/v0.js"></script>
```

#### canonicalにページを指定 ( headタグ内 )
重複ページがないよう設置するcanonicalに正規としたいページを指定します。(そのページのURLでOK)

```html:HTML
<link rel="canonical" href="ページURL">
```

#### レスポンシブなビューポートを指定 ( headタグ内 )
モバイル端末に適した表示サイズにします。

```html:HTML
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
```

#### ボイラーテンプレート ( headタグ内 )
AMP JSが読み込まれるまで、コンテンツを非表示にする記述で、AMPに必須のコードです。

```html:HTML
<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>
```

### 最終的なコード

```html:HTML
<!DOCTYPE html>
<html ⚡️>
  <head>
    <meta charset="UTF-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <link rel="canonical" href="ページURL">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <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>
  </head>
  <body>
    <!-- bodyタグの中身 -->
  </body>
</html>
```

### テストする
下記のサイトを使って、AMP対応できているかテストします。
[AMP テスト](https://search.google.com/test/amp?hl=ja)

コードをコピペするか、公開したサイトのURLがあればテストできます。

AMPの記述にエラーがなければ、下記のように「有効なAMPページです」と表示されます。
<img width="1792" alt="AMP_test.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/473780/c1edd576-67c7-dded-4645-3808ee216f10.png">

### 注意点
AMPは癖のあるコードの書き方をします。
例えば、imgタグは使えず、代わりにamp-imgタグを使います。
上記は一例で、他にも制限が多いです。
<font color="#e03131">**また、AMPはCSSやJSファイルを読み込むことができません。**</font>
そのため、CSSやJSを適用させるには、インラインでの記述(styleタグやscriptタグでの記述)をしなければいけません。

## AMPによるメリット・デメリット
### メリット

- 表示速度が高速化されるので、ユーザのストレスが減る
- 良記事であれば、リッチリザルト(カルーセル)に採用される可能性がある

総合的に言うと、ページ流入が増えるかもしれないと考えましょう。

### デメリット

- 開発発展途中な部分もあるので、その都度の対応が必要になる
- 制限が多いため、APIがAMP対応しているかなども注意していなければいけない
- コードの書き方に癖があるため、エラーが出やすい

総合的に言うと、管理工数がよりかかってしまうと考えましょう。

## まとめ
GoogleはAMPを推奨しています。
しかしながら、導入する工数がかかってしまうので、採用するかどうかは
今後も考えながらにするかと良いと思います。

個人的に、ニュースサイト系なら導入する価値はあるのかなと思います。
書き方の癖が本当にあるので、また別記事にまとめていこうと思います。

この記事が良いと思った方は、LGTMをしていただければ嬉しいです！
フォローも是非お願い致します(^^)