お寿司か焼き肉食べたい

まじめな事からしょーもない事まで
めにゅーを開く(投げやり)

吾輩は今よりも何倍も早く表示させることが可能である。

AMP アンプって呼びます。正式名称は
Accelerated Mobile Pages
カコイイ٩(๑òωó๑)۶
ってなわけで、AMPのお話を始めていきましょう。
AMPってのはまぁ、Webページをもっと早く見せれたらいいよね。
モバイルフレンドリーだよね///的なニュアンスです。
「このページ表示遅っそ。ファッ○ンページグッバイ。」
から
「ページ表示はっや!!最高や!ロード遅延なんかなかったんや!」
くらい手のひらひっくり返させる感じです。

ってなわけで対象としては基本スマホページのみが一番安牌なのではって感じです。

どんなサイトに向いていてどんなサイトに向いていないのか?

とはいえ、万能ではありません。
何でもかんでもAMPページにするのは愚かな行為なのかもしれません。

AMP化で向いているサイト

基本的には[情報発信ページ]がそれに該当します。
ブログやらニュースサイトの詳細やらの事ですね。

AMP化で向いていないサイト

ECサイトやデザイン重視のリッチなサイトです。
後述しますが、基本的にjavascriptが使えなかったり、htmlタグも制限される所もありますので
ECサイトの場合、一部のみAMP化できるかも等全体的には使用することができません。
情報登録入力フォームもほぼ使えないと思っていただいて良いかと。

どうやってすんの!?

ここまで聞くとすんごいなんかもうとてつもない何かえぐいものがサーバにインストールされて
サーバちゃんが「んっほおおお」って感じでやってくれるんちゃうの?って思ってましたがそんなわけないです
とある一定のルールに沿ってhtmlを構築していくだけです。

フロント側だけでいけんの!すごいやん!

すごいっすね。
ただ、このAMPってのは何でもかんでも高速化してえぐいってわけではなく、結構場面を選びます。
基本的構文を先にやってもいいのですが、禁止事項がいくつかあります。
まずはそれを見ていきましょう。なんで早いのかがよく分かるかと思います。

使っちゃだめ!!!!!

禁止タグやらなんやらありますが、特にインパクトが強いのは以下の2つ

  • JavaScript使用禁止!!!
  • 外部CSS使用禁止!!!

わぁ~おw
中々えぐいのが出てきましたね。
そう、AMPってのはこうやってレンダリングをブロックする機能を禁止しています。
つまり、単純にテキストと画像だけのページを作れよ。余計な装飾なんかいらんだろ?
その代わり、表示速度、早くしてやるよ!
ってこと。

htmlでの禁止タグ

  • img
  • video
  • audio
  • iframe
  • base
  • frame
  • frameset
  • object
  • paramv
  • applet
  • embed
  • form
  • input
  • textarea
  • select
  • option
  • script
  • fieldset
  • label

お、おう・・・
いっぱいありますねwwwパッと見た感じ、動画・入力フォーム・画像までもがアウトです。
こうやってみると外部からの何かの読み込みに恨みでもあんのかってレベルで排除してますね
まぁ速度を上げるってこういうこと。仕方ないよね

とてもじゃないけどこれは出来損ないだ

禁止!!ってなりましたが、代替タグが存在しており、別途書き直す必要があります。
詳細の代替タグのお話はおいておいて、ベースとなるテンプレートのお話をして、AMPページを作ってみようと思います。
大枠のテンプレートは以下を。こちらが基本となります。

<!doctype html><-- ※1 -->
<html amp><-- ※2 -->
<head>
<meta charset="utf-8"><-- ※3 -->
<link rel="canonical" href="hello-world.html"><-- ※4 -->
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"><-- ※5 -->
<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><-- ※6 -->
<script async src="https://cdn.ampproject.org/v0.js"></script><-- ※7 -->
</head>
  <body>(^ω^ ≡ ^ω^)分身の術!!!</body>
</html>

ってなわけでAMP構築のテンプレート、赤文字部分はそのまま使おうぜって所です。
ちなみに各SNSタグに関しては記述していませんが、きちんと入れておきましょう。
では各項目見ていきます

※1

AMPページの先頭ではこの形式でdoctype宣言を行います。

※2

hmtlタグには、ampとつけます。
また、⚡と指定してもOkとされていますが、なんだこれって感じなので、ampの記述でいいんじゃないのって思います

※3

文字コードはUTF-8にしましょう。

※4

カノニカルタグの設定は適切に。
ampではない同じ内容のページが有る場合はきちんと設定しましょう
別ページが存在していない場合は、自身のページを指定します。

※5

viewport設定
内容はそれぞれなんかなぁと思いますが、必ず設定を行います。
AMPはモバイルフレンドリーページなのです。

※6

<style amp-boilerplate>
AMPでの必須CSSとなります。ここの内容は変更せずそのままコピペしておきましょう。

※7

AMP実行用のものとなります。
これも必須です。
何?scriptは禁止のはずじゃ・・・?
って感じですが、これぞAMPのコアとなるものなのでにこやかにコピペしてくださいね

ってな感じでAMPページ作成におけるテンプレートはこんなもんです。
AMPタグやらなんやらに関しては別途まとめますね。

AMPページが正しくできているか?の確認方法

chromeでもFireFoxでもなんでもええと思いますが
まずブラウザの開発ツール(F12とかで出て来るかと)を開きます。
続いて#development=1のハッシュタグを付与しアクセスします。
consoleタブ内で、きちんとAMP対応できているかどうかが表示されます。かんたん!

外部CSSが使えないとかわりかしうざい

PHPのインクルードで解決できる!!!!
headの共通(必須)metaも大丈夫
外部CSSも普通に読めるが、CSSの読み込みでわかったこと

  • !important の指定はampからエラーが出る
  • @charset "UTF-8";の指定はampからエラーは出る