AMP・HTMLリファレンス・WEBやぁ、フィギュアばかりいじってるユトピ(@yutopi60pa)だよ。本日初の運転免許証の更新に行ってまいりました。煩雑な手続きでしたが、ある程度システム化はしていたので流れ作業的な感じになっていましたので迷うことはなかったですね。ちなみに初回更新は違反した人と同じ講習を受けるので、ガラが悪い率が高かった気がしましたね。いうことで今回はまた「AMP」です。AMPに関しては前回の記事にて説明しましたね。・ブロガーは対応すべき!表示速度が爆速になる『AMP』をざっくり解説!ざっくりおさらいしますと、「必要最低限なファイルのみ読み込み、ページ表示を爆速にする」のがAMPです。Google検索結果にからみた場合は1秒以下のスピードで表示されるので、ユーザビリティが向上するというものですね。今回は早速AMPについてのHTMLの書き方についてまとめていこうと思います。一部面倒な部分もあるのですが、これは覚えておきましょう。まとめAMP用HTMLテンプレとりあえずまずは一式を書いていきましょう。<p>60%ぶろぐもAMPにしないとねー。alt="60%ぶろぐのロゴ"/><p>60%ぶろぐもAMPにしないとねー。</p></body></html>これが基本形。ヘッダー内は特徴的ですね。html>HTMLのバージョン設定は変わりませんね。HTML5版での設定です。⚡><html>はampの場合、⚡を付けます。amp>でもOKですよ。content="width=device-width,minimum-scale=1,initial-scale=1">文字コード設定はそのままで、viewport設定は必須なのでしっかり書いておきましょう。>AMPで作られたページURLには最後に「/amp」や「&amp=1」などが付加されます。その際、Googleに元々のURLとAMPページが重複ページとして認識されないように、linkタグにはcanonical属性を設定しましょう。canonical属性とは1つのページで複数のURLが存在する場合に、どのURLに統一させるかを指定する属性です。amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>続いてはAMPの高速表示に必要な記述です。ちなみに決まり文句ですので内容は理解しなくても大丈夫です。src="https://cdn.ampproject.org/v0.js"></script>AMPを使うためにAMPのライブラリを読み込む必要があります。これもなにも考えず書きましょう。ちなみにこのAMPのJavascriptファイル以外のJavascriptファイルは読み込むことはできませんのでご注意くださいね。以上が最初に書く必要のあるコードです。この辺はなにも考えずにコピペしちゃいましょう。禁止されているHTMLタグAMPにはそのまま使用することができないタグがあります。代表的なのだと<img>タグ。こちらはそのまま記述しても表示されません。そんな禁止タグをご紹介しましょう。video代用タグあり。audio代用タグあり。iframe代用タグあり。scriptAMPライブラリ読み込み以外での使用禁止。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-iframeiframeとして使用可能。amp-audio音声ファイル用タグ。amp-animアニメーションGIF用タグ。amp-fontカスタムフォントの表示。amp-fit-text内容にフィットするフォントを表示する。amp-youtubeYotube動画の表示タグamp-facebookFacebook投稿を表示amp-twitterTwitterの投稿を表示。amp-instagramInstagramの投稿を表示。amp-pinterestPinterestの投稿を表示。amp-vineVine動画を表示。amp-install-serviceworkerServiceWorkerをインストール。多いですが、SNSもサポートされているのはいいですねー。ちなみにvineは終了するので使うことはなくなるかも。まとめということでこれがAMPの基本的な書き方とタグについてです。制限が多いように見えますね。<img>タグなんかは使用頻度高いので、一括変換することができないときは、1つ1つ対応する必要があるので大変な手間になります。WordPressなどでブログ運営していればうまく変換できるプラグインもありそうなので、サイトに合わせて対応していくようにしましょう。コメントをキャンセルメールアドレスが公開されることはありません。