こんにちは。フロントエンドエンジニアのぜんちゃんです。
LIG技術研究会・AMP編の二回目です。AMP編の第一回目はこちら。
- LIG技術研究会って？
- 日頃感じているWeb技術に関する疑問や不明な点を、研究員（LIG社員）がそれぞれのアプローチによって紐解いていく会。まだまだ謎が多い。
今回の記事では、AMPのWeb Storiesを使ってポートフォリオサイトを作ってみたいと思います！
「AMP使ってポートフォリオサイト作りました」
って、なんだかインパクトありませんか？
ポートフォリオサイトを作りたい方、AMPやWeb Storiesについて学んでみたい方は、この記事をきっかけに作ってみてはいかがでしょうか。
今回作っていくサイトはこのようなサイトです。
https://szaizen.github.io/amp-story-portfolio/
（↓サイズによって表示されないので、HTMLタブか右下の0.25×をクリックしてください）
See the Pen
AMPストーリーでポートフォリオサイト by szaizen (@szaizen)
on CodePen.
このような、インスタグラムやFacebookにあるストーリーのようなサイトを、Web Storiesを使って作ります。こちらとまったく同じものができるわけではないため、下記を参考にしながら、オリジナルのポートフォリオを作ってみてください！
目次
AMPとは
「AMPについて初めて聞いた」「よくわからない」という方は、AMP編第一回目の記事を見てみてください。
AMPとは？種類や導入のメリット・デメリットについて調べてみた｜AMP編
ライダー
AMP Web Storiesとは
AMPを使用すると、下記のようなものを作ることができます。
- Webサイト
- Web Stories
- AMP広告
- AMPメール
そのなかのひとつ、Web Storiesは、Web上でビジュアルストーリーを作成できるコンテンツです。
そして今回はこのWeb Storiesを使用して、ポートフォリオサイトを作ってみようと思います。
Web Stories作成手順
AMPでなにかを作る際には、事前に公式サイトでAMPのチュートリアルをクリアしてから進めることを推奨します。
https://amp.dev/documentation/guides-and-tutorials/start/visual_story/?format=stories
大枠の作成
まずはWeb Storiesページの大枠の部分を作っていきましょう。
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>ポートフォリオサイト</title>
<link rel="canonical" href="portfolio.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>
<script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
<link href="https://fonts.googleapis.com/css?family=Oswald:200,300,400" rel="stylesheet">
</head>
<body>
</body>
</html>htmlタグに ⚡雷マーク を書くのはAMPならではですね。
ベースとなる要素を作成（amp-story）
次に、Web Storiesのページの要素を作っていきます。
まず、bodyタグ配下に amp-storyタグを記述します（bodyの子要素はamp-storyだけである必要があります）。
<amp-story standalone
title="ぜんちゃんのポートフォリオ"
publisher="ぜんちゃん"
publisher-logo-src="assets/icon.svg"
poster-portrait-src="assets/cover.jpg">
</amp-story>下記の属性は必須なので、下記のとおり書いていきましょう。
| title | ストーリーのタイトル |
|---|---|
| publisher | 発行者の名前 |
| publisher-logo-src | 出版社のロゴ（1×1アスペクト比の正方形形式のロゴ画像のURL） |
| poster-portrait-src | ストーリー内のポスター画像（画像は縦横比3×4の縦長形式） |
ほかに追加できる属性についてはこちらを参照してください。
ページを作成（amp-story-page）
次に、amp-story-pageタグ追加します。これはページの枚数分書く必要があります。
たとえばぜんぶで4ページの場合、4つ書いていきます。
<amp-story-page id="cover">
</amp-story-page>
<amp-story-page id="profile">
</amp-story-page>
<amp-story-page id="skill">
</amp-story-page>
<amp-story-page id="contact">
</amp-story-page>ページのレイアウト調整（amp-story-grid-layer）
次に、amp-story-pageの中にコンテンツを配置していきましょう。amp-story-grid-layerのtemplate属性を利用して、レイアウトを整えます。
template属性には下記4パターンが設定できます。
| fill | 階層内最初の子要素で画面を埋めます。画像や動画などの背景に適しています。 |
|---|---|
| vertical | 縦に子要素を配置します |
| horizontal | 横に子要素を配置します。 |
| thirds | レイアウトを縦3つに分割します。grid-areaにupper-third / middle-third / lower-third を縦から順番に指定。 |
詳しくはAMP公式サイトを参照してください。
たとえばこちらのページを作りたい場合は……
<amp-story-grid-layer template="fill">
<amp-img src="assets/sky.jpg"
width="720" height="1280"
layout="responsive"
>
</amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical">
<h1>Portfolio</h1>
<p>Web Engineer zenchan</p>
</amp-story-grid-layer>まずtemplate=”fill”で背景を設定します。
背景は画像を設定したいので、子要素にamp-imgタグを記述します（ampはImgタグが使えないので注意しましょう）。
そして次にtemplate=”vertical”で文字を配置します。
CSSの調整
CSSを当ててスタイルを整えたい場合、ページのheadでamp-customタグ内に定義する必要があります。
<style amp-custom>
amp-story {
font-family: 'Helvetica','Arial','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic'sans-serif;
color: #fff;
}
amp-story-page {
background-color: #000;
}
h1 {
font-weight: bold;
font-size: 2.875em;
line-height: 1.174;
}
p {
font-weight: bold;
font-size: 1em;
line-height: 1.5em;
color: #fff;
}
</style>アニメーションの設定
Web Storiesの表示処理をアニメーション化し、さらに見栄えを良くすることができます！
たとえば、フェードインや左右からスライドインさせたりと、さまざまアニメーションが用意されています。
記述の仕方はとても簡単で、アニメーションさせたい要素にanimate-in / animate-in-durationなどの属性を指定するだけです。
たとえば、先ほどの1枚目の背景画像をアニメーションさせたい場合は……
<amp-img src="assets/sky.jpg"
width="720" height="1280"
layout="responsive"
animate-in="pan-left"
animate-in-duration="3s"
>このように記述します。
これで3秒かけて右から左に移動するアニメーションが適用されました。
さらに文字も遅れてフェードインさせたい場合は……
<h1
animate-in="fade-in"
animate-in-delay="0.5s"
animate-in-duration="2s"
>Portfolio</h1>
<p
animate-in="fade-in"
animate-in-delay="1.3s"
animate-in-duration="1.5s"
>Web Engineer zenchan</p>こんな感じですね。
animate-in-delayで、アニメーションタイミングを遅らせています。
詳しくはAMP公式サイトにまとまっているので、一度目を通してみてください。
まとめ
Web Storiesでポートフォリオを作っていきました。
HTML/CSS/JavaScriptで一から実装しようとすると難しそうな機能ですが、AMPを使えばすぐに実装できるので、一度作ってみてはいかがでしょうか。
以上！ ぜんちゃんでした！
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
