HTMLを作成してみようB!こんにちは。エンジニアの毛利です。PCと同等のWeb環境が見られるスマホが普及し、年々Webコンテンツは肥大化しています。Webページ表示の高速化は、限られた通信環境で快適な閲覧をするために必須となっています。高速化のアプローチ方法は、Webプログラミングの最適化、画像の最適化、サーバー強化、チューニング、検索エンジンへの最適化など様々な方法があります。Googleをはじめとして様々な検索エンジンはユーザーのニーズに応えるため、検索エンジンでの表示をモバイル最適化を優先、優遇しています。「モバイルファースト」の概念が、一般的に定着してつつある中、Googleはスマートフォンで静的なページを瞬時に表示できるようなフレームワークの提供を開始しました。今回はWebを高速表示させるための新しい枠組み「AMP」についてご紹介します。Pagesのことで、Google主導のもと、モバイルページの速度向上のために発足したオープンソースプロジェクトです。HTMLという新しいフレームワークの規則に沿って、コーディングを進めていきます。従来HTMLそのままの形だと、画像やインタラクションなど、流用できない部分が多々あり、新たにデザイン、コーディングが必要になるものが多いです。タグに関してはほとんどHTMLのマークアップ規則のもとで記述できるので、コツさえおさえれば間違いのないものになります。プロジェクトが発足してすでにページに組み込まれているAMPですが、現在も開発が進んでおり、今後AMP専用の新しいカスタムタグが増えるそうです。基本的なサンプルは以下のサイトで書かれていますので、これらを実際にコーディングをしてポイントをおさえていきます。HTMLでマークアップすることで検索エンジン側のサーバーにキャッシュされる仕組みとなっています。・AMPコンテンツとして画像付きでわかりやすい一覧が表示される検索トップに画像付き一覧で表示されるため、他コンテンツと比較し目立ちます。HTMLフレームワークの規則に沿ってコーディングをするため、従来のHTMLを変えなくてはならない記述そのものに制約や独自のきまりがあり、外部から自分で記述したcssやjsも読み込めません。・タグの使用に制限がある(img、iframe、form、inputなど)高速化、コンテンツ最適化のためにいくつかのタグは使用することを制限、もしくは禁止されています。imgやiframe等はそれぞれamp-img、amp-iframeなどのカスタムタグを使うように決められています。formやinput等は仕様が禁止されています。h1などの見出しタグ、div、p、ul、li、tableタグなど基本的なタグは使用可能です。・JSが使えないJavascriptは原則使えません。AMPページを検索結果に表示する時に必要な「application/ld+json」のみ記述できます。AMPでコーディングコーディングを進めていくためのポイントを解説していきます。height=300></amp-img></p></html>!DOCTYPE宣言はhtml5と同様になります。amp>」と記述します。rel=”canonical”オリジナルページのURLを記述します。amp-custom>オリジナルのCSSはここに記述します。外部CSSを読み込むことはできません。type=”application/ld+json”>schemaの記述をします。必須項目と推奨項目があります。amp-carousel-0.1.js必ず読み込みます。amp-boilerplate>必ず記述します。内容の変更はできません。img画像はamp-imgというカスタムタグで読み込みます。width、heightが必須項目です。layoutというオプションが4種類あります。amp-pixelanalyticsコードを入れます。tid=アナリティクスID画像のlayoutオプション一覧です。fixedwidth、heightに従い、固定幅になります。responsiveコンテンツ幅に応じて、画像が拡縮します。画像比率はwidth、heightに基づきます。fixed-height縦幅のみ固定になります。widthは指定しない、もしくはautoにします。fillブラウザの有効幅いっぱいに表示されます。画像比率は保持されません。Schemaの記述です。必須項目を抜粋しました。Developersを参照下さい。image記事の画像です。image.url画像URLです。image.heightimage.width画像の幅を設定します。画像の横幅は696px以上です。publisher記事の発行者を書くのに必要な項目です。publisher.name発行者の名前です。publisher.logoロゴの名前です。publisher.logo.heightpublisher.logo.widthロゴの幅を設定します。datePublished記事が公開された日時です。ISO形式で書きます。author記事の著者情報の項目です。author.name著者名です。最後にオリジナルページに下記のタグを挿入します。href="./amp/vol44_amp_amp.html">なお、公式のガイドラインは下記のページにのっていますので一度目を通してみてください。https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md#html-tags(英語)まとめ以上がAMPのためのコーディングのポイントになります。現状、AMPが検索エンジンに適用されているサイトがあまりなく、確実に確認できるのがGoogleがAMPプロジェクトのパートナーとして認めているメディアサイトでしょうか。(産経新聞やマイナビニュースなどをGoogle検索すると確認できます。)検索方法も確立しておらず、どうすればAMPが表示されるかはしばらく試行錯誤が必要なのではないでしょうか。今回TIPSで作ったHTMLを設置し、サイトをAMPとして表示させるために色々と模索していきたいと思っています。POSTS新着TIPSvol.1012019年ロゴマークをリニューアルしたブランド5選2019年にロゴをリニューアルした企業6選vol.100BOELのスタッフが大切にしていることBOELのスタッフがオフィスでの過ごし方を通じてたいせつにしていることをご紹介します。7選WEB業界でよく使う単語の中でよくあるスペルミスと間違えやすい点をいくつかリストアップします。vol.98ブランディングで動画を活用するメリットと成功のポイント!ブランディング動画を活用するメリットや成功のポイントを事例と合わせて紹介します。幾何学フォントTOP32019年の幾何学書体トップ3をご紹介いたします。一時的な流行ではなく多くのサイトで一般的に見られるようになったWebデザインvol.43動画コーデックをマスターしよう映像データのエンコード、動画メディア配信の基礎からターゲットに合った圧縮方法vol.45すぐに使える!アコーディオンメニューの実装アコーディオンメニューをよりリッチに。日本古来より伝わる色。デザイン、アートディレクションなどクリエイティブワークを得意とするブランディングオフィスです。ブランディング・Webサイト・印刷物、システム開発等を通じ、ビジネス価値向上をお手伝いします。お問い合わせをするオンライン見積もりフォームさまざまなブランディング事案に対応します。お気軽にご依頼ください。PERMISSION.。