amp-story 教學介紹-打造新視覺體驗的AMP故事

amp-story 教學介紹-打造新視覺體驗的AMP故事

之前曾經介紹過AMP Story於2018年推出,而在 AMP conf 2019 上 AMP Story又有更進一步的進展,也許正式可使用AMP Story的日子將會越來越近了。

AMP Story的特色
首先要有一個概念是AMP Story :可以單獨成為一頁,不需要和某一個網址對應;而AMP Story同時有著獨特的排版標籤,無法應用於一般AMP頁面,因此兩者是分別不同的頁面,在一般的AMP網頁中無法於某一區塊放入amp-story,請將amp-story視為一個獨立的元件。

AMP Stories架構上是利用像圖層的概念一層層堆疊出畫面或動畫,有點像是以前做flash時疊圖層的概念(參考下圖),最右邊表示是最底層的物件,例如圖片(amp-img)、文字、影像(amp-video)等等,接著會用 amp-story-grid-layer(頁面中的圖層)將物件放在裡面,圖層可能會有很多個,端看如何排列; 圖層的外面又會包著amp-story-page(每一頁)的標籤,多個頁面最外層則是amp-story包住每一頁。
story_parts

圖片來源:amp-story


以語法呈現的話會架構會如下圖所示,可以看到是用一層一層包起來的方式。

amp-story-tag-hierarchy圖片來源:amp-story


如何開始打造一份AMP Stotry?

一個完整的AMP Story範例:

<!doctype html><html amp lang="en">
<head>
<meta charset="utf-8">
<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>
<title>Hello, amp-story</title>
<link rel="canonical" href="http://example.ampproject.org/my-story.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>
</head>
<body>
  <amp-story standalone>
  <amp-story-page id="my-first-page">
  <amp-story-grid-layer template="fill">
  <amp-img src="https://example.ampproject.org/helloworld/bg1.jpg"
width="900" height="1600">
</amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical">
  <h1>Hello, amp-story!</h1>
</amp-story-grid-layer>
</amp-story-page>
<amp-story-page id="my-second-page">
<amp-story-grid-layer template="fill">
<amp-img src="https://example.ampproject.org/helloworld/bg2.gif"
width="900" height="1600">
</amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical">
<h1>The End</h1>
</amp-story-grid-layer>
</amp-story-page>
<amp-story-bookend src="bookendv1.json" layout="nodisplay">
</amp-story-bookend>
</amp-story>
</body></html>


基本上頭部和原本的amp網頁沒有差多少,但載入的js不太一樣,以橘色標註的是amp-story裡面特別的語法,以下就這些語法做解釋。
【在head中】
<script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
amp-story的相關js檔案載入

<link rel="canonical" href="http://example.ampproject.org/my-story.html" />
指定連結的網址,但由於amp-story可自成一頁,建議連結網址連回自己就好,不需要特別連結到其他頁面


【在body中】
<amp-story standalone>
只能夠放在<body>底下,並且是唯一的子元素(所有內容都必須包在這裏面)
如果需要桌面滿版可以增加 supports-landscape  例如:<amp-story standalone supports-landscape>


<amp-story-page id="my-first-page">
每一頁的標籤,id一定要設定


<amp-story-grid-layer template="fill">
頁面裡的排版方式,template="fill" fill代表的是全滿版意思,template="vertical" vertical代表裡面元素從上道下排列。其他也有分成三等份區塊、由左至右排等等。


<amp-story-bookend src="bookendv1.json" layout="nodisplay">
</amp-story-bookend>
放在</amp-story>前面的語法,用意是在看完整個故事之後,出現一個頁尾結束的資訊,可在bookendv1.json 裡面放入想要連結的資訊。
欄位呈現有固定幾種方法

想製作一份amp-story 可以複製上述的範例語法來修改看看,或是下載官方的範例文件(內有包含圖片、json檔案,架構較完整)。

 

各元件的詳細解釋

<amp-story>
故事
包住整個amp story的外框,建議在這裡面要加上一些資訊,才能讓google更懂該篇amp story要做什麼
範例:
<amp-story
standalone
title="My Story"
publisher="The AMP Team"
publisher-logo-src="https://example.com/logo/1x1.png"
poster-portrait-src="https://example.com/my-story/poster/3x4.jpg"
poster-square-src="https://example.com/my-story/poster/1x1.jpg"
poster-landscape-src="https://example.com/my-story/poster/4x3.jpg"
background-audio="my.mp3">
<amp-story-page>[...]</amp-story-page>
<amp-story-page>[...]</amp-story-page>
<amp-story-page>[...]</amp-story-page>
<amp-story-bookend src="./related.json"></amp-story-bookend></amp-story>

standalone
必要,代表宣告以下是amp-story

title="My Story"
必要,故事標題

publisher="The AMP Team"
必要,出版團隊

publisher-logo-src="..."
必要,1X1寬高比的方形圖片,表示發布者的的logo小圖(範例上是36x36px)

poster-portrait-src="..."
必要,3x4寬高比的直式圖片,在故事加載之前顯示的圖像。通常可以是故事的第一個畫面,但也可以使用任何代表故事的圖像
但像是 poster-square-src (方形的故事加載圖片)、poster-landscape-src (4x3橫向故事加載圖片) 則是可以選擇看要不要使用


介紹完重要的amp-story後,接下來是各個頁面和排版該如何編寫

 

<amp-story-page>
頁面

此標籤代表的是要放入的每一頁內容
必須要設定id
如果有需要加入自動播放的話,可以增加 auto-advance-after
例如:
<amp-story-page id="tokyo" auto-advance-after="1s">
秒數代表的是該頁等待幾秒後往後播放

也可以放入音樂播放
例如:
<amp-story-page id="zurich" background-audio="./media/switzerland.mp3">

※但實測時如果放入背景音樂會導致檔案無法預覽,或是音樂無法播放問題



<amp-story-grid-layer>
排版
每一頁的排版方式,在一頁page裡面可能會有很多個<amp-story-grid-layer> ,
排版方式大致上可以分為fill 滿版、vertical 垂直排列 、 horizontal 橫軸排列、三等份區塊


fill 滿版
圖片尺寸建議: 720x1280 或900x1600 16:9的圖片
假如希望在電腦版上出現橫向滿版,圖片尺寸建議1920x1280

template-fill圖片來源:amp-story
範例
< amp-story-grid-layer template = “fill” >
< amp-img src = “cat.jpg” > </ amp-img > </ amp-story-grid-layer >



vertical 垂直排列template-vertical圖片來源:amp-story
範例
< amp-story-grid-layer template = “vertical” >
< p >元素1 </ p >
< p >元素2 </ p >
< p >元素3 </ p > </ amp-story-grid-layer >



horizontal 橫軸排列

template-horizontal圖片來源:amp-story

範例
< amp-story-grid-layer template = “horizontal” >
< p >元素1 </ p >
< p >元素2 </ p >
< p >元素3 </ p > </ amp-story-grid-layer >

 

thirds三等份區塊

template-thirds圖片來源:amp-story

範例
< amp-story-grid-layer template = “thirds” >
< p grid-area = “middle-third” >元素1 </ p >
< p grid-area = “lower-third” >元素2 </ p >
< p grid-area = “upper-third” >元素3 </ p > </ amp-story-grid-layer >
※.排版欄位的 grid-area="lower-third" ...之類的屬性在ios出現不支援的問題

而在這些排版標籤裡面也可以放入amp套件,但並不是全部都支援,詳請請見此說明


動畫效果
在這些元素上面可以加入一些既有的動畫效果:
例如
<h2 animate-in="fly-in-left" animate-in-duration="0.5s" >
Fly from left!
</h2>

animate-in="fly-in-left" 裡面填寫的就是效果名稱,例如這個是從左邊飛進來到定點
animate-in-duration="0.5s" 則是秒數
動畫效果一覽表


Bookend
在整個故事都看完後出現的選單畫面,可以分享到社群、更多相關資訊、連結等等...這些資訊可以寫在一個 json檔案裏面,再把json檔案放到 <amp-story-bookend>

語法範例
<amp-story standalone>
<amp-story-page id="cover">
...
</amp-story-page>
<!-- `layout=nodisplay` is required. -->
<amp-story-bookend src="bookendv1.json" layout=nodisplay>
</amp-story-bookend><amp-story>

* layout=nodisplay 為必要,請勿刪除

json檔案的寫法
amp-story-bookend結束

Bookend 各種出現形式,type裡面輸入不同屬性就可以有不一樣的輸入效果。
"type":" 在此輸入屬性"

heading
標題文字
amp-story-bookend-component-heading圖片來源:amp-story


small
小型的圖文呈現,可設置連結、圖、標題
amp-story-bookend-component-small圖片來源:amp-story


landscape
以圖為主的呈現,可設置連結、圖、標題、次標題( category)
(圖片尺寸建議256x128px)
amp-story-bookend-component-landscape圖片來源:amp-story

portrait
更大的以圖為主的呈現,可以連結到其他story ,可設置連結、圖、標題、次標題(category)
(圖片尺寸建議312x416px)
amp-story-bookend-component-portrait圖片來源:amp-story

cta-link
類似按鈕的連結形式,可填入連結和名稱。
amp-story-bookend-component-cta-links圖片來源:amp-story

textbox
純文字說明欄,可用於版權宣告或頁尾說明

amp-story-bookend-component-textbox圖片來源:amp-story

以上是AMP stories 製作的介紹,看下來似乎很繁複,但掌握到幾個大項要點後其實製作上並不難。
而目前AMP Stories也有幾套線上工具製作軟體,例如 https://ztorie.com/https://makestories.io/  都可以使用看看

今年度 AMP conf 2019 時有公布了許多 AMP Stories 的未來進展,往後也會陸續介紹給大家。

參考
amp.dev
你的第一個amp story

更多文章:

  1. 在AMP中添加或刪除class的方式
  2. 每個AMP頁面都必須有非AMP版本嗎?
  3. AMP教學-amp-bind 增加網頁互動
  4. AMP頁面只適合使用在靜態網站上面嗎?
  5. AMP只適合在手機裝置上觀看嗎?

回應