LIGのオフショア開発を大きくする同志求む。
LIGのオフショア開発を大きくする同志求む。
2020.06.17
#6
LIG技術研究会

AMPのWeb Storiesを使ってポートフォリオサイトを作ってみよう|AMP編

ぜんちゃん

こんにちは。フロントエンドエンジニアのぜんちゃんです。

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を使って作ります。こちらとまったく同じものができるわけではないため、下記を参考にしながら、オリジナルのポートフォリオを作ってみてください!

※Web Storiesという呼称はこちらのページで使用されているものを参考としています(2020年6月15日時点)。同一ページ内でAMPストーリーと呼称されている部分もありますが、本記事では「Web Stories」を採用し説明をしていきます。

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 Pゴシック','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を使えばすぐに実装できるので、一度作ってみてはいかがでしょうか。

以上! ぜんちゃんでした!