速さが足りない
夜分遅くにおはようございます。どうにも速さが足りないことに定評のある僕です。最近速さが足りないなって思うんですよ。ですので速さについて学ぶためにこれをちょっと読んでみることにしました。
AMP - a web component framework to easily create user-first web experiences - amp.dev
Accelerated Mobile Pages (AMP) は、Googleが中心となって立ち上げた、モバイルでのウェブサイト閲覧を高速化することを目的とするオープンソースプロジェクトである。また、AMPの成果物である一連の仕様やライブラリなどについてもAMPと呼ぶ。AMPは、従来より用いられているHTMLなどのウェブ技術を改良したもので、中核となるのはAMP HTMLと呼ばれるHTMLの一種である。
試しになにかつくってみる
そんなわけで、ネット探しても「AMPにすると速いぞー！すごいぞー！」みたいな情報しかなくて、実際つくるとどのくらい面倒なのかとか制限あるのかとかこれにするメリットとかよくわかんかったので簡単なサイトを作ってみることにした。
こんなんつくった。DEMOからつくったものがみれます。
github.com
3*3マスに画像を配置しただけの何も面白くないサイトつくった。画像をクリックするとその画像が消えます。そんだけ。画像は遅延読み込みがデフォでかかる感じなのかな…？そのほかの機能とかも付けて見たかったけども作るのが面倒になった。
個人的にどうでもいいグッドポイント、AMP対応させると下みたいな感じに表示するのいいね。ピカチュウバージョンって感じがする（？）。
Powered by AMP ⚡ HTML – Version *******
んで作り方はざっくり以下の通りだそうです。
| 規約 | 説明 |
|---|---|
<!DOCTYPE HTML> |
普通にDOCTYPE宣言します |
<html ⚡><html amp> |
HTMLタグお作法：どちらかを含めること |
<head><body> |
HEADタグ、BODYタグを入れること |
<meta charset="utf-8"> |
HEADの最初の要素にすること |
<meta name="viewport" content="width=device-width,minimum-scale=1"> |
VIEWPORT設定 |
<link rel="canonical" href="$SOME_URL"> |
canonicalでページ重複回避 |
<script async src="https://cdn.ampproject.org/v0.js"></script> |
AMP読み込みのHEAD最後に記述 |
とりあえず作ってみたけどどうなんですかね？速さって面で言うとかなり体感はやいなって思えるぐらいにははやく感じる。ただ作りこむには制限が辛いかなってのが触ってみての感想。Reactとかにライブラリあったとかなかったとかいうのを聞いたので今度使うことあればそっちで確認してみようかと思う。ざっくり雑にいじった感じはそんなところ。まあ、このブログに適用されることはないんですけどね。
