Google Docs für Blog-Posts -- Wie schönes HTML exportiert werden kann
In unserem Jobpushy-Blog veröffentlichen wir regelmäßig (hoffentlich) spannende Artikel aus der Arbeitswelt der Software-Entwickler, Administratoren und anderen IT-Menschen. Bisher haben wir unsere Artikel auf Medium veröffentlicht und anschließend auf unseren Blog hier exportiert. Das Ergebnis war nicht zufriedenstellend, so dass wir nun einen neuen Ansatz über Google Docs erproben…..
1. Versuch: Medium Stories exportieren
Von der Publishing und Blogging-Platform Medium hatten wir uns eine größere Sichtbarkeit versprochen. Daher der Ansatz die Artikel dort zeitgleich zu publizieren und mit unserem eigenen Blog quer zu verlinken. Technisch haben wir dazu einen Medium-Importer programmiert, der exportierte Posts von Medium automatisch in ein HTML für unseren Blog konvertiert.
Nach über einem Jahr können wir jedoch festhalten: Medium hat uns bzgl. Sichtbarkeit und Verbreitung keinen Mehrwert gebracht. Auch ist das Tooling, was Medium zum Schreiben und Exportieren von Artikeln anbietet, nicht optimal. Folglich ging die Suche weiter…
2. Versuch: “Google Docs” to Rescue
In der Analyse stellten wir uns die Frage, was das perfekte Tool zum Verfassen von Blog-Beiträgen leisten sollte. Folgende Wünsche hatten wir an ein solches Tool:
- Funktionsumfang bzgl. Schreiben und Formatierung sollte einer modernen Textverarbeitung entsprechen. (WYSIWYG: What You See Is What You Get)
- Schreiben sollte parallel von mehreren Geräten möglich sein (z.B. auch via Sprach2Text-Funktion des Handys)
- Teamarbeit gewünscht -- ein Artikel muss mit beliebigen Personen ohne zusätzliche Software teilbar sein. Gleichzeitiges Schreiben möglichst in Echtzeit ist gewünscht
- Änderungen müssen versioniert werden inkl. Nachvollziehbarkeit wer was geändert hat
- Gut funktionierende Spelling-/Rechtschreibprüfung sollte vorhanden sein
- Ein Dokument muss inkl. Bilder als HTML exportierbar sein, um es ohne Aufwand in unserem Blog veröffentlichen zu können.
Lange Anforderungen kurzes Fazit: Google Docs, kostenlos im Rahmen von Google Drive nutzbar, erfüllt all diese Anforderungen.
Es bietet insbesondere auch eine Exportfunktion, um das Dokument als HTML zu exportieren. Zu schön, um wahr zu sein. In folgendem Bild ist zu erkennen, was dann doch nicht so schön an diesem HTML-Export ist:
Wie oben im Screenshot zu erkennen ist, enthält das HTML von Google Docs eine Vielzahl von “.cXY” CSS-Klassen und verschachtelten SPANs. In dieser Form ist das HTML nur schwer zu verwenden, um das CSS-Styling des Blogs darauf anzuwenden.
Beispielsweise wäre anstatt
<h2 class="c12" id="h.4axfi7khhat3">
<span class="c1">1. Versuch: Medium Stories exportieren </span></h2>
<p class="c0">
<span>Von der Publishing und Blogging-Platform </span>
<span class="c11">Medium </span>
<span>hatten …
</p>
z. B. folgendes wünschenswert
<h2>1. Versuch: Medium Stories exportieren </h2> <p> Von der Publishing und Blogging-Platform <em> Medium </em> hatten … <p>
HTML Optimierung durch Google Apps Script
Der normale HTML-Export ist somit für einen Import in unseren Blog nicht nutzbar. Glücklicherweise gibt es den Script Editor, der es erlaubt via JavaScript beliebige Manipulationen und somit auch Konvertierungen an Google-Dokumenten durchzuführen.
Diesen Ansatz haben wir genutzt, um aus einem “Google Doc” ein sauberes HTML-Dokument zu generieren. Die API des Google Apps Script erlaubt darüber hinaus, sich das generierte HTML inkl. Bilder via Email zu schicken oder über eine Schnittstelle direkt in die eigene Webapplikation zu importieren. Recht komfortabel….
Folgendes Skript zeigt exemplarisch wie die Baumstruktur eines “Google Docs”-Dokumentes durchlaufen werden kann. Anstatt der einfachen Ausgabe kann beispielsweise die Transformation in HTML vorgenommen werden. (Beachte den Kommentar falls Du das Skript ausprobieren möchtest).
/**
How to run the script:
-- Open your document in Google Docs
-- Open Script Editor: Tools -> Script Editor
-- Paste this code into the editor; save; use any project name
-- Testing with a try-run with: Run --> function "doGet" (Accept the permission; ingore the Warnings and click the "allow-links" below)
-- Start it with: Publish -> Deploy as web app ... -> Deploy --> Use "Test web app for your **latest code**."
**/
function doGet() {
var body = DocumentApp.getActiveDocument().getBody();
var output = processAllChilds(body,0);
return ContentService.createTextOutput(output);
}
function processAllChilds(element, level) {
var indent = Array(level+1).join(' ');
var output = indent + "<"+element.getType()+">";
output += "["+readNotEmptyAttributes(element)+"]\n";
output += readText(element,indent+' ');
if (typeof element.getNumChildren === "function") {
for (var i = 0; i < element.getNumChildren(); i++) {
output += processAllChilds(element.getChild(i), level+1);
}
}
output += indent + "</"+element.getType()+">\n";
return output;
}
function readText(element,indent) {
if (element.getType() == DocumentApp.ElementType.TEXT) {
return indent + element.getText() + "\n";
} else {
return '';
}
}
function readNotEmptyAttributes(element) {
var result = {};
var attrMap = element.getAttributes();
for (key in attrMap) {
if (attrMap[key] != null) {
result[key] = attrMap[key];
}
}
return JSON.stringify(result);
}
Falls gewünscht und Zeit verfügbar ist, werde ich ein (generisches) Skript für den sauberen HTML-Export von Google Docs auf Github zu gegebener Zeit veröffentlichen. Fragen und Feedback sind immer willkommen.