AMP ช่วยให้สร้างหน้าเว็บที่เชื่อถือได้ ตอบสนองตามอุปกรณ์ และมีประสิทธิภาพมากขึ้นได้ง่ายขึ้น AMP ช่วยให้คุณสร้างการโต้ตอบทั่วไปในเว็บไซต์ได้โดยไม่ต้องเขียน JavaScript เว็บไซต์ amp.dev มีเทมเพลตสําหรับการเริ่มต้นใช้งานที่รวดเร็วและออกแบบไว้ล่วงหน้า
สิ่งที่คุณจะสร้าง
ใน Codelab นี้ คุณจะสร้างหน้า AMP ที่ปรับเปลี่ยนตามอุปกรณ์และสวยงามที่ปรับเปลี่ยนตามอุปกรณ์ได้ทั้งหมด ซึ่งรวมฟีเจอร์มากมายของ AMP & #39 และคอมโพเนนต์ที่ขยาย
|
สิ่งที่ต้องมี
- เว็บเบราว์เซอร์ที่ทันสมัย
- 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 ข้อ ได้แก่
- AMP จะใช้ความกว้างและความสูงเพื่อคํานวณสัดส่วนภาพ และรักษาความกว้างและความสูงอย่างเหมาะสมเมื่อมีการเปลี่ยนแปลงความกว้างเพื่อให้พอดีกับคอนเทนเนอร์ระดับบนสุด
- AMP บังคับใช้การปรับขนาดแบบคงที่สําหรับองค์ประกอบทั้งหมดเพื่อให้ประสบการณ์ของผู้ใช้ที่ดี (ไม่มีการข้ามหน้าเว็บ) และเพื่อกําหนดขนาดและตําแหน่งขององค์ประกอบแต่ละรายการเพื่อวางหน้าเว็บก่อนที่จะดาวน์โหลดทรัพยากร
มาดูหน้านี้กัน
เพิ่มวิดีโอเล่นอัตโนมัติ
AMP รองรับโปรแกรมเล่นวิดีโอมากมาย เช่น YouTube และ Vimeo AMP มีเอลิเมนต์ video
5 ของ 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"
เนื่องจากภาพสไลด์จะเติมขนาดด้วยองค์ประกอบย่อยเสมอ จึงไม่จําเป็นต้องระบุเลย์เอาต์อื่นที่ต้องการความกว้างและความสูง
มาลองใช้แล้วดูว่าจะมีลักษณะดังนี้
เพิ่มภาพหมุนภาพขนาดย่อ
มาเพิ่มคอนเทนเนอร์ที่เลื่อนได้ในแนวนอนสําหรับภาพขนาดย่อสําหรับรูปภาพเหล่านี้กัน เราจะใช้ <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
สําหรับการช่วยเหลือพิเศษด้วย
แค่เพียงเท่านั้น ตอนนี้การแตะภาพขนาดย่อแต่ละภาพจะแสดงรูปภาพที่ตรงกันในภาพสไลด์
ไฮไลต์ภาพขนาดย่อเมื่อผู้ใช้แตะ
จะทําได้ไหม ดูเหมือนว่าจะไม่มีการทํางานใดๆ ในการเปลี่ยนแปลงคลาส 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>
- รวมภาพหมุนของภาพขนาดย่อไว้ใน
amp-selector
- ทําให้ภาพขนาดย่อทุกภาพเป็นตัวเลือกด้วยการเพิ่มแอตทริบิวต์
option=<value>
- สร้างภาพขนาดย่อแรกให้เป็นรายการเริ่มต้นด้วยการเพิ่มแอตทริบิวต์
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>
มาลองดูสิ่งต่อไปนี้
ถูกต้องแล้ว แต่คุณสังเกตเห็นข้อบกพร่องไหม
หากผู้ใช้ปัดภาพหมุนของสไลด์ ภาพขนาดย่อที่เลือกจะไม่อัปเดตเพื่อแสดงภาพหมุนดังกล่าว เราจะเชื่อมโยงสไลด์ปัจจุบันในภาพหมุนกับภาพขนาดย่อที่เลือกได้อย่างไร
ในส่วนถัดไป เราจะมาดูวิธีกัน
สรุป
- คุณได้เรียนรู้เกี่ยวกับภาพหมุนประเภทต่างๆ และวิธีใช้งาน
- คุณใช้การดําเนินการและเหตุการณ์ AMP เพื่อเปลี่ยนสไลด์ที่มองเห็นในภาพหมุนเมื่อผู้ใช้แตะภาพขนาดย่อ
- คุณได้เรียนรู้เกี่ยวกับ
amp-selector
รวมถึงวิธีการใช้เป็นองค์ประกอบสําคัญของกรณีการใช้งานที่น่าสนใจ
ดูโค้ดที่สมบูรณ์ของส่วนนี้ได้ที่ http://codepen.io/aghassemi/pen/gmMJMy
ในส่วนนี้ เราจะใช้ amp-bind เพื่อปรับปรุงการโต้ตอบกับแกลเลอรีรูปภาพจากส่วนก่อนหน้า
amp-bind
คืออะไร
คอมโพเนนต์ AMP หลัก amp-bind
ให้คุณสร้างการโต้ตอบที่กําหนดเองด้วยการเชื่อมโยงข้อมูลและนิพจน์
amp-bind
มี 3 ส่วนสําคัญดังนี้
- สถานะ
- การเชื่อมโยง
- การกลายพันธุ์
สถานะเป็นตัวแปรสถานะแอปพลิเคชันที่มีตั้งแต่ค่าเดียวไปจนถึงโครงสร้างข้อมูลที่ซับซ้อน คอมโพเนนต์ทั้งหมดอ่านและเขียนไปยังตัวแปรที่แชร์นี้ได้
การเชื่อมโยงเป็นนิพจน์ที่เชื่อมโยงรัฐกับแอตทริบิวต์ HTML หรือเนื้อหาขององค์ประกอบ
การเปลี่ยนแปลงคือการดําเนินการเปลี่ยนค่าของรัฐที่เกิดจากการดําเนินการหรือเหตุการณ์ของผู้ใช้บางอย่าง
ประสิทธิภาพของ amp-bind
จะเริ่มขึ้นเมื่อการกลายพันธุ์: คอมโพเนนต์ทั้งหมดที่มีการเชื่อมโยงไปยังสถานะดังกล่าวจะได้รับการแจ้งเตือน และจะอัปเดตตัวเองโดยอัตโนมัติเพื่อให้สอดคล้องกับสถานะใหม่
มาดูการใช้งานจริงกัน
ใช้ 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>
มาลองทดสอบกันเลย แตะภาพขนาดย่อ แล้วสไลด์รูปภาพจะเปลี่ยนแปลง เลื่อนสไลด์รูปภาพแล้วภาพขนาดย่อที่ไฮไลต์จะเปลี่ยนไป
เพิ่มข้อความในแกลเลอรี
เราได้ดําเนินการอย่างหนักเพื่อกําหนดและเปลี่ยนรูปแบบสําหรับสถานะสไลด์ปัจจุบัน เราจึงระบุการเชื่อมโยงเพิ่มเติมเพื่ออัปเดตข้อมูลอื่นๆ ได้โดยง่าย โดยอิงตามหมายเลขสไลด์ปัจจุบัน
มาเพิ่มเครื่องหมายคําพูดให้กับรูปภาพ x/of y" ในแกลเลอรีของเรา:
เพิ่มโค้ดต่อไปนี้เหนือองค์ประกอบภาพสไลด์
<div class="px3">Image <span [text]="1*selectedSlide + 1">1</span> of 8</div>
ครั้งนี้เราจะเชื่อมโยงกับข้อความภายในขององค์ประกอบโดยใช้ [text]=
แทนที่จะเชื่อมโยงกับแอตทริบิวต์ HTML
มาลองใช้กันเลย
สรุป
- คุณเรียนรู้เกี่ยวกับ
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>
มาดูผลลัพธ์กัน
ตอนนี้ชื่อเลื่อนดูได้เร็วขึ้นกว่าส่วนที่เหลือของหน้า สุดยอด!
เพิ่มภาพเคลื่อนไหวลงในหน้า
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
นําไปใช้งานได้
- หารูปภาพหลัก (รูปภาพความละเอียดสูงที่มี
layout="fixed-height"
) ในโค้ดและเพิ่มid="heroimage"
ลงในแท็กamp-img
- เพื่อความเรียบง่าย ให้ลบ
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;
}
มาลองใช้แล้วดูว่าจะมีลักษณะดังนี้
เล็กน้อย
แต่ฉันก็ทําเช่นนั้นได้ด้วย 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
ดูคอลเล็กชันของรายการ CodePen สําหรับ Codelab ได้ที่ https://codepen.io/collection/XzKmNB/
อ้อ ก่อนจะไป...
เราลืมตรวจสอบว่าหน้าเว็บของเรามีปัจจัยอื่นๆ อย่างไร เช่น แท็บเล็ตในโหมดแนวนอน
สิ่งที่จะเกิดขึ้นมีดังนี้
ยอดเยี่ยม
ขอให้โชคดี
ขั้นตอนถัดไปที่ควรทํา
Codelab นี้จะคัดลอกเฉพาะแพลตฟอร์มของ AMP ที่เป็นไปได้ มีแหล่งข้อมูลและ Codelab มากมายที่จะช่วยคุณสร้างหน้า AMP ที่ยอดเยี่ยม
- https://amp.dev
- https://ampstart.com/components
- Codelab พื้นฐานของ AMP
- Codelab แนวคิดขั้นสูงสําหรับ AMP
หากมีข้อสงสัยหรือพบปัญหา โปรดดูช่องทาง AMP Slack หรือสร้างการสนทนา รายงานข้อบกพร่อง หรือคําขอฟีเจอร์ใน GitHub