AMP

AMPとは、Accelerated Mobile Pagesの略です。
モバイル端末での表示を速める為に考えられたプロジェクトで、GoogleとTwitterで共同開発されました。
2016年9月に正式発表され、CNBCやThe Washington Postなど様々な企業が既にAMPを導入しているようです。
https://www.ampproject.org/ja/case-studies/publishers/より。

AMPページを構成する三つの要素
1, AMP HTML
2, AMP JS
3, AMP Cache

「わが社のウェブサイトも表示速度を高速化させることができて、SEO対策にもなる!いいことじゃ~!」

はい、良いと思います。

ただ、AMPにはまだ課題がありまして、ウェブサイトの目的や性質によっては向かないかもしれません。
と言うのも、JSがかなり制限されているからです。
現在のところ、AMP JSしか使用できません。
かなり動きのあるウェブサイトはAMPでは再現できません。
モバイルから閲覧することを前提で考え、JSはそこまで必要がない、という場合にはいいかと思います。

また、もともとあるウェブサイトをAMPに書き換えるのは手間がかかる、というのも難点です。
AMPに書き換えてくれるサービスもあるようなので、まるっと任せてしまうというのも手です。
個人的な話ですが、私の友達はお金を払ってAMPに書き換えてもらったと言っていましたが、かなり表示速度が遅くてがっかりしていました。何が原因か定かでないのですが、業者選びは慎重にしたほうがいいかもしれません。

 

私はAMPが提供していたテンプレートを使用し、少しアレンジしてデモページを作成しました。
使用したテンプレートはこちら
https://www.ampstart.com/

作成したデモページはこちら
https://rena.space/amp/

感想としては、ほとんどHTML5と変わりません。
大きく違うと感じたところは、imgタグです。

AMPでは、amp-imgタグになり、閉じタグが必須です。また、heightとwidthを指定します。この数字は、あくまで縦横比に使われるようで、CSSで実際のheightとwidthは指定します。写真をレスポンシブにする為にlayout=”responsive“を入れるといいかと思います。
一番時間を取られたのが、「imgを二枚横に並べたい」と思った時です。HTML5と同じようにfloatやflexを試してみましたが、途端に写真が表示されなくなります。

この問題を解決してくれたのが、tableとtable-cellです。
amp-imgをdivで囲い、CSSで
div{
display:table;
table-layout:fixed;
width:100%;
}
amp-img{
display:table-cell;
max-width: 50%;
}
と設定することで、写真が2つ横並びになりました。

お試しあれ~

では、
ごきげんよう:)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です