Guide de démarrage rapide: module complémentaire de la barre de progression pour Google Slides

Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

Suivez les étapes décrites dans la suite de cette page. En cinq minutes environ, vous avez créé un module complémentaire Google Slides qui ajoute une barre de progression à votre présentation. Pour en savoir plus sur ce module complémentaire Slides et sur son fonctionnement, regardez la vidéo de droite.

Configuration

  1. Créez une présentation Google.
  2. Dans votre nouvelle présentation, sélectionnez l'élément de menu Tools > Script editor (Outils > Éditeur de script). Si un écran de bienvenue s'affiche, cliquez sur Blank Project (Projet vide).
  3. Supprimez le code dans l'éditeur de scripts et renommez Code.gs en progress.gs.

    diapositives/progression.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();
          }
        }
      }
    }
  1. Sélectionnez l'option de menu File > Save all (Fichier > Tout enregistrer). Nommez votre nouveau script "Progress Bar Quickstart", puis cliquez sur OK. Le nom du script est présenté aux utilisateurs finaux à plusieurs endroits, y compris dans la boîte de dialogue d'autorisation.

Essayer

  1. Revenez à votre présentation et actualisez la page.
  2. Après quelques secondes, un sous-menu ProgressBar s'affiche sous le menu Modules complémentaires. Cliquez sur Add-ons > ProgressBar > Show Progress Bar.
  3. Une boîte de dialogue indique que le script nécessite une autorisation. Cliquez sur Continuer. Une deuxième boîte de dialogue demande une autorisation pour des services Google spécifiques. Cliquez sur Allow (Autoriser).
  4. qui est indiqué sous forme de barre de progression. Pour supprimer la barre de progression, cliquez sur Add-ons > ProgressBar > Masquer la barre de progression.

Publier

Comme il s'agit d'un exemple de module complémentaire, notre tutoriel se termine ici. Si vous développez un module complémentaire, la dernière étape consiste à le publier afin que d'autres utilisateurs puissent le trouver et l'installer.

Learn more

Pour continuer à découvrir comment étendre Google Slides avec Apps Script, consultez les ressources suivantes: