แสดงแถบความคืบหน้าในงานนำเสนอใน Google สไลด์

ระดับการเขียนโค้ด: ระดับกลาง
ระยะเวลา: 15 นาที
ประเภทโปรเจ็กต์: ส่วนเสริมสำหรับเครื่องมือแก้ไข

วัตถุประสงค์

  • ทําความเข้าใจว่าโซลูชันทํางานอย่างไร
  • ทําความเข้าใจสิ่งที่บริการ Apps Script ทําภายในโซลูชัน
  • ตั้งค่าสคริปต์
  • เรียกใช้สคริปต์

เกี่ยวกับโซลูชันนี้

ใช้โซลูชันนี้เพื่อเพิ่มแถบความคืบหน้าที่ด้านล่างของสไลด์ในงานนำเสนอ

ภาพหน้าจอของแถบความคืบหน้าของส่วนเสริมเครื่องมือแก้ไขสไลด์

วิธีการทำงาน

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

บริการ Apps Script

โซลูชันนี้ใช้บริการต่อไปนี้

  • บริการสไลด์ - รับสไลด์ของงานนำเสนอและเพิ่มรูปร่างสี่เหลี่ยมผืนผ้าลงในสไลด์แต่ละรายการ

ข้อกำหนดเบื้องต้น

หากต้องการใช้ตัวอย่างนี้ คุณต้องมีข้อกําหนดเบื้องต้นต่อไปนี้

  • บัญชี Google (บัญชี Google Workspace อาจต้องได้รับอนุมัติจากผู้ดูแลระบบ)
  • เว็บเบราว์เซอร์ที่มีการเข้าถึงอินเทอร์เน็ต

ตั้งค่าสคริปต์

  1. คลิกปุ่มต่อไปนี้เพื่อทำสำเนาของงานนำเสนอแถบความคืบหน้าใน Google สไลด์ โปรเจ็กต์ Apps Script สำหรับโซลูชันนี้แนบมากับงานนำเสนอ
    ทำสำเนา
  2. ในการแสดงภาพ คลิกส่วนขยาย > แถบความคืบหน้า > แสดงแถบความคืบหน้า

  3. ให้สิทธิ์สคริปต์เมื่อได้รับข้อความแจ้ง หากหน้าจอความยินยอมของ OAuth แสดงคำเตือนว่าแอปนี้ไม่ได้รับการยืนยัน ให้ดำเนินการต่อโดยเลือกขั้นสูง > ไปที่ {ชื่อโปรเจ็กต์} (ไม่ปลอดภัย)

  4. คลิกส่วนขยาย > แถบความคืบหน้า > แสดงแถบความคืบหน้า

  5. หากต้องการนำแถบความคืบหน้าออก ให้คลิกส่วนขยาย > แถบความคืบหน้า > ซ่อนแถบความคืบหน้า

ตรวจสอบโค้ด

หากต้องการตรวจสอบโค้ด Apps Script ของโซลูชันนี้ ให้คลิกดูซอร์สโค้ดด้านล่าง

ดูซอร์สโค้ด

slides/progress/progress.gs
/**
 * @OnlyCurrentDoc Adds progress bars to a presentation.
 */
const BAR_ID = 'PROGRESS_BAR_ID';
const BAR_HEIGHT = 10; // px

/**
 * Runs when the add-on is installed.
 * @param {object} e The event parameter for a simple onInstall trigger. To
 *     determine which authorization mode (ScriptApp.AuthMode) the trigger is
 *     running in, inspect e.authMode. (In practice, onInstall triggers always
 *     run in AuthMode.FULL, but onOpen triggers may be AuthMode.LIMITED or
 *     AuthMode.NONE.)
 */
function onInstall(e) {
  onOpen();
}

/**
 * Trigger for opening a presentation.
 * @param {object} e The onOpen event.
 */
function onOpen(e) {
  SlidesApp.getUi().createAddonMenu()
      .addItem('Show progress bar', 'createBars')
      .addItem('Hide progress bar', 'deleteBars')
      .addToUi();
}

/**
 * Create a rectangle on every slide with different bar widths.
 */
function createBars() {
  deleteBars(); // Delete any existing progress bars
  const presentation = SlidesApp.getActivePresentation();
  const slides = presentation.getSlides();
  for (let i = 0; i < slides.length; ++i) {
    const ratioComplete = (i / (slides.length - 1));
    const x = 0;
    const y = presentation.getPageHeight() - BAR_HEIGHT;
    const barWidth = presentation.getPageWidth() * ratioComplete;
    if (barWidth > 0) {
      const bar = slides[i].insertShape(SlidesApp.ShapeType.RECTANGLE, x, y,
          barWidth, BAR_HEIGHT);
      bar.getBorder().setTransparent();
      bar.setLinkUrl(BAR_ID);
    }
  }
}

/**
 * Deletes all progress bar rectangles.
 */
function deleteBars() {
  const presentation = SlidesApp.getActivePresentation();
  const slides = presentation.getSlides();
  for (let i = 0; i < slides.length; ++i) {
    const elements = slides[i].getPageElements();
    for (const el of elements) {
      if (el.getPageElementType() === SlidesApp.PageElementType.SHAPE &&
        el.asShape().getLink() &&
        el.asShape().getLink().getUrl() === BAR_ID) {
        el.remove();
      }
    }
  }
}

ผู้ร่วมให้ข้อมูล

ตัวอย่างนี้ได้รับการดูแลโดย Google ด้วยความช่วยเหลือจากผู้เชี่ยวชาญด้านการพัฒนาซอฟต์แวร์ของ Google

ขั้นตอนถัดไป