AMP Toolbox 1.0リリース

AMP Toolbox はしばらく前からリリースされていますが、1.0 のマイルストーンに到達した今、改めてご紹介させていただくのが良いと思いました。簡単に言うと、AMP Toolbox は、AMP ページの公開を容易にするコマンドラインツールと JS API のコレクションです。各ツールは個別にダウンロードしてご利用いただけます。

バージョン 1.0 には、次の 2 つの主要な更新が含まれています。

1.   AMP ドキュメントリンター: AMP リンターは、欠落している画像やサイズが間違っている画像、欠落している CORS ヘッダー、無効なメタデータなどのエラーや疑わしい構造を報告します。

2.   有効な最適化された AMP のサポート: AMP Optimizerで有効な AMP を生成できるようになり、最適化された AMP ページのホスティングが容易になりました。

でも、もっとすごい機能があります！AMP ツールボックスには他にどんな機能があるか、詳しく見ていきましょう。

AMP CLI

まず、AMP ツールボックスに含まれる機能のほとんどにはコマンドラインインターフェースがあります。NPM 経由でグローバルにインストールできます。

 $ npm インストール @ampproject/toolbox-cli

 $ ampヘルプ

または、NPM の組み込み ` npx`ツールを使用してシャットダウン コマンドを実行することもできます。

 $ npx @ampproject/toolbox-cli ヘルプ

AMP リンター

新しいツールボックス - リンターはAMP ドキュメントの一般的なエラーとベスト プラクティスをチェックします。

 $ amp lint https://amp.dev

 PASS 1x1画像は<amp-pixel>で指定されます

警告: すべての <amp-img> の幅と高さは適切です

> [https://blog.amp.dev/wp-content/uploads/2019/06/cf_hero.png]: 実際の比率 [1999/1140 = 1.75] は指定された比率 [16/9 = 1.77] と一致しません

> [https://blog.amp.dev/wp-content/uploads/2018/10/img_20180926_163001-01.jpeg]: 実際の比率 [3680/2314 = 1.59] は指定された比率 [16/9 = 1.77] と一致しません

PASSビデオは4MB未満です

PASS <amp-video><source/></amp-video> 構文はビデオに使用されます

PASSエンドポイントはキャッシュからアクセス可能

PASSエンドポイントはオリジンからアクセス可能

FAIL <meta charset> は最初の <meta> タグです

> <meta charset> は最初の <meta> タグではありません

PASSランタイムがプリロードされています

またはインストールされていない場合:

 $ npx @ampproject/toolbox-cli lint https://amp.dev

AMP Linter の SXG モードは、ウェブサイトにSXGサポートを追加するときに便利です。

 $ amp lint -f sxg https://amp.dev

 PASS /amppkg/ が正しく転送されました

PASSアプリケーション/署名付き交換コンテンツネゴシエーションは正しい

PASS dump-signedexchange -verify はエラーを報告しません

AMP オプティマイザー

AMP Optimizer は、AMP ページのレンダリングパフォーマンスを向上させるサーバーサイドツールです。AMP Optimizer は、AMP パフォーマンスのベストプラクティスを実装し、AMP サーバーサイドレンダリングをサポートします。これらの最適化により、FCP 時間を 50% 高速化できます。

CLI 経由で使用できます:

$ amp 最適化 https://amp.dev

$ amp 最適化ファイル.html

ただし、本番環境では、 Toolbox Optimizer をビルドまたはレンダリングチェーンの一部として統合するのが最適です。AMP サーバーサイドレンダリングを動的に適用できる Express ミドルウェア、 amp-optimizer-expressも利用可能です。

AMP キャッシュ URL

テストでは、AMP ページがすべての AMP キャッシュで動作するかどうかを確認することをお勧めします。toolbox -cache-urlを使用して、元の URL をAMPキャッシュ URL形式に変換してください。

 $ amp curls https://amp.dev

 https://amp-dev.cdn.ampproject.org/c/s/amp.dev

 https://amp-dev.amp.cloudflare.com/c/s/amp.dev

 https://amp-dev.bing-amp.com/c/s/amp.dev

または特定のキャッシュの場合:

 $ amp curls --cache=google https://amp.dev

 https://amp-dev.cdn.ampproject.org/c/s/amp.dev

AMP キャッシュリスト

公式AMPキャッシュのリストを取得できるAPIも利用可能です。これは、バックエンドにCORSを実装する際に非常に便利です。

const Caches = require('@ampproject/toolbox-cache-list');

Caches.list().then(console.log);

AMP ドキュメントを AMP キャッシュから素早く更新したり削除したりする必要がある場合があります。これは、AMP Update Cache APIの CLI バージョンを使用すると簡単に実行できます。

 $ amp update-cache https://www.example.com/ --privateKey/path/to/private-key.pem

もちろん、 toolbox-update-cacheパッケージの一部として利用できる API バージョンもあります。

アンプコア

CORSについて言えば、多くのAMPコンポーネント（amp-listやamp-stateなど）はCORSリクエストを使用してリモートエンドポイントを活用します。AMPツールボックスの一部であるconnect/expressミドルウェアは、AMPページに必要なすべてのCORSヘッダーを自動的に追加します。expressアプリにtoolbox-corsミドルウェアを追加するだけで、AMPページの配信時にCORSを意識する必要がなくなります。

 const express = require('express');

 const ampCors = require('@ampproject/toolbox-cors');

 express() は定数です。

 // それでおしまい！

 app.use(ampCors())

AMP 検証ルール

お気に入りのテキストエディタにAMP固有のコード補完を実装したい場合は、 amp-validator-rulesをご覧ください。これはAMP検証ルールを照会するためのJavaScriptライブラリです。次の例は、amp-img要素の有効な属性をすべてリストしています。

 '@ampproject/toolbox-validator-rules' から validatorRules をインポートします。

バリデータルール.フェッチ().then(ルール => {

 // ウェブサイト固有のタグ ルールをすべて取得します...

 const tags = rules.getTagsForFormat('AMP');

 // ...amp-img タグの定義を見つけます...

 const ampImg = tags.find(e => e.tagName === 'AMP-IMG');

 const ampImgAttrs = ampImg.attrs

 // ...グローバル、レイアウト、amp-bind 属性をフィルターします...

 .filter(e => !e.name.startsWith('[') && !e.global && !e.layout)

 // ...名前を抽出します...

 .map(e => e.name)

 // ...アルファベット順に並べ替えます...

 。選別（）;

 // ...結果をコンソールに表示します。

コンソールにログを出力します(ampImgAttrs);

 });

上記のアップデートはもうお分かりいただけましたか？操作が面倒だと感じる場合は、Yiyingbaoクラウドインテリジェントウェブサイト構築プラットフォームでGoogle AMPを選択してウェブサイトを構築することもできます。ウェブサイトの構築はわずか3分で完了し、グローバルサーバーもすぐに解放されます。無料体験ホットライン：4006552477 15600002121