目次

AMP-specific metadata
- Required <amp-story> attributes
- Recommended <amp-story> attributes
  - poster-landscape-src
  - poster-square-src
Metadata

Make your Web Stories discoverable

Important: this documentation is not applicable to your currently selected format websites!

Ensure your Web Stories are reaching your intended audience by including necessary metadata and markup.

AMP-specific metadata

Web Stories with missing or incorrect AMP-specific metadata may not surface in search engines or third party platforms.

Required <amp-story> attributes

Web Stories must include the following <amp-story> attributes.

<body>
    <amp-story standalone
    title="Web Story Title"
    publisher="Web Story Publisher"
    publisher-logo-src="https://example.com/logo/1x1.png"
    poster-portrait-src="https://example.com/my-story/poster/3x4.jpg">
    ...
    </amp-story-standalone>
</body>

`title`

The title of the Web Story.

`publisher`

The name of the Web Story publisher.

`publisher-logo-src`

A URL to the Web Story publisher's logo image. The logo image should be larger than or equal to 96x96px and maintain a 1:1 aspect ratio. This logo appears in the right corner on the top of the poster image on platforms currently (October 2020) supporting Web Stories.

`poster-portrait-src`

A URL to an image used as the Web Story poster. Used as the cover for the Web Story and should be representative of the story. Do not embed or burn-in the Web Story title on it. Should be at least 640x853px and maintain a 3:4 aspect ratio.

Recommended <amp-story> attributes

`poster-landscape-src`

A URL to an image used as the Web Story poster in landscape format. Used as the cover for the Web Story and should be representative of the story. Do not embed or burn-in the Web Story title on it. Should be at least 853x640px and maintain a 4:3 aspect ratio.

`poster-square-src`

A URL to an image used as the Web Story poster. Used as the cover for the Web Story and should be representative of the story. Do not embed or burn-in the Web Story title on it. Should be at least 640x640px and maintain a 1:1 aspect ratio.

Metadata

Platforms that surface Web Stories rely on metadata to correctly index and display them. Include the following recommended information to give users a delightful Web Story experience.

Include the following recommended HTML markup in your Web Stories for the best user experience.

Canonical link

All Web Stories must include a canonical URL that points to the Web Story itself.

<link rel="canonical" href="https://www.example.com/url/to/Web/Story.html">

favicon

Include a favicon to display as the icon in the browser tab.

Document title

Give your Web Story document a title by including a </a></code> tag.</p> <h2 id="image-alt-text">Image alt-text</h2> <p>Maximize accessibility and indexability by including <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Accessibility_concerns">meaningful alt-text for images</a>.</p> <h2 id="video-subtitles-and-captions">Video subtitles and captions</h2> <p>Maximize accessibility and indexability by including <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">video subtitles and/or captions</a>.</p> <h2 id="page-attachments">Page attachments</h2> <p>Use <a href="https://amp.dev/documentation/components/amp-story-page-attachment/">page attachments</a> to present additional information in “classic article form” alongside your Web Story. This can be useful to provide extra detail, deep dives, or onward journeys for the content presented in your Story.</p> <h2 id="schema.org-metadata">Schema.org metadata</h2> <p>Including <a href="https://schema.org/">schema.org</a> structured data vocabulary defines important information about your Web Story that allows third-party platforms, such as search engines, to display and index them.</p> <p> <div class="ap-m-tip"> <div class="ap-a-ico ap-m-tip-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#speech-bubble"></use></svg> </div> <div class="ap-m-tip-content"> Validate your schema.org data using Google's <a href="https://search.google.com/test/amp">AMP Test</a>. </div> </div></p> <h2 id="ogp-facebook-metadata">OGP Facebook metadata</h2> <p>Including <a href="https://ogp.me/">Open Graph protocol</a> enables Web Stories sharing on Facebook.</p> <h2 id="twitter-card-data">Twitter card data</h2> <p>Including <a href="https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards">Twitter card data</a> allows you to attach photos, videos and media experiences to a Tweet sharing your Web Story.</p> <p> <div class="ap-m-tip"> <div class="ap-a-ico ap-m-tip-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#bookmark"></use></svg> </div> <div class="ap-m-tip-content"> Read more about <a href="https://blog.amp.dev/2020/02/12/seo-for-amp-stories/">SEO for Web Stories in the AMP Blog</a>. </div> </div></p> </section> <section class="ap--content"> <hr> <ul class="ap-o-mini-card-list"> <li class="ap-o-mini-card-list-item"> <div class="ap-m-mini-card"> <amp-img alt="Author avatar" src="https://github.com/CrystalOnScript.png?size=38" width="38" height="38" class="large" style="max-width: 38px" layout="responsive"> </amp-img> <span> <strong>Written by <a href="https://github.com/CrystalOnScript" rel="nofollow" target="_blank"> @CrystalOnScript </a> </strong> </span> </a> </li> </ul> </section> </div> </main> <amp-sidebar id="sidebar-left" class="ap--ampsidebar" layout="nodisplay" side="left"> <nav class="ap--ampsidebar-toolbar" toolbar="(min-width: 768px)" toolbar-target="ap--sidebar-content"> <ul> <div class="ap-m-format-toggle"> <button class="ap-m-format-toggle-selected ap-m-format-toggle-link-websites"> <span class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-websites"></use></svg> </span> <span>websites</span> <span class="ap-a-ico ap-m-format-toggle-angle"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"></use></svg> </span> </button> <div class="ap-m-format-toggle-formats"> <a class="ap-m-format-toggle-link ap-m-format-toggle-link-stories" href="/ja/documentation/guides-and-tutorials/optimize-and-measure/discovery_web_stories/?format=stories"> <span class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-stories"></use></svg> </span> <span>stories</span> </a> <a class="ap-m-format-toggle-link ap-m-format-toggle-link-ads" href="/ja/documentation/guides-and-tutorials/optimize-and-measure/discovery_web_stories/?format=ads"> <span class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-ads"></use></svg> </span> <span>ads</span> </a> <a class="ap-m-format-toggle-link ap-m-format-toggle-link-email" href="/ja/documentation/guides-and-tutorials/optimize-and-measure/discovery_web_stories/?format=email"> <span class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-email"></use></svg> </span> <span>email</span> </a> </div> </div> <div class="ap-o-sidebar-default"> <div class="ap-o-sidebar"> <div class="nav"> <ul class="nav-list level-1"> <li class="nav-item level-1"> <span class="nav-link"> <span>はじめに</span> </span> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"></use></svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/start/create/"> <span>初めての AMP</span> <span class="nav-link-lastword">ページを作成する<svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"></use></svg></span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/start/create/basic_markup/"> AMP HTML ページの作成 </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/start/create/include_image/"> Include an image </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/start/create/presentation_layout/"> 体裁とレイアウトの変更 </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/start/create/prepare_for_discovery/"> ページの検出と配信の準備 </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/start/create/actions_events/"> Actions and events </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/start/create/preview_and_validate/"> Preview and validate </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/start/create/publish/"> Final steps before publishing </a> </li> </ul> </li> <li class="nav-item-tutorial-divider"></li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/start/converting/"> <span>HTML を AMP</span> <span class="nav-link-lastword">に変換する<svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"></use></svg></span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/start/converting/setting-up/"> セットアップ </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/start/converting/building-page/"> 通常の HTML ページの作成 </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/start/converting/resolving-errors/"> 検証エラーの解決 </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/start/converting/discoverable/"> Making your page discoverable </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/start/converting/congratulations/"> お疲れ様でした！ </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/start/add_advanced/"> <span>高度な AMP</span> <span class="nav-link-lastword">機能を追加する<svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"></use></svg></span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/start/add_advanced/setting_up/"> セットアップ </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/start/add_advanced/review_code/"> スターターコードの確認 </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/start/add_advanced/adding_components/"> 拡張 AMP コンポーネントの追加 </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/start/add_advanced/adding_carousels/"> カルーセルの追加 </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/start/add_advanced/tracking_data/"> アナリティクスによるエンゲージメントのトラッキング </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/start/add_advanced/navigating/"> Navigating your site </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/start/add_advanced/fonts/"> フォントの追加 </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/start/add_advanced/congratulations/"> お疲れ様でした！ </a> </li> </ul> </li> </ul> </li> <li class="nav-item level-1"> <span class="nav-link"> <span>学習</span> </span> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"></use></svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/learn/common_attributes/"> 一般的な要素属性 </a> </li> <li class="nav-item level-2"> <span class="nav-link"> <span>AMP HTML の仕様</span> </span> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/learn/spec/amp-html-responsive-attributes/"> AMP HTML Responsive Attributes </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/learn/spec/amp-video-interface/"> Video in AMP </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/learn/spec/amphtml/"> AMP HTML 仕様 </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/learn/spec/amp-boilerplate/"> AMP Boilerplate Code </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/learn/spec/release-schedule/"> AMP のリリーススケジュール </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/learn/experimental/"> 試験運用機能 </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/learn/amp-html-layout/"> <span>AMP's Layout System</span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/learn/amp-html-layout/"> AMPHTML のレイアウトシステム </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/learn/amp-html-layout/layouts_demonstrated/"> Demonstrating AMP layouts </a> </li> </ul> </li> <li class="nav-item level-2"> <span class="nav-link"> <span>検証ワークフロー</span> </span> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/learn/validation-workflow/validate_amp/"> AMP ページの検証 </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/learn/validation-workflow/validation_errors/"> AMP 検証エラー </a> </li> </ul> </li> <li class="nav-item level-2"> <span class="nav-link"> <span>AMP キャッシュと CORS</span> </span> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/learn/amp-caches-and-cors/how_amp_pages_are_cached/"> AMP ページのキャッシュの仕組み </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/learn/amp-caches-and-cors/amp-cache-debugging/"> AMP キャッシュ問題のデバッグ </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/learn/amp-caches-and-cors/amp-cache-urls/"> AMP キャッシュ URL 形式とリクエスト処理 </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/learn/amp-caches-and-cors/amp-cors-requests/"> AMP における CORS </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/learn/combine-amp-pwa/"> AMP と PWA の相互関係 </a> </li> </ul> </li> <li class="nav-item level-1"> <span class="nav-link"> <span>開発</span> </span> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"></use></svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/develop/style_and_layout/"> <span>スタイルとレイアウト</span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/"> サポートされる CSS </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/develop/style_and_layout/control_layout/"> レイアウトとメディアクエリ </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/develop/style_and_layout/placeholders/"> プレースホルダとフォールバック </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/develop/style_and_layout/art_direction/"> srcset、sizes、heights を使ったレスポンシブ画像 </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/develop/style_and_layout/responsive_design/"> レスポンシブな AMP ページを作成する </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/develop/style_and_layout/custom_fonts/"> カスタムフォントの追加 </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/develop/media_iframes_3p/"> <span>Include media, iframes & third-party content</span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/develop/media_iframes_3p/"> 画像や動画を含める </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/develop/media_iframes_3p/third_party_components/"> サードパーティコンテンツを含める </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/develop/interactivity_guide/"> <span>Interactivity</span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/develop/interactivity_guide/foundations/"> Interactivity foundations </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/develop/interactivity_guide/ready_made/"> Ready-made interactivity with AMP components </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/develop/interactivity_guide/personalized_experiences/"> Building personalized interactive experiences </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/develop/interactivity_guide/client_rendering/"> Client-side rendering in AMP </a> </li> </ul> </li> <li class="nav-item level-2"> <span class="nav-link"> <span>アニメーションとトランジション</span> </span> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/develop/animations/triggering_css_animations/"> CSS アニメーションとトランジションのトリガ </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/develop/animations/introduction_to_animations/"> 複雑なアニメーションの基礎 </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/develop/custom-javascript/"> AMP ページでのカスタム JavaScript の使用 </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/develop/monetization/"> <span>広告で AMP ページを収益化する</span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/develop/monetization/content_encryption/"> クライアント側暗号化でサブスクリプションコンテンツを保護する </a> </li> </ul> </li> <li class="nav-item-tutorial-divider"></li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/develop/interactivity/"> <span>インタラクティブな AMP</span> <span class="nav-link-lastword">ページを作成する<svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"></use></svg></span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/develop/interactivity/prereqs-setup/"> セットアップ </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/develop/interactivity/get-familiar/"> スターターコードについて </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/develop/interactivity/advanced-interactivity/"> Improving the interactivity </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/develop/interactivity/remote-data/"> リモートデータとの連携 </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/develop/interactivity/wrapping-up/"> Wrapping up </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/develop/login_requiring/"> <span>Create a login-requiring AMP</span> <span class="nav-link-lastword">page<svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"></use></svg></span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/develop/login_requiring/login/"> Login </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/develop/login_requiring/add_comment/"> コメントの追加 </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/develop/login_requiring/logout/"> Logout </a> </li> <li class="nav-item level-3"> <div class="ap-m-tutorial-progress "></div> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/develop/login_requiring/summary/"> 要約 </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/develop/custom-javascript-tutorial/"> Create a UI widget with custom JavaScript <svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"></use></svg> </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/develop/seatmap/"> シートマップの作成 <svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"></use></svg> </a> </li> </ul> </li> <li class="nav-item level-1"> <span class="nav-link"> <span>統合</span> </span> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"></use></svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/integrate/web-story-player-guide/"> Creating Web Story experiences using the Web Story Player on non-AMP sites </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/integrate/amp-in-pwa/"> AMP を PWA のデータソースとして使用する </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/integrate/amp-to-pwa/"> AMP ページから PWA の事前読み込み </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/integrate/integrate-with-apps/"> AMP とアプリの統合 </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/integrate/embed-stories/"> ウェブページへのストーリーの埋め込み </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/integrate/embed-stories-nonamp/"> Integrate Web Stories in non-AMP pages </a> </li> </ul> </li> <li class="nav-item active level-1"> <span class="nav-link"> <span>最適化と測定</span> </span> <input class="nav-trigger" type="checkbox" checked/> <div class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"></use></svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/optimize-and-measure/publishing_checklist/"> AMP 公開チェックリスト </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/optimize-and-measure/amp-optimizer-guide/"> <span>Using an AMP Optimizer</span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/optimize-and-measure/amp-optimizer-guide/explainer/"> AMP オプティマイザの仕組み </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/optimize-and-measure/amp-optimizer-guide/node-amp-optimizer/"> Node.js AMP オプティマイザガイド </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/optimize-and-measure/configure-analytics/"> <span>アナリティクスを設定する</span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/optimize-and-measure/configure-analytics/analytics-vendors/"> アナリティクスベンダー </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/optimize-and-measure/configure-analytics/analytics_basics/"> アナリティクス: 基本 </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/optimize-and-measure/configure-analytics/use_cases/"> Use cases </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/optimize-and-measure/amp-managing-user-state/"> AMP で非認証ユーザーの状態を管理する </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/optimize-and-measure/signed-exchange/"> Signed Exchange を使った AMP の配信 </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/optimize-and-measure/engagement/"> ユーザーエンゲージメントの向上 </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/optimize-and-measure/optimize_amp/"> ホストされた AMP ページの最適化 </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/optimize-and-measure/secure-pages/"> サードパーティ攻撃からの保護 </a> </li> <li class="nav-item-tutorial-divider"></li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/optimize-and-measure/amp_to_pwa/"> AMP サイトから PWA への変換 <svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"></use></svg> </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/optimize-and-measure/amp-as-pwa/"> AMP ページでプログレッシブウェブアプリ機能を有効にする </a> </li> <li class="nav-item-tutorial-divider"></li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/optimize-and-measure/tracking-engagement/"> AMP ページの基本的なアナリティクスを構成するには <svg class="ap-a-ico nav-type-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tutorial"></use></svg> </a> </li> </ul> </li> <li class="nav-item level-1"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/contribute/"> <span>Contribute</span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"></use></svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/contribute/"> 貢献方法 </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/contribute/contribute-documentation/"> <span>Contribute documentation</span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/contribute/contribute-documentation/documentation-types/"> ドキュメントの種類 </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/contribute/contribute-documentation/terminology/"> AMP 用語 </a> </li> <li class="nav-item level-3"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/contribute/contribute-documentation/formatting/"> 書式設定ガイドとチュートリアル </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/contribute/integrate-your-analytics-tools/"> Integrate your analytics tool with AMP </a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/contribute/vendor-contributions/"> <span>Third party contributions</span> </a> <input class="nav-trigger" type="checkbox"/> <div class="nav-icon"> <svg class="ap-a-ico light"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-light"></use></svg> </div> <ul class="nav-list level-3"> <li class="nav-item level-3"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/contribute/vendor-contributions/release-schedule/"> Release Schedule </a> </li> </ul> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/guides-and-tutorials/contribute/translations/"> 翻訳を追加 </a> </li> </ul> </li> </ul> </div> </div> </div> </ul> </nav> </amp-sidebar> <footer class="ap--footer"> <div class="ap-o-footer"> <div class="ap-o-footer-line-top"> <div class="ap-o-footer-hint">もちろん、このサイトはAMPで作成されています！</div> <div class="ap-o-footer-follow"> <h5 class="ap-o-footer-follow-title">最新情報をチェック</h5> <ul class="ap-o-footer-follow-menu"> <li class="ap-o-footer-follow-item"> <a class="ap-a-ico ap-o-footer-follow-icon" href="https://twitter.com/AMPhtml" rel="noopener" title="Twitter"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter"></use></svg> </a> </li> <li class="ap-o-footer-follow-item"> <a class="ap-a-ico ap-o-footer-follow-icon" href="https://www.youtube.com/channel/UCXPBsjgKKG2HqsKBhWA4uQw" rel="noopener" title="YouTube"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#youtube"></use></svg> </a> </li> <li class="ap-o-footer-follow-item"> <a class="ap-a-ico ap-o-footer-follow-icon" href="https://blog.amp.dev/" rel="noopener"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wordpress" title="WordPress"></use></svg> </a> </li> <li class="ap-o-footer-follow-item"> <a class="ap-a-ico ap-o-footer-follow-icon" href="https://github.com/ampproject" title="GitHub"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#github"></use></svg> </a></li> <li class="ap-o-footer-follow-item"> <a class="ap-a-ico ap-o-footer-follow-icon" href="https://stackoverflow.com/questions/tagged/amp-html" rel="noopener" title="Stackoverflow"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#stackoverflow"></use></svg></a> </li> </ul> </div> </div> <div class="ap-o-footer-nav"> <div class="ap-o-footer-nav-column"> <h5 class="ap-o-footer-nav-title">概要</h5> <ul class="ap-o-footer-nav-menu"> <li class="ap-o-footer-nav-item"><a href="/ja/about/websites/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>AMP フレームワーク</a></li> <li class="ap-o-footer-nav-item"><a href="/ja/about/use-cases/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>使用事例</a></li> <li class="ap-o-footer-nav-item"><a href="/ja/success-stories/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>成功事例</a></li> <li class="ap-o-footer-nav-item"><a href="/ja/about/how-amp-works/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>機能</a></li> </ul> </div> <div class="ap-o-footer-nav-column"> <h5 class="ap-o-footer-nav-title">ドキュメント</h5> <ul class="ap-o-footer-nav-menu"> <li class="ap-o-footer-nav-item"><a href="/ja/documentation/guides-and-tutorials/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>スタートガイド</a></li> <li class="ap-o-footer-nav-item"><a href="/ja/documentation/guides-and-tutorials/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>ガイドとチュートリアル</a></li> <li class="ap-o-footer-nav-item"><a href="/ja/documentation/components/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>コンポーネント</a></li> <li class="ap-o-footer-nav-item"><a href="/ja/documentation/examples/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>実例</a></li> <li class="ap-o-footer-nav-item"><a href="/ja/documentation/templates/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>デザインテンプレート</a></li> <li class="ap-o-footer-nav-item"><a href="/ja/documentation/tools/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>ツール</a></li> </ul> </div> <div class="ap-o-footer-nav-column"> <h5 class="ap-o-footer-nav-title">コミュニティ</h5> <ul class="ap-o-footer-nav-menu"> <li class="ap-o-footer-nav-item"><a href="/ja/support/faq/platform-and-vendor-partners/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>プラットフォームとベンダーパートナー</a></li> <li class="ap-o-footer-nav-item"><a href="/ja/documentation/guides-and-tutorials/contribute/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>貢献</a></li> <li class="ap-o-footer-nav-item"><a href="/ja/community/roadmap/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>ロードマップ</a></li> </ul> <h5 class="ap-o-footer-nav-title">OpenJS Foundation</h5> <ul class="ap-o-footer-nav-menu"> <li class="ap-o-footer-nav-item"><a class="ap-o-footer-nav-link" href="https://openjsf.org" rel="noopener"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>The OpenJS Foundation</a></li> <li class="ap-o-footer-nav-item"><a class="ap-o-footer-nav-link" href="https://bylaws.openjsf.org" rel="noopener"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>OpenJS Foundation Bylaws</a></li> <li class="ap-o-footer-nav-item"><a class="ap-o-footer-nav-link" href="https://trademark-policy.openjsf.org" rel="noopener"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>Trademark Policy</a></li> <li class="ap-o-footer-nav-item"><a class="ap-o-footer-nav-link" href="https://trademark-list.openjsf.org" rel="noopener"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>Trademark List</a></li> </ul> </div> <div class="ap-o-footer-nav-column"> <h5 class="ap-o-footer-nav-title">イベント</h5> <ul class="ap-o-footer-nav-menu"> <li class="ap-o-footer-nav-item"><a href="https://blog.amp.dev/2020/02/20/amp-conf-2020-return-to-nyc/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>AMP Conf 2020</a></li> <li class="ap-o-footer-nav-item"><a href="/ja/events/amp-cs-2019/" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"></use></svg></div>AMP Contributor Summit 2019</a></li> </ul> <h5 class="ap-o-footer-nav-title">AMP のブランド素材</h5> <ul class="ap-o-footer-nav-menu"> <li class="ap-o-footer-nav-item"><a href="/static/files/brand-material/AMP_Mini_Styleguide.pdf" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#download"></use></svg></div>スタイルガイド</a></li> <li class="ap-o-footer-nav-item"><a href="/static/files/brand-material/AMP_Logo_Rebrush.zip" class="ap-o-footer-nav-link"><div class="ap-a-ico ap-o-footer-nav-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#download"></use></svg></div>ロゴ</a></li> </ul> </div> </div> <div class="ap-o-footer-line-bottom"> <div class="ap-o-footer-openjsf"> <amp-img src="/static/img/logo-openjsf.svg" alt="Logo of the OpenJS Foundation" width="315" height="100" layout="responsive"></amp-img> </div> <ul class="ap-o-footer-legal-nav-menu"> <li class="ap-o-footer-legal-nav-item"><a class="ap-o-footer-legal-nav-link" href="https://terms-of-use.openjsf.org" rel="noopener">Terms of Use</a></li> <li class="ap-o-footer-legal-nav-item"><a class="ap-o-footer-legal-nav-link" href="https://privacy-policy.openjsf.org" rel="noopener">プライバシーポリシー</a></li> <li class="ap-o-footer-legal-nav-item"><a class="ap-o-footer-legal-nav-link" href="https://www.linuxfoundation.org/cookies" rel="noopener">Cookie Policy</a></li> </ul> </div> <div class="ap-o-footer-copyright"> © <a href="https://openjsf.org">OpenJS Foundation</a> and AMP Project contributors. All rights reserved. The <a href="https://openjsf.org">OpenJS Foundation</a> has registered trademarks and uses trademarks. For a list of trademarks of the <a href="https://openjsf.org">OpenJS Foundation</a>, please see our <a href="https://trademark-policy.openjsf.org">Trademark Policy</a> and <a href="https://trademark-list.openjsf.org">Trademark List</a>. Trademarks and logos not indicated on the <a href="https://trademark-list.openjsf.org">list of OpenJS Foundation trademarks</a> are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them. <br><br> The services available at <a href="https://cdn.ampproject.org">cdn.ampproject.org</a> are provided by Google and the respective <a href="https://policies.google.com/privacy?hl=en">privacy policy</a> applies. </div> </div> </footer> <aside class="ap-o-translation-hint"> <p class="ap-o-translation-hint-wrapper">Sadly this page isn't translated yet, but will be shortly - check back soon!</p> </aside> <amp-analytics type="gtag" data-credentials="include" data-block-on-consent> <script type="application/json"> {"extraUrlParams": {"cd2": "${ampdocHost}"}, "requests": {"CWV_EVENT": "${base}?v=1\u0026t=event\u0026tid=${gtag_id}\u0026cid=0\u0026ec=cwv", "base": "https://google-analytics.com/collect/"}, "triggers": {"banner": {"on": "click", "selector": "#top-banner", "vars": {"event_action": "click", "event_category": "guides-and-tutorials", "event_label": "banner", "event_name": "banner"}}, "breadcrumbLink": {"on": "click", "selector": ".ap-m-breadcrumbs-crumb", "vars": {"event_action": "link", "event_category": "guides-and-tutorials", "event_label": "breadcrumbs", "event_name": "breadcrumbs"}}, "cls": {"extraUrlParams": {"cls": "${cumulativeLayoutShift}"}, "on": "visible", "request": "CWV_EVENT"}, "defaultPageview": {"on": "visible", "request": "pageview", "vars": {"title": "{{title}}"}}, "fid": {"extraUrlParams": {"fid": "${firstInputDelay}"}, "on": "visible", "request": "CWV_EVENT"}, "formatToggle": {"on": "click", "selector": ".ap-m-format-toggle-link", "vars": {"event_action": "link", "event_category": "guides-and-tutorials", "event_label": "format-toggle", "event_name": "format-toggle"}}, "lcp": {"extraUrlParams": {"lcp": "${largestContentfulPaint}"}, "on": "visible", "request": "CWV_EVENT"}, "navigation": {"on": "click", "selector": ".ap--header a, .ap-o-burger-menu-link", "vars": {"event_action": "link", "event_category": "guides-and-tutorials", "event_label": "navigation", "event_name": "navigation"}}, "scrolledEnd": {"on": "scroll", "scrollSpec": {"verticalBoundaries": [90]}, "vars": {"event_action": "end", "event_category": "guides-and-tutorials", "event_label": "scroll", "event_name": "scroll"}}, "scrolledHalf": {"on": "scroll", "scrollSpec": {"verticalBoundaries": [50]}, "vars": {"event_action": "half", "event_category": "guides-and-tutorials", "event_label": "scroll", "event_name": "scroll"}}, "searchButton": {"on": "click", "selector": "#searchTriggerOpen", "vars": {"event_action": "open", "event_category": "search", "event_label": "search", "event_name": "search"}}, "sidebarLink": {"on": "click", "selector": ".ap-o-sidebar a", "vars": {"event_action": "link", "event_category": "guides-and-tutorials", "event_label": "sidebar", "event_name": "sidebar"}}, "sidebarToggle": {"on": "click", "selector": "label[for=\"sidebar-desktop\"], label[for=\"sidebar\"]", "vars": {"event_action": "toggle", "event_category": "guides-and-tutorials", "event_label": "sidebar", "event_name": "sidebar"}}, "tocLink": {"on": "click", "selector": ".ap-o-toc a", "vars": {"event_action": "link", "event_category": "guides-and-tutorials", "event_label": "toc", "event_name": "toc"}}, "tocToggle": {"on": "click", "selector": ".ap-o-toc label", "vars": {"event_action": "toggle", "event_category": "guides-and-tutorials", "event_label": "toc", "event_name": "toc"}}}, "vars": {"config": {"G-TYM9BH1XCX": {"groups": "default"}}, "gtag_id": "G-TYM9BH1XCX"}} </script> </amp-analytics><amp-geo layout="nodisplay"> <script type="application/json"> { "ISOCountryGroups": { "eu": ["preset-eea"], "doubleOptIn": ["de", "at", "no", "gr", "lu"] } } </script> </amp-geo> <amp-consent id="consent" class="ap-o-consent" layout="nodisplay"> <script type="application/json"> { "consentInstanceId": "consent", "promptUI": "consent-popup", "consentRequired": false, "geoOverride": { "eu": { "consentRequired": true } } } </script> <div id="consent-popup" class="consent-popup"> <button type="reset" class="ap-o-consent-close" on="tap:consent.dismiss" role="button" tabindex="0" aria-label="同意を却下する"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close"></use></svg> </button> <p class="ap-o-consent-text"> We use cookies to understand how you use our site and to improve your experience. By continuing to use our site, you accept our <a href="https://policies.google.com/technologies/cookies">use of cookies</a> and <a href="https://policies.google.com/privacy">privacy policy</a>. </p> <button on="tap:consent.accept" class="ap-a-btn" role="button" aria-label="Cookie の仕様を受け入れる">了解！</button> </div> </amp-consent> <amp-install-serviceworker src="/serviceworker.js" data-iframe-src="https://amp.dev/serviceworker.html" layout="nodisplay"></amp-install-serviceworker> </body> </html>