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-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