Open Time

Je viens de faire joujou avec un truc que Kozlika m’a indiqué il y a quelques heures et qui produit des copies d’écran de sites responsive au p’tit poil. Responsive pour ceux qui se demandent ce que c’est je dirais que c’est un bidule — pas la peine de détailler — qui, en fonction de l’appareil que vous utilisez, téléphone portable, tablette, ordinateur, … va positionner au mieux les différents éléments de la page. En général, ça joue sur le nombre de colonnes, les infos annexes qui sont reléguées vers le bas de la page sur petits écrans, etc.

Le truc en question s’appelle CasperJs, outil qui s’appuie sur PhantomJs, un machin qui fait semblant — mais rudement bien, hein ? On voit pas la différence ! — d’être un navigateur. CasperJs lui s’occupe de faire semblant d’être le gus qui ouvre des pages web et qui clique sur des boutons — mais rudement bien, hein ? On voit pas la différence ! Enfin, si un peu, il est plus rapide.

L’intérêt est qu’on peut comme ça scripter CasperJs pour lui faire afficher un site web — à l’aide de PhantomJs, bravo vous avez tout compris — dans une fenêtre dont on choisit les dimensions et prendre des copies d’écran au passage. Très pratique pour générer une série de copies d’écran sur différentes surfaces d’affichage.

J’ai repris toutes les informations d’installation ici, en utilisant MacPort plutôt que Brew pour PhantomJs, et en récupérant directement le binaire depuis le site pour CasperJs.

Une fois PhantomJs et CasperJs installé, il suffit d’écrire un petit script Javascript pour définir les quelques dimensions et pour gérer les captures et sauvegardes des images récupérées. Fainéant que je suis je me suis borné à reprendre celui qui était donné en exemple :

var casper = require("casper").create(),
    viewportSizes = [
    [320,480],
    [320,568],
    [600,1024],
    [1024,768],
    [1280,800],
    [1440,900]
],
    url = casper.cli.args[0],
    saveDir = url.replace(/[^a-zA-Z0-9]/gi, '-').replace(/^https?-+/, '');
 
casper.start();
 
casper.each(viewportSizes, function(self, viewportSize, i) {
 
    // set two vars for the viewport height and width as we loop through each item in the viewport array
    var width = viewportSize[0],
        height = viewportSize[1];
 
    //give some time for the page to load
    casper.wait(5000, function() {
 
        //set the viewport to the desired height and width
        this.viewport(width, height);
 
        casper.thenOpen(url, function() {
            this.echo('Opening at ' + width);
 
            //Set up two vars, one for the fullpage save, one for the actual viewport save
            var FPfilename = saveDir + '/fullpage-' + width + ".jpg"; // ".png";
            var ACfilename = saveDir + '/' + width + '-' + height + ".jpg"; // + ".png";
 
            //Capture selector captures the whole body
            this.captureSelector(FPfilename, 'body');
 
            //capture snaps a defined selection of the page
            this.capture(ACfilename,{top: 0,left: 0,width: width, height: height});
            this.echo('snapshot taken');
        });
    });
});
 
casper.run(function() {
    this.echo('Finished captures for ' + url).exit();
});

Vous pouvez ajouter ou enlever autant de tailles que vous voulez (voir les lignes 3 à 8). Vous pouvez également obtenir des fichiers PNG (beaucoup plus lourds d’après mes tests) en remplaçant .jpg par .png sur les lignes 31 et 32, ou également du GIF ou du PDF, juste en changeant l’extension.

Une fois ces réglages effectués ça se lance comme ça (mon script Javascript est enregistré sous ~/casperjs.js) :

casperjs ~/casperjs.js http://open-time.net

Pour chacune des tailles il va alors générer une copie d’écran de la partie visible et une copie d’écran de la page complète. Voilà ce que ça donne pour le blog que vous êtes en train de lire :

Pratique !