在 Google 簡報投影片中顯示進度列

程式設計層級:中級
時間長度:15 分鐘
專案類型:編輯者外掛程式

目標

  • 瞭解解決方案的功能。
  • 瞭解 Apps Script 服務在解決方案中的用途。
  • 設定指令碼。
  • 執行指令碼。

認識這項解決方案

請使用這項解決方案,在簡報的投影片底部加入進度列。

進度列簡報編輯器外掛程式的螢幕截圖

運作方式

此指令碼會計算簡報中的投影片數量,並在每張投影片底部新增一個矩形形狀。這個指令碼會增加每個矩形形狀的寬度,在投影片中顯示進度。

Apps Script 服務

這項解決方案使用以下服務:

  • 簡報服務:取得簡報的投影片,並在每份投影片中加入矩形形狀。

必要條件

如要使用這個範例,您必須具備以下先決條件:

  • 擁有 Google 帳戶 (Google Workspace 帳戶可能需要經過管理員核准)。
  • 可以連上網際網路的網路瀏覽器。

設定指令碼

  1. 按一下下列按鈕,建立「進度列」投影片的副本。我們已在簡報中附加這個解決方案的 Apps Script 專案。
    建立副本
  2. 在簡報中,依序按一下「Extensions」>「進度列」>「顯示進度列」
  3. 出現提示訊息時,請授權執行指令碼。 如果 OAuth 同意畫面顯示以下警告:「This app was not been verification」,請依序選取「Advanced」>「Go to {Project Name} (unsafe)」

  4. 再按一下「Extensions」(擴充功能) >「進度列」>「顯示進度列」

  5. 如要移除進度列,請依序按一下「Extensions」(擴充功能) >「Progress bar」(進度列) >「Hide progress bar」(隱藏進度列)

查看程式碼

如要查看這個解決方案的 Apps Script 程式碼,請點選下方的「查看原始碼」

查看原始碼

投影片/進度/進度.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 Developers 專家的協助進行維護。

後續步驟