AMP がフォームをサポート
2016年11月8日火曜日
[この記事は Rudy Galfi、Product Manager, AMP Project による ACCELERATED MOBILE PAGES PROJECT の記事 "Forms now supported in AMP" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。]
AMP HTML でフォームがサポートされるようになりました。「amp-form」拡張機能を使用すると、<form> 要素と <input> などの関連要素を使って AMP ドキュメント内にフォームを作れるようになります。これによって、e コマースの詳細ページで製品の色を選択したり、ニュースレターを購読するためのメール フィールドを用意したり、読者を引き付けるために記事の中でインタラクティブな投票を行ったりできるようになります。
通常のナビゲーションと XHR（XMLHttpRequest、別名 Ajax）フォーム送信の両方がサポートされますが、実装要件の詳細はドキュメントをご覧ください。また、amp-form はフォームへの入力操作を改善する機能も提供しています。
テンプレートによるレスポンスのレンダリングの例。フォームが送信されると（このケースでは、エラーを含む値が送信されています）、わかりやすいメッセージでレスポンスを返すことができます。
AMP フォームの使用を開始する際は、ドキュメントと AMP By Example の例を参照してください。
近日中にフォームの機能を拡張する予定なので、この便利な追加機能について皆様の意見をお聞かせください。機能拡張の例として、カスタム検証があげられます。カスタム検証は、現在、試験運用版として利用できます（「amp-form-custom-validations」）。AMP ロードマップには、検証機能のサポート強化や条件付き動作といった拡張機能も掲載されていますが、これはほんの一部にすぎません。
この最初のフォーム サポートを活用したすばらしい体験をデベロッパーの皆様に作成していただけることを楽しみにしています。
Posted by Yoshifumi Yamaguchi - Developer Relations Team
AMP HTML でフォームがサポートされるようになりました。「amp-form」拡張機能を使用すると、<form> 要素と <input> などの関連要素を使って AMP ドキュメント内にフォームを作れるようになります。これによって、e コマースの詳細ページで製品の色を選択したり、ニュースレターを購読するためのメール フィールドを用意したり、読者を引き付けるために記事の中でインタラクティブな投票を行ったりできるようになります。
通常のナビゲーションと XHR（XMLHttpRequest、別名 Ajax）フォーム送信の両方がサポートされますが、実装要件の詳細はドキュメントをご覧ください。また、amp-form はフォームへの入力操作を改善する機能も提供しています。
- 「on」属性を使ってフォームを送信したときにページを変更したり、フォームの送信が成功したかエラーになったかに応じてページを変更したりできます。
- 送信の際に、テンプレートによるレスポンスをレンダリングして、フィールドにコメントを表示することができます。この機能を使うと、フィールドに入力された内容が適切でない場合に、状況に応じたフィードバックを行うことができます。
- 検証ステータスに応じたフィールドのスタイルを CSS 疑似クラスで設定すると、ユーザーに対して入力が有効かどうかをリアルタイムにフィードバックできます。
AMP フォームの使用を開始する際は、ドキュメントと AMP By Example の例を参照してください。
近日中にフォームの機能を拡張する予定なので、この便利な追加機能について皆様の意見をお聞かせください。機能拡張の例として、カスタム検証があげられます。カスタム検証は、現在、試験運用版として利用できます（「amp-form-custom-validations」）。AMP ロードマップには、検証機能のサポート強化や条件付き動作といった拡張機能も掲載されていますが、これはほんの一部にすぎません。
この最初のフォーム サポートを活用したすばらしい体験をデベロッパーの皆様に作成していただけることを楽しみにしています。
Posted by Yoshifumi Yamaguchi - Developer Relations Team
