Node.js AMP オプティマイザガイド
Important: this documentation is not applicable to your currently selected format email!
このガイドでは、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 オプティマイザは妥当なデフォルト構成を提供しており、ほとんどの場合では十分に役立ちますが、特定の使用事例に対して変換をカスタマイズすることができます。利用できるすべてのオプションのリストは、こちらを参照してください。
特筆すべきオプションをいくつか以下に示します。
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 に指定します。 -