Help us understand the problem. What is going on with this article?

AMPでCSS読み込みとカルーセル実装

More than 3 years have passed since last update.

AMPでカルーセルを実装してわかったことまとめ

bazzinga

簡単な説明

AMPとは

簡単に言うと、モバイル端末でのウェブページの表示を高速化するためのフレームワークで
AMPのフォーマットでモバイルサイトを構成すると、リンク先のページを高速に表示することが可能になる
細かい仕組みや仕様なんかは日本語の解説も多くあるので割愛

仕様

<html ⚡><html amp>で始める
・cssはheadタグ内に書くかstyle要素でインラインスタイルを当てる
・JavaScript原則禁止
・img, video, audio, iframeは、代わりにamp-imgなどのカスタムエレメンツを使う
・↑これを使うためにhttps://cdn.ampproject.org/v0.jsを読み込む
・object, form, input等は禁止

Validator

urlの末尾に#development=1をつけて開発者ツールを開くと、バリデーションが実行され
エラーがコンソールに表示される
問題がなければAMP validation successful.が表示される

CSSについて

CSS総容量は50,000Byte=50KBまで

これを超えるとエラーがでるので注意

CSSを読み込む

cssは<link rel="stylesheet" href="">みたいな書き方ができないし、head内に直接書き込むしかない
じゃあどうするかというと、phpファイルにcssをコピーしてincludeしよう!
ってなるんだがsassを使ってるとscssをcssにしてそれをコピーして…と非常にめんどくさい。
…そのままincludeしよう!

<?php include="style.css" ?>

以上。

これ<link rel="stylesheet" href="">と同じ感じ…

css,jsは外部ファイル読み込みできないんじゃなかったっけ?って最初思ったけど
外部ファイル読み込み禁止とは言ってない。
上記のようにlinkタグでcssとして読み込むと当然エラーがでるけど、それは<link rel="">を使ってるからであって
共通パーツのhtmlなんかは普通にphpで読み込んでるので、これ自体に問題はない
じゃあこの違和感は何かというとincludeしてるのがphpファイルじゃなくてcssファイルだからである

php以外のファイルをincludeすると

ただのテキストとして認識するらしい。
htmlもcssもただのテキストみたいなもんなので、まあ当然の結果なんだけど。
エラーは出てないので今のところこれが正解ぽい

カルーセルの実装

これが調べてもなかなか出てこない。

先ず、jsを読み込む

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
これを読み込まないと始まらない。
jsがダメというのは、すでに用意してあるもの(カスタムエレメンツ)を使えということらしい
htmlは以下の通り

html
<amp-carousel width=○○ height=○○ layout=responsive type=slides autoplay loop>
    <amp-img width=○○ height=○○ layout=responsive src=""></amp-img>
    <amp-img width=○○ height=○○ layout=responsive src=""></amp-img>
    <amp-img width=○○ height=○○ layout=responsive src=""></amp-img>
</amp-carousel>

超かんたん、これだけでとりあえず動く。

使い方

表示したい画像を<amp-carousel></amp-carousel>でネストする
これで中の画像をカルーセルで表示できる
layout=responsiveで画像を幅いっぱいに

type

  • carousel
  • slides

carousellayout=responsiveに対応していないので
画像の幅を可変にしたいときは必然的にslidesを使うことになる
slidesはデフォルとでは自動でスライドしない、スワイプで次を表示

その他属性

以下の属性はtype=slidesにしか使えない

  • loop 順にスワイプした時、最初と最後をつなげる 例:1→2→3→1→2→3
  • autoplay 自動でスライドする、デフォルトの速さは5000ミリ秒
  • delay autoplayに追加で指定、スライドの速さを変える。ミリ秒で delay=5000のように指定

左右のボタンを表示

デフォルトで非表示になっているので、
amp-carousel-button amp-carousel-button-next
このクラスにスタイルをあてると表示できる。
ボタンの画像の変更や位置の調整もこのクラスにあてればOK

レイアウトを変えたい

名称未設定 1.png
こんな感じで画像を小さくしてボタンを外に表示、中の要素だけスライドしたいとき
(内側の画像とテキストのboxはアスペクト比を変えずに幅いっぱいにして、リンクにする)

html

<amp-carousel width="320" height="195" type="slides" autoplay layout="responsive">
    <div class="c-outer">
        <a href="campaign1.php">
            <div class="c-inner">
                <amp-img layout="responsive"  width="290" height="110" src="img/banner.png" alt="キャンペーン!"></amp-img>
                <div class="campaign-text-wrapper">
                    <p class="campaign-name">キャンペーン名</p>
                    <p class="campaign-term">期間限定:20XX/2/29まで</p>
                </div>
            </div>
        </a>
    </div>
    <div class="c-outer">
        <a href="campaign2.php">
            <div class="c-inner">
                <amp-img layout="responsive"  width="290" height="110" src="img/banner.png" alt="キャンペーン!"></amp-img>
                <div class="campaign-text-wrapper">
                    <p class="campaign-name">キャンペーン名</p>
                    <p class="campaign-term">期間限定:20XX/2/29まで</p>
                </div>
            </div>
        </a>
    </div>
    <div class="c-outer">
        <a href="campaign3.php">
            <div class="c-inner">
                <amp-img layout="responsive"  width="290" height="110" src="img/banner.png" alt="キャンペーン!"></amp-img>
                <div class="campaign-text-wrapper">
                    <p class="campaign-name">キャンペーン名</p>
                    <p class="campaign-term">期間限定:20XX/2/29まで</p>
                </div>
            </div>
        </a>
    </div>
</amp-carousel>


css

/*カルーセルのスタイル*/

.c-outer{
    padding: 20px 15px;
    box-sizing: border-box;
    background-color: #fff5d4;
}
.c-inner{
    width: 100%;
    height: 100%;
    background-color: #fff;
}
.campaign-text-wrapper{
    padding: 5px;
    background: #fff;
    font-size: 9px;
}
.campaign-name{
    display: inline-block;
    border-bottom: 1px solid #a3b9da;
    color: #015cb1;
}
.campaign-term{
    color: #222;
}

/* ボタンのスタイル*/
.amp-carousel-button{
    visibility: visible;
    background-color: rgba(0,0,0,0);
}
.amp-carousel-button-next {
    right: 0;
    background-image: url('img/btn-next.png');
    background-size: 10px 20px;
}
.amp-carousel-button-prev {
    left: 0;
    background-image: url('img/btn-prev.png');
    background-size: 10px 20px;
}
.amp-carousel-button-prev{
    left: -5px;
}
.amp-carousel-button-next{
    right: -5px;
}

まず、タグの種類に関係なく<amp-carousel></amp-carousel>の直下の要素がスライドされるので
実際には中の画像だけでなく、ボタンを含むイメージ画像全体がスライドすることになる
ボタンは<amp-carousel></>の外側にやるとoverflow:hiddenで消えてしまうので、黄色い枠をつくるときは
スライドさせたい内側の要素(<a href="campaign1.php">)にマージンをつけるのではなく、それを囲むbox(<div class="c-outer">)をつくりパディングを設定してやる
これでボタンは<amp-carousel></>のboxの中ならどこでも移動できるので、画像の外(パディングの部分)に設置できる
<div class="c-outer">のパディング(背景色:黄色)をスライド全部で同じにすれば、ボタンは移動しないので
内側の要素だけスライドするようなカルーセルを実装できる

カスタムエレメンツ

ちなみに他のjsは以下のようなかんじ

html
  <script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script>
  <script async custom-element="amp-anim" src="https://cdn.ampproject.org/v0/amp-anim-0.1.js"></script>
  <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
  <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
  <script async custom-element="amp-image-lightbox" src="https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js"></script>
  <script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script>
  <script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>
  <script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
  <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
  <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>
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした