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はエラーを送出し、リダイレクトは発生しません。」だそうです。
正直、いいます。
この辺で自分の頭の中では、AMPのメリットに、デメリットというかAMP対応する面倒臭さ・・が勝ちました。
まいったなあ・・。
GoogleがHTTPSを重視しているのは以前から知ってはいました。
新しいChromeだと、HTTPSでないと入力するテキストボックスにメッセージがでたりするようにもなるみたいですし。
でも、OPTIONとかではなく、強制的にHTTPS以外だとエラーにして遷移しない・・ってのは、ちょっと現時点では厳しい仕様だなとは思いますね。
結論としてはFormを使う画面のAMP対応は様子見です
そうすると。
現時点での自分の方針としては、こんな感じになりそうです。
- 入力・Submitなどが必要なページは「AMP非対応ページ」にする。
- 表示のみのページについては極力「AMP対応ページ」にする。
気になるのは「AMP対応ページとAMP非対応ページ間を行き来したときにセッションは維持できるのか？」です。
AMPページの場合は、AMPキャッシュというものが絡んできますから。
このAMPキャッシュというのはGoogle所有のサーバーなので、当然、自分の管理するサイトの外にでていくわけです。
セッションの維持ってホントにできるの？って思ってしまいます。
そのあたりの話題は、Googleアナリティクスからみでも話題になっていて、こちらの記事が非常に詳しいです。
この記事によると、現在ではAMPキャッシュ・AMPページ・非AMPページでセッションが統一化されている（Googleアナリティクス観点ですが）みたいですが、試してみる必要はありますね。
