หน้าเว็บ องค์ประกอบของหน้า และคุณสมบัติ

หากต้องการใช้ Slides API อย่างมีประสิทธิภาพ คุณต้องเข้าใจสถาปัตยกรรมของงานนำเสนอและองค์ประกอบของงานนำเสนอ รวมถึงการโต้ตอบระหว่างคอมโพเนนต์เหล่านี้ หน้านี้จะแสดงภาพรวมโดยละเอียดของหัวข้อเหล่านี้

  • โมเดลแนวคิดของคอมโพเนนต์งานนำเสนอ
  • วิธีที่ API แสดงถึงคอมโพเนนต์เหล่านี้
  • คุณสมบัติการจัดรูปแบบของคอมโพเนนต์

การอ่านภาพรวมนี้และภาพรวมของแนวคิดอื่นๆ จะช่วยให้คุณเข้าใจได้ง่ายขึ้นและใช้คำแนะนำวิธีใช้ เอกสารอ้างอิง และตัวอย่างสูตรอาหาร

งานนำเสนอ หน้าเว็บ และองค์ประกอบของหน้าเว็บ

องค์ประกอบคอนเทนเนอร์ที่อยู่ด้านนอกสุดใน Google สไลด์คืองานนำเสนอ ซึ่งเป็นหน่วยที่สามารถบันทึกไว้ใน Google ไดรฟ์ แชร์กับผู้ใช้รายอื่น เป็นต้น

งานนำเสนอแต่ละรายการจะมีหน้าประเภทต่างๆ หน้าเว็บประเภทหนึ่งคือสไลด์ ซึ่งเป็นหน้าที่ผู้ใช้จะเห็นและพลิกไปมาเมื่อแสดงงานนำเสนอบนหน้าจอ

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

แผนภาพสถาปัตยกรรมสไลด์

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

แผนภาพสถาปัตยกรรมธีม

หน้าหลัก — หน้าต้นแบบมีจุดประสงค์ 2 ประการ ตัวยึดตำแหน่งในต้นฉบับ จะมีค่าเริ่มต้นสำหรับรูปแบบข้อความที่ใช้ตลอดงานนำเสนอของคุณ พื้นหลังและรูปร่างอื่นๆ ในสไลด์หลักจะเป็นพื้นหลังเริ่มต้นสำหรับสไลด์ทั้งหมดที่อิงตามต้นฉบับนั้น หากคุณมีโลโก้บริษัทที่ต้องการให้ปรากฏในทุกสไลด์ในงานนำเสนอ ให้ใส่โลโก้นั้นไว้ที่ต้นแบบ

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

ยังมีหน้าอีก 2 ประเภท ได้แก่ หน้าโน้ตและต้นแบบโน้ต ซึ่งส่วนใหญ่แล้วจะเกี่ยวข้องกับการทำงานกับบันทึกของผู้บรรยาย

ประเภทและโครงสร้างการนำเสนอ API

ส่วนนี้จะอธิบายวิธีแสดงโมเดลแนวคิดของ Google สไลด์ตามที่อธิบายไว้ข้างต้นใน Slides API

แผนภาพต่อไปนี้แสดงความสัมพันธ์ระหว่างงานนำเสนอ หน้าเว็บ และองค์ประกอบของหน้าในรูปแบบใน Slides API

แผนภาพแบบ Erd

ส่วนต่อไปนี้จะแสดงลักษณะที่ประเภทเหล่านี้แสดงในรูปแบบ JSON

งานนำเสนอ

งานนำเสนอประกอบด้วยพร็อพเพอร์ตี้จำนวนหนึ่ง และมีหน้าต่างๆ ที่อยู่ในนั้น

{
  "presentationId": string,
  "pageSize": { object(Size) },
  "slides": [ { object(Page) } ],
  "title": string,
  "masters": [ { object(Page) } ],
  "layouts": [ { object(Page) } ],
  "notesMaster": object(Page),
  "locale": string,
}

Pages

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

{
  "objectId": string,
  "pageType": enum(PageType),
  "pageElements": [ { object(PageElement) } ],
  "pageProperties": { object(PageProperties) },

  // Union field properties can be only one of the following:
  "slideProperties": { object(SlideProperties) },
  "layoutProperties": { object(LayoutProperties) },
  "notesProperties": { object(NotesProperties) },
  // End of list of possible types for union field properties.
}

องค์ประกอบของหน้า

องค์ประกอบของหน้า คือองค์ประกอบภาพที่วางอยู่ในหน้าต่างๆ องค์ประกอบของหน้าเว็บใน API ประกอบด้วยพร็อพเพอร์ตี้จำนวนหนึ่ง ซึ่งรวมถึงช่องที่แตกต่างกันไปตามชนิดขององค์ประกอบหน้าเว็บ ดังนี้

{
  "objectId": string,
  "size": { object(Size) },
  "transform": { object(AffineTransform) },
  "title": string,
  "description": string,

  // Union field element_kind can be only one of the following:
  "elementGroup": { object(Group) },
  "shape": { object(Shape) },
  "image": { object(Image) },
  "video": { object(Video) },
  "line": { object(Line) },
  "table": { object(Table) },
  "wordArt": { object(WordArt) },
  "sheetsChart": { object(SheetsChart) },
  // End of list of possible types for union field element_kind.
}

องค์ประกอบของหน้ามีอยู่หลายประเภท ตามที่กำหนดโดยช่องยูเนียน element_kind ในคำจำกัดความด้านบน องค์ประกอบของหน้าประเภทเหล่านี้ มีอธิบายไว้ในตารางต่อไปนี้

ประเภทองค์ประกอบ คำอธิบาย
กลุ่ม ชุดส่วนประกอบของหน้าเว็บที่ถือเป็นหน่วยโฆษณาแต่ละหน่วย โดยอุปกรณ์ดังกล่าวสามารถย้าย ปรับขนาด และหมุนไปพร้อมกันได้
รูปร่าง วัตถุที่มองเห็นง่าย เช่น สี่เหลี่ยมผืนผ้า วงรี และกล่องข้อความ รูปร่างสามารถใส่ข้อความได้ จึงเป็นองค์ประกอบที่ใช้บ่อยที่สุดของหน้าในการสร้างสไลด์
รูปภาพ กราฟิกที่นำเข้าไปยังสไลด์
วิดีโอ วิดีโอที่นำเข้าไปยังสไลด์
บรรทัด เส้นภาพ เส้นโค้ง หรือเส้นเชื่อม
ตาราง ตารางกริดของเนื้อหา
WordArt องค์ประกอบของข้อความที่มองเห็น ซึ่งจะมีลักษณะคล้ายกับรูปร่างมากกว่า
SheetsChart แผนภูมิที่นำเข้าจาก Google ชีตไปยังสไลด์

พร็อพเพอร์ตี้ขององค์ประกอบหน้าเว็บและหน้าเว็บ

API ของสไลด์ช่วยให้คุณอ่านและอัปเดตลักษณะที่ปรากฏของหน้าและองค์ประกอบของหน้าในงานนำเสนอได้ องค์ประกอบของหน้าที่แตกต่างกันจะรองรับพร็อพเพอร์ตี้ที่ต่างกันซึ่งควบคุมวิธีการแสดงผลองค์ประกอบของหน้าเว็บ

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

มีคำขอเอลิเมนต์/พร็อพเพอร์ตี้/อัปเดตชุดเดียวกันสำหรับเอลิเมนต์หน้าเว็บแต่ละประเภท เช่น Image/imageProperties/UpdateImageProperties และอื่นๆ

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

ประเภทที่พัก

ออบเจ็กต์หลายประเภทใน Slides API มีคุณสมบัติทั่วไปบางอย่างดังต่อไปนี้

พร็อพเพอร์ตี้ คำอธิบาย
สี สีใน Slides API อาจเป็นค่า RGB หรือการอ้างอิงสีธีมก็ได้ เราจะเรียกสีธีมตามชื่อ (เช่น "DARK1") และจะแมปกับค่า RGB โดยใช้รูปแบบสีของหน้าเว็บได้ รูปแบบสีนี้จะได้รับการอัปเดตเป็นประจำเมื่อเปลี่ยนธีมของงานนำเสนอในเครื่องมือแก้ไขสไลด์
เติมพื้น "สี" จะหมายถึงการแสดงผลของพื้นที่ว่างภายในวัตถุ การเติมสีที่รองรับบ่อยที่สุดในสไลด์คือการเติมสีทึบ โดยภายในของวัตถุจะเต็มไปด้วยสีทึบเพียงสีเดียว นอกจากนี้ คุณยังใช้สีเติมเป็นพื้นหลังของหน้าได้ด้วย
เส้นขอบ โครงร่างจะแสดงชุดเส้นที่ล้อมรอบองค์ประกอบของหน้า ระบบจะควบคุมสีของเส้นด้วยการเติมสี ผู้โทรยังปรับความกว้างและรูปแบบเส้นประของโครงร่างได้ด้วย
เงา เงาหมายถึงเอฟเฟกต์ภาพที่ทำเพื่อเลียนแบบเงาที่วัตถุนั้นๆ แสดง ขณะนี้เงาใน Slides API เป็นแบบอ่านอย่างเดียว

กำลังอัปเดตที่พัก

หากต้องการอัปเดตพร็อพเพอร์ตี้ ให้ใช้คำขอ Update...Properties ที่เหมาะสมในการเรียก batchUpdate เช่น UpdateShapeProperties สำหรับรูปร่าง คำขอเหล่านี้จะยอมรับข้อความเกี่ยวกับพร็อพเพอร์ตี้แบบเต็มและใช้มาสก์ของช่องเพื่อระบุว่าควรอัปเดตช่องใดในข้อความพร็อพเพอร์ตี้

การรับช่วงพร็อพเพอร์ตี้ต่อ

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

  • พร็อพเพอร์ตี้ของหน้าเว็บ — หน้าเว็บจะรับค่าพร็อพเพอร์ตี้ทั้งหมดที่ไม่ได้กำหนด แต่กำหนดไว้ในเลย์เอาต์หรือต้นแบบที่หน้าเว็บอ้างอิงอยู่
  • พร็อพเพอร์ตี้รูปร่าง — ทำเครื่องหมายรูปร่างเป็นตัวยึดตำแหน่งได้ เพื่อให้คุณอ้างอิงรูปร่างตัวยึดตำแหน่งอื่นอย่างชัดเจน (ในเลย์เอาต์ระดับบนสุดหรือต้นแบบของหน้า) ที่จะรับค่าพร็อพเพอร์ตี้

แนวคิดเหล่านี้มีการอธิบายเพิ่มเติมในย่อหน้าต่อไปนี้

การสืบทอดพร็อพเพอร์ตี้ของหน้า

โครงสร้างของสไลด์ เลย์เอาต์ และโฆษณาหลักจะกำหนดลำดับชั้นของการรับค่าภายในงานนำเสนอ ซึ่งได้แก่ สไลด์ที่รับช่วงมาจากเลย์เอาต์ และเลย์เอาต์จะรับค่ามาจากต้นฉบับ เลย์เอาต์ระดับบนสุดและต้นแบบของสไลด์จะระบุในช่อง slideProperties ของสไลด์

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

แผนภาพต่อไปนี้แสดงสไลด์ที่รับค่าพร็อพเพอร์ตี้จากเลย์เอาต์ ซึ่งรับค่ามาจากต้นฉบับ

การสืบทอดพร็อพเพอร์ตี้สไลด์

พร็อพเพอร์ตี้ที่ใช้ในการแสดงผลสไลด์เป็นการผสมผสานระหว่างพร็อพเพอร์ตี้ที่กำหนดและรับค่าเดิมมา ในตัวอย่างนี้ ค่าที่ได้มาซึ่งใช้ในการแสดงผลสไลด์ 1 มีดังนี้

  • คุณสมบัติ A คือ "สีแดง"
  • พร็อพเพอร์ตี้ B คือ "สีส้ม"

การสืบทอดคุณสมบัติของรูปร่าง

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

เมื่อมีการกำหนดลำดับชั้นการรับช่วงมานี้ หน้าย่อยจะรับค่าพร็อพเพอร์ตี้โดยการไม่ตั้งค่านั้นในข้อความ ShapeProperties การไม่ลบล้างค่าที่กําหนดโดยระดับบนสุดจะยอมรับค่าที่รับช่วงมา

แผนภาพต่อไปนี้แสดงการสืบทอดพร็อพเพอร์ตี้ระหว่างตัวยึดตำแหน่ง 3 รายการที่มีอยู่ในสไลด์ เลย์เอาต์ และต้นแบบ

การสืบทอดคุณสมบัติของรูปร่าง

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

  • ตัวยึดตำแหน่ง 1: พร็อพเพอร์ตี้ A จะแสดงผลเป็น "สีเหลือง" พร็อพเพอร์ตี้ B เป็น "สีเขียว"
  • ตัวยึดตำแหน่ง2: พร็อพเพอร์ตี้ A จะแสดงผลเป็น "สีเหลือง" พร็อพเพอร์ตี้ ข เป็น "สีม่วง"
  • ตัวยึดตำแหน่ง3: พร็อพเพอร์ตี้ A จะแสดงผลเป็น "สีเหลือง" พร็อพเพอร์ตี้ ข เป็น "สีม่วง"

รูปร่างเป็นองค์ประกอบประเภทเดียวของหน้าเว็บที่สามารถมีระดับบนสุดได้ ส่วนประเภทอื่นๆ เช่น รูปภาพ ตาราง และแผนภูมิ ไม่สามารถใช้เป็นตัวยึดตำแหน่งและไม่มีระดับบนสุด

การซ่อน" พร็อพเพอร์ตี้โดยใช้ PropertyState

การแจกแจง PropertyState จะควบคุมว่าจะใช้พร็อพเพอร์ตี้ของรูปร่างสำหรับการแสดงผลจริงหรือไม่ หรือใช้ค่าสำหรับการสืบทอดจากรูปร่างย่อยเท่านั้น ระบบจะไม่ใช้พร็อพเพอร์ตี้ที่มีสถานะพร็อพเพอร์ตี้ NOT_RENDERED เมื่อแสดงผลรูปร่างในหน้าเว็บ แต่รายการย่อยที่มีสถานะพร็อพเพอร์ตี้ RENDERED ที่ตรงกันจะยังคงรับค่าพร็อพเพอร์ตี้นี้ได้อยู่

แผนภาพต่อไปนี้แสดงการสืบทอดพร็อพเพอร์ตี้ระหว่างตัวยึดตำแหน่ง 3 รายการที่ควบคุมช่อง PropertyState

สถานะพร็อพเพอร์ตี้และการสืบทอด

ฟิลด์ PropertyState จะส่งผลต่อการแสดงผลคุณสมบัติของรูปร่างได้ ในตัวอย่างนี้ ค่าที่ได้สำหรับรูปร่างเหล่านี้มีดังนี้

  • ตัวยึดตำแหน่ง 1: พร็อพเพอร์ตี้ A จะแสดงผลเป็น "สีแดง"
  • ตัวยึดตำแหน่ง2: คุณสมบัติ A ไม่แสดงผล หากนี่เป็นพร็อพเพอร์ตี้ Outline ตัวยึดตำแหน่ง2 จะไม่มีโครงร่าง
  • ตัวยึดตำแหน่ง 3: คุณสมบัติ A จะไม่แสดงผล

ค่าที่เป็นไปได้อีก 1 ค่าของการแจกแจง PropertyState คือ สถานะพร็อพเพอร์ตี้ INHERIT หมายความว่าสถานะของพร็อพเพอร์ตี้มีการรับค่ามา และควรใช้ค่าของพร็อพเพอร์ตี้ระดับบนสุด รูปร่างที่ไม่มีระดับบนสุดจะมีสถานะพร็อพเพอร์ตี้เป็น INHERIT ไม่ได้