やぁ、フィギュアばかりいじってるユトピ(@yutopi60pa)だよ。
本日初の運転免許証の更新に行ってまいりました。
なかなか煩雑な手続きでしたが、ある程度システム化はしていたので流れ作業的な感じになっていましたので迷うことはなかったですね。
ちなみに初回更新は違反した人と同じ講習を受けるので、ガラが悪い率が高かった気がしましたね。
ということで今回はまた「AMP」です。
AMPに関しては前回の記事にて説明しましたね。
・ブロガーは対応すべき！表示速度が爆速になる『AMP』をざっくり解説！
ざっくりおさらいしますと、「必要最低限なファイルのみ読み込み、ページ表示を爆速にする」のがAMPです。
Google検索結果にからみた場合は1秒以下のスピードで表示されるので、ユーザビリティが向上するというものですね。
そして今回は早速AMPについてのHTMLの書き方についてまとめていこうと思います。
一部面倒な部分もあるのですが、これは覚えておきましょう。
目次
AMP用HTMLテンプレ
とりあえずまずは一式を書いていきましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!doctype html> <html ⚡> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <link rel="canonical" href="60pa-amp-test.html" > <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> <title>60％ぶろぐをAMP化したい<title> <script async src="https://cdn.ampproject.org/v0.js"></script> </head> <body> <h1>AMPで表示しよう</h1> <amp-img src="http://yutopipi.lolipop.jp/60blog/wp-content/uploads/2016/03/60logo_out.png" width="300px" height="75px" alt="60％ぶろぐのロゴ"/> <p>60％ぶろぐもAMPにしないとねー。</p> </body> </html> |
これが基本形。
特にヘッダー内は特徴的ですね。
細かくみていきましょう！
<!doctype html>
HTMLのバージョン設定は変わりませんね。HTML5版での設定です。
<html ⚡>
<html>はampの場合、⚡を付けます。または<html amp>でもOKですよ。
metaタグ
|
1 2 |
<meta charset="utf-8"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> |
文字コード設定はそのままで、viewport設定は必須なのでしっかり書いておきましょう。
linkタグ canonical属性
|
1 |
<link rel="canonical" href="60pa-amp-test.html" > |
AMPで作られたページURLには最後に「/amp」や「&=1」などが付加されます。
その際、Googleに元々のURLとAMPページが重複ページとして認識されないように、linkタグにはcanonical属性を設定しましょう。
canonical属性とは1つのページで複数のURLが存在する場合に、どのURLに統一させるかを指定する属性です。
boilerplate指定
|
1 |
<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の高速表示に必要な記述です。ちなみに決まり文句ですので内容は理解しなくても大丈夫です。
AMPのライブラリの読み込み
|
1 |
<script async src="https://cdn.ampproject.org/v0.js"></script> |
AMPを使うためにAMPのライブラリを読み込む必要があります。
これもなにも考えず書きましょう。
ちなみにこのAMPのJavascriptファイル以外のJavascriptファイルは読み込むことはできませんのでご注意くださいね。
以上が最初に書く必要のあるコードです。
この辺はなにも考えずにコピペしちゃいましょう。
禁止されているHTMLタグ
AMPにはそのまま使用することができないタグがあります。
代表的なのだと<img>タグ。こちらはそのまま記述しても表示されません。
そんな禁止タグをご紹介しましょう。
| img | 代用タグあり。 |
|---|---|
| video | 代用タグあり。 |
| audio | 代用タグあり。 |
| iframe | 代用タグあり。 |
| script | AMPライブラリ読み込み以外での使用禁止。 |
| base | 禁止 |
| frame | 禁止 |
| frameset | 禁止 |
| object | 禁止 |
| param | 禁止 |
| applet | 禁止 |
| embed | 禁止 |
| form | |
| input | 禁止 |
| textarea | 禁止 |
| select | 禁止 |
| option | 禁止 |
これらのタグはAMPでは使用することができません。
使用した場合、AMPページとして認識されませんのでご注意ください。
逆にこれ以外のタグは使うことができます。
ほとんど使用頻度が少ないタグですね。
上部の使用頻度が高めのタグはAMPの代用タグがありますので、そちらは次の章で紹介します。
AMP用タグ
先ほど禁止されたタグの中にどうしても使いたいものもあると思います。
特に<img>タグなんかは使用頻度はめちゃくちゃ高い。
ということでAMP専用タグの一覧です。
| amp-img | 画像を表示する。width、heightが必須。alt属性が使用可能。 |
|---|---|
| amp-image-lightbox | 画像のライトボックスの表示。 |
| amp-lightbox | ライトボックスの表示。 |
| amp-carousel | カルーセルの表示。 |
| amp-ad | 広告表示用タグ。アドセンスを使用する場合はこちらを使います。 |
| amp-video | 動画表示用タグ。 |
| amp-brightcove | 動画プレーヤーの表示。 |
| amp-iframe | iframeとして使用可能。 |
| amp-audio | 音声ファイル用タグ。 |
| amp-anim | アニメーションGIF用タグ。 |
| amp-font | カスタムフォントの表示。 |
| amp-fit-text | 内容にフィットするフォントを表示する。 |
| amp-youtube | Yotube動画の表示タグ |
| amp-facebook | Facebook投稿を表示 |
| amp-twitter | Twitterの投稿を表示。 |
| amp-instagram | Instagramの投稿を表示。 |
| amp-pinterest | Pinterestの投稿を表示。 |
| amp-vine | Vine動画を表示。 |
| amp-install-serviceworker | ServiceWorkerをインストール。 |
以上です。
なかなか多いですが、SNSもサポートされているのはいいですねー。
ちなみにvineは終了するので使うことはなくなるかも。
まとめ
ということでこれがAMPの基本的な書き方とタグについてです。
結構制限が多いように見えますね。
特に<img>タグなんかは使用頻度高いので、一括変換することができないときは、1つ1つ対応する必要があるので大変な手間になります。
WordPressなどでブログ運営していればうまく変換できるプラグインもありそうなので、サイトに合わせて対応していくようにしましょう。
たくさん書いて疲れた(´･ω･｀)。