AMP FormでPOST送信する方法

2019-04-08AMPAMPフォーム

POST送信するサンプルコード

AMP-FormでのPOST送信はGET送信とは違い通常のHTML記述では動かず、AMP Formコンポーネントを使った機能が多くあります

AMP Formコンポーネントを読み込む

AMPページでフォームを利用する時は、AMP Formコンポーネント(amp-form.js)を読み込む必要があります

<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>

これを読み込まなかった場合、通常のHTMLフォームでのPOST送信記述が機能する様になりますがAMPテストツールでは「属性「action」はタグ「FORM [method=POST]」で使用できません。 」としてエラーとなりGoogle Search ConsoleでもエラーとなりAMPページとして有効になりませんので注意です

動作サンプル①は必要最低限の記述になります

POST送信のサンプルコード

AMPページでのPOST送信ではactionは許可されておらず代わりにaction-xhrを使います動作サンプルページの①になります

送信元AMPページ

<form method="POST" action-xhr="post-test.php" target="_top">
<input type="text" name="postText" value="AMPメモ">
<input type="submit" value="送信">
</form>

送信先URL(post-test.php)

//AMP-Access-Control-Allow-Source-Origin設定
header('AMP-Access-Control-Allow-Source-Origin:https://1-notes.com');

//json出力
echo '[]';

action-xhrとは

action-xhrを記述したフォーム送信は、ブラウザは新しいページに移動せずXHRリクエスト(AJAXリクエスト)をバックグラウンドで行います

内部的にはFetch API(古いブラウザの場合はXMLHttpRequest API)を使用しているとの事

リクエスト先URLでCORS securityを設定する

action-xhrからのリクエストはリクエスト先でCORS security in AMPが設定されている必要がある

なければコンソールにて「Form submission failed: Error: Response must contain the AMP-Access-Control-Allow-Source-Origin header​​​」「Response must contain the AMP-Access-Control-Allow-Source-Origin header」などのエラーが確認できると思います

一番単純な解決方法は「AMP-Access-Control-Allow-Source-Origin」にて許可するURLを設定します

header('AMP-Access-Control-Allow-Source-Origin:https://1-notes.com');

リクエスト先URLでjsonを出力する

AMP-FormでのPOST送信は送信リクエストの返り値をjsonで受け取って動的に処理する事ができる様になっています

仮に、送信するだけで返り値が必要ない場合の処理でもjsonが出力されていないと「Failed to parse response JSON: SyntaxError: Unexpected end of JSON input」というコンソールエラーが発生していまいますので空のjsonを出力しておけばとりあえずOKです

//json出力
echo '[]';

POSTが成功したかどうか確認表示するサンプルコード

AMP-Formでは送信リクエストが成功したか失敗したかで判定する処理(表示)をする事が可能です

submit-successでは成功時にのみ表示する内容を記述できsubmit-errorでは失敗時に表示する内容を記述できます

送信元AMPページ

<form method="POST" action-xhr="post-test.php" target="_top">
<input type="text" name="postText" value="AMPメモ">
<input type="submit" value="送信">
<div submit-success>
<p>成功!</p>
</div>
<div submit-error>
<p>失敗!</p>
</div>
</form>

送信先URL(post-test.php)

//AMP-Access-Control-Allow-Source-Origin設定
header('AMP-Access-Control-Allow-Source-Origin:https://1-notes.com');

//json出力
echo '[]';

返り値のjsonを表示する

送信リクエストの返り値をjsonで受け取ってその内容を動的に処理(表示)する事が可能です

この処理にはamp-formコンポーネントとは別にamp-mustacheコンポーネントの読み込みが必要となります

<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>

送信元AMPページ

<form method="POST" action-xhr="post-test.php" target="_top">
<input type="text" name="post_text" value="AMPメモ">
<input type="submit" value="送信">
<div submit-success>
<template type="amp-mustache">
<p>post_text:{{post_text}}</p>
</template>
</div>
<div submit-error>
<template type="amp-mustache">
<p>失敗!</p>
</template>
</div>
</form>

送信先URL(post-test.php)

//AMP-Access-Control-Allow-Source-Origin設定
header('AMP-Access-Control-Allow-Source-Origin:https://1-notes.com');

//送信データの受け取り
$post_text = htmlspecialchars($_POST['post_text'], ENT_QUOTES, 'UTF-8');

//配列に入れる
$return[post_text] = $post_text;

//jsonに変換
$return =  json_encode($return,JSON_PRETTY_PRINT|JSON_UNESCAPED_UNICODE|JSON_UNESCAPED_SLASHES);

//json出力
echo $return;

2019-04-08AMPAMPフォーム

Posted by Yousuke.U