【実装編】SIRIUSテンプレートのAMP化

2018/03/30

SIRIUSテンプレートのAMP対応方法の説明記事です。

今回、SIRIUSのAMP対応テンプレートデモを作成しました。 SIRIUS×AMPテスト

ここでは、デモサイト作成を通して確認した内容を元に、SIRIUSテンプレートのAMP化に関する技術的な情報を紹介します。

AMPの導入全般については以下の記事をご覧ください。 AMP導入にあたっての検討事項

また、SIRIUSサイトへのAMP導入の流れについてはこちらの記事をご覧ください。 SIRIUSサイトへのAMP導入方法

AMPの必須マークアップ

まずはHTMLの枠組みを以下のページに沿って置き換えていきます。エラーの元になるものも削除していきます。

AMP HTML ページを作成する – AMP

SIRIUSでは絵文字非対応なのでhtml要素は必ず<html amp>を使う
文字コードはUTF-8固定なので、SIRIUSの設定もUTF-8にしておく（というか今日びShift-JISがデフォルトというのは…）。またはテンプレート側にUTF-8でハードコーディングしておく。
外部cssは利用不可なので、linkによる読み込みは外す。
<% scriptUrl %>：1.4対応の新テンプレートから追加？ちょっと使い方が不明ですが、名前から察するにjsファイルの出力とかではないかと。AMPでは利用できない機能と思われるので削除してOK。
<% pageStyles %>：割り込みスタイルの出力用タグ。AMPで使用できるスタイル要素は1つの<style amp-custom>のみなので削除。
<% headTag %>：上級者向け設定の<head>タグの出力用タグ。下記サンプルコード参照。
<% googleSitemapTag %>：サーチコンソール認証タグの出力用タグ。通常版と共通のプロパティで運用する場合は不要。
<% mobileLinkDiscovery %>：AMPは基本的にスマホ向けなので削除。
<% rssFeedLink %>：RSS出力用タグ。通常版があれば不要。

紐づけ部分の実装例

通常版とAMP版ページがある場合、以下のようにして相互に紐づける必要があります。

ページを検出可能にする – AMP

通常版ページ

<link rel="amphtml" href="https://www.example.com/amp/document.html">

AMP版ページ

<link rel="canonical" href="https://www.example.com/document.html">

テンプレートの実装では、以下のように置換してしまうのが簡単で良いでしょう。

AMP版はhttp://example.com/ampに設置し、上級者向け設定より<link rel="amphtml" href="<% siteUrl %>amp/document.html">を指定する想定です。通常版ではそのまま出力し、AMP版では置換して通常版をリンクします。

<% headTag | str_replace(rel="amphtml",rel="canonical") | str_replace(amp/,)  %>

imgタグの置換

AMPでは画像に関して独自の仕様があります。記事に直接手打ちで対応してもいいですが、SIRIUSではサイト生成の際に置換してしまう方が運営面でスマートでしょう。イメージを含める – AMP レイアウトとメディアクエリ – AMP

画像のimgタグはamp-imgタグに置換が必要。
widthとheightによる画像サイズ指定が必須（指定が無いと表示されない）。
layout属性は明示的に指定したほうがよい。responsiveに統一して、個別にサイズ指定する必要があるものはクラスを設定してcssから制御するのが一番無難では。
SIRIUSの場合はサイト生成時に一括置換してしまうのがベター。こうしておけば記事作成時には特になにかする必要はない。以下は独自関数による置換例。

SIRIUS記事編集画面の「画像管理」から「サイズ指定方法」を「固定」に設定する場合のサンプルです。

HTML

<$ AllStrReplace( style="width:(.*?)px;height:(.*?)px;", width="$1" height="$2" ) $>
<$ AllStrReplace(<img(.*?)/>,<amp-img$1 layout="responsive"></amp-img>) $>

ヘッダー画像

ヘッダー画像もimg要素で配置するなら当然widthとheightを指定する必要があります。方法はいくつかあります。

ファイル名決め打ちでハードコーディング

旧テンプレートでもレスポンシブテンプレートや追加テンプレートなどで普通に使われている方法なので、なじみやすいのではないかと思います。

ページ個別にヘッダーを設定する機能は使えなくなります。

HTML

<img src="<% pageDepth %>img/header.jpg" width="1000" height="340" layout="responsive" />

無理矢理置換する

新テンプレートではVer1.4から追加された（たぶん）新規独自タグの<% pageHeaderImage2 %>でヘッダー画像をimg要素として出力しています。

ちょっと力技ですが、以下の例のように置換すればこの独自タグで出力できます。ページごとに画像を切り替えられますがjpgに変換されるため透過は使用できません。

<% pageHeaderImage2 | str_replace( src, width="1000" height="340" layout="responsive" src ) %>

背景画像を使う

背景画像としてcssからすべて処理する方法です。この方法であればimg要素を使用しないのでwidthとheightの指定は必要なく、cssからの指定でサイズを制御します。ファイル名は固定になります。

CSSの制約への対応

AMPではCSSにも以下のような制限があります。

サポートされる CSS – AMP

外部cssは使用不可
スタイルはすべてheadの<style amp-custom>内に直接記述しなければならない
<style amp-custom>は1つだけ使用する
cssは50,000バイト（50KB）以下という厳しい制約があるので、必要なものだけ厳選する（ちなみに【新】デフォルトテンプレートではstyle.cssだけで76KB）
一部、使用できないセレクターもあるのでチェックと修正が必要。例えば!importantも使用不可だが、新テンプレートでもそこそこある（マジか…）。
インラインのスタイルは使用不可。記事を調整し、必要に応じてクラスを割り振って対応する（下記例参照）。

インラインスタイルの対応例

元の状態

html

<p style="text-align:left;"></p>

対応後

html

<p class="align-left"></p>

css

.align-left{
	text-align:left;
}

cssの開発環境

なお、サポートされる CSS – AMPの中で、AMPでSass等を使用する場合は以下のようなインクルードの方法がしれっと紹介されています。

HTML

<style amp-custom>
{% include "/assets/css/main.min.css" %}
</style>

この記法はGROWというHTMLのジェネレーターを使ったものだそうで、HTMLにそのまま書いても使用できません。これはあくまで一例であり、link要素で読み込むのでなければ自由な方法でインクルードして使ったらいいという事のようです。SIRIUSテンプレートのAMP版開発を行うのであれば、こういった何らかの開発環境を導入したほうが良いとは思いました。

僕の場合は、SIRIUS案件ではテンプレートエンジンの「EJS」が具合良さそうに感じたので、この機にGulp+EJSの環境を取り入れてみました。開発環境にglup+EJSを導入したよ

Sassで装飾タグごとにファイル分割して、使うものだけ@importして読み込む感じにすると管理が簡単そうです。