Numeriblog Google Workspace Google Slides, des présentations dynamiques et gratuites Google Slides et Apps Script : comment créer un sommaire automatique dans une présentation ?

Google Slides et Apps Script : comment créer un sommaire automatique dans une présentation ?

Google Slides ne dispose pas encore d’un outil natif de création de sommaire automatique à l’instar de Google Docs. Un sommaire annonce en début de diaporama le plan de l’exposé ou guide le lecteur dans […]

personnes ont consulté cet article

3 minutes

Rédigé par Antoine MARTIN - il y a 2 ans

Ce que vous allez découvrir

  • L'objectif
  • Le script de création d'un sommaire dans Google Slides
  • Fonction de création du menu

Google Slides et Apps Script : comment créer un sommaire automatique dans une présentation ?

Google Slides ne dispose pas encore d’un outil natif de création de sommaire automatique à l’instar de Google Docs. Un sommaire annonce en début de diaporama le plan de l’exposé ou guide le lecteur dans le cas d’une présentation différée ou au format PDF. J’ai été amené à répondre à ce besoin en développant un script dont je vais vous faire part aujourd’hui. Cet exercice m’a permis de mieux cerner la manipulation des textes et des liens dans Slides qui ne sont pas aussi intuitifs que d’autres fonctionnalités de Google Apps Script.


L’objectif

Ce script a pour objectif de créer sur la diapositive active un bloc de texte comprenant un paragraphe pour chaque diapositive de toute la présentation rappelant son titre, son numéro de page et un lien cliquable vers ladite diapositive.

Le script de création d’un sommaire dans Google Slides

/******
 *
 * NUMERIBLOG - Antoine MARTIN 2021 tous droits réservés
 *
 ******/
function onOpen() {
  SlidesApp.getUi().createMenu("NUMERICOACH").addItem("Créer le sommaire sur la diapositive active.", "createMenu").addToUi();
}
function createMenu() {
  const presentation = SlidesApp.getActivePresentation();
  const slideMenu = presentation.getSelection().getCurrentPage();
  slideMenu.getPageElements().forEach(function (el) { el.remove() });
  const menuTitre = slideMenu.insertTextBox("Sommaire");
  const menuSommaire = slideMenu.insertShape(SlidesApp.ShapeType.RECTANGLE, 50, 50, 300, 200).setTitle("sommaire");
  const slides = presentation.getSlides();
  slides.forEach(function (slide,index) {
    const slideTitre = slide.getPageElements()[0].asShape().getText().asString().trim();
    const titreLongueur = slideTitre.length;
    const tirets =  (".......................................").substr(titreLongueur) ;
    const newLigne = menuSommaire.getText().appendParagraph( slideTitre+tirets+" p."+(index+1));
    newLigne.getRange().getTextStyle().setLinkSlide(slide).setForegroundColor(255, 100, 0);
  })
}

Je créé le menu pour lancer le script manuellement avec la fonction onOpen() et la méthode getUi() du service SlidesApp.

Fonction de création du menu

Je récupère la présentation et la diapositive active en passant par la méthode getSelection().

const presentation = SlidesApp.getActivePresentation();
const slideMenu = presentation.getSelection().getCurrentPage();

Je supprime tous les éléments de la diapositive active (c’est un peu radical façon Schwarzi, il faudrait affiner cette procédure…)

slideMenu.getPageElements().forEach(function (el) { el.remove() });

Je récupère toutes les diapositives de la présentation et j’entame une boucle avec forEach, en récupérant chaque diapositive et sa place dans la présentation (rappel : la première diapositive est à la place 0) :

const slides = presentation.getSlides();
  slides.forEach(function (slide,index) {
...
}

Attention, ça devient un peu du bricolage pour récupérer le titre de chaque diapositive : je récupère le texte contenu dans le premier élément de la diapositive. Mais pour Google Apps Script, le « premier élément » de la diapositive est celui qui a été créé chronologiquement en premier ! Donc je pars du principe que le titre est l’élément créé en premier dans la diapo… ce qui n’est pas toujours le cas. Nous verrons dans un futur article comment consolider le repérage du titre dans une diapositive.

Concrètement, cette ligne de code :

  • Liste les éléments de la diapositive (getPageElements()).
  • Extrait le premier élément de cette liste qui a l’index 0 ([0]).
  • Le considère comme une forme (asShape()).
  • En extrait le texte qu’il faut considérer comme une chaîne de caractères (asString()).
  • Nettoie ce texte des espaces ou sauts de lignes qui seraient en début ou fin de chaîne avec trim().
const slideTitre = slide.getPageElements()[0].asShape().getText().asString().trim();

Dans les lignes suivantes, je construis la suite de « . » qui sépare le titre de la diapositive de son numéro de page, il suffit de supprimer dans une liste de quarante « . » autant de « . » qu’il y a de caractères dans le titre de la diapositive (le résultat reste approximatif, car la chaque caractère a une taille différente ).

const titreLongueur = slideTitre.length;
const tirets =  (".......................................").substr(titreLongueur) ;

Ensuite, dans la forme construite avant la boucle, j’ajoute pour chaque diapositive un paragraphe contenant le titre de la diapositive, les petits points et le numéro de la page qui, je le rappelle, est l’index incrémenté de 1.

 const newLigne = menuSommaire.getText().appendParagraph( slideTitre+tirets+" p."+(index+1));

Enfin, il faut ajouter le lien sur cette dernière ligne qui vient d’être créée.

Attention, l’attribution d’un lien sur une chaîne de caractères passe par le méthode « getTextStyle()« , ce que j’ai mis du temps à trouver car pour moi le style d’un texte se limitait à sa mise en forme, et n’incluait pas ses caractéristiques techniques, comme peut l’être un lien hypertexte. Il est donc possible d’attribuer un lien sur le style du texte en appelant la méthode setLinkSlide() et en plaçant l’objet « slide » en argument (pour une fois, c’est simple).

 newLigne.getRange().getTextStyle().setLinkSlide(slide) ;

Lancez une fois le script depuis l’éditeur pour activer les autorisations. Pensez bien à créer une diapositive vierge et à la sélectionner avant de lancer le script.


J’évoquerai dans un prochain article la possibilité de créer un sommaire plus complexe, en choisissant par exemple les diapositives à faire apparaître dans le sommaire et en introduisant une hiérarchie sur plusieurs niveaux.

Besoin d'un peu plus d'aide sur Google Slides ?

Des formateurs sont disponibles toute l'année pour vous accompagner et optimiser votre utilisation de Google Slides, que ce soit pour votre entreprise ou pour vos besoins personnels !

Découvrir nos formations Google Slides

Rédacteur

Photo de profil de l'auteur
Antoine MARTIN

Consultant et formateur sur les outils bureautiques, j'ai intégré l'équipe de Numericoach en 2020. J'accompagne les utilisateurs de Google Workspace à trouver des solutions répondant à leurs besoins. Mes domaines de prédilections sont les outils Sheets, Docs, Slides et Google Apps Script.

S’abonner
Notification pour
guest
7 Commentaires
Le plus ancien
Le plus récent Le plus populaire
Commentaires en ligne
Afficher tous les commentaires
THIERRY VANOFFE

Excellent

Cet avis vous a été utile ?

Alexis
Alexis

Merci, C’est très utile !
Je me suis permis quelques ajustements pour éviter le décalage des petits points. Je mets le bout de code en dessous pour ceux que ça intéresse.
var DernierElement = 0;
slides.forEach(function(slide,index){
const slideTitre = slide.getPageElements()[0].asShape().getText().asString().trim();
const slidePage = index + 1;
const texteLeft = 50;
if(index > 0){
var texteTop = slideMenu.getPageElements()[DernierElement].getTop() + slideMenu.getPageElements()[DernierElement].getHeight();
}else{
var texteTop = 50;
};
const texteWidth = 300;
const texteHeight = 30;
slideMenu.insertTextBox(slideTitre,texteLeft,texteTop,texteWidth-50,texteHeight).setLinkSlide(slide);
slideMenu.insertTextBox(« p. »+slidePage,texteLeft+texteWidth-50,texteTop,50,texteHeight).setLinkSlide(slide);
if(index % 2 == 0){
slideMenu.getPageElements()[DernierElement+1].asShape().getFill().setSolidFill(« #eeeeee »);
slideMenu.getPageElements()[DernierElement+2].asShape().getFill().setSolidFill(« #eeeeee »);
}
DernierElement += 2;
})
Encore Merci !

Cet avis vous a été utile ?

Antoine MARTIN
Répondre à  Alexis
1 année il y a

Merci Alexis pour cet amélioration ! bonne idée de recalculer la longueur ça te dirait d’écrire pour le blog ? n’hésite pas à te proposer : https://thierryvanoffe.com/devenir-redacteur/ Bonne journée.

Cet avis vous a été utile ?

Joëlle Archambault
Joëlle Archambault

Bonjour, J’aimerais bien avoir ce script mais je n’y connais rien. Est-ce que quelqu’un est habileté à le faire pour moi dans mon compte, sous rémunération ? Combien de temps est nécessaire pour faire ceci ?

Cet avis vous a été utile ?

Antoine MARTIN
Répondre à  Joëlle Archambault
1 année il y a

BonjourJoëlle, Merci pour votre commentaire.
Numericoach propose des temps d’accompagnement, que vous pouvez trouver ici : https://school.numericoach.fr/
Une heure devrait suffire pour vous aider à installer et adapter ce script à vos besoins.

Cet avis vous a été utile ?

Joëlle Archambault
Joëlle Archambault

Autre question. Est-ce que ce script reste si on enregistre en pdf ?
Merci

Cet avis vous a été utile ?

Antoine MARTIN
Répondre à  Joëlle Archambault
1 année il y a

Le script… non , mais le sommaire oui 🙂 donc une fois créé, le sommaire sera visible et même cliquable sur un PDF.

Cet avis vous a été utile ?