AMP Conf 2019. April 17/18. Tokyo.
AMP

コメントを追加する

ここで、ユーザーは amp-form ライブラリを使用してコメントを追加できます。フォームが存在するかどうかは、amp-access コンポーネントの状態によって決まることに注意してください。

<form amp-access="loggedIn" amp-access-hide method="post" action-xhr="<%host%>/samples_templates/comment_section/submit-comment-xhr" target="_top">

AMP では XHR 以外のアクションを POST メソッドとともに使用できないため、POST メソッドと XHR アクションを指定します。 これはデモであり、コメントを残すことを想定していないため、ここで追加できるコメントは 1 つのみです。コメントを追加するたびに、AMPByExample サーバーは、入力したテキストと、タイムスタンプとユーザーのアバターや名前などの追加情報を含む JSON レスポンスを返します。

JSON レスポンスの例を次に示します。

{"Datetime":"09:34:21",
"User":"Charlie",
"Text":"Hello!",
"UserImg":"/img/ic_account_box_black_48dp_1x.png"}

フォーム コンポーネントは、amp-mustache テンプレートを使用して、ページ内に値を表示します。

<div submit-success>
  <template type="amp-mustache">
    <div class="comment-user">
      <amp-img width="44" class="user-avatar" height="44" alt="user" src=""></amp-img>
      <div class="card comment">
         <p><span class="user">{{User}}</span><span class="date">{{Datetime}}</span></p>
        <p>{{Text}}</p>
      </div>
    </div>
  </template>
</div>

この例では、コメントの値が空でないことのみをチェックしています。値が空の場合は、エラーが返されて次のコードが実行されます。

<div submit-error>
  <template type="amp-mustache">
    Error! Looks like something went wrong with your comment, please try to submit it again.
  </template>
</div>

さらに念のため、テキストを入力しないとコメントを送信できないように required 属性を追加します。

<input type="text" class="data-input" name="text" placeholder="Your comment..." required>

コメントを追加して送信ボタンをクリックすると、次のスクリーンショットのような画面が表示されます。