0%

DevelopWEB開発・運用ノウハウ

Posted:2018.07.08

AMP導入の基本とデバッグ方法まとめ

最近注目されているAMPですが、今回は導入から基本的な対応とブラウザでのデバッグについてまとめていきたいと思います。ここでは本格的なコーディングの前に押さえておくべきところに絞っていますので、詳しくは別記事でもまとめていきたいと思います。

 

AMPとは?

AMPとは「Accelerated Mobile Pages」の略で、Googleが推奨している次世代のモバイルサイトの規格のようなもので、AMPにHTMLを対応させるフレームワークを指します。通常のウェブページとは異なり、Googleが世界各地のサーバーでWebページ自体をキャッシュすることなどで、ページ表示を高速化させることを目的としています。

 

ただし、AMPでは高速化のため様々な制約があります。例えば、外部CSSの読み込みができなかったり、従来のjavascriptが使えなかったり、一部HTMLタグも対応していないので注意が必要です。

 

AMPのメリットと可能性

モバイルサイト高速化を目的としているAMPはいろんなメリットと可能性を秘めています。何と言っても最大の強みは表示のスピードです。通信速度が制限された環境下でも快適に閲覧できるくらいで、一瞬で表示されるようになります。

 

またグーグルが推奨していることからAMP対応のページはSEOで有利になると言われています。検索結果でもコンテンツのサムネイル画像がついたカルーセルの形で関連ページも
表示されるので、見た目もかなりリッチになります。

 

従来のHTMLをAMP対応にする

それでは通常のHTMLをAMP対応にするにはどうすればいいのでしょうか、ここでは一部ですが公式サイトのドキュメントを参考に基本となるテンプレートを見ていきます。

 

基本となるHTMLはこのような形になります。これがAMP対応の最小限のテンプレートになりますので、ここから追記していきます。

【HTML(AMP)】

<!doctype html>
<html amp lang="ja">
  <head>
    <meta charset="utf-8">
    <title>AMPデモページ</title>
    <link rel="canonical" href="https://example.com">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>
    <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>AMPページのテスト</h1>
  </body>
</html>

 

通常のHTMLと比べて異なる点がいくつかありますが、注目すべき点は下記でしょうか。

 

・ファイルの先頭は以下の宣言で始める

<!doctype html>

 

・htmlタグをこのような形に変更する

<html amp> もしくは <html ⚡>

 

・headタグ内の最初に文字コードをUTF-8で指定する

<meta charset="utf-8">

 

・headタグ内にカノニカルを指定する

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

 

・headタグ内にビューポートを指定する

<meta name="viewport" content="width=device-width,minimum-scale=1">

 

・headタグ内に下記を記述してAMP用のjavascriptファイルを読み込む

<script async src="https://cdn.ampproject.org/v0.js"></script>

 

また、headタグ内に下記のコードを記述し、AMPのBoilerplate Codeを読み込ませます。これはAMPで使用するstyleのようで必須となります。

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

 

 

デベロッパーツールでのデバッグ

これで先ほどのHTMLをブラウザで確認してみます。ローカル環境の場合はウェブサーバー内にファイルを設置しないとエラーが出るので注意が必要です。

 

アクセスするときにはURLの最後に「#development=1」を追加することでAMPのバリデーションが有効になり詳しいエラーを確認することができます。

 

 

AMP導入の基本とデバッグ方法まとめ

 

ブラウザで表示できたらデベロッパーツールも起動させます。コンソールにこのような表示があるか確認します。

Powered by AMP ⚡ HTML – Version ************* http://localhost/*********#development=1

 

上記の表示があればこのページはAMPに対応しているという状態です。またエラーがない場合には下記のようなメッセージが表示されています。

AMP validation successful.

 

この2つが表示されていればひとまずはOKです。あとはこのページを実装していく中でいろんなエラーが出るので一つずつ確認していきます。

 


 

いかがでしょうか、AMPでも最小限であればそこまで難しくないので導入時のハードルは高くないかと思います。これ以外にもいろんなルールがあるようですが、また別記事でまとめていく予定です。

 

(参考)
初めての AMP ページを作成する

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】