הצגה של סרגלי התקדמות במצגת ב-Google Slides

רמת הקוד: בינונית
משך הזמן: 15 דקות
סוג הפרויקט: תוסף ל-Editor

מטרות

• מה הפתרון עושה.
• הסבר על הפעולות של שירותי Apps Script בתוך הפתרון.
• מגדירים את הסקריפט.
• מריצים את הסקריפט.

מידע על הפתרון הזה

אפשר להשתמש בפתרון הזה כדי להוסיף סרגל התקדמות לתחתית השקפים במצגת.

איך זה עובד

הסקריפט מחשב כמה שקפים יש במצגת ומוסיף צורת מלבן לתחתית כל שקף. הסקריפט מגדיל את הרוחב של כל צורה מלבנית כדי להציג את ההתקדמות במצגות.

שירותי Apps Script

הפתרון הזה משתמש בשירות הבא:

• שירות Slides – השירות מקבל את השקפים של המצגת ומוסיף לכל אחד מהם צורה של מלבן.

דרישות מוקדמות

כדי להשתמש בדוגמה הזו, צריך את הדרישות המוקדמות הבאות:

• חשבון Google (יכול להיות שחשבונות Google Workspace ידרשו אישור מהאדמין).
• דפדפן אינטרנט עם גישה לאינטרנט.

הגדרת הסקריפט

1. לוחצים על הלחצן הבא כדי ליצור עותק של המצגת ב-Slides בנושא סרגל התקדמות. פרויקט Apps Script של הפתרון הזה מצורף למצגת.
   יצירת עותק
2. במצגת, לוחצים על תוספים > סרגל התקדמות > הצגת סרגל ההתקדמות.

3. כשמוצגת בקשה, מאשרים את הסקריפט. אם במסך ההסכמה ל-OAuth מוצגת האזהרה This app isn't verified, ממשיכים על ידי בחירה באפשרות Advanced > Go to {Project Name} (unsafe).

4. שוב, לוחצים על תוספים > סרגל התקדמות > הצגת סרגל התקדמות.

5. כדי להסיר את סרגל ההתקדמות, לוחצים על תוספים > סרגל התקדמות > הסתרת סרגל ההתקדמות.

בדיקת הקוד

כדי לבדוק את הקוד של Apps Script לפתרון הזה, לוחצים על הצגת קוד המקור בהמשך:

הצגת קוד המקור

slides/progress/progress.gs

הצגת הקוד ב-GitHub

/**
 * @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.

השלבים הבאים

• הרחבת Google Slides באמצעות Apps Script
• מידע על שירות Slides