AMP

セットアップ

前提条件

このチュートリアルを始める前に、次のものが必要となります。

  • HTML、CSS、JavaScript の基本的な知識
  • AMP の中心的な概念についての基本的な理解(「HTML から AMP への変換」チュートリアルをご覧ください)
  • JavaScript コンソールを確認できる任意のブラウザ
  • 任意のテキストエディタ

開発環境のセットアップ

ステップ 1. コードをダウンロードする

チュートリアルのサンプルコードを ZIP ファイルとして、または git コマンドを使ってダウンロードします。

git clone https://github.com/googlecodelabs/accelerated-mobile-pages-advanced.git

ダウンロードしたアーカイブファイルを解凍し(必要な場合)、コンピュータのコマンドラインを使ってプロジェクトディレクトリに移動します。

cd accelerated-mobile-pages-advanced

このプロジェクトディレクトリには、複数のサンプルリソースファイルと、開始ページの article.amp.html が含まれています。

ステップ 2. サンプルページを実行する

サンプルの AMP ページをテストするには、ウェブサーバーからファイルにアクセスする必要があります。テストを目的として一時的なローカルウェブサーバーを作成するには、複数の方法があります。次のような選択肢がありますので、最適なものを選んでください。

注意: 本番環境では HTTPS を使用することを強くお勧めします。HTTPS には SEO など、セキュリティ以外のメリットもあります。このトピックについては、こちらの Google ウェブマスター向け公式ブログの投稿をご覧ください。

ローカルウェブサーバーをセットアップしたら、ブラウザでこちらの URL からサンプルの記事にアクセスします。

http://localhost:8000/article.amp.html