Do you build things with AMP? Fill out the AMP Developer Survey!
AMP
JA
English Deutsch Français العربية Español Italiano Indonesia 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

Node.js AMP オプティマイザガイド

このガイドでは、Node.js バージョンの AMP オプティマイザをセットアップして使用する方法を説明します。

セットアップ

以下のコードを使って、NPM 経由でインストールします。

npm install @ampproject/toolbox-optimizer

使用方法

AMP Optimizer API は、HTML 文字列を入力として取り、その HTML 文字列の最適化バージョンを返します。以下に、基本的な使用方法を示します。

const AmpOptimizer = require('@ampproject/toolbox-optimizer');

// create the AMP Optimizer instance
const ampOptimizer = AmpOptimizer.create();

const html = '<h1>Hello World!</h1>';

const optimizedHtml = await ampOptimizer.transformHtml(html);

ビルド時に最適化された AMP を作成する

静的サイトについては、サイトを構築する際に、AMP ページを最適化することが最良です。以下に、このアプローチを Gulp.js ベースのビルドに統合する方法の例を示します。この例では、src フォルダ内のすべての HTML ファイルを最適化するカスタム変換を追加しています。

const {src, dest} = require('gulp');
const through2 = require('through2');

const AmpOptimizer = require('@ampproject/toolbox-optimizer');
const ampOptimizer = AmpOptimizer.create();

function build(cb) {
  return src('src/*.html')
    .pipe(
      through2.obj(async (file, _, cb) => {
        if (file.isBuffer()) {
          const optimizedHtml = await ampOptimizer.transformHtml(
            file.contents.toString()
          );
          file.contents = Buffer.from(optimizedHtml);
        }
        cb(null, file);
      })
    )
    .pipe(dest('dist/'));
}

exports.default = build;

レンダリング時

動的なページにおいては、サーバーでページをレンダリングする必要のあることがよくあります。この場合、ページをレンダリングした後に、AMP オプティマイザを実行することができます。以下は、このアプローチを Express.js サーバーに統合した例です。AMP 最適化を Express ルーターに統合する方法の 1 つとして、テンプレートがレンダリングされた後に、コールバックでオプティマイザを実行しています。

const express = require('express');
const router = express.Router();
const AmpOptimizer = require('@ampproject/toolbox-optimizer');
const ampOptimizer = AmpOptimizer.create();

router.get('/', (req, res) => {
  const locals = {title: 'Express with AMP Optimizer'};
  res.render('index', locals, async (err, html) => {
    const optimizedHtml = await ampOptimizer.transformHtml(html);
    res.send(optimizedHtml);
  });
});

module.exports = router;

AMP オプティマイザをサーバーで使用する際は、レンダリングの遅延を回避するために、キャッシングまたは CDN を必ずセットアップしてください。

構成

AMP オプティマイザは妥当なデフォルト構成を提供しており、ほとんどの場合では十分に役立ちますが、特定の使用事例に対して変換をカスタマイズすることができます。利用できるすべてのオプションのリストは、こちらを参照してください。

特筆すべきオプションをいくつか以下に示します。

  • lts: true: AMP ランタイムとコンポーネントの長期的安定 URL を可能にします。
  • verbose: true: 詳細なデバッグ出力を得られます。特に、AMP ボイラープレートを削除できない理由を特定する上で役立ちます。
  • imageOptimizer: 特定の画像 src の srcset URL を計算するための関数を提供し、画像 srcset の生成を自動化します。この関数は、ある幅が指定された src 画像バージョンをポイントする URL を返します。利用できる画像がない場合は、偽の値を返します。この詳細は次のセクションで説明します。

画像の最適化

AMP オプティマイザは、layout 定義に基づき、指定された amp-img の srcset 値を生成できます。これが機能するには、画像の src と width をサイズ変更される srcset ソース値にマッピングする関数を指定する必要があります。画像のサイズ変更は、AMP オプティマイザが実行するのではなく、ビルド時（静的サイト）または thumbor などの画像ホスティングサービスのいずれかで発生します。

以下は、画像の幅を src にアペンドする実装例です。

const ampOptimizer = AmpOptimizer.create({
  // parameters are the amp-img `src` and the `width` of the to be generated srcset source value
  imageOptimizer: (src, width) => {
    // we cannot rename if the image does not have a file extension
    const index = src.lastIndexOf('.');
    if (index === -1) {
      // return null means we won't generate a srcset source value for this width
      return null;
    }
    const prefix = src.substring(0, index);
    const postfix = src.substring(index, src.length);
    return `${prefix}.${width}w${postfix}`;
  };
})

この実装を使用すると、AMP オプティマイザは、以下の amp-img 宣言を変換します。

<!-- Injects srcset for responsive layout -->
<amp-img
  src="image1.png"
  width="400"
  height="800"
  layout="responsive"
></amp-img>
<!-- Ignores existing srcset -->
<amp-img
  layout="fill"
  srcset="image-1x.png 1x,
                             image-2x.png 2x"
></amp-img>

上記を以下のように変換します。

<!-- Injects srcset for responsive layout -->
<amp-img
  src="image1.png"
  width="400"
  height="800"
  layout="responsive"
  srcset="image1.470w.png 470w, image1.820w.png 820w, image1.1440w.png 1440w"
></amp-img>
<!-- Ignores existing srcset -->
<amp-img
  layout="fill"
  srcset="image-1x.png 1x,
                               image-2x.png 2x"
></amp-img>

layout=responsive を使用している場合は、width と height 属性を使用して画像の最小寸法を指定してください。たとえば、モバイルデバイス用のフルブリードのヒーロー画像であれば、幅を width=320 に指定します。