Google Slaytlar sunularında ilerleme çubuklarını gösterme

Kodlama seviyesi: Orta
Süre: 15 dakika
Proje türü: Düzenleyici eklentisi

Hedefler

  • Çözümün ne işe yaradığını anlayın.
  • Apps Script hizmetlerinin çözümde ne yaptığını anlayın.
  • Komut dosyasını ayarlayın.
  • Komut dosyasını çalıştırın.

Bu çözüm hakkında

Sununuzdaki slaytların alt kısmına ilerleme çubuğu eklemek için bu çözümü kullanın.

Slaytlar Düzenleyici eklentisinin ilerleme çubuğu ekran görüntüsü

İşleyiş şekli

Komut dosyası, sunumdaki slayt sayısını hesaplar ve her slaytın alt kısmına bir dikdörtgen şekli ekler. Komut dosyası, slaytlardaki ilerlemeyi göstermek için her dikdörtgen şeklin genişliğini artırır.

Apps Komut Dosyası hizmetleri

Bu çözüm aşağıdaki hizmeti kullanır:

  • Slaytlar hizmeti: Bir sununun slaytlarını alır ve her birine bir dikdörtgen şekli ekler.

Ön koşullar

Bu örneği kullanmak için aşağıdaki ön koşullara ihtiyacınız vardır:

  • Google Hesabı (Google Workspace hesapları için yönetici onayı gerekebilir).
  • İnternete erişimi olan bir web tarayıcısı.

Komut dosyasını ayarlama

  1. İlerleme çubuğu Slaytlar sunusunun kopyasını oluşturmak için aşağıdaki düğmeyi tıklayın. Bu çözümün Apps Komut Dosyası projesi sunucuya eklenmiştir.
    Kopya oluştur
  2. Sunuda Uzantılar > İlerleme çubuğu > İlerleme çubuğunu göster'i tıklayın.

  3. İstendiğinde komut dosyasını yetkilendirin. OAuth izin ekranında Bu uygulama doğrulanmadı uyarısı gösteriliyorsa Gelişmiş > {Proje Adı}'na git (güvenli değil)'i seçerek devam edin.

  4. Tekrar Uzantılar > İlerleme çubuğu > İlerleme çubuğunu göster'i tıklayın.

  5. İlerleme çubuğunu kaldırmak için Uzantılar > İlerleme çubuğu > İlerleme çubuğunu gizle'yi tıklayın.

Kodu inceleme

Bu çözümün Apps Komut Dosyası kodunu incelemek için aşağıdaki Kaynak kodunu görüntüle'yi tıklayın:

Kaynak kodu göster

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();
      }
    }
  }
}

Katkıda bulunanlar

Bu örnek, Google Geliştirici Uzmanları'nın yardımıyla Google tarafından yönetilir.

Sonraki adımlar