Setting up
必要な準備
このチュートリアルを始める前に、次のものが必要となります。
- HTML、CSS、JavaScript の基本的な知識
- AMP の中心となる概念についての基本的な理解（「HTML を AMP に変換する」チュートリアルをご覧ください）
- お好みのブラウザ
- 任意のテキスト エディタ
開発環境を設定する
ステップ 1. コードをダウンロードする
-
チュートリアルのコードを次の URL からダウンロードします（コードは zip ファイルとして圧縮されています）: /static/files/tutorials/amp-pets-story.zip
-
zip ファイルのコンテンツを抽出します。amp-pets-story ディレクトリには、ストーリーの作成に使用する画像、動画、音声、データファイルがあります。pets.html ファイルをたたき台として、ストーリーを作成します。ストーリーの完成版は pets-completed.html ファイルにあります。
ステップ 2. サンプルページを実行する
サンプルのストーリーをテストするには、ウェブサーバーからファイルにアクセスできるようにしてください。テスト用に一時的なローカル ウェブサーバーを作成するには、さまざまな方法があります。次のような選択肢がありますので、最適なものを選んでください。
ローカル ウェブサーバーを設定したら、このチュートリアルの最後に次の URL にアクセスして、完成したストーリーがどのように表示されるかご確認ください:
http://localhost:8000/pets-completed.html
URL は必ず
localhost から提供されるようにしてください。そうでない場合、AMP ストーリーが正しく読み込まれず、次のようなエラーが発生する可能性があります: "source" "must start with "https://" or "//" or be relative and served from either https or from localhost. クリックしながら完成したストーリー全体を見返し、このコンポーネントの仕組みを把握するようにしてください。
-