通常の HTML ページを作成する
プロジェクト ディレクトリには、article.html というファイルが保存されています。このファイルは、これから作成しようとしている AMP ページの元になるニュース記事です。
article.htmlファイルに記述されているすべてのコードをコピーして、新しいファイルに貼り付けます。- 新しいファイルを
article.amp.htmlとして保存します。
AMP ファイルの名前は、必ずしも .amp.html とする必要はありません。AMP ファイルには任意の拡張子を設定できます。AMP ページを正規バージョンと区別する方法としては、URL にパラメータを追加するのが一般的です。たとえば、http://publisher.com/article.html?amp のようにします。
article.amp.html ファイルは、次のような内容になっているはずです。
<!doctype html> <html lang="en"> <head> <title>News Article</title> <link href="base.css" rel="stylesheet" /> <script type="text/javascript" src="base.js"></script> </head> <body> <header> News Site </header> <article> <h1>Article Name</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p> </article> <img src="mountains.jpg"> </body> </html>
ページの内容は、静的なニュース記事で一般的な要素（CSS、JavaScript、画像タグ）を使用しつつ、意図的にシンプルにしています。
現段階では、AMP バージョンの記事は元の記事の単なるコピーにすぎません。これを正式な AMP に変換してみましょう。
まず、AMP ライブラリ ファイルを追加します。これだけで新しいファイルを有効な AMP ページに変換できるわけではありませんが、以降で見ていくように、AMP ライブラリを使用すると修正が必要な箇所を簡単に特定できるようになります。
AMP ライブラリを追加するには、<head> タグの末尾に次の行を追加します。
<script async src="https://cdn.ampproject.org/v0.js"></script>
http://localhost:8000/article.amp.html にある新しい article.amp.html ページをブラウザで読み込み、Chrome（または任意のブラウザ）でデベロッパー コンソールを開きます。
デベロッパー コンソールの [Console] タブで JavaScript の出力を確認すると、次のログエントリが確認できるはずです。
Powered by AMP ⚡ HTML
AMP ライブラリに含まれる AMP 検証ツールを使用すると、有効な AMP ドキュメントへの変換が行われない原因となっている箇所を確認できます。AMP 検証ツールを有効にするため、次のフラグメント識別子をドキュメント URL に追加します。
#development=1
例:
http://localhost:8000/article.amp.html#development=1
次のような複数の検証エラーがデベロッパー コンソールに表示されるはずです（ブラウザでページを手動更新することが必要な場合もあります）。
ページを有効な AMP ドキュメントに変換するには、これらのエラーをすべて修正する必要があります。この Codelab では、この修正作業を行っていきます。
ただしその前に、ブラウザのデベロッパー ツールを使用して、実際にモバイル向けニュース記事が表示されるモバイル端末での動作をシミュレートしてみましょう。たとえば、Chrome デベロッパー ツールでモバイル端末アイコンをクリックし、メニューからモバイル端末を選択します。
次のように、シミュレートされたモバイル端末の解像度で記事が表示されます。
これで、修正作業を行う準備が整いました。検証エラーを 1 つずつ見ていきながら、AMP との関連性を確認していきましょう。