หน้า AMP ที่เป็น Canonical ที่สวยงามและอินเทอร์แอกทีฟ

AMP ช่วยให้สร้างหน้าเว็บที่เชื่อถือได้ ตอบสนองตามอุปกรณ์ และมีประสิทธิภาพมากขึ้นได้ง่ายขึ้น AMP ช่วยให้คุณสร้างการโต้ตอบทั่วไปในเว็บไซต์ได้โดยไม่ต้องเขียน JavaScript เว็บไซต์ amp.dev มีเทมเพลตสําหรับการเริ่มต้นใช้งานที่รวดเร็วและออกแบบไว้ล่วงหน้า

สิ่งที่คุณจะสร้าง

ใน Codelab นี้ คุณจะสร้างหน้า AMP ที่ปรับเปลี่ยนตามอุปกรณ์และสวยงามที่ปรับเปลี่ยนตามอุปกรณ์ได้ทั้งหมด ซึ่งรวมฟีเจอร์มากมายของ AMP & #39 และคอมโพเนนต์ที่ขยาย

  • การนําทางที่ปรับเปลี่ยนตามอุปกรณ์
  • ภาพหน้าปกฮีโร่แบบเต็มหน้า
  • รูปภาพที่ปรับเปลี่ยนตามอุปกรณ์
  • วิดีโอที่มีการเล่นอัตโนมัติ
  • การฝัง เช่น Instagram
  • การดําเนินการและตัวเลือก
  • การผูกข้อมูลกับ amp-bind
  • เอฟเฟกต์ภาพที่มี amp-fx-collection และ amp-animation

สิ่งที่ต้องมี

  • เว็บเบราว์เซอร์ที่ทันสมัย
  • Node.js และเครื่องมือแก้ไขข้อความหรือการเข้าถึง CodePen หรือสนามเด็กเล่นออนไลน์ที่คล้ายกัน
  • ความรู้เบื้องต้นเกี่ยวกับ HTML, CSS, JavaScript และเครื่องมือสําหรับนักพัฒนาซอฟต์แวร์ของ Google Chrome

เครื่องมือสําหรับการแสดงเนื้อหา

เราจะใช้ Node.js เพื่อเรียกใช้เซิร์ฟเวอร์ HTTP ในเครื่องเพื่อแสดงหน้า AMP ไปที่เว็บไซต์ Node.js เพื่อดูวิธีติดตั้ง

เครื่องมือของเราที่เลือกแสดงเนื้อหาในพื้นที่จะแสดง ซึ่งเป็นเซิร์ฟเวอร์เนื้อหาคงที่แบบ Node.js หากต้องการติดตั้ง ให้เรียกใช้คําสั่งต่อไปนี้

npm install -g serve

ดาวน์โหลดเทมเพลตจาก amp.dev

เทมเพลต AMP คือที่เก็บเทมเพลต AMP และคอมโพเนนต์ที่เริ่มต้นใช้งานได้อย่างรวดเร็ว ซึ่งจะช่วยให้คุณสร้างหน้า AMP ที่ปรับเปลี่ยนตามอุปกรณ์ได้อย่างรวดเร็ว

ไปที่เทมเพลต AMP และดาวน์โหลดโค้ดสําหรับ " Simple Article" สําหรับ "รูปภาพสัตว์ที่ดีที่สุดแห่งปี'

การเรียกใช้โค้ดเทมเพลต

แตกเนื้อหาของไฟล์ ZIP

เรียกใช้คําสั่ง serve ในโฟลเดอร์ article เพื่อแสดงไฟล์ในเครื่อง

ไปที่ http://localhost:5000/templates/article.amp.html ในเบราว์เซอร์ (พอร์ตอาจเป็น 3000 หรือหมายเลขที่แตกต่างกันขึ้นอยู่กับเวอร์ชันของ serve ตรวจสอบคอนโซลเพื่อค้นหาที่อยู่ที่แน่นอน)

ระหว่างนั้นเราลองมาเปิดเครื่องมือสําหรับนักพัฒนาเว็บใน Chrome และสลับโหมดอุปกรณ์ด้วย

ตัดโค้ดเทมเพลต

ณ จุดนี้ เราได้นั่งร่างหน้า AMP ที่ใช้งานได้เป็นส่วนใหญ่ แต่วัตถุประสงค์ของ Codelab นี้คือการเรียนรู้และฝึกปฏิบัติ ดังนั้น...

ลบทุกอย่างใน <body></body>

ตอนนี้เราเหลือหน้าว่างซึ่งมีเพียงโค้ด Boilerplate บางรายการเท่านั้น:

ตลอด Codelab นี้ คุณจะต้องเพิ่มคอมโพเนนต์ต่างๆ ลงในหน้าว่างนี้เพื่อสร้างเทมเพลตใหม่ที่มีฟังก์ชันเพิ่มขึ้น

หน้า AMP คือหน้า HTML ที่มีแท็กเพิ่มเติมและมีข้อจํากัดบางประการเพื่อประสิทธิภาพที่เชื่อถือได้

แม้ว่าแท็กส่วนใหญ่ในหน้า AMP จะเป็นแท็ก HTML ปกติ แต่ระบบจะแทนที่แท็ก HTML บางรายการด้วยแท็กเฉพาะสําหรับ AMP องค์ประกอบที่กําหนดเองเหล่านี้ซึ่งเรียกว่าคอมโพเนนต์ AMP HTML ทําให้รูปแบบทั่วไปสามารถนําไปใช้งานได้อย่างมีประสิทธิภาพได้อย่างง่ายดาย

ไฟล์ AMP HTML ที่เรียบง่ายที่สุดแบบนี้ (บางครั้งเรียกว่า Boilerplate)

<!doctype html>
<html ⚡>
 <head>
   <meta charset="utf-8">
   <link rel="canonical" href="hello-world.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>
 </head>
 <body>Hello World!</body>
</html>

ลองดูโค้ดของหน้าเว็บเปล่าที่คุณสร้างขึ้นระหว่างการตั้งค่า ซึ่งประกอบด้วย Boilerplate นี้และมีแท็กเพิ่มเติมต่างๆ ที่สําคัญคือแท็ก <style amp-custom> ที่มี CSS แบบย่อมากมาย

AMP ไม่ได้ให้ความเห็นเกี่ยวกับการออกแบบและไม่ได้บังคับใช้ชุดรูปแบบบางอย่าง คอมโพเนนต์ AMP ส่วนใหญ่มีการจัดรูปแบบพื้นฐาน โดยจะปล่อยให้ผู้เขียนหน้าเว็บระบุ CSS ที่กําหนดเองของตนเอง นั่นคือสิ่งที่ <style amp-custom> จะเข้ามามีบทบาท

อย่างไรก็ตาม เทมเพลต AMP มีรูปแบบ CSS ที่ได้รับการแสดงความคิดเห็นซึ่งได้รับการออกแบบอย่างสวยงาม ข้ามเบราว์เซอร์ และตอบสนองตามอุปกรณ์เพื่อช่วยให้คุณสร้างหน้า AMP สวยๆ ได้อย่างรวดเร็ว โค้ดเทมเพลตที่คุณดาวน์โหลดมีรูปแบบ CSS ที่แสดงความคิดเห็นเหล่านี้ใน <style amp-custom>.

เราจะเริ่มโดยเพิ่มคอมโพเนนต์ที่เรานําออกจากเทมเพลตกลับเข้าไป เพื่อสร้าง Shell สําหรับหน้าของเรา รวมถึงเมนูการนําทาง รูปภาพส่วนหัวของหน้า และชื่อ

เราจะรับความช่วยเหลือจากหน้าคอมโพเนนต์ UI เริ่มต้นของ AMP แต่จะไม่เจาะลึกเกี่ยวกับรายละเอียดการติดตั้งใช้งาน โดยขั้นตอนในภายหลังใน Codelab จะมอบโอกาสมากมายให้คุณทําเช่นนั้น

เพิ่มการนําทางที่ปรับเปลี่ยนตามอุปกรณ์

ไปที่ https://ampstart.com/components#navigation และคัดลอกโค้ด HTML ที่เตรียมไว้สําหรับ RESPONSIVE MENUBAR ลงใน body ของหน้าเว็บ

โค้ดที่ AMP Start มีให้จะมีโครงสร้างคลาส HTML และ CSS ที่จําเป็นเพื่อใช้แถบนําทางที่ปรับเปลี่ยนตามอุปกรณ์สําหรับหน้าเว็บ

ลองใช้เลย: ปรับขนาดหน้าต่างเพื่อดูการตอบสนองของขนาดหน้าจอต่างๆ

โค้ดนี้ใช้คําค้นหาสื่อ CSS และคอมโพเนนต์ AMP amp-sidebar และ amp-accordion

เพิ่มรูปภาพและชื่อหลัก

นอกจากนี้ AMP Start ยังมีข้อมูลโค้ดที่พร้อมใช้งานสําหรับรูปภาพและชื่อที่สวยงามและตอบสนองตามอุปกรณ์ด้วย

ไปที่ https://ampstart.com/components#media แล้วคัดลอกโค้ด HTML ที่จัดเตรียมให้กับ Fullpage Hero ลงในโค้ดหลัง <!-- End Navbar --> comment ใน body.

มาอัปเดตรูปภาพและชื่อกัน

คุณอาจสังเกตเห็นจากแท็ก amp-img ในข้อมูลโค้ดเป็น 2 แท็กที่แตกต่างกัน รูปภาพแรกใช้สําหรับความกว้างที่เล็กกว่า และควรชี้ไปที่รูปภาพที่มีความละเอียดน้อยลง ขณะที่อีกรูปหนึ่งใช้สําหรับจอแสดงผลที่ใหญ่กว่า ซึ่งจะสลับโดยอัตโนมัติตามแอตทริบิวต์ media ซึ่ง AMP รองรับในองค์ประกอบ AMP ทั้งหมด

อัปเดต src, width และ height เป็นรูปภาพอื่นและชื่อเป็น "การเดินป่าที่สวยงามที่สุดในภาคตะวันตกเฉียงเหนือของแปซิฟิก" โดยแทนที่ <figure>...</figure> ที่มีอยู่ด้วย

<figure class="ampstart-image-fullpage-hero m0 relative mb4">
    <amp-img width="600" height="900" layout="responsive" src="https://unsplash.it/600/900?image=1003" media="(max-width: 415px)"></amp-img>
    <amp-img height="1800" layout="fixed-height" src="https://unsplash.it/1200/1800?image=1003" media="(min-width: 416px)"></amp-img>
    <figcaption class="absolute top-0 right-0 bottom-0 left-0">
      <header class="p3">
        <h1 class="ampstart-fullpage-hero-heading mb3">
        <span class="ampstart-fullpage-hero-heading-text">
          Most Beautiful Hikes in the Pacific Northwest
        </span>
      </h1>
        <span class="ampstart-image-credit h4">
        By <a href="#" role="author" class="text-decoration-none">D.F. Roy</a>,<br> January 14, 2017
      </span>
      </header>
      <footer class="absolute left-0 right-0 bottom-0">
        <a class="ampstart-readmore py3 caps line-height-2 text-decoration-none center block h5" href="#content">Read more</a>
      </footer>
    </figcaption>
</figure>

มาดูหน้านี้กัน

สรุป

  • คุณสร้าง Shell สําหรับหน้าเว็บ รวมถึงการนําทางที่ปรับเปลี่ยนตามอุปกรณ์ รวมทั้งรูปภาพหลักและชื่อ
  • ดูข้อมูลเพิ่มเติมเกี่ยวกับเทมเพลต AMP และใช้คอมโพเนนต์ UI เริ่มต้นของ AMP เพื่อรวม Shell ของหน้าเว็บอย่างรวดเร็ว

ดูโค้ดที่สมบูรณ์ของส่วนนี้ได้ที่ http://codepen.io/aghassemi/pen/RpRdzV

ในส่วนนี้ เราจะเพิ่มรูปภาพ วิดีโอ การฝัง และข้อความที่ปรับเปลี่ยนตามอุปกรณ์ลงในหน้าของเรา

มาเพิ่มองค์ประกอบ main ที่โฮสต์เนื้อหาของหน้าเว็บกัน เราจะเพิ่มต่อท้าย body:

<main id="content">

</main>

เพิ่มส่วนหัวและย่อหน้า

เพิ่มโค้ดต่อไปนี้ภายใน main

<h2 class="px3 pt2 mb2">Photo Gallery</h2>
<p class="ampstart-dropcap mb4 px3">Vivamus viverra augue libero, vitae dapibus lectus accumsan eget. Pellentesque eget ipsum purus. Maecenas leo odio, ornare nec ex id, suscipit porta ipsum. Ut fringilla semper cursus.</p>

เนื่องจาก AMP เป็นเพียง HTML โค้ดนี้จึงไม่พิเศษอะไร ยกเว้นชื่อคลาส CSS เหล่านั้น px3, mb2 และ ampstart-dropcap คืออะไร มาจากไหน

ชั้นเรียนเหล่านี้ไม่ได้เป็นส่วนหนึ่งของ AMP HTML เทมเพลต AMP เริ่มต้นใช้ Basscss เพื่อมอบชุดเครื่องมือ CSS ระดับต่ําและเพิ่มคลาสเฉพาะสําหรับ AMP Start

ในข้อมูลโค้ดนี้ px3 และ mb2 จะกําหนดโดย Basscss และแปลเป็น ระยะห่างด้านซ้าย-ขวา และระยะขอบล่างตามลําดับ ampstart-dropcap ระบุโดย AMP Start และทําให้ตัวอักษรตัวแรกของย่อหน้าใหญ่ขึ้น

คุณสามารถดูเอกสารประกอบสําหรับคลาส CSS ที่กําหนดไว้ล่วงหน้าเหล่านี้ได้ที่ http://basscss.com/ และ https://ampstart.com/components

มาดูกันว่าหน้าตาเป็นอย่างไร

เพิ่มรูปภาพ

การทําให้หน้าที่ปรับเปลี่ยนตามอุปกรณ์เป็นเรื่องง่ายใน AMP ในหลายกรณี การทําให้คอมโพเนนต์ AMP ปรับเปลี่ยนตามอุปกรณ์ทําได้ง่ายๆ เพียงเพิ่มแอตทริบิวต์ layout="responsive" amp-img ยังรองรับ srcset เพื่อระบุรูปภาพที่แตกต่างกันสําหรับความกว้างของวิวพอร์ตและความหนาแน่นของพิกเซลต่างๆ ซึ่งคล้ายกับแท็ก img ของ HTML

เพิ่ม amp-img ใน main

<amp-img 
  layout="responsive" width="1080" height="720"
  srcset="https://unsplash.it/1080/720?image=1043 1080w, https://unsplash.it/720/480?image=1043 720w" 
  alt="Photo of mountains and trees landscape">
</amp-img>

ด้วยโค้ดนี้ เราจะสร้างรูปภาพที่ตอบสนองตามอุปกรณ์ด้วยการระบุ layout="responsive" และการระบุ width และ height.

ทําไมฉันถึงต้องระบุความกว้างและความสูงเมื่อใช้เลย์เอาต์ที่ปรับเปลี่ยนตามอุปกรณ์

เหตุผล 2 ข้อ ได้แก่

  1. AMP จะใช้ความกว้างและความสูงเพื่อคํานวณสัดส่วนภาพ และรักษาความกว้างและความสูงอย่างเหมาะสมเมื่อมีการเปลี่ยนแปลงความกว้างเพื่อให้พอดีกับคอนเทนเนอร์ระดับบนสุด
  2. AMP บังคับใช้การปรับขนาดแบบคงที่สําหรับองค์ประกอบทั้งหมดเพื่อให้ประสบการณ์ของผู้ใช้ที่ดี (ไม่มีการข้ามหน้าเว็บ) และเพื่อกําหนดขนาดและตําแหน่งขององค์ประกอบแต่ละรายการเพื่อวางหน้าเว็บก่อนที่จะดาวน์โหลดทรัพยากร

มาดูหน้านี้กัน

เพิ่มวิดีโอเล่นอัตโนมัติ

AMP รองรับโปรแกรมเล่นวิดีโอมากมาย เช่น YouTube และ Vimeo AMP มีเอลิเมนต์ video5 ของ HTML5 ของตนเองในคอมโพเนนต์แบบขยายของ amp-video โปรแกรมเล่นวิดีโอเหล่านี้บางส่วน ซึ่งรวมถึง amp-video และ amp-youtube รองรับการเล่นอัตโนมัติแบบปิดเสียงในอุปกรณ์เคลื่อนที่ด้วย

amp-video จะกลายเป็นโฆษณาที่ปรับเปลี่ยนตามอุปกรณ์ด้วยการเพิ่ม layout="responsive" ก็ได้ ซึ่งคล้ายกับ amp-img

มาเพิ่มวิดีโอเล่นอัตโนมัติลงในหน้าเว็บกัน

เพิ่มย่อหน้าและองค์ประกอบ amp-video ต่อไปนี้ลงใน main:

<p class="my2 px3">Vivamus viverra augue libero, vitae dapibus lectus accumsan eget. Pellentesque eget ipsum purus. Maecenas leo odio, ornare nec ex id, suscipit porta ipsum. Ut fringilla semper cursus.</p>

<amp-video 
  layout="responsive" width="1280" height="720"
  autoplay controls loop
  src="https://storage.googleapis.com/ampconf-76504.appspot.com/Bullfinch%20-%202797.mp4">
</amp-video>

มาลองดูสิ่งต่อไปนี้

เพิ่มการฝัง

AMP มีคอมโพเนนต์แบบขยายสําหรับการฝังของบุคคลที่สามจํานวนมาก เช่น Twitter และ Instagram สําหรับการฝังที่ไม่มีคอมโพเนนต์ AMP จะมี amp-iframe เสมอ

มาเพิ่ม Instagram ลงในหน้าของเรากัน

amp-instagram ไม่ได้เป็นคอมโพเนนต์ในตัวที่ต่างจาก amp-img และ amp-video แท็กการนําเข้าสคริปต์ต้องรวมไว้อย่างชัดแจ้งใน head ของหน้า AMP ก่อนจึงจะใช้คอมโพเนนต์ได้

Boilerplate ของ AMP Start ที่เราใช้ประกอบด้วยแท็กสคริปต์การนําเข้าจํานวนมาก มองหาจุดเริ่มต้นของแท็ก head และตรวจสอบว่าได้ป้อนสคริปต์สคริปต์การนําเข้าดังต่อไปนี้แล้ว

<script custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js" async></script>

เพิ่มย่อหน้าและองค์ประกอบ amp-instagram ต่อไปนี้ลงใน main:

<p class="my2 px3">Vivamus viverra augue libero, vitae dapibus lectus accumsan eget. Pellentesque eget ipsum purus. Maecenas leo odio, ornare nec ex id, suscipit porta ipsum. Ut fringilla semper cursus.</p>
    
<amp-instagram
   layout="responsive" width="566" height="708"
   data-shortcode="BJ_sPxzAGyg">
</amp-instagram>

มาลองดูสิ่งต่อไปนี้

ตอนนี้เนื้อหาก็น่าจะเพียงพอแล้ว

สรุป

  • คุณได้เรียนรู้เกี่ยวกับคอมโพเนนต์ที่ปรับเปลี่ยนตามอุปกรณ์ใน AMP แล้ว
  • คุณเพิ่มเนื้อหาสื่อและข้อความได้หลายประเภท

ดูโค้ดที่สมบูรณ์ของส่วนนี้ได้ที่ http://codepen.io/aghassemi/pen/OpXGoa

ขณะนี้เราได้สร้างเนื้อหาคงที่สําหรับหน้าเว็บของเราเท่านั้น ในส่วนนี้ เราจะสร้างแกลเลอรีรูปภาพแบบอินเทอร์แอกทีฟโดยใช้คอมโพเนนต์ต่างๆ เช่น ภาพหมุน ไลท์บ็อกซ์ และการดําเนินการ AMP

แม้ว่า AMP จะไม่รองรับ JavaScript ที่กําหนดเอง แต่ยังคงแสดงองค์ประกอบพื้นฐานจํานวนมากเพื่อรับและจัดการการดําเนินการของผู้ใช้

การมีรูปภาพทั้งหมดสําหรับหน้า AMP ที่เน้นรูปภาพซึ่งแสดงให้เห็นในหน้าจะไม่สร้างประสบการณ์ที่ยอดเยี่ยมแก่ผู้ใช้ โชคดีที่เราสามารถใช้ amp-carousel เพื่อสร้างสไลด์แบบปัดดูในแนวนอนได้

ก่อนอื่น ให้ตรวจสอบว่าแท็กสคริปต์ amp-carousel รวมอยู่ใน head

<script custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js" async></script>

ตอนนี้มาเพิ่มamp-carouselประเภทslidesที่ปรับเปลี่ยนตามอุปกรณ์ที่มีรูปภาพหลายๆ รูปให้กับ main: กัน

<p class="my2 px3">Vivamus viverra augue libero, vitae dapibus lectus accumsan eget. Pellentesque eget ipsum purus. Maecenas leo odio, ornare nec ex id, suscipit porta ipsum. Ut fringilla semper cursus.</p>

<amp-carousel 
  layout="responsive" width="1080" height="720"
  type="slides">

    <amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1039" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1040" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1041" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1042" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1043" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1044" layout="fill"></amp-img>
</amp-carousel>

type="slides" ช่วยให้เห็นรูปภาพได้ครั้งละ 1 ภาพเท่านั้น และช่วยให้ผู้ใช้ปัดผ่านรูปภาพได้

สําหรับรูปภาพภายในภาพหมุน เราใช้ layout="fill" เนื่องจากภาพสไลด์จะเติมขนาดด้วยองค์ประกอบย่อยเสมอ จึงไม่จําเป็นต้องระบุเลย์เอาต์อื่นที่ต้องการความกว้างและความสูง

มาลองใช้แล้วดูว่าจะมีลักษณะดังนี้

1.gif

มาเพิ่มคอนเทนเนอร์ที่เลื่อนได้ในแนวนอนสําหรับภาพขนาดย่อสําหรับรูปภาพเหล่านี้กัน เราจะใช้ <amp-carousel> อีกครั้ง แต่จะไม่มี type="slides" และเลย์เอาต์แบบความสูงคงที่

เพิ่มค่าต่อไปนี้หลังองค์ประกอบ amp-carousel ก่อนหน้า

<amp-carousel layout="fixed-height" height="78" class="mt1">

    <amp-img src="https://unsplash.it/108/72?image=1037" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1038" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1039" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1040" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1041" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1042" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1043" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1044" layout="fixed" width="108" height="72"></amp-img>

</amp-carousel>

โปรดทราบว่าสําหรับภาพขนาดย่อ เราเพิ่งใช้ layout="fixed" และรูปภาพเวอร์ชันความละเอียดต่ํา

มาลองดูสิ่งต่อไปนี้

เปลี่ยนรูปภาพเมื่อผู้ใช้แตะภาพขนาดย่อ

ในการดําเนินการนี้ เราต้องเชื่อมโยงเหตุการณ์อย่างเช่น tap เข้ากับการดําเนินการ เช่น การเปลี่ยนสไลด์

event: เราใช้แอตทริบิวต์ on เพื่อติดตั้งเครื่องจัดการเหตุการณ์ในองค์ประกอบหนึ่ง และระบบจะรองรับเหตุการณ์ tap ในทุกองค์ประกอบ

action: amp-carousel แสดงการดําเนินการ goToSlide(index=INTEGER) ที่เราเรียกใช้ได้จากเครื่องจัดการเหตุการณ์การแตะของภาพขนาดย่อแต่ละภาพ

เมื่อเราทราบเกี่ยวกับเหตุการณ์และการกระทําแล้ว ก็ถึงเวลานํามารวมเข้าด้วยกัน

ก่อนอื่น เราต้องให้ id แก่ภาพหมุน เพื่อให้เราสามารถอ้างอิงจากเครื่องจัดการเหตุการณ์การแตะในภาพขนาดย่อ

แก้ไขโค้ดที่มีอยู่เพื่อเพิ่มแอตทริบิวต์ id ลงในภาพสไลด์ (รายการแรก)

<amp-carousel 
  id="imageSlides"
  type="slides"

  ....

มาติดตั้งเครื่องจัดการเหตุการณ์ (on="tap:imageSlides.goToSlide(index=<slideNumber>)")" ในภาพขนาดย่อแต่ละภาพกัน)

<amp-img on="tap:imageSlides.goToSlide(index=0)" role="button" tabindex="1" layout="fixed" ...
<amp-img on="tap:imageSlides.goToSlide(index=1)" role="button" tabindex="1" layout="fixed" ...
<amp-img on="tap:imageSlides.goToSlide(index=2)" role="button" tabindex="1" layout="fixed" ...
...

โปรดทราบว่าเราต้องมอบ tabindex และตั้งค่า ARIA role สําหรับการช่วยเหลือพิเศษด้วย

แค่เพียงเท่านั้น ตอนนี้การแตะภาพขนาดย่อแต่ละภาพจะแสดงรูปภาพที่ตรงกันในภาพสไลด์

2.gif

ไฮไลต์ภาพขนาดย่อเมื่อผู้ใช้แตะ

จะทําได้ไหม ดูเหมือนว่าจะไม่มีการทํางานใดๆ ในการเปลี่ยนแปลงคลาส CSS สําหรับองค์ประกอบที่จะเรียกใช้จากเครื่องจัดการเหตุการณ์การแตะ แล้วจะไฮไลต์ภาพขนาดย่อที่เลือกได้อย่างไร

<amp-selector> ช่วยเหลือคุณ

amp-selector แตกต่างจากคอมโพเนนต์ที่เราใช้จนถึงตอนนี้ คอมโพเนนต์นี้ไม่ใช่คอมโพเนนต์งานนําเสนอ เนื่องจากไม่ได้ส่งผลต่อเลย์เอาต์ของหน้า แต่เป็นองค์ประกอบพื้นฐานที่ช่วยให้หน้า AMP รู้ว่าตัวเลือกใดที่ผู้ใช้เลือก

สิ่งที่ amp-selector ทํานั้นค่อนข้างง่ายแต่มีประสิทธิภาพ:

  • amp-selector อาจมีองค์ประกอบ HTML ที่กําหนดเองหรือองค์ประกอบ AMP ใดก็ได้
  • องค์ประกอบสืบทอดของ amp-selector จะกลายเป็นตัวเลือกได้หากแอตทริบิวต์ option=<value>
  • เมื่อผู้ใช้แตะองค์ประกอบที่เป็นตัวเลือก amp-selector เพียงเพิ่มแอตทริบิวต์ selected ในองค์ประกอบนั้น (และนําองค์ประกอบดังกล่าวออกจากองค์ประกอบตัวเลือกอื่นๆ ในโหมดการเลือกเดียว)
  • คุณจัดรูปแบบองค์ประกอบที่เลือกใน CSS ที่กําหนดเองได้โดยกําหนดเป้าหมายแอตทริบิวต์ selected ด้วยตัวเลือกแอตทริบิวต์ CSS

มาดูวิธีที่ช่วยให้เราบรรลุเป้าหมายนี้กัน

เพิ่มแท็กสคริปต์สําหรับ amp-selector ใน head

<script custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js" async></script>
  1. รวมภาพหมุนของภาพขนาดย่อไว้ใน amp-selector
  2. ทําให้ภาพขนาดย่อทุกภาพเป็นตัวเลือกด้วยการเพิ่มแอตทริบิวต์ option=<value>
  3. สร้างภาพขนาดย่อแรกให้เป็นรายการเริ่มต้นด้วยการเพิ่มแอตทริบิวต์ selected
<amp-selector>

  <amp-carousel layout="fixed-height" height="78" class="mt1">

    <amp-img option=0 selected on="tap:imageSlides.goToSlide(index=0)" ...
      
    <amp-img option=1 on="tap:imageSlides.goToSlide(index=1)" ...

    ...

  </amp-carousel>

</amp-selector>

ตอนนี้เราต้องเพิ่มการจัดรูปแบบเพื่อไฮไลต์ภาพขนาดย่อที่เลือก

เพิ่ม CSS ที่กําหนดเองต่อไปนี้ใน <style amp-custom> หลังจาก Boilerplate ของ CSS ย่อมาจาก AMP Start

<style amp-custom>
...

/* low opacity for non-selected thumbnails */
amp-selector amp-img[option] {
  opacity: 0.4;
}

/* normal opacity for the selected thumbnail */
amp-selector amp-img[option][selected] {
  opacity: 1;
}

</style>

มาลองดูสิ่งต่อไปนี้

3.gif

ถูกต้องแล้ว แต่คุณสังเกตเห็นข้อบกพร่องไหม

หากผู้ใช้ปัดภาพหมุนของสไลด์ ภาพขนาดย่อที่เลือกจะไม่อัปเดตเพื่อแสดงภาพหมุนดังกล่าว เราจะเชื่อมโยงสไลด์ปัจจุบันในภาพหมุนกับภาพขนาดย่อที่เลือกได้อย่างไร

ในส่วนถัดไป เราจะมาดูวิธีกัน

สรุป

  • คุณได้เรียนรู้เกี่ยวกับภาพหมุนประเภทต่างๆ และวิธีใช้งาน
  • คุณใช้การดําเนินการและเหตุการณ์ AMP เพื่อเปลี่ยนสไลด์ที่มองเห็นในภาพหมุนเมื่อผู้ใช้แตะภาพขนาดย่อ
  • คุณได้เรียนรู้เกี่ยวกับ amp-selector รวมถึงวิธีการใช้เป็นองค์ประกอบสําคัญของกรณีการใช้งานที่น่าสนใจ

ดูโค้ดที่สมบูรณ์ของส่วนนี้ได้ที่ http://codepen.io/aghassemi/pen/gmMJMy

ในส่วนนี้ เราจะใช้ amp-bind เพื่อปรับปรุงการโต้ตอบกับแกลเลอรีรูปภาพจากส่วนก่อนหน้า

amp-bind คืออะไร

คอมโพเนนต์ AMP หลัก amp-bind ให้คุณสร้างการโต้ตอบที่กําหนดเองด้วยการเชื่อมโยงข้อมูลและนิพจน์

amp-bind มี 3 ส่วนสําคัญดังนี้

  1. สถานะ
  2. การเชื่อมโยง
  3. การกลายพันธุ์

สถานะเป็นตัวแปรสถานะแอปพลิเคชันที่มีตั้งแต่ค่าเดียวไปจนถึงโครงสร้างข้อมูลที่ซับซ้อน คอมโพเนนต์ทั้งหมดอ่านและเขียนไปยังตัวแปรที่แชร์นี้ได้

การเชื่อมโยงเป็นนิพจน์ที่เชื่อมโยงรัฐกับแอตทริบิวต์ HTML หรือเนื้อหาขององค์ประกอบ

การเปลี่ยนแปลงคือการดําเนินการเปลี่ยนค่าของรัฐที่เกิดจากการดําเนินการหรือเหตุการณ์ของผู้ใช้บางอย่าง

ประสิทธิภาพของ amp-bind จะเริ่มขึ้นเมื่อการกลายพันธุ์: คอมโพเนนต์ทั้งหมดที่มีการเชื่อมโยงไปยังสถานะดังกล่าวจะได้รับการแจ้งเตือน และจะอัปเดตตัวเองโดยอัตโนมัติเพื่อให้สอดคล้องกับสถานะใหม่

มาดูการใช้งานจริงกัน

ก่อนหน้านี้ เราใช้การทํางานแบบ AMP (เช่น goToSlide()) เพื่อเชื่อมโยงภาพสไลด์แบบเต็มกับเหตุการณ์ tap ในภาพขนาดย่อ และใช้ amp-selector เพื่อไฮไลต์ภาพขนาดย่อที่เลือก

มาดูวิธีนําโค้ดนี้ไปใช้งานซ้ําโดยใช้แนวทาง amp-bind ในการเชื่อมโยงข้อมูลกัน

แต่ก่อนที่เราจะเริ่มเขียนโค้ด ลองออกแบบแนวทางของเรากัน

1. รัฐของเราคืออะไร

ในตัวอย่างของเรา ค่าเดียวที่เราสนใจคือหมายเลขสไลด์ปัจจุบัน ดังนั้น selectedSlide จึงเป็นรัฐของเรา

2. โปรดระบุผลผูกพัน

มีอะไรเปลี่ยนแปลงบ้างเมื่อ selectedSlide เปลี่ยนแปลง

  • slide ของภาพหมุนแบบเต็มที่แสดง:
<amp-carousel [slide]="selectedSlide" ...
  • รายการ selected ใน amp-selector ต้องมีการเปลี่ยนแปลงเช่นกัน การดําเนินการนี้จะแก้ไขข้อบกพร่องที่เราพบในส่วนก่อนหน้านี้
<amp-selector [selected]="selectedSlide" ...

3. การเปลี่ยนแปลงของเราคืออะไร

เมื่อใดที่ต้องเปลี่ยน selectedSlide

  • เมื่อผู้ใช้เปลี่ยนเป็นสไลด์ใหม่ในภาพหมุนแบบเต็มรูปภาพด้วยการปัด ให้ทําดังนี้
<amp-carousel on="slideChange:AMP.setState({selectedSlide:event.index})" ...
  • เมื่อผู้ใช้เลือกภาพขนาดย่อ
<amp-selector on="select:AMP.setState({selectedSlide:event.targetOption})" ...

มาใช้ AMP.setState เพื่อกลายพันธุ์กัน ซึ่งหมายความว่าเราจะไม่ต้องใช้โค้ด on="tap:imageSlides.goToSlide(index=n)" ทั้งหมดที่อยู่ในภาพขนาดย่ออีกต่อไป

มาเริ่มกันเลย

เพิ่มแท็กสคริปต์สําหรับ amp-bind ใน head

<script custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js" async></script>

แทนที่โค้ดของแกลเลอรีที่มีอยู่ด้วยแนวทางใหม่ ดังนี้

<amp-carousel [slide]="selectedSlide" on="slideChange:AMP.setState({selectedSlide:event.index})" type="slides" id="imageSlides" layout="responsive" width="1080" height="720">

  <amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1039" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1040" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1041" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1042" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1043" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1044" layout="fill"></amp-img>

</amp-carousel>


<amp-selector [selected]="selectedSlide" on="select:AMP.setState({selectedSlide:event.targetOption})">

  <amp-carousel layout="fixed-height" height="78" class="mt1">

    <amp-img option=0 selected src="https://unsplash.it/108/72?image=1037" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=1 src="https://unsplash.it/108/72?image=1038" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=2 src="https://unsplash.it/108/72?image=1039" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=3 src="https://unsplash.it/108/72?image=1040" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=4 src="https://unsplash.it/108/72?image=1041" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=5 src="https://unsplash.it/108/72?image=1042" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=6 src="https://unsplash.it/108/72?image=1043" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=7 src="https://unsplash.it/108/72?image=1044" layout="fixed" width="108" height="72"></amp-img>

  </amp-carousel>

</amp-selector>

มาลองทดสอบกันเลย แตะภาพขนาดย่อ แล้วสไลด์รูปภาพจะเปลี่ยนแปลง เลื่อนสไลด์รูปภาพแล้วภาพขนาดย่อที่ไฮไลต์จะเปลี่ยนไป

4.gif

เราได้ดําเนินการอย่างหนักเพื่อกําหนดและเปลี่ยนรูปแบบสําหรับสถานะสไลด์ปัจจุบัน เราจึงระบุการเชื่อมโยงเพิ่มเติมเพื่ออัปเดตข้อมูลอื่นๆ ได้โดยง่าย โดยอิงตามหมายเลขสไลด์ปัจจุบัน

มาเพิ่มเครื่องหมายคําพูดให้กับรูปภาพ x/of y" ในแกลเลอรีของเรา:

เพิ่มโค้ดต่อไปนี้เหนือองค์ประกอบภาพสไลด์

<div class="px3">Image <span [text]="1*selectedSlide + 1">1</span> of 8</div>

ครั้งนี้เราจะเชื่อมโยงกับข้อความภายในขององค์ประกอบโดยใช้ [text]= แทนที่จะเชื่อมโยงกับแอตทริบิวต์ HTML

มาลองใช้กันเลย

5.gif

สรุป

  • คุณเรียนรู้เกี่ยวกับ amp-bind แล้ว
  • คุณใช้ amp-bind เพื่อใช้แกลเลอรีรูปภาพเวอร์ชันปรับปรุงแล้ว

ดูโค้ดที่สมบูรณ์ของส่วนนี้ได้ที่ http://codepen.io/aghassemi/pen/MpeMdL

ในส่วนนี้ เราจะใช้ฟีเจอร์ใหม่ 2 อย่างในการเพิ่มภาพเคลื่อนไหวลงในหน้าของเรา

เพิ่มเอฟเฟกต์พารัลแลกซ์ในชื่อ

amp-fx-collection คือส่วนขยายที่ให้คอลเล็กชันเอฟเฟกต์ภาพที่กําหนดไว้ล่วงหน้า เช่น พารัลแลกซ์ซึ่งเปิดใช้ได้อย่างง่ายดายในองค์ประกอบใดก็ได้ที่มีแอตทริบิวต์

ด้วยเอฟเฟ็กต์พารัลแลกซ์ขณะที่ผู้ใช้เลื่อนหน้าเว็บ องค์ประกอบจะเลื่อนเร็วขึ้นหรือช้าลงตามค่าที่กําหนดให้กับแอตทริบิวต์

เปิดใช้เอฟเฟกต์พารัลแลกซ์ได้โดยการเพิ่มแอตทริบิวต์ amp-fx="parallax" data-parallax-factor="<a decimal factor>" ลงในองค์ประกอบ HTML หรือ AMP

  • ค่าปัจจัยที่มากกว่า 1 จะทําให้องค์ประกอบเลื่อนดูได้เร็วขึ้นเมื่อผู้ใช้เลื่อนหน้าเว็บลง
  • ค่าปัจจัยที่น้อยกว่า 1 จะทําให้องค์ประกอบเลื่อนได้ช้าลงเมื่อผู้ใช้เลื่อนหน้าเว็บลง

มาเพิ่มพารัลแลกซ์ที่มีปัจจัย 1.5 ให้กับชื่อหน้าของเราและดูว่ามีรูปลักษณ์เป็นอย่างไร

เพิ่มแท็กสคริปต์สําหรับ amp-fx-collection ใน head

<script custom-element="amp-fx-collection" src="https://cdn.ampproject.org/v0/amp-fx-collection-0.1.js" async></script>

จากนั้นหาองค์ประกอบชื่อส่วนหัวที่มีอยู่ในโค้ดและเพิ่มแอตทริบิวต์ amp-fx="parallax" and data-parallax-factor="1.5" ในนั้น

<header amp-fx="parallax" data-parallax-factor="1.5" class="p3">
  <h1 class="ampstart-fullpage-hero-heading mb3">
    <span class="ampstart-fullpage-hero-heading-text">
      Most Beautiful Hikes in the Pacific Northwest
    </span>
  </h1>
  <span class="ampstart-image-credit h4">
    By <a href="#" role="author" class="text-decoration-none">D.F. Roy</a>,<br> January 14, 2017
  </span>
</header>

มาดูผลลัพธ์กัน

6.gif

ตอนนี้ชื่อเลื่อนดูได้เร็วขึ้นกว่าส่วนที่เหลือของหน้า สุดยอด!

เพิ่มภาพเคลื่อนไหวลงในหน้า

amp-animation เป็นฟีเจอร์ที่นํา Web Animations API ไปยังหน้า AMP

ในส่วนนี้ เราจะใช้ amp-animation เพื่อสร้างเอฟเฟกต์การซูมเข้าเล็กน้อยสําหรับภาพหน้าปก

เพิ่มแท็กสคริปต์สําหรับภาพเคลื่อนไหวใน AMP ลงใน head

<script custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js" async></script>

ทีนี้เราจําเป็นต้องกําหนดภาพเคลื่อนไหวและองค์ประกอบเป้าหมายที่ใช้ภาพเคลื่อนไหวด้วย

ภาพเคลื่อนไหวหมายถึง JSON ในแท็ก amp-animation ระดับบนสุด

แทรกโค้ดต่อไปนี้ใต้แท็กเปิด body ในหน้าเว็บโดยตรง

<amp-animation trigger="visibility" layout="nodisplay">
    <script type="application/json">
      {
        "target": "heroimage",
        "duration": 30000,
        "delay": 0, 
        "fill": "forwards",
        "easing": "ease-out",
        "keyframes": {"transform":  "scale(1.3)"}
      }
      </script>
</amp-animation>

โค้ดนี้จะกําหนดภาพเคลื่อนไหวที่ทํางานเป็นเวลา 30 วินาทีโดยไม่มีการหน่วงเวลาและปรับขนาดรูปภาพให้ใหญ่ขึ้น 30%

เรากําหนด fill ไปข้างหน้าเพื่อให้รูปภาพซูมเข้าได้หลังจากภาพเคลื่อนไหวสิ้นสุดลง target คือ HTML id ขององค์ประกอบที่ใช้กับภาพเคลื่อนไหว

มาเพิ่ม id ลงในองค์ประกอบรูปภาพหลักในหน้าเว็บของเรากัน เพื่อให้ amp-animation นําไปใช้งานได้

  1. หารูปภาพหลัก (รูปภาพความละเอียดสูงที่มี layout="fixed-height") ในโค้ดและเพิ่ม id="heroimage" ลงในแท็ก amp-img
  2. เพื่อความเรียบง่าย ให้ลบ media="(min-width: 416px)" และนํา amp-img ความละเอียดต่ําอื่นๆ ออกด้วยโดยไม่ต้องแก้ไขภาพเคลื่อนไหวและคําค้นหาสื่อหลายรายการในภาพเคลื่อนไหวอีกต่อไป
<figure class="ampstart-image-fullpage-hero m0 relative mb4">

    <amp-img id="heroimage" height="1800" layout="fixed-height" src="https://unsplash.it/1200/1800?image=1003"></amp-img>

    <figcaption class="absolute top-0 right-0 bottom-0 left-0">

...

คุณอาจสังเกตเห็นอยู่แล้วว่าการปรับขนาดรูปภาพจะทําให้ส่วนเกินของรูปภาพหลัก เราจึงจําเป็นต้องแก้ไขด้วยการซ่อนส่วนเกินของส่วนเกิน

เพิ่มกฎ CSS ต่อไปนี้ไว้ที่ส่วนท้ายของ <style amp-custom> ที่มีอยู่

.ampstart-image-fullpage-hero {
  overflow: hidden;
}

มาลองใช้แล้วดูว่าจะมีลักษณะดังนี้

7.gif

เล็กน้อย

แต่ฉันก็ทําเช่นนั้นได้ด้วย CSS เป้าหมายของ amp-animation คืออะไร

กรณีนี้เป็นจริง แต่ amp-animation จะเปิดใช้ฟังก์ชันการทํางานพิเศษที่ทํากับ CSS เพียงอย่างเดียวไม่ได้ ตัวอย่างเช่น ภาพเคลื่อนไหวอาจอิงตามระดับการมองเห็น (และหยุดชั่วคราวตามระดับการมองเห็นเช่นกัน) หรือจะเรียกให้แสดงด้วยการดําเนินการ AMP ก็ได้ amp-animation ยังอิงตาม Web Animations API ซึ่งมีฟีเจอร์มากกว่าภาพเคลื่อนไหวของ CSS โดยเฉพาะในเรื่องความสามารถในการย้ายข้อมูล

สรุป

  • คุณได้เรียนรู้เกี่ยวกับการสร้างเอฟเฟ็กต์พารัลแลกซ์ด้วย amp-fx-collection แล้ว
  • คุณเรียนรู้เกี่ยวกับ amp-animation แล้ว

ดูโค้ดที่สมบูรณ์ของส่วนนี้ได้ที่ http://codepen.io/aghassemi/pen/OpXKzo

คุณเพิ่งสร้างหน้า AMP แบบอินเทอร์แอกทีฟที่สวยงาม

มาฉลองด้วยการดูความสําเร็จของคุณในวันนี้อีกครั้ง

ลิงก์ไปยังหน้าที่เสร็จสมบูรณ์: http://s.codepen.io/aghassemi/debug/OpXKzo

... และโค้ดสุดท้าย: http://codepen.io/aghassemi/pen/OpXKzo

Untitled.gif

ดูคอลเล็กชันของรายการ CodePen สําหรับ Codelab ได้ที่ https://codepen.io/collection/XzKmNB/

อ้อ ก่อนจะไป...

เราลืมตรวจสอบว่าหน้าเว็บของเรามีปัจจัยอื่นๆ อย่างไร เช่น แท็บเล็ตในโหมดแนวนอน

สิ่งที่จะเกิดขึ้นมีดังนี้

Untitled.gif

ยอดเยี่ยม

ขอให้โชคดี

ขั้นตอนถัดไปที่ควรทํา

Codelab นี้จะคัดลอกเฉพาะแพลตฟอร์มของ AMP ที่เป็นไปได้ มีแหล่งข้อมูลและ Codelab มากมายที่จะช่วยคุณสร้างหน้า AMP ที่ยอดเยี่ยม

หากมีข้อสงสัยหรือพบปัญหา โปรดดูช่องทาง AMP Slack หรือสร้างการสนทนา รายงานข้อบกพร่อง หรือคําขอฟีเจอร์ใน GitHub