AMPと言う技術を、SpringBoot＋Tymeleafと共存して使う方法を試します。
STS3（3.9.6)＋SpringBoot2.0＋Tymeleaf3.0迄は動作確認してます。
AMP(Accelerated Mobile Pages)とは
AMPは、ざっくり「高速にWebページを表示するための技術」だそうです。
すでに、導入している企業も結構あり、ページ表示の高速化でコンバージョン率の向上などの効果がでているみたいです。
これは、日本でも、今後主流になっていく可能性はありますよね。
一度、どんなものか確認してみます。
AMPは制約が多いのでそれだけでページ作るとしんどい
AMPの高速化は「遅くなる要素を排除する」ことで実現する考え方のようです。
なので、HTML・CSS・JavaScriptにやたら制限がかけられてます。
例えば
- 標準のimg要素やvideo要素は使用できない。
- CSSは外部CSSもstyle属性も使用することができない。
- CSS要素は、HTML内に<style>でインライン記述するが、サイズは50kb迄。
- JavaScriptの独自のコードを記述することはできない。
うーーん。何もできん・・。
そう思えるほどの制約です。
もちろん、AMPのカスタムタグやJavaScriptなどが用意されていて、それを使えば良いということなのですが、自分好みのページを作る・・というよりは、決まりごとにそって可能な範囲で対応するという感じになりそうな感じです。
とはいえ。
HTMLであることは変わりがないわけなので、SpringBoot＋thymeleafと共存させることもできるんじゃないか？とも思えます。
とりあえず試してみよう
とりあえず、STSの、新規スタータープロジェクトを作ります。
プロジェクトの依存関係は、DBとセッションとキャッシュとthymeleaf使えるようにして、SpringBootのバージョンは2.0.0にします。
今回は別にDBも、セッションも、キャッシュも使わないのですけど、うまくいったら、だんだんと拡張していくつもりなので。
もちろん、MySQLを指定して接続設定もせずに実行するとエラーになりますので、そのへんはこちらを参考にして、application.propertiesを設定してください。
それも面倒なら、上の依存関係からMySQLとJPAのチェックをはずせば、それなしでもエラーはでません。
AMPのページを作ろう
amp-youtubeというカスタムタグが用意されてます。
こいつを使って、youtubeの動画を表示させるページにします。
まずは、AMPのHTMLの基本形をコピーしてきます。
AMP-HTML
上記のページの「AMP-HTML」のセクションをクリックすると、最もシンプルなAMP-HTMLのサンプルソースが表示されるので、それをコピーしてきます。
<!doctype html> <html> <head> <meta charset="utf-8"> <link rel="canonical" href="hello-world.html"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> </head> <body>Hello World!</body> </html>
これをベースに、修正していきます。
CSS 定義です。
AMPページは外部CSSを読み込めないので、<style amp-custom>～</style>の間に必要な部分だけをソースにコピーする形になります。
一箇所しかかけませんし、サイズ制限もあります。
だから、本当に使う部分だけしか無理ですね。
<style amp-custom>
.content{
wide:100%;
}
.content_fix{
margin-left:2em;
margin-right:2em;
}
h1 {
text-align:center;
color: red;
}
p{
margin-left:2em;
margin-right:2em;
margin-top:0.5em;
margin-bottom:0.5em;
}
</style>
HTMLの編集
あと、thymeleafを使えるように、<html>の部分を変更します。
<html xmlns:th="http://www.thymeleaf.org">
今回は、amp-youtubeを使うので、カスタムタグのためのJavaScriptを<head>～＜/head> の間に以下を貼り付けます。
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
あと、 <link rel="canonical" href="hello-world.html">の「hello-world.html」の部分を、アクセスするURLに置き換えます。
<link rel="canonical" href="http://localhost:8080/amptest">
最後に、bodyのところを、 変更します。
とりあえず、thymeleafを利用して取得したメッセージの表示＋amp-youtubeを使った動画の表示だけをやってみます。
<body>
<h1>AMPで動画を表示してみる</h1>
<div class="content">
<p th:text="${msg1}" />
<p th:text="${msg2}" />
</div>
<div class="content_fix">
<amp-youtube width="480"
height="270"
layout="responsive"
data-videoid="Qkr60BoW4q0"
autoplay>
</amp-youtube>
</div>
</body>
HTMLの修正箇所はこういう感じです。
コントローラクラスを作って動かしてみる
TestController.javaを作ります。
@Controller
public class TestContoroller {
@RequestMapping("/amptest")
public String hello(Model model) {
model.addAttribute("msg1","ギターをチョッパースタイルで叩きまくるギタープレイが超絶格好良い。");
model.addAttribute("msg2","TarO and JirOの Snake Bite ～ Silent Siren");
return "amp_test";
}
}
HTMLやJAVAクラスの配置場所、それから実行の仕方などのSpringBootとthymeleafの基本的なところは、こちらを参照してもらうことにして、あえて書きません。
さて動くかな・・。
表示された画面はこうなりました。
ちゃんと、thymeleafを使ったメッセージと、youtubeの動画が表示されてます。
かつ、autoplayも効いてます。
心なしか、表示も速いような・・気の所為？・・。
まあ、これができたからって「何なの？」ってなレベルのことです。
が・・まあ、とりあえず、シンプルな共存はできたということに、今回はしておきます。（笑）
ちなみに
今回のサンプルで使用した動画はこれです。
TarO&JirO / Snake Bite ～ Silent Siren
最後にHTMLの全体をのせておきます。
<!doctype html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="utf-8"> <title> Hello World</title> <script async src="https://cdn.ampproject.org/v0.js"></script> <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script> <link rel="canonical" href="http://localhost:8080/amp_test.html"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style amp-custom> .content{ wide:100%; } .content_fix{ margin-left:2em; margin-right:2em; } h1 { text-align:center; color: red; } p{ margin-left:2em; margin-right:2em; margin-top:0.5em; margin-bottom:0.5em; } </style> <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> </head> <body> <h1>AMPで動画を表示してみる</h1> <div class="content"> <p th:text="${msg1}" /> <p th:text="${msg2}" /> </div> <div class="content_fix"> <amp-youtube width="480" height="270" layout="responsive" data-videoid="Qkr60BoW4q0" autoplay> </amp-youtube> </div> </body> </html>
