サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
WWDC24
amp.dev
This site uses cookies from Google to deliver its services and to analyze traffic.
Introduction The amp-script component allows you to run custom JavaScript. Your code runs in a Web Worker, and certain restrictions apply. Setup First, you need to import the amp-script extension. <script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script> For inline scripts, you need to generate a script hash. Use the data-ampdevmode attribute to disa
AMP HTML は、一定のベースラインパフォーマンス特性を保証するようにニュース記事などのコンテンツページを作成するための HTML のサブセットです。 HTML のサブセットであるため、HTML で利用可能なタグと機能のフルセットに制限がありますが、新しいレンダリングエンジンを開発する必要はありません。既存のユーザエージェントは他のすべての HTML と同じように AMP HTML をレンダリングできます。 また、AMP HTML ドキュメントを Web サーバにアップロードして、他の HTML ドキュメントと同じように配信することもできます。サーバ用の特別な構成は必要ありません。しかしながら、それらはまた、オプションで AMP ドキュメントをプロキシする特別な AMP サービングシステムを通して提供されるように設計されています。これらのドキュメントはそれらを自身のオリジンから提供し、
Important: this documentation is not applicable to your currently selected format websites! Completed AMP story. このチュートリアルでは、amp-story コンポーネントを紹介します。このコンポーネントを使用すると、AMP で視覚的な訴求力のあるストーリーを作成できます。このチュートリアルの終了時には、一目で分かる情報とビジュアルでペットの楽しさを読者にアピールする魅力的なストーリーが完成します。 学習する内容: amp-story コンポーネントを使用して、複数のページから構成されるストーリーを作成する 1 つのページで複数のレイヤを使用して視覚効果を作成する レイヤ テンプレートを使用してページ内に要素を配置する ページの閲覧中に再生される音声を追加する ページ上の要素をア
AMP provides speed benefits above and beyond the format through techniques like caching and preloading. These benefits can have downsides like extra URLs being displayed when embeded inside an AMP Viewer. By serving AMP content using signed exchanges, you can use a new web platform feature to overcome all of these. A signed exchange is made up of a valid AMP document and the original URL of the co
AMP is a web component framework to easily create user-first experiences for the web. AMP Websites Easily create websites with a great page experience out-of-the-box using AMP’s ready-to-go web components. Get started All about AMP Websites
皆さま、今年も AMP Conf の季節になってまいりました。年に一回開催される、開発者の開発者による開発者のための AMP の技術祭典を、今年は東京で行います。リッチ アニメーション、動的なコンテンツ、DevOps やマネタイゼーションなど、Web における良質なユーザー体験を実現するためのすべてを、一緒に見ていきましょう。皆さまにお会いできるのを心より楽しみにしています。 1日目からすべてのエキサイティングなニュースを発見 東京に行くことはできませんでしたが、それでもAMPの周りで起こっているすべての刺激的なことについて知りたいですか？ 1日目のハイライトをチェックして、AMPチームがクレーケンを解き放つのを見てください。
サイドバーの切り替え サイドバーの切り替え The AMP Component Catalogue The AMP HTML library consists of a basic runtime that brings the core functionalities of AMP to your page. If you want to add additional features you can do so by using one or more of the ready-to-use AMP components. They are classified as: Built-in Components that are included in the base library, such as amp-img and amp-pixel. Extended Extensions
AMP の仕組み AMP ページが非常に高速で、瞬時に読み込まれるように見えるのは、次の最適化を組み合わせていることが理由です。理由は全部で7つだけですが、それでも読みきれない場合はこの説明動画をご覧ください。 すべての AMP JavaScript を非同期に実行 JavaScript は強力で、ページのほぼすべての要素を変更することができますが、DOM の構築をブロックしたりページのレンダリングを遅延したりする場合もあります（「JavaScript を使用してインタラクティブにする」もご覧ください）。JavaScript によってページのレンダリングが遅延しないよう、AMP は非同期の JavaScript のみを許可しています。 AMP コンポーネントは内部的に JavaScript を使用している場合がありますが、パフォーマンスが低下しないように慎重に設計されています。 独自の J
<amp-story-grid-layer template="vertical"> <amp-img src="moons.jpg" width="266" height="340" layout="responsive"> </amp-img> </amp-story-grid-layer> visual storytelling for the open web Web Stories immerse your readers in fast-loading full-screen experiences. Easily create visual narratives, with engaging animations and tappable interactions. The Web Story format (formerly known as AMP Stories) is
まずは以下のマークアップから見ていきましょう。これは、今後のボイラープレートとしても利用できます。 これをコピーし、.html 拡張子のファイルとして保存してください。 <!doctype html> <html amp lang="en"> <head> <meta charset="utf-8"> <script async src="https://cdn.ampproject.org/v0.js"></script> <title>Hello, AMPs</title> <link rel="canonical" href="https://amp.dev/ja/documentation/guides-and-tutorials/start/create/basic_markup/"> <meta name="viewport" content="width=device-wid
Here you can find everything you need to build AMP experiences. The sidebar on the left shows you all resources for building AMP websites. AMP's development workflow Start Building a 'Hello World' page and try adding your first interactive feature to an AMP page.
Watch the intro to combining AMP and PWA. Progressive Web Apps and AMP pages work great together. In fact, in many cases, they complement each other in one way or another. Learn how to: Enable PWA features for your AMP pages Create a compelling, super-fast user journey from AMP to PWA Simplify your PWA by using the power of AMP AMP pages with PWA features AMP Pages can use many PWA features on the
AMP ページを初めて作成する方は、このチュートリアルをご覧ください。ここでは基本的な AMP HTML ページを作成し、それをステージングして AMP 仕様に準拠しているかを検証する方法、そして最終的にページを公開して配信するまでの準備について説明します。
How to build AMP without knowing how to code? Easily build user first websites with our templates Get started quickly with a ready-made design. Templates designed to work with all devices - mobile, tablet and desktop.
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script> Usage The amp-bind component enables custom stateful interactivity on AMP pages. For performance, and to avoid the risk of unexpected content jumping, amp-bind does not evaluate expressions on page load. This means visual elements should be given a default state and not rely on amp-bind for initia
Supported Platforms, Vendors and Partners A growing number of platforms, vendors, and partners support the AMP Project by providing custom components or offering integration with AMP pages within their platforms.
The AMP team and community brought their yearly gathering to Tokyo for two days full of talks by developers for developers, all crafted to help you create a best-in-class user experience. Whether you're interested in rich animations, dynamic content, DevOps or monetization, we got you covered. Discover all exciting news from Day 1 You couldn't make it to Tokyo but still want to know about all the
Introduction The amp-social-share component provides a common interface for share buttons, styled to complement each other. Setup Import the amp-social-share component in the header. <script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>
最新ニュース AMP 関連の重要な最新情報を見逃したくないですか？それなら、今すぐにニュースレターをご購読ください！
The ongoing development of AMP is conducted in working groups, each with knowledge or interest in a specific area of AMP. To make their work visible to the community all groups provide regular status updates with details of what they have accomplished and what's up next. All of the updates listed here are available as issues on GitHub and we'd love you to join the conversation there!
AMP HTML is a subset of HTML for authoring content pages such as news articles in a way that guarantees certain baseline performance characteristics. Being a subset of HTML, it puts some restrictions on the full set of tags and functionality available through HTML but it does not require the development of new rendering engines: existing user agents can render AMP HTML just like all other HTML. If
Components Create every content, layout and feature on your website with an AMP component.
<!doctype html> <html amp lang="en"> <head> <meta charset="utf-8"> <script async src="https://cdn.ampproject.org/v0.js"></script> <title>Hello, AMPs</title> <link rel="canonical" href="https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style amp-boilerplate>body{-webkit-animation:-amp-
How AMP works The following optimizations combined are the reason AMP pages are so fast they appear to load instantly. There are 7 reasons in total - but if that’s still too much to read, simply watch the explainer video: Execute all AMP JavaScript asynchronously JavaScript is powerful, it can modify just about every aspect of the page, but it can also block DOM construction and delay page renderi
In this tutorial, we’ll introduce you to the basics of an AMP page. Follow these steps to get started learning how AMP is unique, checking if a page is valid, and taking next steps to publishing it to the web. AMP pages that pass validation enable caching and are more likely to meet Page Experience metrics! If you are uninterested in AMP cache benefits or unable to switch to fully valid AMP but st
このページを最初にブックマークしてみませんか？
『AMP - a web component framework to easily create user-first web experiences』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
