AMP

書式設定ガイドとチュートリアル

ガイドとチュートリアルは、追加の Frontmatter とショートコードの書式設定とともに Markdown に提出します。

ドキュメントの場所

amp.dev のコンテンツは 、amp.devAMPHTML の 2 つのレポジトリから pull されます。components の下のすべてのリファレンスドキュメントは、AMPHTML の builtins または extensions から pull されます。

ほかにも、AMPHTML から amp.dev にインポートされるドキュメントがいくつかあります。これらは、このファイルにリストされています。これらの amp.dev 内のドキュメントを更新しないでください。変更内容は、以降のビルドで上書きされます!

Frontmatter

Frontmatter は、各ガイドとチュートリアルの最上位にあります。

次に例を示します。

$title: Include Custom JavaScript in AMP Pages
$order: 7
formats:
  - websites
author: CrystalOnScript
contributors:
  - fstanis
description: For web experiences requiring a high amount of customization AMP has created amp-script, a component that allows the use of arbitrary JavaScript on your AMP page without affecting the page's overall performance.
$title 目次に表示されるドキュメントの題名です。“AMP” やその他の固有名詞以外は、最初の単語の先頭の英字を大文字にします。単語の and の代わりにアンパサンド記号の & を使用してください。
$order 目次のどこにドキュメントが表示されるかを定義します。正しい位置に表示されるように、ほかのドキュメントで $order を編集する必要がある場合があります。
formats ドキュメントに関連する AMP エクスペリエンスをリストします。ドキュメントが AMP ウェブサイトと AMP ストーリーに関連しており、AMP 広告や AMP メールに関連していない場合は、Frontmatter を yaml formats: - websites - stories のようにします。
author 作成者はあなたです!あなたの GitHub ユーザー名を使用してください。
contributors ドキュメントに貢献した人をリストします。このフィールドはオプションです。
description ガイドまたはチュートリアルに関する簡単な説明文を記述します。この内容をもとに検索エンジンが最適化され、ドキュメントを必要とする人に届けられます!
tutorial ウェブサイトの Frontmatter に tutorial: true を追加すると、チュートリアルアイコンがウェブサイトの隣に追加されます。チュートリアルのセクションは目次の下部にあります。

ショートコード

ショートコードとその使用方法のリストについては、GitHub の documentation.md を参照してください。

画像

amp.dev は AMP で作られています!そのため、画像は amp-img 基準に一致していなければなりません。ビルドプロセスでは、以下の構文により、画像を適切な amp-img 形式に変換しています。

Image of basic amp script tutorial starter app

セクションのフィルタリング

ドキュメントには、複数の AMP 形式に関連性のあるものもあれば、ほかの形式には関連性のない説明や情報がさらに必要なものもあります。こういったセクションについては、以下のショートコードで囲むことでフィルタリングすることができます。

[filter formats="websites"]
This is only visible for [websites](?format=websites).
[/filter]

[filter formats="websites"]
This is only visible for [websites](?format=websites).
[/filter]

[filter formats="websites, email"]
This is visible for [websites](?format=websites) & [email](?format=email).
[/filter]

[filter formats="stories"]
This is visible for [stories](?format=stories).
[/filter]

ヒント

以下のショートコードでテキストを囲むことで、ヒントとコールアウトを追加できます。

[tip type="default"]
Default tip
[/tip]

[tip type="important"]
Important
[/tip]

[tip type="note"]
Note
[/tip]

[tip type="read-on"]
Read-on
[/tip]

コードスニペット

コードスニペットは、3 連バックティックの間に配置し、言語を最初の 3 連バックティックセットの最後に指定します。

```html
  // code sample

wzxhzdk:1



wzxhzdk:2



警告: インラインサンプルは、ページに直接埋め込まれるため、ページ上ですでにコンポーネントが使用されている場合(`amp-consent` など)に競合が発生する可能性があります。

### トップフレームプレビュー

ヘッダー要素を指定したり、グローバルスタイルを `
    
    
      

Hello AMP

``` [/example]
これは次のように表示されます。 [example preview="top-frame" playground="true"] wzxhzdk:3
このスニペットを Playground で開く
### AMP ストーリー AMP ストーリーのプレビューには、`preview="top-frame"` と `orientation="portrait"` を合わせて使用します。
```html

Hello World

This is the cover page of this story.

First Page

This is the first page of this story.

``` [/example]
これは次のように表示されます。 [example preview="top-frame" orientation="portrait" playground="true"] wzxhzdk:4
このスニペットを Playground で開く
### AMP メールの絶対 URL AMP メールに を埋め込む場合に、それをどのように使用してエンドポイント URL を絶対 URL にしているか、注意してください。
```html
``` [/example]
これは次のように表示されます。 [example preview="top-frame" playground="true"] wzxhzdk:5
このスニペットを Playground で開く
### mustache テンプレートのエスケープ処理 以下は、リモートエンドポイントを使用した `top-frame` サンプルです。Mustache テンプレートは、 を使用して、サンプルでエスケープ処理する必要があります。
```html ``` [/example]
これは次のように表示されます。 [example preview="top-frame" playground="true" imports="amp-list:0.1" template="amp-mustache:0.2"] wzxhzdk:6
このスニペットを Playground で開く
## リンク 標準的なマークダウンのリンク構文を使って、ほかのページにリンクすることができます。 wzxhzdk:7 amp.dev の別のページにリンクする場合、参照はそのターゲットファイルへの相対ファイルパスになります。 ### アンカー ドキュメント内の特定のセクションへのリンクには、アンカーを使用します。 wzxhzdk:8 アンカーがないセクションにリンクする前に、`