Drupal8でのノードのAMP対応

# 概要
Drupal8でAMPへの対応をします。

AMPとはスマホでの検索時などに利用されるページの読み取りを高速化するための手法です。
対応しているページは検索時にイナズマのようなマークが表示されます。
![AMP.PNG](https://qiita-image-store.s3.amazonaws.com/0/203759/ceb5495a-9894-9fa2-9fdd-e75cdf9ed3de.png)

HTML自体をだいぶ書き換えて、スタイルシートも作り直すため、AMPページ用のテーマを用意するようなイメージになります。


# 準備
## 必要なモジュール
- [Token](https://www.drupal.org/project/token) (依存)
- [Accelerated Mobile Pages (AMP)](https://www.drupal.org/project/amp)
- [AMP Theme](https://www.drupal.org/project/amptheme)

# 手順

## インストール
Composerを使用してダウンロードします。
依存関係のあるAMP PHP Libraryなどもダウンロードしてくれるため、Composer推奨です。

```shell
composer require drupal/amp
composer require drupal/amptheme
drush en amp amptheme
```

## サブテーマ
直接AMPテーマを触ってしまうとアップデートの際に変更が上書きされてしまうため、サブテーマを作成しましょう。
サブテーマ用のテーマが用意されているため、それをコピーして使用します。

```shell
mkdir themes/custom
cp -r themes/contrib/amptheme/ampsubtheme_example/ themes/custom/ampsubtheme

cd themes/custom/ampsubtheme
rename ampsubtheme_example ampsubtheme ./*
```

INFOファイル内のバージョン情報を削除し、`core: 8.x`の部分をコメント解除しましょう。
また、`name: `の部分を任意のものに変えておきましょう。（コピー元と判別するため）

```yaml:ampsubtheme.info.yml
# name: ExAMPle Subtheme
name: AMP Subtheme

# core: 8.x
core: 8.x

# Information added by Drupal.org packaging script on 2018-04-07
#version: '8.x-1.1'
#core: '8.x'
#project: 'amptheme'
#datestamp: 1523124484
```

THEMEファイルの関数名をテーマ名に合わせて変えるか、使用しなければ消しておきましょう。

```php:ampsubtheme.theme
#function ampsubtheme_example_preprocess_html(&$variables) {
function ampsubtheme_preprocess_html(&$variables) {

}
```

設定できたら有効化しておきます。

```shell
drush en ampsubtheme
```

## 環境設定
環境設定のコンテンツ作成にある、Configure the AMP module (`/admin/config/content/amp`)でAMPの設定を行います。

AMP Themeの設定に作成したサブテーマを設定します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/203759/48a558f4-fa9e-143d-afdf-1293a2e2f9de.png)

AMP LIBRARY CONFIGURATIONのRun the whole HTML page through the AMP libraryにチェックします。
これにより、コンテンツ内のHTMLタグを自動でAMP用のタグに変換してくれます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/203759/c53a2334-48cc-3171-d124-00b2039e75a4.png)

上記の設定をしたら保存しましょう。

## 表示設定
AMPページの生成は各コンテンツタイプの表示管理(/admin/structure/types/manage/[type]/display)ページで行います。

カスタムの表示設定でAMPにチェックをして一旦保存します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/203759/a9587eec-e966-b86e-7163-2f62b96c3b61.png)

AMP用のビューモードの設定ができるようになっています。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/203759/e68ad671-0cf1-cc93-49e8-87f0b78b7e76.png)

AMP用のウィジェットが選択できるので、各フィールドで設定していきます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/203759/6c78cb89-420e-2403-e8b6-58a40d559993.png)

## AMPページの表示

AMPの設定をしたコンテンツタイプのノードURLに`?amp`とパラメータを追記するとAMP用のページが表示されます。

ノードの普通のページの方にHTMLのHeadに`<link rel="amphtml" href="http://[domain]/ja/node/1?amp" />`と、AMPのページがあることを自動で示してくれます。
そのため、この状態でGoogleなどのボットが自動で検出してくれるようになっています。

## スタイルシートの設定

設定したての状態だと、以下のような状態になっているかと思います。
通常のテーマとは別でAMP用にテーマを読み込んでいるため、AMPページには別途スタイルシートの調整が必要になります。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/203759/c7d9bc64-ff2b-91b2-d85c-30030fb9cb96.png)

AMPページの注意点としては、Javascriptが使用できません。
そのため、jQueryなどで設定したアニメーションなどは諦めてデザインをする必要があります。

スタイルシートはテンプレート内のamp-cssディレクトリの`amp-custom-styles.html.twig`に用意されています。
デフォルトではBartikのようなデザインで用意されていますが、この部分を自由に書き換えてください。

```css:templates/amp-css/amp-custom-styles.html.twig
/* ---------- Layout ----------- */

html {
  height: 100%;
}

body {
  min-height: 100%;
}
```

## Views等の対応
Viewsをブロック等で表示させている場合はURLをAMPページ用に用意した方がいい場合もあります。
Cloneを作成してURLを作成している部分に?ampを追加すればできます。

## 確認
Googleが用意しているAMPテストでAMP対応が正しくできているかチェックすることができます。

以下のページでURLを指定すればテストできます。
通常ページでもAMPページでもどちらのURLでも大丈夫です。
[AMPテスト](https://search.google.com/test/amp)

# 参考
[How to try out AMP with Drupal](https://www.lullabot.com/articles/how-to-try-out-amp-with-drupal)