AMP(Accelerated Mobile Pages)とは
AMP(Accelerated Mobile Pages)とは、Googleが中心となって開発したモバイルウェブページの高速表示を実現するためのオープンソースプロジェクトです。従来のモバイルページと比較して、読み込み速度を大幅に向上させることで、ユーザー体験の改善とモバイル検索における優位性を提供します。
このフレームワークは2015年10月に発表され、HTMLの軽量版である独自の仕様を採用することで実装されています。AMP HTMLと呼ばれる制限付きのマークアップ言語、AMP JSライブラリ、そしてAMP CDNという3つの主要コンポーネントから構成され、これらが連携してページの高速化を実現しています。
AMP HTMLの基本構造と記述方法
AMP HTMLでは通常のHTMLに様々な制限があり、ページを作る際には特定の属性や専用タグを使う必要があります。ドキュメントタイプ宣言の直後に配置する<html>タグには、amp属性(または稲妻マーク⚡でも可)を必ず含める必要があり、<head>セクション内にはAMPが定めた必須のメタタグとAMPライブラリの読み込みを記述します。
<!DOCTYPE html>
<html amp lang="ja">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<link rel="canonical" href="https://example.com/page">
<meta name="viewport" content="width=device-width,minimum-scale=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}</style>
</head>
<body>
<h1>AMPページ</h1>
</body>
</html>通常のHTMLでは<img>タグを使用しますが、AMPでは<amp-img>という専用タグに置き換える必要があります。このタグでは幅と高さの属性指定が必須となっており、レスポンシブ対応のためにlayout属性を活用してレイアウトモードを制御できます。
AMPページの配信とキャッシュの仕組み
AMP CDNはGoogleが提供するコンテンツデリバリーネットワークで、検証済みのAMPページを自動的にキャッシュして配信する役割を担っています。このCDNは世界中に分散配置されたサーバーからコンテンツを提供するため、ユーザーの地理的位置に関わらず高速なページ表示を実現します。
| 配信方式 | URLの形式 |
|---|---|
| オリジナル配信 | https://example.com/amp/ |
| Google AMP Cache | https://example-com.cdn.ampproject.org/ |
| Bing AMP Cache | https://www.bing-amp.com/ |
検索エンジンのクローラーがAMPページを発見すると、そのページの検証とキャッシュ処理が自動的に実行されます。キャッシュされたページはプリレンダリング技術によって、即座に表示可能な状態で保持されるため、検索結果からのタップ操作に対して、ほぼ瞬時にコンテンツが表示されるのです。
※上記コンテンツの内容やソースコードはAIで確認・デバッグしておりますが、間違いやエラー、脆弱性などがある場合は、コメントよりご報告いただけますと幸いです。
ITやプログラミングに関するコラム
PythonをWebで実行する方法
共通テスト「情報Ⅰ」2年目で変わる、日本の教育と学び方
gitでブランチ(branch)を切り替える方法
git cloneでブランチを指定する方法
64GBのメモリが必要な人・不要な人の特徴
PCを再起動するコマンド一覧
CapsLock以外で大文字になる原因【Windows編】
パソコンで大文字になるのを解除する方法
面白いAIの活用事例を業界別に紹介
Gitでcommit(コミット)を取り消す方法
ITやプログラミングに関するニュース
サイボウズがkintone AIを正式提供、β版から約1年を経てクレジット制を導入
ロゼッタのラクヤクAIがCSRドラフト作成期間を90%以上短縮、従来4週間を約2日に
AI CROSSが不動産業界向け生成AI伴走支援を開始、アスコットの業務AI実装を実践サポート
日本情報クリエイトが「オーナー提案AIロボⅡ」売買査定を刷新、月1万円からW査定が回数無制限に
Wur株式会社がAI新規事業診断サービス「MVP事業診断レポート」をリリース、12の質問で事業構想を約10分で分析
バトンズがM&A専門家向け「AI概要書」β版を提供開始、企業概要書のドラフトを最速3分で自動生成
SCSKが観光DXサービス「Connexia」を開発、首里城公園でNFT活用の周遊促進が始動
Verdent AI発表、エンジニア不要でソフトウェアを構築する「AIエンジニアリングチーム」が登場
ゼネラルBREXAテクノロジーが外食・小売向けAIサービス「aimana」を開発、店長の意思決定をデータで支援
田中組がKencopa工程AIエージェント製品版を先行利用開始、建設現場の工程管理属人化を解消へ
