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

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

Hedefler

  • Çözümün ne işe yaradığını anlayın.
  • Apps Komut Dosyası hizmetlerinin çözümdeki işlevlerini anlama.
  • Komut dosyasını ayarlayın.
  • Komut dosyasını çalıştırın.

Bu çözüm hakkında

Bu çözümü kullanarak sununuzdaki slaytların en altına ilerleme çubuğu ekleyebilirsiniz.

Slaytlar Düzenleyici eklentisindeki ilerleme çubuğunun ekran görüntüsü

İşleyiş şekli

Komut dosyası, sunudaki slayt sayısını hesaplar ve her slaytın altı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ümde aşağıdaki hizmet kullanılır:

  • Slaytlar hizmeti: Sunudaki slaytları alır ve her birine dikdörtgen şekli ekler.

Ön koşullar

Bu örneği kullanmak için aşağıdaki ön koşulları karşılamanız gerekir:

  • 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 adlı Slides sunusunun kopyasını oluşturmak için aşağıdaki düğmeyi tıklayın. Bu çözümün Apps Komut Dosyası projesi sunuya eklenir.
    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 kullanıcı rızası ekranında Bu uygulama doğrulanmadı uyarısı gösteriliyorsa Gelişmiş > {Proje Adı} adlı projeye 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 kodu 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