Écrivez des scripts en ExtendScript Online

Introduction du cours Introduction

L’objectif de ce cours est de vous apprendre à écrire des scripts pour les logiciels de la Creative Suite.

Nous apprendrons par exemple à automatiser des tâches dans InDesign et Photoshop. Lorsqu’on parle de scripts en PAO (Publication Assistée par Ordinateur) on sous-entend régulièrement l’enregistrement d’étapes effectuées par un utilisateur. Ici, nous écrirons nos scripts dans un langage de programmation, ce qui nous permettra d’aller plus loin qu’avec un simple script Photoshop.

Prérequis

ExtendScript est un langage de programmation d’Adobe System. Ce langage est basé sur le célèbre langage de programmation JavaScript. Le but de ce cours n’est pas d’apprendre à programmer en JavaScript, aussi, si vous n’avez pas de bases en programmation, je vous invite à suivre le cours Dynamisez vos sites web avec JavaScript sur OpenClassrooms.

Contrairement à la croyance populaire, l’écriture de scripts simples est à la portée de chacun pour autant qu’on suive quelques tutoriels et que l’on s’intéresse à cette technologie.

Il est nécessaire d'avoir la Creative Suite installée sur votre ordinateur pour pouvoir exécuter les scripts du cours. Les logiciels ExtendScript Toolkit, InDesign et Photoshop seront utilisés.

Rappel JavaScript et notation

Les bonnes pratiques JavaScript présentées dans cette section sont issues de l’excellent livre de Douglas Crowford «JavaScript, Les bons éléments» aux éditions Pearson.

Syntaxe

• Chaque ligne se termine par un ;

• On évite l’usage des raccourcis dans l’utilisation des blocs.

  if (test) { // your code here }

• Chaque variable est déclarée avec le mot réservé var.

Tableaux

• On préfère l’usage de la forme courte.

  // juste var my_array = []; // faux var wrong_array = new Array("Saab", "Volvo", "BMW");

Objets

• On restreint l'usage du mot clé new  même si l'on aime bien l'orienté objet !

• var my_object = {};

Opérateurs d'égalité

• On utilise les opérateurs d'égalité sans conversion de type.

  // il faut utiliser les opérateurs sans conversion de type // ===, !== if (0 == '') { alert('ces deux instructions ne sont pas égales et pourtant?'); } if (0 === '') { alert('cette alert ne sera pas affichée'); } else { alert('cette fois-ci, opérateur fonctionne bien'); }

Valeurs fausses

Si on veut tester une valeur équivalente à faux, on peut utiliser l'instruction if(!boolean).

• /** * Les valeurs JavaScript équivalentes à faux: * 0, NaN, '', false, null, undefined * */ var my_object = {}; // test si l'objet contient la propriété name // la propriété n'existe pas donc le test renvoie undefined // en utilisant == il y a une conversion de type donc undefined vaut null // ce genre de comportement est risqué et nuisible pour une bonne lecture du code if (my_object.name == null) { alert('object name vaut undefined -> null'); } if (my_object.name === undefined) { alert("a propriété n'existe pas"); } // on propose donc d'utiliser ! pour tester si la propriété n'existe pas if (!my_object.name) { alert("la propriété n'existe pas, la valeur faux est retournée"); }

Documentation et ressources nécessaires

Comme vous l'aurez certainement constaté, le principal problème avec les scripts en ExtendScript est qu'il y a peu de documentation.
Pour augmenter la difficulté, on a presque l'impression que le développement du IDE (Integrated Development Environment) ExtendScript Toolkit est à moitié terminé…
Bon, trêves de mauvaises nouvelles, je vais essayer de vous aider en vous donnant quelques liens utiles :
• Pour poser des questions, le forum d'Adobe.
• Il existe des SDK (Software Development Kit) pour InDesign et Photoshop. 
• Vous pouvez trouver de la documentation HTML sur le site de Jongware. 
• Si l'allemand ne vous effraie pas, ce livre est intéressant: InDesign Automatisieren.

Environnement de développementExtendScript Toolkit

Adobe propose un utilitaire inclus dans la Creative Suite pour écrire et exécuter des scripts ExtendScript (JavaScript). Pour commencer, ouvrez le logiciel ExtendScript Tookit.

Utilitaire Extendscript Toolkit

Lorsqu'on écrit un script, on indique à ExtendScript Tookit dans quel programme on veut exécuter son script avec le mot clé "target".

Notre premier script// remplacez par photoshop pour tester dans photoshop #target "indesign" alert('hello indesign');InDesignManipuler les liens

Les scripts peuvent être très pratiques si l'on souhaite manipuler les liens d'un fichier InDesign.
Pour cela, il faut avoir en tête l'object model des liens. Si vous vous rendez sur jongware.mit.edu, vous pouvez parcourir facilement la structure des objets JavaScript liés à InDesign.

Link object model

Si par exemple vous voulez effectuer une action sur toutes les images d'un document, vous pouvez faire un script comme ceci :

#target "indesign" var doc = app.activeDocument; var collection_of_links = doc.links; for(var i = 0; i < collection_of_links.length; i++) { var current_link = collection_of_links[i]; if (current_link.parent.constructor.name === 'Image') { alert('je suis une image'); } }

Ou encore mieux, vous pouvez directement sélectionner les «graphics» d'un document, c'est-à-dire les fichiers EPS, Image, ImportedPage, PDF, PICT, WMF sans les Movie, Sound et Story.

#target "indesign" var doc = app.activeDocument; var collection_of_graphics= doc.allGraphics; for(var i = 0; i < collection_of_graphics.length; i++) { var current_graphic = collection_of_graphics[i]; if (current_graphic.constructor.name === 'Image') { alert('je suis une image'); } }Travailler avec un Document InDesign

Si l'on veut par exemple ouvrir un document InDesign et copier les liens et le document dans un dossier (faire un assemblage).

var SAVE_FOLDER_PATH = '~/Desktop/crop'; var doc = app.activeDocument; var new_doc_path = save_with_package(doc, SAVE_FOLDER_PATH); var new_doc = app.open(new File(new_doc_path)); doc.close(SaveOptions.NO); /** * Function to format a date * @return {String} the date as string in this format yyyy-mm-dd */ Date.prototype.year_month_day = function () { var year = this.getFullYear(); var month = this.getMonth() + 1; if (month.toString().length === 1) { month = '0' + month; } var day = this.getDate(); if (day.toString().length === 1) { day = '0' + day; } return year + '-' + month + '-' + day; } /** * Function to format time * @return {String} the date as string in this format hh-mm-ss */ Date.prototype.hours_minutes_seconds = function () { var hours = this.getHours(); if (hours.toString().length === 1) { hours = '0' + hours; } var minutes = this.getMinutes(); if (minutes.toString().length === 1) { minutes = '0' + minutes; } var seconds = this.getSeconds(); if (seconds.toString().length === 1) { seconds = '0' + seconds; } return hours + '-' + minutes + '-' + seconds; } /** * Function who package a document and its links * @param {Document} document the indesign document * @param {String} directories_path_str the path where to store the new document * @returns {String} the path of the new document * @throws {Error} if an error occurred during the package for print */ function save_with_package (doc, folder_path) { var current_date = new Date(); var folder_package = new Folder(folder_path); if (!folder_package.exists) { folder_package.create(); } var doc_file = document.fullName; var current_folder = new Folder(folder_package + '/' + current_date.year_month_day() + '_' + current_date.hours_minutes_seconds()); current_folder.create(); /** * bool packageForPrint (to: File, copyingFonts: bool, copyingLinkedGraphics: bool, copyingProfiles: bool, updatingGraphics: bool, * includingHiddenLayers: bool, ignorePreflightErrors: bool, creatingReport: bool[, versionComments: string][, forceSave: bool=false]) **/ var result_package = document.packageForPrint(current_folder, false, true, false, true, false, true, false); if (!result_package) { throw new Error("il y a eu un problème lors de l'assemblage"); } return current_folder + '/' + document.name; }TP : renommer tous les liens d'un document

Pour ce petit exercice pratique, on va écrire un script qui permet d'enlever tous les caractères spéciaux dans le nom de fichiers des liens du document InDesign.

Donc on va en premier devoir récupérer tous les liens présents dans le document. Ensuite, on va les renommer et les mettre à jour pour informer InDesign du changement de nom. Afin d'éviter de perdre des informations dans le document source, on va tout d'abord faire un assemblage sur le Bureau.

La fonction d'InDesign Assemblage permet de sauvegarder une copie du document avec les liens et les polices. Pour plus d'informations, ouvrez InDesign et allez à Fichier / Assemblage !

//@target "indesign" var doc = app.activeDocument; var collection_of_links = doc.links; for (var i = 0; i < collection_of_links.length; i++) { var current_link = collection_of_links[i]; var file_path = current_link.filePath; // edit the file name var my_file = new File(file_path); var file_name = rename(current_link.name); // replace the file name my_file.rename(file_name); current_link.relink(my_file); current_link.update(); } /** * Function to replace all space by _ * @param str * @returns {string} */ function rename (str) { return str.replace(/\s/g, '_'); }PhotoshopExécuter un script dans Photoshop

Si l'on souhaite faire un script pour Photoshop au lieu d'InDesign, il faut commencer par changer la première ligne du script.

#target "photoshop" /** * remarque : parfois j'ai écrit //@target au lieu de #target * ceci est utile si vous souhaitez écrire vos scripts * dans un autre programme que ExtendScript Toolkit * ainsi l'instruction est prise en compte * mais n'est pas détectée comme une erreur */

Un exemple pratique

Je propose de commencer directement par un exemple pratique ! 

Admettons que vous souhaitiez changer le texte d'un calque Photoshop d'après une structure de données (tableau Excel, base de données, etc.).

Pour commencer, créez un document Photoshop avec un calque de texte comme l'image ci-dessous. Ensuite, enregistrer ce document sur votre bureau en le nommant test.psd.

Créer un document InDesign avec un calque de texte

Une fois ceci fait, nous pouvons écrire un script qui ira changer le contenu du calque de texte. Pour chaque numéro présent dans le tableau "data", on créera un nouveau document PSD.

//@target "photoshop" /** * img_file_path the image path * @type {string} */ var source_file_path = '~/Desktop/test.psd'; /** * data the number to change in photoshop * @type {string[]} */ var data = ['No 28', 'No 29', 'No 30', 'No 31']; /** * open the image test.psd on the desktop * for each number in the array data change the content of the text layer * then save results on the desktop as PSD */ try{ app.displayDialogs = DialogModes.NO; for(var i = 0; i < data.length; i++){ var doc = open_doc(source_file_path); edit_text_layer(doc, data[i]); save_to_PSD('~/Desktop/test_' + i + '.psd'); } } catch (ex){ alert('error: ' + ex.message + '\n line' + ex.line); } finally{ app.displayDialogs = DialogModes.ALL; } /** * Function to edit the text layer * @param doc * @param text */ function edit_text_layer(doc, text) { var text_layer = doc.artLayers[0]; // the second last layer in photoshop text_layer.name = text; text_item_ref = text_layer.textItem; text_item_ref.contents = text; } /** * Function to open an image in photoshop * @param file_path * @returns {Photoshop document} */ function open_doc(file_path) { var img_file = new File(file_path); var ps_doc = app.open(img_file); return ps_doc; } /** * Function to save a document in PSD * @param {String} file_path */ function save_to_PSD(file_path) { psdSaveOption = new PhotoshopSaveOptions(); psdSaveOption.embedColorProfile = true; app.activeDocument.saveAs(new File(file_path), psdSaveOption, true, Extension.LOWERCASE); app.activeDocument.close(SaveOptions.DONOTSAVECHANGES); }ExtendScript-library

Il existe un certain nombre de projets de librairie ExtendScript sur le web. Le but de cette partie n'est pas de dresser une liste exhaustive de tous ces projets. Néanmoins, on note que ces différents projets sont une très bonne source d'inspiration pour quiconque souhaite écrire des scripts :

• La librairie Extendable qui fournit un certain nombre de fonctionnalités pour InDesign. Malheureusement, cette librairie n'est plus maintenue à jour.

• La librairie Basil.js qui s'adresse plus à des designers qu'à des développeurs. Cette librairie fournit des méthodes utiles pour traiter le contenu des documents InDesign.

• La librairie Xtools qui fournit des fonctions pour Photoshop. 

Problématique

Il existe quelques librairies avec chacune leurs forces et faiblessses cependant aucun projet ne s'est vraiment imposé sur le Web. Il serait très intéressant de pouvoir mettre à disposition des utilisateurs de l'ExtendScript une librairie complète et maintenue régulièrement. On peut prendre comme exemple la librairie jQuery qui s'est imposée comme l'un des standards pour ceux qui souhaitent ajouter des fonctionnalités JavaScript à un site web.

En partant de ce constat, les contributeurs ExtendScript-library souhaitent lancer un projet de librairie pour les logiciels de la Creative Suite d'Adobe. Ainsi, ce projet regrouperait aussi bien des fonctions pour InDesign, Photoshop, Illustrator…

Ce projet est encore très jeune puisque les premiers "commits" datent de septembre 2014. On retient que l'objectif final est de créer une communauté active pour promouvoir cette technologie.

Présentation de la librairie

La librairie ExtendScript-library comprend un module différent pour chaque application de la Creative Suite. Ainsi, le module InDesign regroupe toutes les fonctions qui peuvent être exécutées dans le logiciel InDesign.

Les fonctionnalités qui sont communes à toute les applications comme l'écriture de logs, les fonctions liées aux tableaux et aux chaînes de caractères sont incluses dans le module Helper.

organisation des modules