web story (旧amp storyとは)
インスタで人気になった画像や動画中心の投稿機能を、WEBでも使えるようにしたものです。
AMP(Accelerated Mobile Pages)の機能としてリリースされました。
通常のHTMLほど自由度がないですが、そのかわりに簡単に実装することができます。
インスタやTwitterのストーリーと異なる点
- アプリのインストールが不要
- PC、タブレット、スマホで閲覧が可能
- WEBページ(HTML)なのでGoogle検索にHITする
SEO視点から見た「Webストーリー」とは？（機能や活用メリット）というYoutube動画で詳しく説明されています。
必要最低限のソース
<!doctype html>
<html amp lang="ja">
<head>
<title>hogehoge</title>
<meta charset="utf-8">
<link rel="canonical" href="http://localhost.com/amp/hogehoge.html">
<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>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
</head>
<body>
<amp-story standalone
title="hogehoge"
publisher="fugafuga"
publisher-logo-src="./hogehoge.jpg"
poster-portrait-src="./hogehoge.jpg">
<amp-story-page id="first-page">
<amp-story-grid-layer template="fill">
<amp-img src="./hogehoge.jpg" height="1280" width="720"></amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical">
<h2>1ページ目のコンテンツ</h2>
</amp-story-grid-layer>
</amp-story-page>
</amp-story>
</body>
</html>
AMPテストというサイトで構文が正しいかを確認できます。
https://search.google.com/test/amp
表示の仕組み
以下で説明されています。(画像は同ページから転載)
https://amp.dev/ja/documentation/guides-and-tutorials/start/visual_story/parts_of_story/
その他 web storyでできること
以下にweb storyでできること(使えるタグ)が一覧でまとまっています。
https://amp.dev/documentation/components/amp-story-page/?format=stories