2018年時点の記事です。
SpringBoot／thymeleafでAMP(Accelerated Mobile Pages)対応ページを動的に生成させ
る方法を入力画面に応用してみます。やってみるとかなり癖がありました。なお、STS3(3.9.6)＋SpringBoot2.0＋tymeleaf3.0迄動作確認しています。
FORMを使った入力画面も一見いけそうなんだけど・・
AMPは、もちろんFORMにも対応しています。
使い方としては、amp-formのJavaScriptをロードして、AMPのルールにそった書き方で<form＞を使えばよく、ソースを見る限り、それほど複雑には見えません。 例えばこんなサンプルが載ってます。
<form method="post"
action-xhr="https://example.com/subscribe"
target="_top">
<fieldset>
<label>
<span>Name:</span>
<input type="text"
name="name"
required>
</label>
<br>
<label>
<span>Email:</span>
<input type="email"
name="email"
required>
</label>
<br>
<input type="submit"
value="Subscribe">
</fieldset>
<div submit-success>
<template type="amp-mustache">
Subscription successful!
</template>
</div>
<div submit-error>
<template type="amp-mustache">
Subscription failed!
</template>
</div>
</form>
これでこんな感じの画面になります。
使えるタグの例を見ても。
<textarea>, <select>, <option>, <fieldset>, <label>, <input type=text>, <input type=submit>, amp-selector
とかあります。 一瞬、なんとかなりそうな気はするんですよね。 でも。
SUBMITしたら、元のページには単純に戻れない！！
<form method="post" までは良いのです。
その次の「action-xhr="https://example.com/subscribe"」の部分が曲者でした。 このaction-xhrというのは、非同期通信・・つまり、AJAXリクエスト？・・をイメージすれば感覚をつかみやすいかと思います。 ブラウザがページをフルロードせずに、または新しいページを開くことなくリクエストを行うわけですね。 実は、これPOSTの場合は必須です。 だから、一旦別のページにとんでいくので、送信先のHTTPヘッダにAMP-Redirect-Toを設定してリダイレクトで戻してやらないといけません。 リダイレクト時のヘダーのサンプルがのってます。
AMP-Redirect-To: https://example.com/forms/thank-you
Access-Control-Expose-Headers: AMP-Redirect-To, Another-Header, And-Some-More
うーーん。 できないことはないかもしれないけど、通常のPOSTの動きとはかなり違うし、ちょっと面倒かな？ しかも、「リダイレクトURLはHTTPS URLでなければなりません。それ以外の場合、AMPはエラーを送出し、リダイレクトは発生しません。」だそうです。
結論としてはFormを使う画面のAMP対応は様子見です
そうすると。 現時点での自分の方針としては、こんな感じになりそうです。
- 入力・Submitなどが必要なページは「AMP非対応ページ」にする。
- 表示のみのページについては極力「AMP対応ページ」にする。
気になるのは「AMP対応ページとAMP非対応ページ間を行き来したときにセッションは維持できるのか？」です。 AMPページの場合は、AMPキャッシュというものが絡んできますから。 このAMPキャッシュというのはGoogle所有のサーバーなので、当然、自分の管理するサイトの外にでていくわけです。 セッションの維持ってホントにできるの？って思ってしまいます。 そのあたりの話題は、Googleアナリティクスからみでも話題になっていて、こちらの記事が非常に詳しいです。
この記事によると、現在ではAMPキャッシュ・AMPページ・非AMPページでセッションが統一化されている（Googleアナリティクス観点ですが）みたいですが、試してみる必要はありますね。
