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

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

AMP(Accelerated Mobile Pages)が、SpringBoot+thymeleafと共存させられるか試してみよう。

AMP(Accelerated Mobile Pages)と言う技術が話題です。

 

AMPは、ざっくり「高速にWebページを表示するための技術」だそうです。

www.ampproject.org

 

すでに、導入している企業も結構あり、ページ表示の高速化でコンバージョン率の向上などの効果がでているみたいです。

www.ampproject.org

 

これは、日本でも、今後主流になっていく可能性はありますよね。

 

一度、どんなものか確認してみます。

 

AMPは制約が多いのでそれだけでページ作るとしんどい

 

AMPの高速化は「遅くなる要素を排除する」ことで実現する考え方のようです。

 

なので、HTML・CSSJavaScriptにやたら制限がかけられてます。

 

例えば

  • 標準のimg要素やvideo要素は使用できない。
  • CSSは外部CSSもstyle属性も使用することができない。
  • CSS要素は、HTML内に<style>でインライン記述するが、サイズは50kb迄。
  • JavaScriptの独自のコードを記述することはできない。

 

うーーん。何もできん・・。

 

そう思えるほどの制約です。

 

もちろん、AMPのカスタムタグやJavaScriptなどが用意されていて、それを使えば良いということなのですが、自分好みのページを作る・・というよりは、決まりごとにそって可能な範囲で対応するという感じになりそうな感じです。

 

とはいえ。

 

HTMLであることは変わりがないわけなので、SpringBoot+thymeleafと共存させることもできるんじゃないか?とも思えます。 

 

なので、とりあえず試してみよう

 

とりあえず、STSの、新規スタータープロジェクトを作ります。

 

プロジェクトの依存関係は、DBとセッションとキャッシュとthymeleaf使えるようにして、SpringBootのバージョンは2.0.0にします。

f:id:arakan_no_boku:20180304164829j:plain

 

今回は別にDBも、セッションも、キャッシュも使わないのですけど、うまくいったら、だんだんと拡張していくつもりなので。

 

もちろん、MySQLを指定して接続設定もせずに実行するとエラーになりますので、そのへんはこちらを参考にして、application.propertiesを設定してください。

arakan-pgm-ai.hatenablog.com

 

それも面倒なら、上の依存関係からMySQLJPAのチェックをはずせば、それなしでもエラーはでません。

 

まずはAMPのページを作ろう

 

amp-youtubeというカスタムタグが用意されてます。

ampbyexample.com

 

こいつを使って、youtubeの動画を表示させるページにします。

 

まずは、AMPのHTMLの基本形をコピーしてきます。

www.ampproject.org

 

上記のページの「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>

 

あと、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の基本的なところは、こちらを参照してもらうことにして、あえて書きません。

arakan-pgm-ai.hatenablog.com

 

さて動くかな・・。 

 

 表示された画面はこうなりました。

f:id:arakan_no_boku:20180306080654j:plain

 

ちゃんと、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>

 

 

f:id:arakan_no_boku:20170725215801j:plain