# SOLO - 李維翰(Paul Li)

{%hackmd j86FNbMoRoeN4Xn0pg5ofw %}

:::info
[投影片連結 <i class="fa fa-link"></i>](https://blog.lalacube.com/mei/Reveal_amp_roadshow_taipei_2018.php?page=1)
:::

:::danger

內文包含輕微髒話及不雅圖片。未成年人請勿觀賞。
:::

好，大家好，那我很高興能夠有這個機會來這邊跟大家做一個分享。

那今天我要分享的題目是 SOLO。


那麼在開始進行之前呢，首先我要先感謝 Modern Web 的小編。
喔, 他這次很用心，製作了這麼一個團隊圖，讓我看起來就像率先陣亡的成員 :satisfied:


那這份恩情呢，我會永遠銘記在心 :satisfied:

好，那簡單的自我介紹，我叫做 Paul，那目前在 Oath 服務，擔任 Front-end Engineer 的一個職務，主要的防守範圍呢，就是 Yahoo! 奇摩拍賣 (電子商務網站)。


那我們來看一下今天的 Agenda。

## Agenda

- What do we fight for ?
- Wonder AMP
- Use cases
- What else ?


我要跟大家介紹一下，我們爭的是什麼？求的是什麼？然後再來就是 Wonder AMP，然後使用一些 AMP 的一些 Use Case，還有 AMP 除了可以導流之外，我們還可以利用它來做些什麼事情。

## What do we fight for ?


好，這些年來呢，那其實 Framework (框架) 更新的速度越來越快，那麼絕大部分的工程師，其實你是在追逐浮華的虛幻當中。

有時候呢，他為了捍衛，捍衛自己的的信仰，那麼不時在網路上，發起一些謾罵、攻擊的一些橋段，那忘卻了當初的感動與愛。

那麼有時候呢，他贏了面子，可是卻輸了裡子。在擁抱新框架的當下，他卻也有可能需要承擔、背負無比沈重的一個技術債。

試想，一個 Module 的一個呈現效果，它的 Style，可能會因為說，今天新框架的一個更動，便必須要不停的翻新，不停的更換，甚至需要整個砍掉重練。

那麼這對工程師來講，真的是非常辛苦的一件事情。

他最糟的情況下，莫過於新舊框架同時並存的窘境。那麼，工程師呢，這時候就很可憐，就像刻苦的雙頭蠟燭一樣，兩頭燒，勞心勞力，疲於奔命，最後增加了一個非常嚴峻的一個 maintain cost。

那麼誰贏誰輸，對我來講其實我不是那麼在乎，我 care 的是，我們究竟要如何才能夠有效的跳脫被框架束縛的這個泥沼。

我從大概七八年前進到 Yahoo!，那麼光是一個客製化的 dialog 模組，我從 YUI2 刻到 YUI3 刻到 Vanilla JS 到一直到現在的 React.js，我真他媽的受夠了這樣子的一個開發模式。:satisfied:

這就是為什麼呢，我這些年來一直在關注 Web Component 的一個發展。

如果，我們可以把，這些模組的呈現、模組的樣式、模組的互動行為，通通封裝到一個 web component 裡面，需要用到它的時候，我們再把相對應的 HTML tag 寫進來，那麼，我們不僅可以輕輕鬆鬆的跳脫，框架的束縛，更可以讓整個開發流程就像在堆積樂高積木一樣，活潑、有趣。

那麼就在去年呢，一次偶然的機會，那麼我終於發現了，我所嚮往的那個新知領域。

那道閃電，其實就是我所嚮往的一個開發模式。

所以接下來呢，我會跟大家介紹，如何讓 AMP 彈奏出美妙璀璨的一個 SOLO 樂章。

## AMP


AMP, AMP 是 Google 這兩年所提出來的一個新的標準跟技術，有鑒於，Mobile device 的使用人口越來越多，所以呢，它希望可以有效的簡化我們這些 web developer 的一個開發流程，並且一舉 enhance 整體的一個 mobile 的 UX，立意良好，真的讓我感動到快哭了。

但是它的推廣手段，太 GY 了，因為它直接把 AMP 跟搜尋引擎綁在一起。

那麼在 Google 的 search result page，如果有 on AMP，因為它結合了一個 cache 跟 reload 的機制，所以呢，如果有 on AMP 的這個搜尋結果，經過引擎之後，它便可以很快的、迅速的、如閃電般的，把所有的結果頁面彈跳出來，那個速度之快真的令人瞠目結舌啊。

那，我個人呢，覺得說，它已經完完整整的，把一個從搜尋引擎到一個服務之間，串起了一個非常好的溝通橋樑，並且讓整個的一個 User 體驗呢，達到了最高峰，進入到另外一個境地。

那麼在使用 AMP 呢，我這邊因為在它們的官網裡面已經有非常明確的告知怎麼使用，所以呢，我這邊只會告訴大家，有三大戒律，那麼不可不知。

### 不可不知道的三大戒律

第一個，我們在開發 AMP 的時候，它的 HTML 的結構，必須要符合 AMP 制定的格式。

那這是因為，AMP 呢，它的 HTML 結構，是根據 performance tuning 的一個 guideline 來製作的，所以它在 rendering 的 performance 其實真的真的非常非常的好。

如果你把做好的 AMP page，丟到了 Google 的 page speeding site 去看的話，都可以得到非常不錯的成績。

> 球員球證都是它的！(欸)
> 那當然它說的算! :satisfied:
> [name=Paul Li][color=#90b7f7]

那再來呢，頁面上所使用到的 CSS，其實全部都要被有效地，抽離出來，並且放置在一個約定的 style tag 裡面，而且它有 50K 的限制，所以在使用的時候，要非常非常的小心。

能 reuse 的 CSS rule，我們就盡量的去 reuse 它。

那我會建議大家，盡量的使用 shortcut 的寫法，並且嚴禁使用 data uri 把圖片塞進去這樣的一個做法。

那最後呢，在開發 AMP，最重要的一點就是，你不能夠寫任何的一行 JavaScript，那麼對 Front-end 工程師來講，不能撰寫 JavaScript，就彷彿把他的手腳給綁起來。

他會感到無助，他會感到徬徨，不知所措。

那其實取而代之的就是，它提供了非常多、豐富實用的 AMP components，所以呢，我們只要能夠妥善的利用這些 web component，我們便可以很快的堆積出我們所想要的功能。

好，那接下來呢，我要帶大家來看一下，我們 Yahoo!奇摩是怎麼引進 AMP 的這個過程。

## Yahoo! TW Auction


那 Yahoo! 奇摩拍賣呢，是台灣，最大的一個競標型電子商務網站。

它在台灣已經服務了超過了 15 年以上。

那相信大家都有聽過「什麼都有，什麼都賣，什麼都不奇怪」這句 slogan。

不好意思，可以，有聽過的同學可以舉一下手嗎？

:raised_hands: :raised_hands: :raised_hands: :raised_hands: :raised_hands:

:::success
現場目測有約一半的人舉手
:::

那表示你們都有年紀了 :satisfied:

那由於呢，它超過了 15 年，歷經了幾次，重大的改版，那其實每次改版，頁面都改的不是很徹底，所以我們有另外一個奇蹟，就是我們的頁面，style 參差不齊，老中青三代同堂。

那除了這個之外呢，我們還有另外一點，這事讓我自己很不以為然，那就是我們其實一點都不 mobile friendly。

那使用者，在使用 mobile device 進到我們首頁的時候，他的第一個動作就是這樣子，放大、放大、再放大，然後要小心翼翼的去點擊，他想要的連結，為什麼呢？

因為深怕一個不小心，他會點到旁邊的連結，那剛剛的動作可能都要再重來一次了。

那看在我們的眼裡呢，其實我們是非常的難堪與不捨，因為我們竟然提供，這麼爛的 quality 給我們的 user。

那也就是因為這一點，所以在去年年底，我們決定要好好地整頓一下，我們的 mobile user experience，那我們決定，採用 AMP 來開發我們的 mobile web。

那大家可以看到，畫面上的這個畫面呢，其實就是我們的 item page，那這是根據 Google Organic，我們來判斷說，既然要做，我們就要挑戰大魔王。

那這是 item page 呢，就是商品頁，是我們流量最大的一個頁面，Google 導流進來，流量最大的一個頁面。

那我們這邊呢，其實 focus 的對象很簡單，就是 mobile device，所以我們是採用 AWD 的 design，那麼對於每個元素呢，我們是採用 fluid design。所以不管在任何的一個解析度下，它都有非常出色且一致的表現。

那麼我來帶大家來瀏覽一下我們這個網頁。

那麼首先呢，我們可以看到我們這個整個設計都是重新設計過的，那 user 其實可以在這邊做一個搜尋，那也有一個很漂亮的商品圖片，斗大的商品圖片可以讓 user 來做一個觀看，那當然這邊有用到 AMP 的 carousel，所以呢其實，user 可以直接在這邊，做一個商品圖的切換。

那對於字體大小跟一些 information 的揭露，其實我們都已經做了一些調整。所以使用者他其實可以很快的觀察到、找到他所想要的一些 information。比方說，運費，比方說，付款方式等等。

那麼我們這邊對於 multimedia 的 support 呢，其實也是有支援的。那比方說，像圖片都會有很漂亮的 lightbox 呈現，那麼甚至連 Youtube 的 video，其實也是可以播放的。

那每個動作跟動作之間的銜接呢，其實我們還有導入了一些 micro interaction。

所以，他在瀏覽的時候，其實他是如行雲流水一般，不會有什麼阻礙。

那這就是因為，我們希望可以提供最好最流暢的服務給我們的 user。

那如大家所見，這個就是我們的 item page。

那麼很多 AMP 的開發者，他非常喜歡，去呈現一個導入 AMP 前，跟導入 AMP 後的一個 initial 時間的一個差距，那麼對我來講，這個東西實在太矯情了。

所以，我今天不會 show，因為白痴都知道，拿一個靜態頁面，去跟一個既有的頁面比較，靜態頁面肯定贏啦。所以 show 那種資料，一點意義都沒有。

那我今天來帶大家看一下，我們在使用之後，當然我們有做一些 instrumentation，所以我來分析一下，這樣的結果給大家看看。

:::success
分析圖表不在投影片上
:::

那首先呢，針對，我們來看一下藍色的線，(應該沒色差吧)，藍色的線就是導入 AMP 以後，紫色的線就是還沒有使用 AMP 之前。

那我們先看到我們的 User，其實我們的 user 增加了 39%，那我們的新 user 更是一舉突破了，增加了 133%，對於整體的 bounce rate (跳出率) 其實我們有效的降低了 33%。

所以大家可以看到，藍色的線其實是在紫色的線下面。

那對於訂單數，我們成功的增加了 26%。對於整體的營收，我們更是一舉增加了 34%。

天哪！我們從來都沒有預期，我們竟然可以獲得如此，可怕的成效。我們所希望呈現給 user 的呢，其實只是希望說，可以 enhance 他在 mobile 的一個瀏覽，讓他可以有一個很流暢的一個瀏覽幅度，讓他在使用我們的服務的時候，能夠有家～的感覺。

好，那除此之外呢，在獲得了初步成功之後，我們開始觀察到，我們的使用者，其實非常喜歡使用我們的一個，搜尋功能。那另外的話呢，他也非常喜歡使用我們的 like 功能，就是畫面上看到的這個愛心，(有看到我的指標嗎？)

所以呢，我們希望，我們可以針對這兩大功能去做一個 enhancement，但是很遺憾的，AMP 並沒有直接輸出這兩種功能的一個 component，但是我們其實也不氣餒。

因為我們相信，只要對既有的 AMP component 有一定程度的瞭解，我們就可以利用它們之間，交錯互動，便可以勾勒出，我們所想要的功能。

那我就來帶大家看，我們是怎麼做到的。

## Case Share - Suggestion


那首先呢，對於 search，我們希望我們可以幫它 enhance，所以呢我們希望幫它做一個 suggestion 的功能，也就是俗稱的 autocomplete。

那麼在手機上 key 字，其實到現在，我都覺得還是有某種程度的困難，所以呢，藉由這些 autocomplete 的一個介入呢，我們希望 user 在 key 了幾個字，便能夠很快的，找到他心裡所想要的一個搜尋關鍵字。

那麼在這邊呢，我們使用了一些 component，使用了哪些 component 呢？


我們有用到了 `amp-list`，去做一個 data pitch，有用了 `amp-mustache`，去做一個 render 的動作，那當然兩者之間的溝通橋樑是用 `amp-bind` 來做，那再搭配一些 input 的 event 來做一些 fire。

好首先呢，先來帶大家看一下我們的 HTML structure。


那這邊呢，其實很簡單，我們這邊呢，就是只有一個 input，在這裡，給 user 來做一個 keyin 的動作。會有一個 `amp-list`，這是用來做等一下 suggestion element 的一個呈現。

那它的運作原理呢，非常的簡單，只要使用者有 keyin 的動作，我們就會把使用者 keyin 的那個字，丟給 `amp-list`，讓它去 fire，直接發一個 XHR，然後傳給後端，然後再由後端 prepare 一些可能的，可能感興趣的關鍵字，回報出來之後，我們再透過 `amp-mustache` 去做一個 rendering。

那大家可以看到，其實 rendering 裡面呢，每一個 element 呢，它都是一個 `<a>` tag，那這表示說，我們其實可以很好的做一個 instrumentation 的一個附加，所以我們也可以很快的觀察到，使用者對於這些關鍵字的一些喜好程度。

那麼在這裡呢，什麼時候應該要顯示這個 `amp-list`，什麼時候應該要把它關閉?

我們不希望 host 太多複雜的邏輯在裡面，因為這邊其實會增加日後 maintain 的一個難度，所以呢我們把這個重責大任交給了 CSS。

那我們來看一下我們的 CSS 是怎麼做的。


有效的 CSS 一句就夠了，在這裡呢，我們使用了一個新的 pseudo-element， 它叫作 `placeholder-shown`，然後再搭配了一個 "小蟲" 符號 (`~`)。

那麼這句話，我把它翻成白話就是，如果 input 裡面沒有值，那麼 suggestion 就不會呈現。

它的運作原理就是這樣子。透過這樣子呢，我們便輕輕鬆鬆的，把這個複雜的邏輯，把它收納在一起。

好那現場的話，來為大家做一個 live demo。(希望不會出包)

### Live Demo

那當 user 進來了之後，當他點擊了一個，ㄜ 這個放大鏡，進行了一個搜尋，那我來打一下 AMP 好了。

那我輸入 A~，誒其實有看到，我們的關鍵字其實已經回來了。

那如同剛剛所講的，如果今天把這個關鍵字做一個清除的話，那麼下面的這塊 suggestion，我希望它是消失的。(刪刪刪 -> 列表消失) See~。它已經消失了。

那麼這個呢，就是我們所提供的一個 suggestion 功能。

好，接下來要帶大家看的，是一個 like 的功能。

## Case Share - Like


那這個 like，在大家來看，也許是一個稀鬆平常，沒什麼了不起的功能，可是我們的 user 非常的喜歡! :kissing_smiling_eyes: <3

那為什麼呢？主要是因為，只要在有登入的狀態下，user 點擊 like，我們就會幫他把這個他愛過的商品，加入他，他的慾望清單。

所以他可以在任何時間、任何地點都可以回來一覽他的這個慾望清單，那麼除此之外呢，只要商品有做降價，我們更會發送一個降價通知的 notification 給我們的 user，給這些愛過它的人。

所以我們 user 呢，他就可以在，最正確的時間，以最低廉的價格，買到他最心儀的商品。

這就是為什麼我們的 user，非常喜歡使用這個 like 的功能。

那我來帶大家來看，我們用了哪些 AMP component。


我們用了一個 `amp-form`，去做一個發送 XHR 的動作，那一樣用一個 `amp-list` 去做一個 rendering，然後還有 mustache。

那裡面最關鍵最關鍵的呢，其實是透過 AMP 的 access，去做一個跟 member login system 的結合。

所以在 AMP 裡面呢，其實也可以有效的用我們服務的 login 去做一個整合。

那一樣的來帶大家看一下，它們裡面的 HTML structure。


其實非常簡單，它就只是一個 form，那它的運作原理呢，就是~ 當我有做一個 like 的動作，那麼我們會把，這些 XHR 發送到 backend，然後 backend 會幫我們檢查，他到底有沒有 login 過，或是去執行一些 like 的動作，那麼如果它們中間有任何的錯誤產生，我們會透過 submit error 去把這個錯誤接起來，然後把錯誤訊息吐出給一個 dialog，它告訴我們的 user，引導我們的 user，該做哪些事情。

那如果他 submit success 的話，就是回來成功的話，我們會藉此動態的去更改，ㄜ 下面這個元件的 CSS，所以呢我們就可以看到說，等一下就可以看到說，它在完成 like 之後，它就會有一個非常活潑、跳躍的一個 animation。

好，那同樣的，我來帶大家來做一個 live demo。

### Live Demo

首先呢，當我點擊這個愛心之後，誒我們已經知道説，他其實沒有 login。


那麼現場的我們就會看到說，這個 login 它會提醒你，你要先加入 login 功能喔，你要先去 login。

那麼我先做一個 login 的動作。 (login 中)

那完成 login 之後呢，當我再點擊這個愛心，誒我們就已經成功地把這個商品，加入到我們的最愛清單裡面了。

:::success
會叮一聲，愛心會稍微放大，然後恢復原本大小。
:::


那今天我不愛它，我再按一下就可以了。

所以輕輕鬆鬆的，我們就完成了這個 like 的功能。

## After Componetlize


好，那完成了這些，取得了這些成就之後，我們開始在想，要如何的，把這些功能 deliver 到不同的頁面裡面去？

所以呢其實我們在做一個 componentlize 的一個動作。

比方說剛剛的 suggestion，我直接把它封裝到 header 裡面去，剛剛的 like 呢，我直接把它封裝到每一個商品小卡裡面去。

所以每一個頁面，如果說有需要用到這些功能，其實只要 require 進來，它就馬上具備了這樣子的一個功能。

我們讓整個的一個開發流程，就像在堆積樂高積木一樣，一塊一塊一塊的，把它給拼湊出來。

所以整體的開發流程是非常活潑的、非常雀躍的。

那這個是我們 Yahoo! 奇摩拍賣的一個商品頁


那麼這個是頻道頁

:::success
應該是指商品分類，底下選了「面紙盒」這個分類
:::


那這個是我們的搜尋結果頁

:::warning
直接在投影片中操作搜尋功能，搜尋結果不會直接 show 在模擬的手機畫面裡面，而是會跳出投影片，跑到另外一張頁面去。
:::


那其實這三個頁面呢，如同剛剛所講的，我們都有把功能給實作進來，所以很快的我們就可以勾勒出這三個頁面的一個，一個整體的輪廓。

那跟大家報告一下，這三個頁面，經過了這些 componentlize 之後，其實我只花一天的時間，就把這三個頁面給刻出來了。

## We can do better


好，那經過了這些事情之後，我們堅信我們可以做得更好。

我們的體驗進化了。

它終於呢，不再認為數大便是美！

它知道說，把一些亂七八糟、用不到的功能，塞到同一個頁面，它只是澎湃，但實際上，如果 user 用不到的話，它就只是一坨垃圾，甚至呢，還是一坨會拖垮 performance 的垃圾。

> 那麼唯有貼近 user 的心，了解 user 真正的需求，我們才能 touch 到他心中最軟的那一塊！
> [name=Paul Li][color=#90b7f7]

也因此，我們才可以促成，一個轉換率的一個成功。

所以呢，我們便開始在想，要如何利用這些 AMP component，來做一些 UX 的一個 enhance?

那我來帶大家看一下。

那這是我們的 item page，那其實我們做了什麼呢？


我們可以看到說，在 scroll 進來的時候，這個商品圖片其實會慢慢的變大，它有一個 zoom in 的效果，那麼這是因為我們希望，可以讓 user 營造出一股引人入勝，然後一個商品質量升級的一個錯覺。:satisfied:


藉此呢，希望可以增加 user 的喜愛程度。

好，那除此之外呢，我們知道我們的 user 非常的喜歡使用 like 的功能，所以我們希望，可以在 like 上面，除了 animation 之外，我們希望可以做一些 enhancement。

那我來帶大家看一下。我們做什麼呢？(叮)

我們加入了音效 :satisfied:

所以呢，在 AMP 裡面，加入音效也不會是一個問題。

好，(我把聲音關掉，省得等一下該該叫)

那除此之外呢，我們發現，我們的使用者，非常喜歡，目前呢，使用 iPhoneX 的人口愈來愈多了。

那麼其實 AMP 呢，還蠻雞歪的，它對於很多限制，對於 form validation 的部分，都還蠻嚴謹的，所以我們也不知道說，到底能不能 support iPhoneX 的一個 design guideline。

那我來帶大家看一下，經過測試跟實驗之後 (喔，好小喔)


所以其實呢，我們的所有的 AMP Page，我們都有 support 到 iPhoneX 的 design。

(這樣看其實不太準，要這樣子)


所以可以看到說，其實它是滿版的。

所以 user 在用 iPhoneX 瀏覽我們網站的時候，其實他也可如行雲流水一般，來使用我們的服務。

好，那我再回到其他頁面來。

那這就是我們對 item page 所做的 enhancement。

(對不起，最近不知道裝了什麼死人東西啦，所以 server 有點爛)

好，這是 Yahoo! 奇摩拍賣的一個首頁，那它是一個 side project，我自己私下在做的一個練習。


那我們這邊呢，其實做了一些有趣的資訊呈現，那大家可以看到說，誒我們有做了一些嘗試，就是 AMP 呢，它其實有提供一些客製化的，已經提供了一些 UI 的操作介面，比方說這個箭頭，我不希望說大家的箭頭都長一樣。

所以呢，我透過 CSS，我也可以動態的，去把這些箭頭，換成是我們服務的箭頭，讓 user 在使用我們的服務的時候，才會有認同感。

那麼除此之外呢，我不曉得大家還記不記得，去年我一樣是在 Modern Web，我講到 Yahoo! 奇摩拍賣，有推出了一個直播功能。

那麼其實呢，我們希望我們可以揭露直播的訊息給我們的 user。

那這個直播呢，我們知道 AMP 它其實會 cache 一份到 Google 的一個 CDN。

我們不希望說，它可能在 cache 的當下是直播，可是當 user 在瀏覽那個 cache file 的時候，可能直播都不直播了。

所以呢，我們這邊呢，其實大家可以眼睛快一點可以看到，其實我們的直播是動態 loading 進來的。

所以我們可以動態的把當前直播的訊息呢，把它拉進來，那包括，當然包括還有一些重播的部分。

那麼為了讓 user 呢，ㄜ 感到有趣，所以其實我們也做了一些嘗試。

我們讓這些直播點擊之後，誒，可以馬上就可以看到直播了。

所以呢，在 AMP 裡面看直播，其實也不會是問題。

那麼除此之外呢，ㄜ 有關於一些 CSS Grid，因為現在這種拼貼的做法，designer 很愛。

那麼我們發現說，用 CSS Grid，也可以正常的運作。

那當然說，當然還有包括一些有關於這些最愛賣家啊的什麼的，其實我們也可以去加入一些最愛賣家的動作。

:satisfied: :satisfied: :satisfied:

> ㄜ 什麼都有，什麼都賣，什麼都不奇怪 :satisfied:
> My God! :satisfied:

:::info
好像看到象鼻什麼的…⊙▽⊙
:::

好，這是 Yahoo! 奇摩超級商城。


那當然啦，我也希望說可以在這邊做一些 enhancement。

所以呢，我們可以看到說，我們在這邊做了哪些動作呢，如果大家眼睛利一點的話，應該可以看到我們在上面，有做了一個 scroll 的 indicator。


所以當你在 scroll 的時候，我們可以看到說，上面其實是會有變化的，那這是因為我們希望 user 可以感到安心，讓他隨時都可以掌握到當時的進度，知道說他瀏覽的一個進度條到底到什麼樣的一個程度。

那除此之外呢，大家有看到，其實我也有做了一個 Goto Top 的一個功能。


所以當點擊之後，它平常是隱藏的，那如果說有 scroll 的時候，它才會出現。

那很多時候，大家都想說 AMP 都是一個靜態頁面，靜態頁面其實都玩不了什麼花樣。

那其實我們這邊呢，也有做了一個 load more 的功能。


所以當我點擊 load more 的時候，其實我也可以動態的去把一個，下一頁的著這些商品，把它給拉回來。

那這個 load more 大家眼尖的話，應該可以發現 「更多結果」其實我是直接抄襲 Google 的 UI，因為這樣子可以避免 user 還要再重新學習。

好，那麼因為我們 Yahoo! 奇摩商城的 user 比較奇怪，他喜歡辦活動，所以我們在這邊，其實也會動態的去加入這些 tab，讓他可以隨時的去做一個切換。

那更導入了 push state，所以也可以使用 browser 的一個回上頁、下一頁，動態去切換這些 tab。

那麼為了讓整個頁面感覺更加的活潑，其實對於關於我，我們也做了一些努力，所以當我點擊關於我之後，其實他會有一個躍動的效果，讓我們的網站感覺是年輕的。

> 靠不重要啦
> [name=某位聽眾]


那這就是 Yahoo! 奇摩超級商城。

那最後呢，我來跟大家介紹一下，啊這是 Yahoo! 奇摩中古車。


那我們其實呢，針對一個不同的服務，不同的屬性，我們希望可以提供不一樣的呈現內容給我們的使用者。

所以呢，我們的中古車，因為中古車不可能你一看，你就馬上下單，人家又不是白痴。:satisfied:

所以呢，我們可以透過說，只要點擊下面的這顆按鈕，我們便可以跟鄭先生預約看車。

那跟鄭先生預約完之後呢，我們會想知道說，他的車廠究竟在哪裡，所以只要點擊這個 marker。


誒，其實我們就會有一個 Google 地圖的這個呈現。


所以呢，我們有效結合了一個線上線下的服務，讓我們的 AMP 更加的靈活，更加地具有功能性。

好，那麼講到這裡呢，上個禮拜 (幸好這邊沒有不堪的商品)，上個禮拜呢，我們有一個 PM，他帶著輕蔑不屑的語氣走過來跟我說

<style>
.shaking-text {
display: inline-block;
font-size: 150%;
animation: shaking 5s ease-in-out infinite;
}
@keyframes shaking {
2% {
transform: translate(-6px, 6px) rotate(0);
}
4% {
transform: translate(1px, -1px) rotate(0);
}
6% {
transform: translate(7px, -7px) rotate(0);
}
8% {
transform: translate(1px, -1px) rotate(0);
}
10% {
transform: translate(-9px, 9px) rotate(0);
}
12% {
transform: translate(-1px, 1px) rotate(0);
}
14% {
transform: translate(-3px, 3px) rotate(0);
}
16% {
transform: translate(-6px, 6px) rotate(0);
}
18% {
transform: translate(0, 0px) rotate(0);
}
20% {
transform: translate(-2px, 2px) rotate(0);
}
22% {
transform: translate(-1px, 1px) rotate(0);
}
24% {
transform: translate(-3px, 3px) rotate(0);
}
26% {
transform: translate(-4px, 4px) rotate(0);
}
28% {
transform: translate(0, 0px) rotate(0);
}
30% {
transform: translate(8px, -8px) rotate(0);
}
32% {
transform: translate(-6px, 6px) rotate(0);
}
34% {
transform: translate(0, 6px) rotate(0);
}
36% {
transform: translate(0, -4px) rotate(0);
}
38% {
transform: translate(0, 2px) rotate(0);
}
40% {
transform: translate(0, -8px) rotate(0);
}
42% {
transform: translate(0, -9px) rotate(0);
}
44% {
transform: translate(0, -3px) rotate(0);
}
46% {
transform: translate(0, 0px) rotate(0);
}
48% {
transform: translate(0, -7px) rotate(0);
}
50% {
transform: translate(0, 0px) rotate(0);
}
52% {
transform: translate(0, 3px) rotate(0);
}
54% {
transform: translate(0, -4px) rotate(0);
}
56% {
transform: translate(0, 3px) rotate(0);
}
58% {
transform: translate(0, -9px) rotate(0);
}
60% {
transform: translate(0, 9px) rotate(0);
}
62% {
transform: translate(0, -6px) rotate(0);
}
64% {
transform: translate(0, 0px) rotate(0);
}
66% {
transform: translate(0, -4px) rotate(0);
}
68% {
transform: translate(0, 1px) rotate(0);
}
70% {
transform: translate(0, 5px) rotate(0);
}
72% {
transform: translate(0, 0px) rotate(0);
}
74% {
transform: translate(0, -6px) rotate(0);
}
76% {
transform: translate(0, -3px) rotate(0);
}
78% {
transform: translate(0, 3px) rotate(0);
}
80% {
transform: translate(0, 6px) rotate(0);
}
82% {
transform: translate(0, 2px) rotate(0);
}
84% {
transform: translate(0, -3px) rotate(0);
}
86% {
transform: translate(0, 1px) rotate(0);
}
88% {
transform: translate(0, 1px) rotate(0);
}
90% {
transform: translate(0, 10px) rotate(0);
}
92% {
transform: translate(0, -2px) rotate(0);
}
94% {
transform: translate(0, -2px) rotate(0);
}
96% {
transform: translate(0, -6px) rotate(0);
}
98% {
transform: translate(0, -9px) rotate(0);
}
0%, 100% {
transform: translate(0, 0) rotate(0);
}
}
</style>

> 誒 Paul，我看你那個 AMP 很行嘛，那我們齁，有一個新的廣告，叫做<span class="shaking-text">動</span>廣告。那麼我希望呢，那這個商品，有買動廣告的商品，只要再進入 viewport 的時候，我就要不斷的變換那個商品的圖片。然後這樣子才夠吸睛。
> [name=輕蔑不屑的 PM][color=#90b7f7]

我心想，天啊，這麼 low 的 idea 你也講得出來。:satisfied:

沒關係，我這個人呢，最賭爛人家嗆我，所以一個小時之後呢，我就用現有的 AMP component 做一個變化，讓大家來看一下，什麼才是動廣告。

只要捲進來呢，誒。:satisfied:


我們就開始震動了。:satisfied:

> 這才是<a title="他媽的老木版">xq!#@!@#</a>真正的動廣告！
> [name=Paul Li][color=#90b7f7]

那它動呢，其實他還是有功能性的，當我點擊 like，一樣可以。:satisfied:

所以一個小時之後，我就把這個頁面交付給他了，他就只能夾著尾巴躲到旁邊去。:satisfied:

好，那講到這裡呢，其實早期對於 AMP 還不熟悉，如果有一些 PM 所提出的需求，我都會跟他講，誒不好意思，AMP 沒 support。

其實做到這裡，我們都知道說，只要透過相互間的 AMP component 的一個接合，真的可以玩出很多新奇有趣的花樣。

> 朕沒給你的，我們一樣有辦法做出來。
> [name=Paul Li][color=#90b7f7]

好，那除了這些 Yahoo! 奇摩的一些範例之外，我們來看看 AMP 它到底還可以為我們帶來哪些花樣？

## What else ?


### Google Organic

那第一個就是 Google Organic，它可以確確實實的增加一個導流。如果我們隨便去抓一個 Google 的一個工程師來問，他們的官方說法，都是那個沒有效，不會影響到排名。


可是實際上，我跟大家報告，這個東西真他媽的有效。:satisfied:

所以呢，如果你們家的服務還沒有 on AMP，其實可以回去之後，也開始考慮，認真的思考，要不要 on AMP，因為今年可以說是 AMP 在台灣的一個 AMP 元年。越來越多的服務都開始 on AMP 了。

不要輸在起跑點上。

### Mobile web

好，那第二個呢，做好的 AMP 呢，它其實很快的，就會變成，可以直接變成我們的 mobile web。


所以呢，你其實並沒有多做一個頁面，相反的你反而是多賺到了一個頁面。

### AMP Email


> 下個時代的 email 格式已經來臨

再來，(Paul 已經回去了嗎?) Paul 昨天有講到說 (另外一個 Paul)，有講到說 AMP Email。

那麼 AMP 呢，現在對我個人來講，這實在是嶄新的一個，跨時代的一個 support。

那麼傳統呢，我們只會寄發一些折價劵，條件嚴苛又難用的折價劵，來騙 user 回來買東西。:satisfied:

那這些作法呢，其實已經是老套的做法。

user 被騙一次兩次就已經夠了，又不是神經病還被你騙第三次。

唯有提供精緻，貼近 user 的東西才能夠有效的提升轉換率。

所以呢，我們就利用了一個這樣子的機制，來做了一個這樣子的 scenario 給大家看。

在 Yahoo! 奇摩拍賣呢，只要有 login，並且同意過 TOS (Terms of Service) 之後，我們會偷偷地記錄他的瀏覽路徑。

所以呢，我們可以發送一個這樣子的 Email 在上面。

第一則訊息就是，您的精彩回顧。那當 user 點擊這封 mail 的時候，誒其實他就可以馬上看到 :satisfied:


> 象鼻！⊙▽⊙!!!
> [name=某位現場觀眾][color=#90b7f7]

> 好，我重申一下
> 什麼都有 什麼都賣 什麼都不奇怪
> [name=Paul Li][color=#90b7f7]

好，其實呢，剛剛所講到的一個 search suggestion 其實它也有 support，那麼對於其他的功能，它是一個互動的，所以不會像是傳統的呆板的 email 型式一樣。 （趕快把它轉走）

那既然是 user 喜歡的東西，其實他對於這些商品，他已經有一定程度的了解。

如果今天他對這個商品看到之後，他覺得，喔這個價格，這個 detail 其實是深得我心，他也只要點擊這個 (我點錯了)。

好，他只要 （又來了）:satisfied:

他只要點擊一個購買的這個 bag，就可以彈出說，相關的 detail。



所以呢，user 可以直接在你的 email 裡面，去做一個數量的加減。甚至就可以直接購買了。

那麼就如同剛剛搜尋引擎跟我們的服務一樣，我們可以有效的結合 email 跟我們的服務，我們可以有效的提升購買的品質，可以有效的提升轉換率。

那麼除此之外呢，AMP 它其實也有提供一個 AMP Story。

### AMP Story


:::warning
AMP Story 是個實驗性質的功能，如果沒有啟動，會顯示提示，並需在啟動後重新載入頁面。
:::

那白話一點，我個人覺得，它就是抄襲 Facebook 跟 Instagram 的 Story，那只是因為它提供了一個滿版的一個呈現，所以其實是非常好看的。

那在美國呢，其實很多新聞網站，都已經開始使用了這樣子的一個 AMP Story，你可以把它當作懶人卡，你可以把它當作是一個專題報導。

那透過這樣子的典籍呢，其實可以幫助我們的使用者，做一個蠻吸睛蠻深入的一個報導。

那麼最棒的呢，就是它在 Google 的 search result page，也會有一條 Story 的 carousel，所以更有機會可以大大地增加我們 Google Organic 的流量。

### Google ADs


好，那關於 Google AdSence 呢，其實它現在也開始全面 support 這些 AMP 的 material。

所以如果你想要做一些，ㄜ 互動型的，或者說一些動態型的廣告，一些 animation 的廣告，其實我們也可以提交這樣子的一個素材，給 AdSense。

那最後呢，昨天兩位 keynote speaker 都有講到 PWA。

### Progressive Web AMPs


做好的 AMP 呢，其實我們只要再適時的，去添加一些 metadata，manifest，再加入一個 ㄜ service worker，那其實 AMP 它有 support 一個叫做 AMP service worker。

我們透過這樣子，可以做到一個 preload 跟一個 cache 的一個機制，很快的我們就可以提供，就可以把既有的、寫好的一個 AMP，轉換成是一個 PWA。

提供給使用者，有別於 native app 的另外一種選擇。

那我來帶大家看一下，它是怎麼運作的。

{%youtube vQFAl__EGbI %}

所以我打開瀏覽器，然後點擊剛剛我們所看到的一個 side project 的這個首頁。

:::info
點擊完 Safari 瀏覽器之後，後面的部分其實就是播放一個事先錄製的影片，完全沒有手動操作。
:::

那點擊完之後呢，我們來稍微看一下，簡單的這些 carousel 的動作。

那剛剛我們有講到說，其實對於那個 loading 我們也可以客製化。所以把它客製化成我們服務的一個 loading icon。

好，那透過，透過下面的這個 explore，我們可以把它加入到主畫面，那其實因為 metadata 有定義了 icon 的樣式，所以它就長得像這樣。

那麼我們也可以定義那個 splash tag，這個 image，所以呢，user 在使用這個服務的時候，其實它就像是在使用 App 一樣。

那麼跟 App 不一樣的，它就是具備了 Mobile Web 的優雅，因為我們隨時隨地都可以去更改它的內容，不需要使用者去做一個更新的動作。

那這就是剛剛說到的一個直播的功能。

那如果大家對於這樣的一個作法蠻有興趣的話，其實呢也可以掃描現在畫面上的這個 QR Code。


:::info
QR Code 連結：
https://blog.lalacube.com/mei/yahoo_auction_fp_amp.php
:::

來一睹這個 AMP 所帶來的一個超凡的威力。

那講到這裡呢，其實也已經趨近尾聲了，我們透過剛剛所介紹的 AMP，只要學好 AMP，我們不僅僅可以做一個 Organic 的導流，我們甚至呢，它還可以做這麼多這麼多，豐富有趣的事情，可以說 C/P 值非常非常的高。也因此呢，透過 AMP 確實可以彈奏出璀璨美妙的 SOLO 樂章。

那以上呢，便是我今天的分享，那希望今天分享的內容，不至於太過乏燥。

那對於今天分享的內容有任何的疑問，歡迎會後或者說可以透過 Facebook 來對我做一個聯繫。

我非常希望大家可以一起來討論。然後相信我們可以藉由討論的過程中，可以一起成長，一起邁向美好的未來。謝謝大家。:clap: :clap: :clap: :clap: :clap:

###### tags: `MW18`