Category: Migrate 2 WP

Gigant-guiden för FF8 migrerad

2018-04-08 / Bobby

FF8-sajten, vår största sajt att flytta sedan FF7 för nu 5 år sen. Den kom ut i feburari i år efter många månaders jobb av och på (glömde skriva denna post då …). Tror det var en period på tre-fyra månader vi jobbade på den. Originalet innehöll ett hundratal sidor med sin stora guide och många undersidor, detta förändrades till migreringen där massa förbättringar och förenklingar gjordes. Vi har nu exakt 160 sidor guide på nya FF8-sajten!

Header-bilden till sidorna fick våra fans på Facebook välja.

Flera sidor har slagits ihop, till exempel har alla vapensidor slagits ihop till en sida per karaktärs alla vapen, medan alla sidor för guiden har behållits. Allt har optimaliserats för bättre flyt för dig som läser guiden och prövar hitta fram. Vi blev också av med alla irriterande popups, och tog bort dåliga sidor, så som de med Gameshark-koder (som inte funkade).

Till detta jobb använde vi oss som vanligt av M2WP (Migrate 2 WordPress) för att läsa av alla våra gamla sidor, tvätta kod och text, strukturera om saker, och så skjuta in det i WordPress. M2WP låter oss göra stora delar av jobben med några knapptryck. Under processen noterades flera önskningar för att vi framöver ska kunna flytta våra sista stora sajter – FF10 och FF9-sajterna – utan så mycket manuellt arbete.

Borta är all gammal dålig kod, som var dålig för sökmotorer och för mobiler. Varje liten detalj har vi sett på. Gamla krångliga tabeller har förenklats eller tagits bort helt, sidor har strukturerats om med tydliga rubriker och undersidor.

För att färdigställa sidorna denna gång (innan stöd läggs in i M2WP) så gjordes stora jobb i kodredigeraren Atom på att köra regex-koder för att snabbt kunna finna mönster i den gamla koden och direkt möblera om den totalt.

Den migrerade sajten står nu för över 50% av trafiken på nya guide-servern!

Alla gamla sidor för FF8-sajten är nu borta och trafik leds till sina nya sidor automatiskt av vår dirigeringskod. Denna kod är nu dessutom extremt mycket smartare så att jag bara kan radera de gamla sidorna och så förstår den nya koden vad du var ute efter för sida och skickar dig rätt direkt. Nu för vi också statistik på hur många som “går fel”, alltså fortfarande går in på de gamla URLerna.

Nästa steg blir flera nya viktiga funktioner i M2WP så som att göra titel smartare på nya sidor (blev färdigställt för någon vecka sedan), snabbt kunna ändra block med kod via regex, samt en god del andra mindre saker. Då kan de 5 återstående sajterna flyttas lättare, men speciellt FF9 och FF10-sajterna behöver dessa förbättringar. Flytten av dem ska inte behöva ta flera månader och massa manuellt jobb.

Nya Migrate 2 WordPress

2015-04-21 / Bobby

Jag har skrivit om Migrate 2 WP tidigare. Det är ett egetutvecklat verktyg som assisterar mig väldigt mycket då jag ska få uppgraderat alla gamla FFU-sajter. Det läser av alla gamla sajterna, följer alla länkar, sparar ner allt innehåll i en databas, och sen genom fler olika steg tvättar denna html-kod/innehåll på flera sätt, för att i slutet skjuta in all data i WordPress.

Koden jag jobbade på nådde nästan version 1, men lades ner på 0.9.9. Då hade jag cirka 5 buggar kvar. Men det jag upptäckte var att mycket med grundstrukturen i projektet inte var så bra, och jag kom på väldigt många ändringar som inte var så lätta utan att behöva förstöra stora delar av grundstrukturen och bygga om.

Därför gjorde jag en kopia på koden och påbörjade ett nytt projekt. Migrate 2 WordPress 2.0 BETA.

Den största skillnaden är att jag nu helt tagit bort de sista delarna som sköt in data direkt i WordPress, det blev helt enkelt för många problem, buggar, och annat med det tankesättet. Nu har jag istället lagt på två helt nya steg. Ett för att administrera sidstrukturen en sista gång, där man nu kan ändra HTML-koden direkt, eller skapa nya sidor till och med. För att så i sista steget generera en XML-fil som är byggd upp i WordPress egna export/import-format. Denna fil kan du lätt ladda upp i WordPress och på direkten få den sidstruktur och det innehåll du redan definierat i Migrate 2 WordPress-systemet (M2WP).

Med några bra plugins sen i WordPress så ska man med M2WP kunna på bara någon timma få upp en sajt från statiska filer till WordPress! Detta jämförs med många timmars manuellt arbete, speciellt vid större sajter.

Det nya Steg 7 heter “Structure”, nya steg 8 heter “Finalize”. Och så på slutet ligger en knapp som bara heter “Export”. Där laddar du bara ner din färdiga fil. Detta steg jobbar jag just nu på att färdigställa en beta av.

Jag ska också jobba lite mer på generell struktur och bättre användarupplevelse. Ska pröva att slå ihop onödiga steg och upprepande kod. Möjligtvis också ta bort hela användardatabasen eftersom det är rätt lite poäng med det i ett sånthär projekt. Vi får se vad som landar i färdiga 2.0.

Nästa FF-sajt att flyttas

2014-12-01 / Bobby

Nästa FF-sajt att flyttas blir inte en, utan tre stycken! Tre FF-sajter kommer att flyttas från det gamla tunga manuella hårdkodade systemet, över till det nya lättjobbade WordPress-systemet.

Sajterna som ska flyttas är FF1, FF2, och FF13. Alla dessa tre valdes för att de är förhållandevis små (jämfört med alla våra andra spelsajter) och enkelt uppbyggda. De tre körs just nu på vår ASP.NET-server, men FF13-sajten i vårt egenutvecklade CMS Gilgamesh (som kommer läggas ner).

Flytten av FF1 och FF2-sajterna gjordes med vårt egenutvecklade öppna källkods-projekt Migrate 2 WordPress. De flyttarna tog inte mer än 30 minuter styck, sen la jag en hel del tid i efterhand på att rensa upp och finjustera på ny menystruktur, nya bilder, rätta småfel, etc. Till exempel måste jag byta ut Karaktärs-bilderna på alla sajterna då de gamla inte funkar i nya designen. Mycket såna småsaker tar fort några timmar. Bara att finna tillräckligt högupplösta bilder från FF1 har ätit mycket tid av mig.

Totalt kanske jag hittills spenderat 8-10 timmar på att flytta dessa tre sajter. Men så är de nu också nästan alla klara till lansering. Och skönt blir det att kunna stänga ner ytterligare 3 gamla sajter, och öppna upp för att lättare ta in hjälp utifrån med allt innehåll.

Om några dagar är jag förhoppningsvis klar med allt arbete. Jag startade igår på FF13-sajten med att manuellt flytta över allt innehåll och rensa upp i gammal HTML-kod (fullt av FONT-taggar och CENTER-taggar … hallå 1800-talet!). Sajten har så lite innehåll att jag inte behövde köra den via Migrate 2 WP. Men det kommer behövs mer innehåll till den sajten innan det känns okej att lansera den, så vi får se vad jag hittar på. Klassikern är att i vartfall lägga upp alla karaktärer med minimal info, lägga upp lite bilder, och sen är frågan vad mer jag får till eftersom jag bara spelat några timmar av spelet.

Efter detta återstår fortfarande några sajter i gamla ASP.NET-systemet. Bland annat FF12-sajten som körs i Gilgamesh. FF11-sajten är enbart filbaserad. Alla andra sajter på FFU, om jag inte glömt nåt, körs i klassisk ASP. De vill jag så klart också få bort, men flera av dem är väldigt stora och komplexa, som FF7-sajten var, och den tog flera veckor av hårt arbete att få färdig. Så det är därför jag fortfarande inte tagit tag i våra allra största spelsajter: FFVIII, FFIX, FFX, FFX-2. Och de får nog vänta lite till.

Efter att dessa tre sajter lanserats i nya systemet så är då antalet sajter där 7 stycken (officiellt). 6 av dem är gamla som flyttats, och en sajt är helt ny – Bravely Default. Så systemet växer, och förbättras, hela tiden.

Migrate-2-WP fixar flytt av FF4-sajten

2014-10-28 / Bobby

Vår egeneutvecklade produkt Migrate 2 WordPress har nu körts för första gången helt från start till slut och faktiskt resulterat i något som fungerar! Sannerligen dess eldprov.

Jag crawlade alla sidor på vår gamla Final Fantasy 4-sajt. Migrate 2 WP matas med en länk till startsidan, sedan sköter koden resten. Den finner alla undersidor och sparar undan dem i databasen. Sen genomgås flera olika steg för att “tvätta” resultatet så att all gammaldags kod byts ut mot mer modern kod.

Systemet har också en sjukt smidigt funktion, speciellt för FF4-sajten, som går ut på att splitta stora sidor till flera små undersidor. Som Karaktärer-sidan för exempel. På gamla sajten ligger all text på en enda sida, detta önskar vi inte i vårt nya system. I Migrate 2 WP ordnar man detta enkelt genom att “flagga” ett visst mönster i koden som man delar upp en sida på. Alla gånger denna flagga hittas i koden så skapas en ny undersida. Så på bara en sekund får jag Karaktärer-sidan uppdelad till en unik sida per unik karaktär. Detsamma gjorde jag för Magier och Bossar.

Hela denna process, från start till slut, tog cirka 30 minuter! Jämför det med hur lång tid det skulle ta att manuellt behöva gå in på varje undersida, ta “Visa källa”, spara undan all kod i filer lokalt, och sedan manuellt utföra “tvätt”-jobbet. Tidsbesparingen är enorm!

Sista steget är att spara in alla sidor i WordPress-databasen. Just nu har jag problem med detta via externa servrar, så jag måste spara allt lokalt. Men då kan jag ändå på några få minuter gå in och göra en “Export all pages” och sedan importera i min existerande WordPress-installation på FFU.

Bang! Alla sidor är nu på plats, med all sin text. Busenkelt.

Det jag dock måste göra efter detta är att manuellt gå igenom alla sidor inne i WordPress och ändra på detaljer. Det kryllar av stavfel och andra gamla små missar som Migrate 2 WP inte kan hantera. Sen så är det så klart att systemet helt missar vissa saker, glömmer lite html, eller liknande. Detta uppdaterar man manuellt. Dessutom är det väldigt nice att få en visuell bekträftelse på att alla sidor ser bra ut (så man bör ändå gå igenom sida för sida). Men det går fort i förhållande till att få göra allt själv från scratch.

Ett stort problem just nu är dock alla bilder. De flyttas inte automatiskt, och troligen kommer de inte göra det i version 1.0 heller. Men Migrate 2 WP flaggar alla bilder med en CSS-class, som jag i WordPress kan göra stor och röd (så att den lätt syns). Så detta uppdaterar jag manuellt då sidorna gås igenom. Bilden måste laddas upp på nytt och placeras ut på riktigt ställe, men inte heller detta tar jättelång tid.

Beräknad tid på alla dessa justeringar i WordPress är kanske 2 timmar på FF4-sajten. Vilket är förhållandevis lite tid. Totalt sett är det en väldigt stor förbättring. Och i framtiden är det möjligt att Migrate 2 WP förbättras ännu mer. Det hade varit kul att till exempel ha det som ett eget WordPress-plugin och se om andra kunde ha nytta av det. Mig har det hjälpt enormt. Jag hade aldrig moderniserat de gamla Final Fantasy-sajterna utan det.

Migrate 2 WP – status

2014-10-23 / Bobby

Som jag tidigare berättat om så utvecklar jag ett verktyg för att lätt flytta gamla hemsidor in i WordPress mer eller mindre automatiskt.

Det är nu stora förbättringar på plats. Jag kan med verktyget läsa av allt innehåll på FFU:s alla spelsajter. Innehållet granskas nu mycket smartare så hela den processen går mycket snabbare än den gjort förut, och inga felaktiga länkar kommer med.

Processen att sen tvätta innehållet bort från gammal dålig kod är markant förbättrad med bättre hantering, snabbare kod, och fler inställningar.

Jag tog också ett stort grepp runt menyn och lyfte ut hela projekt-admin till en egen menypunkt. Nu hanterar man alltså där alla sina projekt. Det blir då mycket tydligare när man valt sitt projekt och börjat jobba med det.

Andra nyheter är att man nu efter att ha läst av en hel spelsajt kan radera och på andra sätt administrera de sidor man läst in. Man kan till och med lätt splitta en sida till flera mindre undersidor, en funktion som FFU har extremt stor nytta av.

Med kanske bara 20 todo-punkter kvar så närmar vi oss en release av ett färdigt verktyg. Lite problem med inställningar och WordPress-kopplingar återstår att få ordning på. Sen börjar jobbet med en version 2 … kanske 😛

Av FFU-sajter så står just nu FF13, FF4, och FF1-sajterna på tur. De har redan gått några rundor i verktyget för att fixas.

Vad är Migrate to WordPress?

2014-07-21 / Bobby

Vad är Migrate 2 WP kan man undra. Det är ett namn som dyker upp lite här och där på guide.ffuniverse.nu. Men vandra inte i okunskap. Ta några minuter av din tid så ska jag här förklara det du behöver veta (OBS! Teknisk artikel).

WordPress

Först och främst så står “WP” för WordPress, världens största system för bloggar, nu senare också för vanliga hemsidor – som FFU. Enligt Wikipedia kan så körs över 60 miljoner olika hemsidor i världen på WordPress! Du besöker nästan garanterat dagligen hemsidor som visas tack vare att WordPress ligger bakom och puttrar.

WordPress har nog hundratals fördelar jämfört med att fortsätta utveckla varje sajt på FFU på det gamla sättet: manuellt i statiska filer, utan databas. Men jag ska inte gå in i detalj på WordPress i denna artikel. Utan här ska jag förklara vad då “Migrate 2 WP” är, ett system som jag skapade med hjälp av Jimmy “epaaj” då FF7-sajten skulle göras om med start i 2012.

Migrate 2 WP

Migrate 2 WP är ett migreringsverktyg som springer ur all kod jag var tvungen att skriva för att kunna underlätta mitt jobb att förnya FF7-sajten. Jag byggde då upp allt i flera mindre filer, varje fil kördes genom att skriva in rätt sökväg i webbläsaren. När koden på en sida var gjord så hade ett steg i migreringen utförs. Sen gick man till nästa sida. Och så vidare, tills alla steg var utförda. Men det var ingen grafik eller design på systemet, inga hjälptexter, stegen länkade inte mellan varandra, allt var manuellt och komplext, och det kraschade titt som tätt.

Så det jag gjorde var att starta upp ett nytt projekt på GitHub (en av världens största hemsidor för öppen källkod där alla kan delta). Efter det började jag så smått att bygga bryggor mellan alla stegen, göra så att man måste ta dem i en speciell ordning, samt så klart att lägga på en fin och användarvänlig design.

Just idag är systemet officiellt i version 0.8 och inte färdigt för beta ens. Men jag har gjort flera förbättringar och fler ska in. Förhoppningen är att nå en stabil version 1.0 och använda den för att få flyttat våra största och mest komplexa sajter, så som de för FF8, FF9, och FF10.

De stegen systemet utför är:

Hämta och spara alla sidor på en sajt
Ta bort repetativ kod (header och footer)
Rensa bort dålig/onödig kod
Formatera om all kod enligt W3C-standard med Tidy
Efterbehandla den formaterade texten
Manuellt koppla gammal menystruktur till den nya i WordPress
Skjuta in all text på rätt plats i WordPress

Systemet är väldigt smart på detta sätt, och även om vissa saker fortfarande kräver en utvecklares fulla uppmärksamhet, så underlättar varje litet steg enormt mycket då vi snackar om runt 100 sidor på vissa sajter. Att flytta och uppdatera alla sidorna på FF7-sajten hade till exempel tagit mig många långa och tråkigt repetativa timmar.

Komma igång

Först och främst loggar man in i systemet och lägger upp den eller de sajter man vill flytta. Varje sajt har några egna inställningar man kan ändra på. När man är klar väljer man en av de sajter/projekt man lagt in och kan så börja på Steg 1.

Steg 1

I Steg 1 så fyller man in en startsida på FFU, t.ex. “www.ffuniverse.nu/ff8/” och sedan går en robot dit och börjar leta länkar. Roboten sparar samtidigt undan absolut all kod på sidan, även det som inte är själva textinnehållet på sidan. Roboten finner sen alla länkar i koden som går innanför FF8-sajten (den går aldrig utanför den sökväg man angett) och börjar att “tvätta” dem från dubletter. Roboten går sedan till den första länken i listan och upprepar mönstret. Detta fortsätter den med tills absolut alla sidor den kunde finna har sparats in i databasen – utan en enda dublett.

Nu är det som hade tagit en person upp till någon minut per sida färdigt – i loppet av kanske 1-2 minuter för vår robot. På enbart FF7-sajten sparade vi alltså in minimum två timmar, på endast detta steg!

Det fina är också att man kan dels köra varje steg flera gånger (det gamla sparas då helt enkelt bara över), och dels kan man alltid göra en provkörning först som visar alla resultat man kommer få, men utan att något sparas. Genialt va?

Steg 2

När vi kommer nått Steg 2 så har vi alla sidorna i databasen. Detta hjälper oss väldigt mycket framöver då Migrate 2 WP prövar att automatisera så mycket som möjligt åt dig. Det vi nu ska göra är att definiera det jag kallar “Needles” i systemet. Det är snuttar med kod som garanterat visar vart allt innehåll på en sida startar och börjar – alltså själva guidetexterna. Vi måste ha “Needles” eftersom att i Steg 1 så sparade vi precis all HTML-kod på sidan, och där finns mycket vi inte behöver – eller ska – ha med in i WordPress sen.

Man kan till exempel skriva in “<div class=’main’>” som en “Needle” att starta på. Koden kommer då öppna alla sidor i databasen och leta efter denna kodsnutt och sedan klippa bort den och allt kod innan. När sedan samma görs för en andra, avslutande “Needle”, så har vi faktiskt klippt bort all onödig HTML-kod, alltså allt av copyright-texter, gamla menyer, gammal design, och liknande.

Den avskalade HTML-koden sparas in i ett nytt fält i databasen (så att man kan köra om stegen separat). Detta ska endast vara text som vi vill publicera i sin helhet på den nya guiden i WordPress. Om resultatet inte är perfekt kan man antingen behöva testa några andra “Needles”, eller uppdatera originalkoden på sajten som roboten läste av i Steg 1 och manuellt lägga in unika “Needles” i form av till exempel unika html-kommentarer.

Steg 3

När vi fått rensat bort all upprepande kod med våra Needles i förra steget så är det dags att gå ned på djupet i den text som blev kvar. Många av guiderna på FFU skrev och utvecklade jag för upp till 15 år sedan. Det är inte bara svenskan som är mindre bra på sina ställen, det värsta är all fruktansvärt dålig kod som gömt sig i alla texter. Allt från komplexa och dåliga tables, till gamla html-taggar som inte längre stöds.

Detta steg är i nuläget manuellt i det att man måste lägga in all gammal kod man vill rensa bort inne i koden till detta steg. Den finner massa gammal dålig html och byter ut den med något bättre, eller tar det bort helt. Du väljer själv.

Detta steg ska jag jobba lite på för att förenkla. Det kommer fortfarande vara lite manuellt, men man ska i vartfall slippa ändra direkt i källkoden. Möjligen får man lägga upp en egen lista på ersättningar, som sparas undan så att de kan återanvändas på andra sajter. Extra kul hade varit om koden kunde analysera all text och ge konkreta förslag på ersättningar.

Mest använder jag detta steg till att för exempel ersätta vissa img-taggar för ikoner med span-taggar med en specifik class och sedan visa ikonen via CSS. Alltså är detta steg mest för att skriva om och förbättra semantiken på html-koden. Dessutom funkar den utmärkt till att rensa bort onödig kod man använde för 15 år sen men inte behöver nu längre.

Steg 4

Nu är den mesta skräpkoden borttagen, men kvar har vi säkerligen en hel del gammal kod ändå. Styggelser så som “inline-style”, stilning via attribut (color=red, cellpadding=2, width=10, med flera), gamla taggar (), och mycket annat spännande. Det är ganska mycket jobb att fixa upp i denna röra. Så detta steg kör ett Tidy-plugin till PHP på all kod som uppdaterar den till att hålla de standarder som satts de sista 15 åren.

Som du ser finns flera likheter med Steg 3, men det är viktigt att köra det steget först för att bara få bort det absolut värsta. För sen modifieras det mesta till oigenkänlighet rent kodmässigt (men resultatet är oförändrat).

Även detta steg kan köras valfritt antal gånger. Ser man att man inte fick ett så bra resultat så kan man gå tillbaks till Steg 3 och göra lite justeringar och köra det på nytt och sedan köra Steg 4 igen.

Steg 5

Efter att Tidy gått igenom all kod så lämnas det lite kod man inte önskar sig. Bland annat CSS-kod som man bör se över och eventuellt flytta vidare. I FFU:s fall så ska all stil sättas via CSS:er som redan skapats, så ingen stil ska komma med i de texter vi lägger in i WordPress sen. Så detta steg rensar bort allt sånt, samt tar bort lite onödiga dubletter, som till exempel “ord”.

Du har även här möjlighet att ändra på semantiken. Kanske alla img-taggar ska få en speciell class, eller liknande?

Steg 6

Nu kan vi säga att texten har hämtats ut från den gamla sajten och sedan putsats upp till modern standard. Den är inte perfekt, men för att vara behandlad mer eller mindre automatiskt så är den väldigt bra nu. Det är dags att flytta in allt i WordPress.

På denna sida får du en lista på alla sidor vi har i databasen från gamla sajten. Vid sidan av dem finner vi alla sidor i WordPress (med länk till ett smidigt plugin som kan skapa hundratals sidor i WordPress med ett knapptryck). Det man gör här är att koppla ihop de olika sidorna så att Migrate 2 WP vet vilken text som ska till vilken sida. Detta manuella jobb är lite trögt och jag ska i framtida versioner jobba på att förenkla detta, bland annat genom Ajax och automatiska matchningsförslag.

Om en sida inte kopplas så kommer den gamla sidan inte att flyttas med till WordPress. Detta faktum använde jag för att “radera” några gamla och dåliga sidor på FF7-sajten, som GameShark-koderna och sidan om FF7-leksaker.

Man kan också koppla en gammal sida till flera WordPress-sidor, gör man det så dupliceras texten, något jag använde mycket när jag till exempel ville dela upp en gammal text i 2-3 mindre delar.

Kopplar man flera gamla sidor till samma WordPress-sida så slås de ihop, texterna kommer efter varandra på samma sida. Detta använde jag också mycket på FF7-sajten för att kunna lätt slå ihop 2-3 sidor till en enda sida i WordPress.

Genom att spendera lite tid och tanke i detta steg så kunde jag förbättra strukturen på menyn avsevärt, minska mängden överflödig text, och generellt förenkla för besökarna på jakt efter hjälp.

Steg 7

Detta steg är bara en stor knapp. När man klickar på den så skjuts all text rätt in på respektive sida i WordPress utifrån valen man gjorde i förra steget. Självklart finns allt kvar i databasen till Migrate 2 WP så att man kan ändra sig och göra fler justeringar på sina texter.

Koden gör dig också en extra tjänst genom att uppdatera alla gamla länkar i texterna till de nya riktiga länkarna. Koden lägger också på några class:er på alla länkar och bilder som gör att de sticker ut dels på sajten sen men också inne i WordPress admin. Detta är för att de ska liksom “lysa” lite så att man kan testa dem manuellt. Efter det kan man manuellt ta bort den class:en.

Kör man detta steg en gång till senare så raderas den text som redan finns i WordPress!

Färdig?

Nu är det bara att börja testa den nya WordPress-sajten. Gå igenom alla länkar och uppdatera bilder, lägga upp menyer, rätta gamla stavfel, lägg till texter, etc. Denna del av jobbet är den mest tidskrävande och kanske cirka 70% av tiden spenderad på nya FF7-sajten hamnade i denna fas. Det är ett manuellt jobb. Lyckligtvis kan man nu bjuda in flera extra skribenter som hjälper en gå igenom alla texter. Utvecklarens jobb kan ses som avslutat.

Migrate 2 WP hjälper dig med ett enormt tråkigt och tidskrävande jobb, och den fungerar på alla sajter. Förhoppningen är att fler ska komma och bidra till koden, och att produkten ska vara ett smidigt verktyg för att lättare gå från statiska sidor till WordPress. Och eftersom egentligen bara Steg 6 och 7 är specifikt till WordPress så kan man potentiellt utveckla produkten vidare till att även stöda andra CMS.