Screenshots mit PhantomJS machen

Mit PhantomJS und node.js kann man einfach Skripte erstellen, die automatisiert Screenshots von Webseiten machen. PhantomJS ist ein Chrome Browser, ohne Benutzeroberfläche (headless) und kann viel mehr als nur Screenshots machen, allerdings kann man mit Screenshots sehr gut testen wie sich eine Seite bei verschiedenen Auflösungen verhält und damit automatisiert veranschaulichen wie eine Seite auf einem Tablet oder Smartphone aussehen würde.

PhantomJS Grundlagen

PhantomJS basiert auf der webkit-engine und V8, ist aber kein node module. Es läuft als eigenständiges Programm auf der Kommandozeile und lässt sich einfach per npm install -g phantomjs installieren. Für die -g, also globale Installation sind root Berechtigungen notwendig.

Einen Screenshot machen

Dieses Skript ist relativ kurz und an die Dokumentation angelehnt. Ich werde hier die wichtigsten Einstellungen auflisten, zum Beispiel um die Auflösung zu ändern.

var page = require('webpage').create(),  
        system = require('system');

var site = {  
    url : '<a href='http://nodejs.org'>http://nodejs.org</a>',
    slug: 'nodejs'
}

page.viewportSize = { width: 1024, height: 768 };  
page.zoomFactor = 1;  
page.clipRect = { top: 0, left: 0, width: 1024, height: 768 };    

page.open(site.url, function (status) {  
    console.log('opening: '+ site.url + ' : ' + status);

    var filename = site.slug +'.png';
    window.setTimeout(function(){

        page.render('images/' + filename);
        page.close();
        console.log('file rendered to: images/' + filename + '.png')
        phantom.exit();
    },2000);// wait 2 seconds
});

Hier ist das Bild, dass PhantomJS auf der Festplatte gespeichert hat:

phantomjs_screenshot

Zu welcher Seite PhantomJS eine Verbindung aufbauen soll legen wir in site Objekt fest, sowie wie das Bild heißen soll, das gespeichert wird.

PhantomJS Auflösung und Crop

Mit den Einstellungen page.viewportSize und page.clipRect legen wir die Bildschirmgröße fest und ob PhantomJS bis zum Ende der Seite scrollen soll um die gesamte Seite zu erfassen. In dem obigen Beispiel haben wir beide Einstellungen so gesetzt, dass das Bild 1024 x 768 Pixel groß wird. Würden wir die Zeile der page.clipRect Einstellung auskommentieren, würde PhantomJS die Seite komplett in einen Screenshot speichern.

Bild bei Auskommentierung von: #page.clipRect = { top: 0, left: 0, width: 1024, height: 768 };

phantomjs_screenshot_clipRect

Als Auflösung empfehlen sich natürlich jene, die man gerade nicht als Gerät zur Hand hat, aber eine Webkit-engine einsetzen wie Android und iOS Tablets und Smartphones, wenn man testen möchte wie die eigene Seite oder die eines Kunden dort aussehen würden.

Fazit

PhantomJS ist ein geniales Tool und ich werde dazu noch mindestens einen Artikel schreiben, in dem ich mehr auf Automatisierung eingehe und wie man mehrere Auflösungen auf einmal testen kann.

Ich hoffe diese kleine Einführung hat euch gefallen!

Hello World in node.js

Um ein Hello World Skript in node.js zu schreiben, gibt es mindestens zwei Wege. Einmal über den Terminal/die Konsole ausgeben und natürlich als Antwort an einen Browser oder einen anderen Netzwerkklienten. Schauen wir uns die Beiden mal an.

Das Hello World oder Hallo Welt Beispiel in node.js ist sicher schon etwas ein alter Hut, aber ich schließe es hier der Vollständigkeit halber ein und um zu zeigen, dass die Kommandozeile kein Hinderniss darstellt, sondern Potenzial.

node.js Hello World in der Kommandozeile

Zu diesem Beispiel gibt es nicht viel zu sagen, außer das wir die gleiche Funktion nutzen wie im Browser um einen String, ein Objekt oder sonst etwas in der JavaScript Konsole des Browsers auszugeben: console.log().

Wenn wir nach der Installation von node.js eine Datei mit dem folgenden Inhalt anlegen ist unser erstes Beispiel schon fertig:

// Dateiname: console.js
console.log('Hello World');  

Wenn wir die Datei nun mit node console.js ausführen, sollte die Ausgabe Hello World ergeben und das Programm automatisch beenden.

node.js Hello World Webserver

Nun zu dem etwas nützlicheren Beispiel, der Ausgabe für Browser oder andere HTTP requests.

Dieses Beispiel zeigt nicht nur wie man etwas über das Netzwerk ausgibt, sondern auch wie man ein Modul in node.js lädt. In der ersten Zeile definieren wir eine Variable, die den gleichen Namen wie das node.js Modul http trägt.

Danach starten wir den HTTP Server, der Anfragen mit Hello World beantworten wird, unter der Adresse localhost:3000.

Zuletzt geben wir auf der Kommandozeile aus, dass der Server auf Port 3000 gestartet wurde.

// Dateiname: http.js
var http = require('http');

http.createServer(function (request, response) {  
    response.end('Hello World');
}).listen(3000);

console.log('http server listening at localhost:3000');  

Wie auch im ersten Beispiel starten wir das Skript mit node http.js und können darauf localhost:3000 besuchen. Im Gegensatz zum ersten Beispiel beendet sich dieses Programm nicht selbst, sondern wartet darauf bis es mit CTRL+C abgebrochen wird, weil die http.createServer Funktion eine Eventschleife startet, die immer weiter Anfragen beant

Fazit

Auch wenn Hello World Tutorials zahlreich und oft wenig anspruchsvoll sind, zeigen diese beiden Beispiel relativ gut, wie man eine event loop startet und module importiert und wie manche Dinge einfach dem Arbeiten im Browser ähnlich sind, wie console.log. Habt ihr Ideen für ein Tutorial? Tweetet einfach an @vollzeitblogger!

Was ist node.js?

Node.js ist JavaScript auf der Serverseite und dafür bekannt viele Verbindungen gleichzeitig bedienen zu können. Dadurch lassen sich skalierbare und schnelle (web)-Andwendungen schreiben.

Durch Googles V8 JavaScript Engine, die führ Jahre dominant war in ihrer schnellen Ausführung von JavaScript im Browser Chrome, wird JavaScript code auf dem Server interpretiert.

„Was ist node.js?“ weiterlesen

Ein neuer JavaScript Blog: jsnews.de

jsnews_javascript_blog_deutsch

UPDATE: jsnews.de ist geschlossen und die Artikel gibt es jetzt auch auf diesem Blog unter dem Tag JavaScript

Lokale und nationale communities sind wichtig. Die meisten Entwickler, die ich kenne, greifen zwar meist auf englische Quellen zurück, aber das liegt sicher auch daran, dass es diese in der Muttersprache einfach nicht gibt. Wenn man durch die lokalisierung von Inhalten mehr Menschen für ein Thema begeistern kann, ist das einen Versuch wert.

Ich spreche in meinem Alltag kaum Deutsch, habe eine lettische Freundin und wohne in Dänemark. Englisch ist für mich zum Standard geworden, aber Sprachbarrieren bestehen, besonders in Ländern mit 80+mio. Einwohnern.

Ich blogge jetzt auch auf JSnews.de über alles was mit JavaScript zu tun hat. Die Seite hat noch nicht wirklich ein Layout, aber Inhalte sind auf dem Weg! Wer Lust hat mitzuschreiben, kontaktiert mich doch einfach!

Im deutschsprachigen Raum habe ich einfach wenig Seiten gefunden, die sich auch eingehend mit JavaScript auf der Serverseite beschäftigen und wenn es mir gelingt auch nur eine Hand voll Leute dafür zu begeistern mit diesem JavaScript Blog, ist es das sicher wert!

Update 21. Juli 2013:

Artikel können nun über github eingereicht werden, oder über mein Kontaktformular hier. Wenn ihr ein JavaScript Thema habt, dass unbedingt dort verfügbar sein wollte, schreibt ihn einfach auf und schickt mir einen pull request an das repository jsnews-contrib.

Wie ihr in dieser Vorlage sehen könnt, könnt ihr euren Namen frei wählen und auch einen Link zu eurer Seite einfügen:

{{{
	"title" : "Euer Titel",
	"tags"  : [ "JavaScript", "Volksmusik", "Schlagerstar" ],
	"category" : "Ohrenbeleidigung",
	"date" : "2013-07-21",
	"author" : { "nick" : "deinNick", "url" : "deineSeite"}
}}}

Themen rund um die Community sind auch willkommen, wenn ihr zum Beispiel ein Meetup starten oder eure Usergroup promoten wollt!

jsnews_javascript_blog_deutsch

Wie ich zu node.js kam

Von node.js hörte ich zum ersten mal im Chaosradio Express: Folge 167 im Jahre 2010/2011. 2012 fing ich dann an etwas mehr über den PHP-Tellerrand zu blicken und spielte mit Ruby on Rails und auch node.js. Mag komisch klingen, aber ich bin tatsächlich über Ruby on Rails auf node gekommen. Genau weiß ich nicht mehr wie das kam, aber die üblichen verdächtigen wären net.tutsplus.com oder andere Tutorialseiten, auf denen das Thema gerade boomte.

„Wie ich zu node.js kam“ weiterlesen

Ghost: bloggen mit node.js

ghost_responsive_design

Ein Projekt, dass ich jüngst auf Kickstarter unterstützte ist Ghost. Ghost ist/wird eine Bloggingplatform, das man auch selbst installieren kann, WordPress vom Konzept her ziemlich ähnlich. Aus technischer Sicht setzt es auf node.js, das besonders für die hohe Erreichbarkeit bei zahlreichen Anfragen bekannt ist. Durch eine Kickstarter Kampagne wurde Ghost für 196.362 Pfund Sterling finanziert und ist gerade in der Mache. „Ghost: bloggen mit node.js“ weiterlesen