Google AMP-フォーム

この章では、Google AMPでフォームを操作する方法について説明します。

formsタグは、標準のHTMLと同じままであることに注意してください。 AMPでは、フォームの使用に特別な制限が追加されたため、フォームを操作するにはamp-form JavaScriptファイルを追加する必要があります。

amp-formのスクリプト

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

AMPページでフォームを使用するには、上記のスクリプトをlファイルに含める必要があります。 amp-form JavaScriptファイルは、フォーム送信のために http および xmlhttprequest をサポートします。 HTTPリクエストを使用するとページがリロードされ、 xmlhttprequest を使用するとページはリロードされず、ajaxリクエストのように動作します。

AMPのフォームタグ

For xmlhttprequest :
<form method = "post" class = "p2" action-xhr = "submitform.php" target = "_top">
  //Input fields here
</form>

For http :
<form method = "post" class = "p2" action = "submitform.php" target = "_top">
  //Input fields here
</form>

Amp-formは特別な属性、つまり submit-error および submit-success を提供して、フォームの送信時にエラーと成功を処理します。

例

amp-formの例を以下に示します-

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Form</title>
      <link rel = "canonical" href = "ampforml">
      <meta name = "viewport" conten t = "width = device-width,
         minimum-scale = 1,initialscale = 1">

      <style amp-boilerplate>
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-msanimation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes
         -ampstart{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
         -ampstart{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
         -ampstart{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
         -ampstart{from{visibility:hidden}to{visibility:visible}}@keyframes
         -ampstart{from{visibility:hidden}to{visibility:visible}}
      </style>
         <noscript>
            <style amp-boilerplate>
               body{
                  -webkit-animation:none;
                  -moz-animation:none;
                  -msanimation:none;
                  animation:none
               }
            </style>
         </noscript>
      <script async custom-element = "amp-form"
         src = "https://cdn.ampproject.org/v0/amp-form-0.1.js">
      </script>
      <script async custom-template = "amp-mustache"
         src = "https://cdn.ampproject.org/v0/amp-mustache-0.2.js">
      </script>
      <style amp-custom>
         form.amp-form-submit-success [submit-success],
         form.amp-form-submit-error [submit-error]{
            margin-top: 16px;
         }
         form.amp-form-submit-success [submit-success] {
            color: white;
            background-color:gray;
         }
         form.amp-form-submit-error [submit-error] {
            color: red;
         }
         form.amp-form-submit-success.hide-inputs > input {
            display: none;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Form</h3>
      <form method = "post"
         class = "p2"
         action-xhr = "submitform.php"
         target = "_top">
         <p>AMP - Form Example</p>
         <div>
            <input type = "text" name = "name" placeholder = "Enter
               Name" required><br/><br/>
            <input type = "email" name = "email"
            placeholder = "Enter Email" required>
            <br/>
            <br/>
         </div>

         <input type = "submit" value = "Submit">
         <div submit-success>
            <template type = "amp-mustache">
               Form Submitted! Thanks {{name}}.
            </template>
         </div>

         <div submit-error>
            <template type = "amp-mustache">
               Error! {{name}}, please try again.
            </template>
         </div>
      </form>
   </body>
</html>

出力

上記のコードを実行すると、次のように結果が表示されます-

AMPフォーム

次に、詳細を入力し、[送信]ボタンをクリックします。表示される出力画面は次のとおりです-

送信されたAMPフォーム

データバインディングにamp-mustacheを使用したことを確認します。フォームはaction-xhrすなわちxmlhttprequestを使用してフォームを送信しています。 JSON形式のデータを返す submitform.php ファイルを使用しました。

<form method = "post" class = "p2" action-xhr = "submitform.php"
   target = "_top">
</form>

*submitform.php*

<?php
   if(!empty($_POST)){
      $domain_url = (isset($_SERVER['HTTPS']) ? "https" : "http") .      "://$_SERVER[HTTP_HOST]";
      header("Content-type: application/json");
      header("AMP-Access-Control-Allow-Source-Origin: " . $domain_url);
      header("Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin");
      $myJSON = json_encode($_POST);
      echo $myJSON;
   }
?>

xmlhttprequestを使用してフォームを機能させるには、CORS仕様に従ってヘッダーを追加する必要があります。 submitform.phpに追加された応答ヘッダーの詳細を以下に示します-

submitform php

フォームを機能させるには、値 AMP-Access-Control-Allow-Source-Origin および amp-access-controlallow-source-origin を持つ access-control-expose-headers などのヘッダーを追加する必要があります- * http：//localhost：8080 *。

PHPファイルとApacheサーバーを使用していることに注意してください。 PHPファイルでは、以下に示すように必要なヘッダーを追加しました-

<?php

   if(!empty($_POST)){
      $domain_url = (isset($_SERVER['HTTPS']) ? "https" : "http") .  "://$_SERVER[HTTP_HOST]";
      header("Content-type: application/json");
      header("AMP-Access-Control-Allow-Source-Origin: " . $domain_url);
      header("Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin");
      $myJSON = json_encode($_POST);
      echo $myJSON;
   }
   ?
?>

私たちが通常のhttpリクエストを使用する場合、以下に示すようにページがリロードされます-

httpリクエストの場合、次の形式を使用しました-

<form method = "GET" class = "p2" action = "submitform.php"
   target = "_top">
</form>

例

より良い理解のために次のコードを観察します-

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Form</title>
      <link rel = "canonical" href = "ampforml">
      <meta name = "viewport" content = "width = device-width,minimum-scale = 1,initialscale = 1">

      <style amp-boilerplate>
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-msanimation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes
         -ampstart{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
         -ampstart{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
         -ampstart{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
         -ampstart{from{visibility:hidden}to{visibility:visible}}@keyframes
         -ampstart{from{visibility:hidden}to{visibility:visible}}
      </style>
      <noscript>
         <style amp-boilerplate>
            body {
               -webkit-animation:none;
               -moz-animation:none;
               -msanimation:none;
               animation:none}
         >/style>
      </noscript>

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

      <style amp-custom>
         form.amp-form-submit-success [submit-success],
         form.amp-form-submit-error [submit-error]{
            margin-top: 16px;
         }
         form.amp-form-submit-success [submit-success] {
            color: white;
            background-color:gray;
         }
         form.amp-form-submit-error [submit-error] {
            color: red;
         }
         form.amp-form-submit-success.hide-inputs >
            input {
            display: none;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Form</h3>
      <form method = "GET" class = "p2" action = "submitform.php" target = "_top">
         <p>AMP - Form Example</p>
         <div>
            <input type = "text" name = "name" placeholder = "Enter Name" required>
            <br/>
            <br/>
            <input type = "email" name = "email" placeholder = "Enter Email" required>
            <br/>
            <br/>
         <div>

         <input type = "submit" value = "Submit">
         <div submit-success>
            <template type = "amp-mustache">
               Form Submitted! Thanks {{name}}.
            </template>
         </div>
         <div submit-error>
            <template type = "amp-mustache">
               Error! {{name}}, please try again.
            </template>
         </div>
      </form>
   </body>
</html>

出力

上記のコードを実行すると、次のように結果が表示されます-

Google Ampフォーム Google Ampフォーム Google Ampフォームの提出

Google-amp-form

Google AMP-フォーム

amp-formのスクリプト

AMPのフォームタグ