Google Ampに対応したホームページを作ってみたいなとネットで調べてみたのですが、資料が少ないことに驚きました。
結構前から騒がれているのに。。。
ということで、私が学んだことを書いていきたいと思います。
はじめなのでまずは定番「Hello world」から
しかし Googleのリファレンスをみて作りましたが、headerによくわからないものがたくさん入ってます。
とりあえずソースを
Hello world のソース
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<!doctype html> <!-- 最上位階層のタグを <html ⚡>（<html amp> でも可）にする --> <html amp lang="en"> <head> <!-- head タグの最初の子要素を <meta charset="utf-8"> タグにする。 --> <meta charset="utf-8"> <!-- ホームページタイトルを指定 --> <title>Hello, AMPs</title> <!-- ヘッド部に <link rel="canonical" href="$SOME_URL"> タグを入れて、 --> <!-- AMP HTML 版の通常の HTML バージョンを指定する。該当する HTML が存在しない場合は自身を指定する。 --> <link rel="canonical" href="http://kotatu.net/index.html"> <!-- head タグ内に <meta name="viewport" content="width=device-width,minimum-scale=1"> タグを含める。initial-scale=1 も入れることをお勧めします。 --> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <!-- 次の内容を <head> タグの中に含める。 --> <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> <!-- これによって AMP JS ライブラリがインクルードされ、読み込まれます） --> <script async src="https://cdn.ampproject.org/v0.js"></script> </head> <body> <h1>Hello world</h1> </body> </html> |
コメントをたくさん入れたので理解していただけると思います。
ほぼこれが基本の形なのでおまじないとして覚えていきましょう。
