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

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

מטרות

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

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

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

איך זה עובד

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

שירותי Apps Script

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

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

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

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

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

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

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

3. כשמוצגת בקשה, מאשרים את הסקריפט. אם במסך ההסכמה ל-OAuth מוצגת האזהרה האפליקציה הזו לא אומתה, ממשיכים בתהליך על ידי בחירה באפשרות מתקדם > מעבר אל {שם הפרויקט} (לא בטוח).

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