2015年10月7日にAMP (Accelerated Mobile Pages) というプロジェクトが発表されました。

このAMPは、”モバイルページ(モバイル端末からのアクセス)の速度をもっと早くしよう!
というプロジェクトです。

Accelerated Mobile Pages Project


このプロジェクトに関わっているニュースメディアは多数あり、”BBC”, "TIME", "NYタイムズ" ... etc
日本のメディアでは "産経デジタル(産経新聞のWeb版)", "朝日新聞", "毎日新聞" 等も関わっています。

技術面では、google,Twitter,Linkedin,Wordpress等、名立たるIT企業が携わっています。
 

技術的な部分

「じゃーどうやって早くするの?」という実用的な話になります。

実態は、専用のjavascriptライブラリーを読み込み、
amphtmlというカスタムタグを使って、HTMLタグを今まで以上に明確にし、
ページのレンダリング速度を早く出来るようにしよう!ということです。

githubのamphtmlのプロジェクトのページ

「AMPに対応するのは、コーディング面でどう変わるの?」という疑問になりますが、
一番変わるのがvideo, SNS関連等、各種メディアタグの扱いです。
その他にadsenseタグも加わります。

videoタグとSNSタグを例にとってみましょう。

*VIdeoタグ サンプル

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

<body>

  <amp-video width=400 height=300 src=”https://yourhost.com/videos/myvideo.mp4”>
    <amp-img placeholder width=400 height=300 src=”myvideo-poster.jpg”></amp-img>
    <div fallback>
      <p>Your browser doesn’t support HTML5 video</p>
    </div>
    <source type="video/mp4" src="foo.mp4">
    <source type="video/webm" src="foo.webm">
  </amp-video>


</body>

* twitterサンプル

<!-- twitter tag sample -->
<body>

  <amp-twitter width=390 height=50
        layout="responsive"
        data-tweetid="638793490521001985">
  </amp-twitter>

  <amp-twitter width=390 height=50
        data-tweetid="585110598171631616"
        data-cards="hidden">
  </amp-twitter>

</body>

かなり明確化されて、見通しが良くなります。
 

Summary

現在、googleがモバイルフレンドリー対応を促しているように、
今後はamphtmlに対応するように推奨してくると思います。

googleが携わっているだけあり、
androidのchromeなどはAMP JSライブラリーに真っ先に最適化してくるのではないでしょうか。

しかしながら、AMPは開発の真っ最中なので、
直ちにamphtmlタグに対応する必要はないと思います。
(現在の所、github上で数時間単位でコミットが行われています)

仕様もこれから変わる可能性も考えられるので、このプロジェクトに注目していきたいですね。

 


Socialシェアボタン

スポンサーリンク