WEBデザイン html Webデザイン スマートフォン

新米エンジニア小木の議事録　vol.3 (AMPについて)

寒い日々が続いていますが皆様いかがお過ごしでしょうか。こんにちは、駆け出しエンジニアの小木です。だんだんと秋の香りもしてきていよいよメガネ日和といったところですね。

ところで皆さん、ネットサーフィングをしていてなんだか「このページの表示遅いなー。」「遅くない？？」「めんどくせっ。」「もういいや。」ってなってしまい結局見なかったブログやニュース、ホームページなどありませんか？そんなウェブページの表示時間を早くしてくれるかもしれない「AMP」を今回紹介したいと思います。

AMP

AMPとは？

AMPは（Accelerated Mobile Pages）の略で、モバイルページを高速表示するためのプロジェクト、フレームワークのことです。

これをわかりやすく言いますと、通常のHTMLの記述ではなく、AMPのルールに従ってHTMLを記述することでページの表示速度が向上するといったことが可能になりますよ！ということです。

実際のページにて

実際に現在いろいろなページで使われています。例えば「渋谷」と検索し、少しスクロールするとAMPのマークがついた記事が表示されているのがわかります。表示にタイムラグがあまり感じられずスムーズに表示されるのが気持ちいいですね。
05

なにがどう違うの？？AMPのコードの書き方　一例

以下が通常のHTMLソースコードです。

<h1>小木さんかっこいい</h1>
<p><img src="amp.jpg" width="600" height="300"></p>

以下が通常のAMPが指定するソースコードです。

<h1>小木さんかっこいい</h1>
<p><amp-img src="amp.jpg" width="600" height="300" layout="responsive"></amp-img></p>

上記の例ではimgタグがamp-imgに変わっていて、後半にlayout=”responsive”というのが追加されています。AMP化の際にはimgタグを記述するときは、必ず幅、高さを入力しなければいけません。そしてamp-imgタグは通常のimgとは異なり、閉じたタグが必要となります。また幅、高さを入力してしまうと固定値になってしまいモバイル端末で見たときにレスポンシブにならないのでlayout=”responsive”を入れます。そうするとレスポンシブに対応した画像になります。上記のようにAMP化には従わなければいけないルールがいくつかありますので気をつけなければいけません。

なぜAMP化

AMP化のメリット・デメリット

メリット

  • AMP化のメリットとしてはウェブページの表示が速くなることでしょう。AMPの仕組みとしては、ページをあらかじめgoogleまたはtwitter側でキャッシュすることで読み込む時間を大幅に削減することができます。
  • またhttps://www.ampproject.org/ja/にAMPについての詳しい情報や、リファレンス、ガイド、そしてチュートリアルがありますので日ごろからHTMLを記述している人であればすぐに実装可能かと思われます。
  • またhttps://ampbyexample.com/に使用できるJavaScriptを調べることもできますし、簡単な例もありますので非常に学習しやすいのもメリットです。

デメリット

  • AMP化のデメリットとしては、JavaScriptの使用が制限されることでしょう。AMPが提供しているJavaScript（アコーディオン、カルーセル、サイドバーなど）のみしか使えません。
  • また、HTMLを再度AMP用に書く直すのが少し手間かもしれません。

しかしAMPにアップデートが行われamp-animationやamp-bindなどが追加されているのでAMP化の際にJavaScriptが書けないというデメリットはだんだん薄れていくことでしょう。

WordPressでもAMP化

またWordPressでもAMP化を行うことができるのでWordPressでサイトを運営している方はぜひ一度目を通してもらい、ああ、こんなすばらしいものがあるのねということを感じてみてください。

AMP

実際にAMPのコードを書いてみた

通常のHTML

<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Hello, AMPs</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  </head>
  <body>
    <h1>メガネの季節ですね。</h1>
  </body>
</html>

AMP化したもの

<html amp lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Hello, AMPs</title>
    <link rel="canonical" href="<!--ここにAMP化されていない通常版の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>
    <style amp-custom>/*ここにcssをインラインで記述します。*/</style>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <!--JSを使用するときはここに以下のように記述する-->
    <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
  </head>
  <body>
    <h1>メガネの季節ですね。</h1>
  </body>
</html>

上記のようにAMP化の際にはいろいろと追加で書かなければいけないものがあります。

<link rel="canonical" href="">

の部分にAMP化されていない通常のURLの記述をします。

<html amp>

は 

<html ⚡>

はでもよい。（かっこいいですね。） 

<style amp-custom></style>

のなかにcssをインラインで記述していきます。

上記のように内でもAMP化の際に記述しなければいけない点が何点かあります。ここで何らかの記述が抜けていたり、余計なものを記述していたりするとエラーが出てしまします。

そこで役に立つのがchromeの拡張機能 「AMP-Validator」です。

AMP-Validator とは

自分が記述したWEBページが正常にAMPページとして動いているかを確かめるツールになります。実際に画像を使ってみていきましょう。
まずAMPではなく通常のページをみたときは灰色の丸に雷のマークが表示されます。
002

次にエラーがなく正常にAMP化出来ていれば緑色のまるに雷のマークが表示されます。
001

反対にAMP化の際に何らかのミスをししてしまうと、エラーが出てしまい緑の丸が赤い丸となます。
003

またそのボタンをクリックするとエラーの数、場所を教えてくれます。それらを修正し、正しくAMP化を行えば緑色の丸に雷のマークが表示されます。このようにAMP化の際には非常に役に立つツールなのでAMP化を行う際には一度目を通してみてください。
004

AMPを知り、実装していく手順

この記事をここまで読んでみてAMP化実装してみようかなと思った方は以下の順番で進めると良いかと思います。

  1. AMPの公式サイトで大まかなAMPについての情報を得る。
  2. AMPの公式サイトのチュートリアルでAMP公式サイトのチュートリアルを受けることができるのでためしに一度AMPページを作成してみる。
  3. AMP by Exampleで次のページでAMPで何ができるのか（JSや計測タグなどについて）
  4. 実際に案件として携わる。またはWordPressや自分でお持ちのテスト環境などでAMP化をとりいれてページの表示速度が向上したかを確認する。

おわり

今回のAMPの記事はいかがでしたでしょうか。ウェブページの表示が遅いのはずるずる落ちてくる着け心地の悪いみたいで嫌ですよね。皆さんAMP化して表示を早くしちゃいましょう。

関連サービス
LPO(ランディングページ最適化)

関連記事