この記事は Bento エンジニアリング、Alan Orozco による The AMP Blog の記事 "Introducing Bento" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。

AMP コミュニティから特に多く寄せられている要望の 1 つは、AMP の高パフォーマンスなコンポーネントを AMP 以外のページでも利用できるようにすることです。この度、Bento コンポーネントの第 1 ラウンドが完全リリースされたことをお知らせします。Bento コンポーネントは、高パフォーマンス、高ユーザー エクスペリエンスのコンポーネントで、ウェブ デベロッパーがページに機能を追加して優れたユーザー エクスペリエンスを実現する際に、直面する現実的な問題を解消できるようになっています。ぜひ試してみて、フィードバックをお送りください。Bento の詳細は、新しい Bento ブログで確認できます。

あらゆる場所で AMP コンポーネントを使う

AMP Project の目的は、常にユーザーファーストな体験を作れるようにデベロッパーをサポートすることです。この価値提案の中核にあるのは、高パフォーマンスでユーザー中心の AMP コンポーネントです。そこに Bento が加わり、これまで AMP でしか使えなかった高パフォーマンスな Web Component をお気に入りのフレームワークや CMS で使えるようになります。

たとえば、非 AMP ページにカルーセルを追加するなど、1 度限りのケースに Bento コンポーネントを使うことができます。また、AMP に注目し、徐々にページを有効な AMP に変換しようと考えているデベロッパーにも便利です。 

Bento と AMP の今後の方向性 

AMP は今後も、すぐに使えるソリューションをウェブサイトに提供し、ウェブページで優れたユーザー エクスペリエンスを実現し続けます。また、AMP Project では、AMP 形式のサポートと強化を継続します。同時に、ウェブサイトのパブリッシャーには、AMP と互換性のないサイトで機能を使いたいというニーズもあることも理解しています。そういったパブリッシャーは、サイトで Bento コンポーネントを使い、他の機能に妥協することなく、具体的な UX の課題に対処できるようになります。 

私たちが思い描いているのは、パブリッシャーが自由に AMP を活用して優れたユーザー エクスペリエンスを実現したり、Bento を使って個々のパフォーマンスの問題に対処したり、AMP や Bento の助けを借りることなくページ エクスペリエンスの目標を達成したりできる未来です。 

今すぐ Bento をお試しください！

Bento コンポーネントを試してみたい方は、スタートガイドをご覧ください。チームは、GitHub や Slack チャンネルからフィードバックを送ることを推奨しています。フィードバックは大歓迎です。ぜひご協力ください。質問や問題がある方も、遠慮なくご連絡ください。

Reviewed by Eiji Kitamura - Developer Relations Team

この記事は Naina Raisinghani による The AMP Blog の記事 "Use AMP Components everywhere – Announcing Bento Developer Preview" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。


AMP コミュニティから特に多く寄せられている要望の 1 つは、高パフォーマンスな AMP コンポーネントを AMP 以外のページでも利用できるようにすることです。AMP Project はこの要望に対処するため、2 年にわたって Bento AMP と呼ばれる取り組みを懸命に進めてきました。その具体的な目的は、完全な AMP ランタイムを使わなくても、AMP コンポーネントがもたらすパフォーマンスとユーザー エクスペリエンスのメリットを活用できるようにすることです。今日のデベロッパー プレビューのリリースにより、その実現に向けて 1 歩前進したことをお知らせします。Bento コンポーネントを試してみたい方は、スタートガイドをご覧ください。

あらゆる場所で AMP コンポーネントを使う理由

AMP Project の目的は、常にユーザー ファーストな体験を作れるようにデベロッパーをサポートすることにあります。この価値提案の中核にあるのは、高パフォーマンスでユーザー中心の AMP コンポーネントです。今回、Bento AMP によって、必要な場所で AMP コンポーネントを使えるようになります。お気に入りのフレームワークや CMS と AMP コンポーネントを組み合わせることができるのです。

たとえば、カルーセルを AMP 以外のページに追加する、有効な AMP を作成する過程で AMP コンポーネントをテストするなど、1 回限りのケースで Bento コンポーネントを使うことができます。Bento AMP プロジェクトの最新の進捗状況は、GitHub のワーキング グループで確認できます。または、AMP の次の展開をご覧ください。

デベロッパー プレビュー

現在のリリースは、いくつかのスタンドアロン AMP コンポーネントのデベロッパー プレビューです。その目的は、今回の実装の技術的な成否に関するフィードバックを集めることです。現在の Bento AMP コンポーネントにはまだ AMP ランタイムが必要ですが、コンポーネントはページが「有効な AMP」でなくても動作します。つまり、ページにスタンドアロン AMP コンポーネントをインポートし、必要に応じて他のカスタム JavaScript と連携できます。

Bento AMP コンポーネントを試す

始めるにあたっては、まずこちらのガイドをお読みください。今回のデベロッパー プレビューの期間中は、以下の Bento コンポーネントを試験運用版として利用できます。

• amp-accordion
• amp-base-carousel
• amp-inline-gallery
• amp-stream-gallery
• amp-date-countdown
• amp-date-display
• amp-fit-text
• amp-instagram
• amp-lightbox
• amp-selector
• amp-social-share
• amp-timeago
• amp-youtube
• amp-video

なお、これはデベロッパー プレビューなので、AMP ページで Bento コンポーネントを利用すると、ページは有効でなくなります。この点は、正式版をリリースする際には対応したいと考えています。デベロッパーの皆さんからフィードバックを集めるため、これら最初の Bento AMP コンポーネントを提供できるのはうれしいことですが、Bento コンポーネントのデベロッパー プレビュー期間中に AMP エクスペリエンスをデプロイする場合は、最新の本番バージョンの AMP コンポーネントを使って有効な AMP ページを作成することをお勧めします。

Bento の未来

将来的には、完全版をリリースして Bento コンポーネントをすべての HTML ドキュメントで利用できるようにする予定です。それにより、高パフォーマンスなコンポーネントを使ってすばらしいページ エクスペリエンスを作成できるようになります。そのための変更は今年中に行う予定なので、ご期待ください。

その次は、React バージョンの Bento コンポーネントを npm パッケージとして公開することも計画しています。これにより、React アプリが Bento AMP コンポーネントをさらに簡単に使えるようになります。

今すぐ Bento をお試しください！

Bento AMP コンポーネントを試してみたい方は、スタートガイドをご覧ください。AMP チームは、GitHub や Slack チャンネルからフィードバックを送ることを推奨しています。フィードバックは大歓迎です。ぜひご協力ください。質問や問題がある方も、遠慮なくご連絡ください。

投稿者 : Naina Raisinghani（AMP Project、プロダクト マネージャー）

Reviewed by Chiko Shimizu - Developer Relations team