この記事は Sebastian Benz による The AMP Blog の記事 "Introducing the Eleventy AMP Plugin" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。




新しく登場した Eleventy 向けの AMP プラグインを紹介します。静的サイト生成ツールである Eleventy を使うと、テンプレートを簡単に管理してサイトを構築できます。静的サイトをインタラクティブにしたり、サードパーティのコンテンツを埋め込んだりしたい場合は、AMP と合わせて利用すると非常に便利です。新しく登場した AMP Eleventy プラグインを使えば、AMP ボイラープレートの設定や AMP コンポーネントのインポートに煩わされることなく、はるかに簡単にテンプレート内の AMP コンポーネントを使うことができます。

その中核となる AMP は、ウェブ コンポーネント フレームワークです。AMP のコンポーネントはパフォーマンスとアクセシビリティを考慮して設計されており、実にさまざまな状況で活用できます。このプラグインは、AMP を単なるコンポーネント ライブラリとして使用する方法を示す好例です。たとえば、このプラグインでは AMP Cache 配信をオプトアウトしたり、AMP ランタイムをセルフホストしたりするオプションが提供されます。そのため、ページをどこからどのように提供するかを完全に制御できます。以降では、プラグインの詳細と使い方について説明します。

AMP と Eleventy を組み合わせることが望ましいケース

テキストとイメージだけの簡単なブログを公開する場合なら、AMP を使う必要はありません。実際、そのような場合はプレーン HTML と CSS を使う方がはるかに合理的です。
AMP を使う方が合理的なのは、車輪の再発明をすることなくサイトでもっと高度な機能を使いたい場合です。
次に、イメージ カルーセルの例を示します。このカルーセルは読み込み時にフェードインし、ライトボックス モードも搭載されています。この例では、マークダウン ファイルで直接 AMP コンポーネントを使いました。AMP コンポーネントはすぐに使うことができます。必要な AMP コンポーネント スクリプトをインポートして AMP ドキュメントを設定する作業は、すべて AMP Eleventy プラグインが行ってくれます。

# Hello AMPHTML World

<amp-carousel lightbox amp-fx="fade-in" layout='responsive' width='600' height='400' type='slides'>
  <amp-img src='https://picsum.photos/id/1015/600/400' layout='fill'></amp-img>
  <amp-img src='https://picsum.photos/id/1016/600/400' layout='fill'></amp-img>
  <amp-img src='https://picsum.photos/id/1018/600/400' layout='fill'></amp-img>
</amp-carousel>




フェードとライトボックスを組み込んだ AMP カルーセルの例

AMP のもう 1 つのメリットは、最適化された豊富なサードパーティ統合がそろっていることです。その一部は、shortcodes を使って直接 AMP Eleventy プラグインに組み込まれています。

Checkout this video:
{% video "my-video.mp4" %}
Or this tweet (the number specifies the embed height):
{% twitter "1182321926473162752" 472 %}
Here is a Youtube video:
{% youtube "v0BVLgEEuMY" %}
And of course Instagram:
{% instagram "BMQ8i4lBTlb" %}
このプラグインには、デフォルトでウェブ パフォーマンスのベスト プラクティスも適用されています。AMP Optimizer が統合され、eleventy-img を使って自動的にイメージが最適化されます。つまり、すぐに最大限の AMP パフォーマンスを利用できます。
ただし、AMP の使用について注意すべき点が 1 つあります。AMP のパフォーマンスが保証されるのは、ページで AMP だけが使われている場合に限られます。たとえば、AMP ランタイムがページ読み込み時のコンテンツの移動を抑止できるのは、ページのすべての要素の高さを前もって計算できる場合に限ります。ページ内に AMP コンポーネントや amp-script がサポートしない機能が必要になる場合は、別のテクノロジーを使う方がよいでしょう。ただし、将来的にこのようなユースケースをサポートするため、AMP コンポーネントをスタンドアロン コンポーネントとして利用できるようにする作業も進めています。

スタートガイド

この機能を使ってみるには、NPM から AMP Eleventy プラグインをインストールします。

$ mkdir eleventy-amp-demo
$ cd eleventy-amp-demo
$ npm init --yes
$ npm install @ampproject/eleventy-plugin-amp --save-dev
次に、Eleventy 設定の .eleventy.js にプラグインを追加します。

const ampPlugin = require('@ampproject/eleventy-plugin-amp');
module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin(ampPlugin);
};
そしていよいよ、コンテンツの作成を始めます。

$ echo '# Hello World

![image](https://unsplash.it/500/400)

{% twitter "1182321926473162752"  472 %}' > index.md
ローカルでサイトを利用するには、Eleventy をインストールして実行する必要があります。

$ npm install -g @11ty/eleventy
$ eleventy --serve
すると、http://localhost:8080 から新しく作成した有効な AMP サイトを確認できます。

オフキャッシュ AMP とランタイムのセルフホスト

AMP Cache は一切使わず、AMP を単なる UI コンポーネント ライブラリとして使うことができます。これを実現するために、2 つの（オプション）機能が組み込まれています。
  1. AMP Cache のオプトアウト: ページが AMP Cache から提供されるのを防ぎます（たとえば、Google 検索や Bing に表示される場合）。サイトを別の AMP Cache オリジンから提供したくない場合は、これが合理的です。この機能を使うと、<html> タグから稲妻マークが削除され、AMP Cache がページを提供しなくなります。 
  2. ランタイムのセルフホスト: AMP は継続的に改善されています。自動的に最新機能を取得するには、cdn.ampproject.org から AMP のランタイムやコンポーネント スクリプトを読み込むのがベストです。しかし、どの AMP バージョンを使うかを細かく制御したい場合は、AMP ランタイムを自分でホストすることもできます。AMP Eleventy プラグインには、AMP Toolbox の新しい fetch-runtime モジュールが組み込まれています。このモジュールは、サイトのビルドの一環として AMP ランタイムをダウンロードします。こうすることで、パフォーマンスのメリットが増加します。最初のレンダリングで、cdn.ampproject.org への 2 つ目の HTTP 接続のセットアップが必要なくなるからです。
以上の機能は、次のオプションで有効化できます。

eleventyConfig.addPlugin(pluginAmp, {
    ampCache: false, 
    downloadAmpRuntime: true,
    ampRuntimeHost:
      process.env.ENV === 'prod' ? 'https://your-domain.com' : 'http://localhost:8080',
 });
package.json ビルド スクリプトで忘れずに環境変数を設定してください。

"scripts": {
    "build": "ENV=prod eleventy",
    "watch": "eleventy --watch",
    "serve": "eleventy --serve"
  }

AMP ページのさらなる高速化に向けて

AMP チームは、AMP のパフォーマンスの改善作業を続けています。Eleventy プラグインを使うと、今後予定されているさまざまな機能をすぐに試すことができます。
これらの機能を有効化するには、設定に次のオプションを追加します。

eleventyConfig.addPlugin(pluginAmp, {
    ampCache: false,
    downloadAmpRuntime: true,
    ampRuntimeHost:
      process.env.ENV === 'prod' ? 'https://your-domain.com' : 'http://localhost:8080',
    experimentEsm: true,
    experimentImg: true,
    validation: false,
    imageOptimization: {
      urlPath: '/img/',
    },
  });
注意点として、これらはまだ AMP Validator でサポートされていません。つまり、この AMP ページは AMP Cache で提供できる有効なものではありません。しかし、オリジン上では AMP の最高のパフォーマンスを発揮できます。

まとめ

ぜひお試しいただき、感想をお聞かせください！Eleventy AMP プラグインを使うと、AMP を使ってすばやく簡単に新しいウェブサイトを作成できます。さらに簡単に試せるように、すぐに使える AMP ブログ スターター テンプレートも用意しています。
投稿者: Google デベロッパー アドボケート、Sebastian Benz

Reviewed by Chiko Shimizu - Developer Relations Team