LoginSignup
2
3

More than 5 years have passed since last update.

@ypyp

AMPページを作るぞ！(基礎)

Last updated at Posted at 2018-04-23

https://www.ampproject.org/ja/ を参考にしながらAMPページを作る

準備

以下を通常のhtml(非AMP)ページに追加。URLは任意のAMPページ

document.html
<link rel="amphtml" href="https://www.example.com/url/to/amp/amp.html">

AMP HTML ページを作成する

最低限のマークアップ（Schema.org の定義は省略してます）

amp.html
<!doctype html>
<html amp lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Hello, AMPs</title>
    <link rel="canonical" href="$SOME_URL">
    <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>
    <h1>Welcome to the mobile web</h1>
  </body>
</html>
  • 2行目：<html ⚡>または<html amp>
  • 6行目：AMP HTML 版の通常の HTML バージョンを指定する。該当する HTML が存在しない場合は自身を指定する。

HTMLタグ

禁止されているタグ

タグ
base, frame, frameset, object, param, param, embed

制約があるタグ

タグ 制約
script タイプがapplication / ld + jsonだけOK。例外もある
img amp-imgに置き換える。閉じタグがあるので注意。<amp-img></amp-img>
video amp-videoに置き換える
audio amp-audioに置き換える
iframe amp-iframeに置き換える
form 使用可。amp-formの拡張が必要
input要素 <input[type=image]>, <input[type=button]>, <input[type=password]>, <input[type=file]>を除いて使用可
style 必須タグの<style amp-boilerplate>とスタイリング用の<style amp-custom>が使用可
link microformats.orgに登録されているrel値はOK
meta http-equiv属性禁止

スタイルとレイアウト

すべてのCS は、<head>の<style amp-custom>タグ内に追加する。埋め込めるcssは1つだけ。<style amp-custom>タグを複数回使用できない。
ページのCSSは50kb以内にする。

amp.html
<!doctype html>
<html amp lang="ja">
<head>
-省略-
<style amp-boilerplate>-省略-</style>
<style amp-custom>
  body {
    background-color: white;
  }
  amp-img {
    background-color: gray;
    border: 1px solid black;
  }
</style>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>

こんな感じでインクルードもできる

amp.html
<style amp-custom>
  <!-- #include file="/assets/css/main.min.css" -->
</style>

許可されないスタイル

スタイル
!important
<link rel="stylesheet"> カスタムフォントを除く
-amp- クラス名、i-amp- タグ名

制約があるスタイル

スタイル 制約
transition 現在は opacity 、transform 、-vendorPrefix-transformのみ可
@keyframes {...} 現在は opacity 、transform 、-vendorPrefix-transformのみ可

コンポーネント / タグ

AMP で使用可能なコンポーネント

取り合えず使ったやつから追記

amp-carousel

カルーセル(スライダー)を設置する。

設置

デフォルト

amp.html
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

キャプション等つける場合追加

amp.html
<script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>

サムネイルを表示する場合追加

amp.html
<script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>

カルーセルボタン等表示する場合追加

amp.html
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

カルーセルを表示

amp.html
<amp-carousel width="450" height="300">
  <amp-img src="images/image1.jpg" width="450" height="300"></amp-img>
  <amp-img src="images/image2.jpg" width="450" height="300"></amp-img>
  <amp-img src="images/image3.jpg" width="450" height="300"></amp-img>
</amp-carousel>
属性 初期値 バリエーション 説明
type carousel carousel(すべてのスライドが表示され、水平方向にスクロール可能)、slides(一度に1つのスライドを表示) カルーセルの表示タイプ
height(必須) 数値 高さをピクセル指定
controls 論理属性 左右の矢印を表示
data-next-button-aria-label 'Next item in carousel' 文字列 カーソルボタン＞のラベル
data-prev-button-aria-label 'Previous item in carousel' 文字列 カーソルボタン＜のラベル
autoplay 論理属性 自動再生する
delay 5000 数値 autoplayが有効な場合、自動で画像が切り替わる秒数を、ミリ秒単位で指定
loop 論理属性 type属性にslidesを指定した場合にスライドがループする

その他AMPの共通属性を指定できる
参考：https://syncer.jp/Web/AMP/Common_Attribute/

カーソルボタンのスタイル

下記のようにカーソルボタンを変更できる

amp.css
.amp-carousel-button-prev {
  left: 16px;
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="M15 8.25H5.87l4.19-4.19L9 3 3 9l6 6 1.06-1.06-4.19-4.19H15v-1.5z" fill="#fff" /></svg>');
}

サンプル

テキストキャプション、サムネイル表示等カスタマイズも可能
https://ampbyexample.com/advanced/image_galleries_with_amp-carousel/

amp-sidebar　

ナビゲーション、リンク、ボタン、メニューなど、一時的なアクセスを意図したメタコンテンツを表示。
ページにつき1つしか設置できない。幅はスタイルシートで45px〜80vwの間で設定できる。

開閉ボタン

openがデフォルト

amp.html
<button class="hamburger" on='tap:sidebar1.toggle'></button>
<button on='tap:sidebar1'>Open</button>
<button on='tap:sidebar1.open'>Open</button>
<button on='tap:sidebar1.close'>x</button>

サイドバー

amp.html
<amp-sidebar id="sidebar" layout="nodisplay" side="right">
//ここにリスト
</amp-sidebar>
属性 初期値 バリエーション 説明
side left left,right 左右どちらに開くか
layout 表示はnodisplayにしておく

その他AMPの共通属性を指定できる

amp-img

imgの代替

属性 初期値 バリエーション 説明
alt 代替テキスト
attribution ライセンス等を指定する　例attribution="CC courtesy of Cats on Flicker"
height , width(必須) 数値 画像のサイズ。画像のアス非を決定するために使用される
src 画像のURL
srcset HTMLと同様。デバイスごとに画像を指定する

その他、AMPの共通属性を指定できる

アスペクト比の設定

幅と高さはアス非があっていればOK。
例えば、width = "900"とheight = "675"を指定する代わりにwidth = "1.33"とheight = "1"を指定するだけで済む。

デバイスごとに画像を指定する

とりあえず今はリンクだけ貼っとく
creating responsive AMP pages

2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
3