Skip to content

Instantly share code, notes, and snippets.

@ymotongpoo

ymotongpoo/html5conf.md

Last active January 10, 2018 02:06
Show Gist options
  • Save ymotongpoo/b3c9026c0eec926dca7534caea436ea9 to your computer and use it in GitHub Desktop.
Save ymotongpoo/b3c9026c0eec926dca7534caea436ea9 to your computer and use it in GitHub Desktop.
Download ZIP
HTML5 conference 2017 room C 14:20-15:00
Raw
html5conf.md

disclaimer

  • 本文章はHTML5 conference 2017に際し、筆者 @ymotongpoo の整理のために作成された。
  • 本文章は 2017年09月24日 現在での内容であり、今後変更される可能性は十分にありうる。
  • 本文章は筆者の私見であり、AMPプロジェクトおよびGoogleの公式な見解ではない。
  • AMPに関しての批評に関しては技術的な側面とビジネス的な側面（SEO含む）のアプローチがあるが、本文章では前者についてを重点的に触れる。

ToC

  • AMP のモチベーション
    • なぜこの仕様が必要とされたのか
    • それはつまり現状の Web にどんな問題があることを意味するのか
  • AMP の実体
    • 仕様は何を制限するのか
    • それはどういうメリットをもたらすのか
  • AMP の現状
    • 普及状況はどうか
    • 導入することで何が変わるのか
    • 導入にあたって何が大変か、意外と簡単なのか
  • AMP の今後
    • AMP は今後どうなっていくのか？
  • その他

AMP のモチベーション

なぜこの仕様が必要とされたのか

  • "Accelerated Mobile Pages" の名が示す通り、モバイルでのウェブページの表示速度を高速化する目的が第一。
    • SNSやメッセージアプリでウェブページを共有することが一般的になったことで、末端のページにダイレクトにアクセスすることが一般的になってしまった
    • 同様の理由から、FacebookのInstant Articles、AppleのApple News、国内ではSmartNewsのSmart Viewなどで各自規格を策定。（仕様非公開）

それはつまり現状の Web にどんな問題があることを意味するのか

  • 一言で言えば、モバイルでのウェブの表示が圧倒的に遅い（遅くなりがち）
    • 日本のインターネット環境は世界の中で見ても圧倒的に進んでいる。
    • 自宅にギガビット回線が来ていることも当たり前、多くの都市部ではLTE接続で5~10Mbpsの回線。
    • ところが諸外国ではLTE接続が出来ず3G回線、ヘタすると2G回線という場所も。
    • モバイルの最適化（レイアウト、表示速度）をする場合に多くのTODOが発生。

AMP の実体

仕様は何を制限するのか

  • 大きな制限としては次のようなものが挙げられる

    • 一切のJavaScriptの使用を禁止。custome element内で動作しているもののみ。

      • JavaScriptの使用を禁止する上で、静的コンテンツサイトでまず問題になるのはアナリティクスと広告の使用の制限。これらは <amp-analytics> と <amp-ad> で対応の拡充を図っており、大手プロバイダーは参画・対応済み。    
      • amp-bind によって状態の変更などを扱うことは可能になった。  

    • 外部CSSの使用禁止。あらゆるスタイルは <head> 内の <style amp-custom> 内に記述。

    • いくつかのタグを使用禁止。<img>、<video>などは代替のcustom elementである <amp-img>、<amp-video> を使用。

    • <amp-iframe> 内で呼び出すリソースはすべてHTTPSで配信されること。

  • 細かい仕様に関しては公式レポジトリのspecを見てもらうのが良い。

それはどういうメリットをもたらすのか

  • まずAMPの仕様を決めるにあたり、"Why AMP is fast?" に書かれている事が実現されるようにしたため、それはそのままメリットとなる。
  • 仕様に沿ったHTMLを書くだけで、モバイルでの高速表示に向けた最適化が自動的に実施される。
    • 機能が制限される代わりに、独自に高速化作業をする必要はない。
    • AMPランタイム（AMP JS）は自動的に更新されるので、一旦公開したあとは手を入れる必要がない。
    • すべていま普及している技術で動作する。
  • さらにGoogleのAMPキャッシュサーバに載る

AMP の現状

普及状況はどうか

  • まずAMPプロジェクトとして認識している会社だけでもここにリストアップされているだけいる
  • Google検索でAMPページの表示に対応しているのは現状上記以外にも加速度的に適用例が増えている。
  • またニュースサイトに限らず、CMSプロバイダーの対応も重要。
    • WordPress
    • Drupal
    • アメブロ
    • はてな
  • AMPコンテンツの生成だけでなく、AMPコンテンツの利用に関してもコンテンツキュレーターが参画。利用のためのAPIも一般公開となった。
    • Twitter
    • Pinterest
    • はてな

AMP の今後

AMP は今後どうなっていくのか？

その他

AMP vs PWA

AMP（およびその他マークアップ）用ページの生成コスト

  • 多くの独自マークアップが発生することでパブリッシャー側がメンテナンスしなければいけないフォーマットが増える

参考

プロジェクト公式

ツールなど

キーパーソン・アカウント

思想など

参加企業からの感想と第三者からの評価

関連技術

その他

  • Konga: Learnings from Building with Polymer (Progressive Web App Summit 2016)
    • ナイジェリアのECサービスであるKongaがPWAによるモバイル最適化を実施したが、見た目をResponsiveにするだけでは意味がないことに気づき、データ通信量を減らすことで結果としてモバイルとデスクトップ両方でのユーザー体験の向上に成功。
  • Tweet form @cramforce
    • プロジェクト開始からマージされたPull Requestが2000を超えた旨のツイート。非常にアクティブであることが伺える。
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment