AMPHTML

はじめに

AMPHTMLは、高速でモバイルフレンドリーなウェブページを作成するためのGoogleが開発したフレームワークです。このハンドブックでは、AMPHTMLの基本から実装まで詳しく解説します。

AMPHTMLの基礎

基本構造

AMPHTMLページは以下の基本構造に従う必要があります：

<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <title>AMP ページ</title>
  <link rel="canonical" href="オリジナルページのURL">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <script async src="https://cdn.ampproject.org/v0.js"></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>
</head>
<body>
  <!-- コンテンツ -->
</body>
</html>

重要な要件

<html ⚡> または <html amp> タグの使用
必須のメタタグとスクリプトの包含
AMPバリデーション対応のHTML/CSS/JavaScript

主要コンポーネント

amp-img

画像の表示には専用の amp-img コンポーネントを使用します：

<amp-img src="image.jpg"
  width="600"
  height="400"
  layout="responsive"
  alt="説明文">
</amp-img>

amp-video

動画の再生には amp-video を使用します：

<amp-video width="640"
  height="360"
  src="video.mp4"
  poster="poster.jpg"
  layout="responsive"
  controls>
</amp-video>

amp-carousel

スライドショーやカルーセルの実装：

<amp-carousel width="600"
  height="400"
  layout="responsive"
  type="slides">
  <amp-img src="slide1.jpg" width="600" height="400"></amp-img>
  <amp-img src="slide2.jpg" width="600" height="400"></amp-img>
  <amp-img src="slide3.jpg" width="600" height="400"></amp-img>
</amp-carousel>

レイアウトとスタイリング

レイアウトシステム

AMPは6つの基本レイアウトをサポートしています：

responsive: レスポンシブデザイン
fixed: 固定サイズ
fixed-height: 固定高さ
fill: 親要素いっぱいに表示
container: 子要素に依存
nodisplay: 非表示

CSSの制限事項

インラインスタイルシートのみ許可
!important の使用禁止
最大50KBまでのスタイル定義

例：

<style amp-custom>
  .container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
  }
  .content {
    font-size: 16px;
    line-height: 1.6;
  }
</style>

パフォーマンス最適化

最適化のポイント

画像の最適化
- WebP形式の使用
- srcset属性による複数解像度対応
- サイズ指定の厳守

リソースの遅延読み込み

<amp-img src="image.jpg"
  width="600"
  height="400"
  layout="responsive"
  alt="説明文"
  loading="lazy">
</amp-img>

キャッシュの活用
- AMP Cacheの利用
- プリロード設定

実装例

ブログ記事ページの例

<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <title>AMP ブログ記事</title>
  <link rel="canonical" href="https://example.com/blog-post">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <script async src="https://cdn.ampproject.org/v0.js"></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>
  <style amp-custom>
    .article {
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
    }
    .article-header {
      margin-bottom: 30px;
    }
    .article-title {
      font-size: 32px;
      font-weight: bold;
    }
    .article-meta {
      color: #666;
      font-size: 14px;
    }
    .article-content {
      font-size: 18px;
      line-height: 1.8;
    }
  </style>
</head>
<body>
  <article class="article">
    <header class="article-header">
      <h1 class="article-title">記事タイトル</h1>
      <div class="article-meta">
        <time datetime="2024-01-29">2024年1月29日</time>
      </div>
    </header>
    <div class="article-content">
      <amp-img src="article-image.jpg"
        width="800"
        height="400"
        layout="responsive"
        alt="記事のメイン画像">
      </amp-img>
      <p>記事の本文...</p>
    </div>
  </article>
</body>
</html>

まとめ

Wikipedia

ウィキペディアにAccelerated Mobile Pagesの記事があります。

AMPHTMLを効果的に活用するためのポイント：

基本構造を正しく実装する
適切なコンポーネントを選択する
レイアウトシステムを理解して活用する
パフォーマンスを意識した最適化を行う
バリデーションツールで確認する

このハンドブックを参考に、高速で効率的なAMPページの開発を進めてください。

下位階層のページ

AMPHTML/Bento