SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

特集記事

ついに始まった、Google AMP(Accelerated Mobile Pages)を試してみよう!

  • X ポスト
  • このエントリーをはてなブックマークに追加

 2016年2月からGoogle検索結果での表示が始まった、AMP(Accelerated Mobile Pages)。モバイル検索における大きな変化に注目が集まっています。本稿では、AMPの基本的な仕組と、実際に導入する方法について紹介します。

  • X ポスト
  • このエントリーをはてなブックマークに追加

対象読者

  • Webサイト開発者および運営者

はじめに

AMPとは?

 AMP(Accelerated Mobile Pages)は、モバイルページ高速化によるユーザー体験の向上を目的として、2015年にGoogleが発表したプロジェクトです。

 Twitter、Pinterest、WordPress.com、LinkedInや、BBC、産経デジタルなどのパブリッシャーがAMPのパートナーに参加。2016年2月から、Google検索結果での表示が開始されました。

 具体的には下記で解説するような「AMP HTML」などが新たに策定されています。

基本構成

 AMPは「AMP HTML」「AMP JS」「Google AMP Cache」で構成されています。

  • AMP HTML:既存のHTML/CSS/JavaScriptの一部を制限することで、高いパフォーマンスを実現します。
  • AMP JS:高速レンダリングを実現するためのJavaScriptライブラリです。
  • Google AMP Cache:AMP HTMLページを取得、キャッシュし、配信するための仕組み(CDN)です。

 詳しくは、プロジェクトページをご覧ください。GitHubではソースコードも公開されています。

AMPのメリットは?

 ユーザーにとっては、ページ表示速度が早くなり、データ転送量も少なくなるというメリットがあります。

AMP のテクノロジーを利用しているウェブページは、従来に比べ平均 4 倍の速度で表示され、データ量も約 1/10 に抑えられるため、ほとんどのページが瞬時に表示されます。(Google Japan Blogより)

 サイト運営者にとっては、Google検索結果などにAMP対応ページが表示され、トラフィックを獲得することができます。具体的には、スマートフォンから、今ニュースになっているキーワードで検索すると、「トップニュース」枠にカルーセル形式で表示されます。つまり記事執筆時点では、タイムリーなキーワードを含む、ニュースサイトのAMPページしか検索結果に表示されません。

 「トップニュース」枠のAMPページをまだ目にしたことがない方は、一旦Googleからログアウトすると、表示される場合があります。

AMPを試してみよう

 それでは、早速AMPを試してみましょう。手順は以下のようになります。

  • 通常のHTMLとは別に、AMP HTMLを作成します。
  • JSON-LDを導入します。
  • 検証を行います。

AMP HTML

HTMLのサンプル

 まずは通常のHTMLを複製し、AMP HTMLに書き換えていきます。

HTMLのソース
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Sample document</title>
</head>
<body>
<h1>Sample document</h1>
<p>
Some text
<img src=sample.jpg width=300 height=300></img>
</p>
</body>
</html>

1. AMPの宣言

 絵文字が斬新です。そのままコピーして使えますが、テキストエディタによっては絵文字が表示されない場合もあります。気になる方は<html amp lang="ja">でもOKです。

AMP HTMLのソース
<html ⚡ lang="ja">

2. canonicalの指定

 通常のHTMLのURLを指定します。

AMP HTMLのソース
<link rel="canonical" href="./regular-html-version.html">

 また、通常のHTMLの方には、AMPバージョンのURLを指定します。

HTMLのソース
<link rel="amphtml" href="./amp-html-version.html">

3. viewportの指定

 viewportも必須です。

AMP HTMLのソース
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

4. styleの指定

 AMPの決まり文句を追加します。

AMP 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>

 2015年10月のAMPが発表された当初は、styleに指定するのはopacityに関する記述のみの短いコードでしたが、記事執筆時点では、上記のように長くなっています。

AMP発表当初のstyleに関する指定
<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>

5. JavaScriptの読み込み

AMP HTMLのソース
<script async src="https://cdn.ampproject.org/v0.js"></script>

 AMPプロジェクトからJavaScriptを非同期で読み込みます。なお、AMPがサポートしているJavaScript以外は読み込みできません。アクセス解析や広告配信についてはライブラリがあるので、必要に応じて追加で読み込みます。

6. AMPタグに変更

AMP HTMLのソース
<amp-img src=sample.jpg width=300 height=300></amp-img>

 imgタグをamp-imgに変更します。AMPタグの一覧は下記をご覧ください。

AMP HTMLのサンプル

 これで、AMP HTMLができました。

AMP HTMLのソース
<!doctype html>
<html ⚡ lang="ja">
<head>
<meta charset="utf-8">
<title>Sample document</title>
<link rel="canonical" href="./regular-html-version.html">
<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>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<h1>Sample document</h1>
<p>
Some text
<amp-img src=sample.jpg width=300 height=300></amp-img>
</p>
</body>
</html>

AMP HTMLの主な仕様

 HTMLタグの対応表です。AMP HTMLタグに置き換えが必要なタグや、使用が制限されているタグがあります。

HTMLタグの対応
タグ AMP HTML
script application/ld+json以外NG
img, video, audio, iframe AMPタグに置き換え
frame, frameset, object, param, applet, embed, form, input elements NG(buttonはOK)
style headタグ内OK、amp-custom属性が必要
link canonical以外NG(一部ホワイトリスト登録OK)
meta http-equivのみNG
a JavaScriptの使用はNG
svg ほとんどOK

JSON-LD

 AMPには、JSON-LDによる構造化データも必要です。検索結果、トップニュース枠のカルーセルの表示内容などに使用されます。下記のようなJSON-LDをAMP HTMLのheadに含めます。

JSON-LDのサンプル

JSON-LDのソース
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Sample document",
"image": [
"thumbnail1.jpg"
],
"datePublished": "2015-02-05T08:00:00+08:00"
}
</script>

JSON-LDの主な仕様

 詳しくは下記をご覧ください。

次のページ
AMPの検証

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
特集記事連載記事一覧

もっと読む

この記事の著者

LIQUID DESIGN Ltd.(リキッドデザイン株式会社)

リキッドデザイン株式会社代表。Web/Appデザイナー。大手IT企業でポータルサイトやアプリのデザイン/企画に携わり、独立。https://lqd.jp/ http://blog.lqd.jp/

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/9300 2016/04/15 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング