アラカン"BOKU"のITな日常

文系システムエンジニアの”BOKU”が勉強したこと、経験したこと、日々思うことを書いてます。

(番外編です)SpringBootとthymeleafでAMP対応。だけど、入力画面はやめとこう・・と思う理由。

SpringBoot/thymeleafによる動的ページ生成で、AMP(Accelerated Mobile Pages)対応ページを表示させるのを前回はやりました。

arakan-pgm-ai.hatenablog.com

 

その前回の記事の最後の方に、こうかきました。

自分としては、全面的にAMPページに移行したら良いとは思いませんけどね。 

正直、AMP対応をしてメリットがデメリットを上回るページは対応する。 

そうでなければ、当面、様子を見て今までのやり方でページを作る。 

こんな感じの混在型にした方が良いんじゃないか?

 

 今回は続きとして、その理由を書きます。

 

FORMを使った入力画面も一見いけそうなんだけど・・

 

AMPは、もちろんFORMにも対応しています。

www.ampproject.org

 

使い方としては、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>

 

これでこんな感じの画面になります。

f:id:arakan_no_boku:20180310150733j:plain

 

使えるタグの例を見ても。

 <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対応する面倒臭さ・・が勝ちました。

 

まいったなあ・・。

 

GoogleHTTPSを重視しているのは以前から知ってはいました。

webmaster-ja.googleblog.com

 

新しいChromeだと、HTTPSでないと入力するテキストボックスにメッセージがでたりするようにもなるみたいですし。

webmaster-ja.googleblog.com

 

でも、OPTIONとかではなく、強制的にHTTPS以外だとエラーにして遷移しない・・ってのは、ちょっと現時点では厳しい仕様だなとは思いますね。

 

結論としてはFormを使う画面のAMP対応は様子見です

 

そうすると。

 

現時点での自分の方針としては、こんな感じになりそうです。

  • 入力・Submitなどが必要なページは「AMP非対応ページ」にする。
  • 表示のみのページについては極力「AMP対応ページ」にする。

 

気になるのは「AMP対応ページとAMP非対応ページ間を行き来したときにセッションは維持できるのか?」です。

 

AMPページの場合は、AMPキャッシュというものが絡んできますから。

 

このAMPキャッシュというのはGoogle所有のサーバーなので、当然、自分の管理するサイトの外にでていくわけです。

 

セッションの維持ってホントにできるの?って思ってしまいます。

 

そのあたりの話題は、Googleアナリティクスからみでも話題になっていて、こちらの記事が非常に詳しいです。

ayudante.jp

 

この記事によると、現在ではAMPキャッシュ・AMPページ・非AMPページでセッションが統一化されている(Googleアナリティクス観点ですが)みたいですが、試してみる必要はありますね。

 

まあ、これは次回のテーマとして、今回はこの辺で。

 

f:id:arakan_no_boku:20170725215801j:plain