MVnet logo

Blogi » Tee omia widgettejä

  • Julkaistu 12. Joulukuuta 2006
  • Kirjoittanut: Mikko Vestola
  • 31 kommenttia

Yahoo! widget logo
Oletko ihmetellyt miten näitä pieniä, hauskoja ja hyödyllisiä vimpaimia tehdään? Vimpainten eli widgettien teko on melko helppoa. Tässä kerrotaan nyt lyhyesti, miten onnistut tekemään widgettejä, jotka toimivat Windowsin Yahoo! Widget Enginessä (ent. Konfabulator).

Mac OS X:n Dashboardin, Windows Vistan ja Operan widgettien rakenne on hieman erilainen kuin Yahoon widgeteissä ja niiden tekeminen on taas aivan toinen juttu (esim. Yahoo käyttää XML-kieltä ja Dashboardissa käytetään HTML/CSS-kieliä). Dashboardin widgetit eivät siis toimi Windowsissa eikä myöskään toisin päin. Jos vimpain on melko yksinkertainen, ei sen muuntaminen muodosta toiseen kuitenkaan ole kovin vaikeaa. HTML- ja XML-kielet kun ovat melko lähellä toisiaan.

Widgetin tekijän ei tarvitse osata ohjelmointia kovinkaan paljon. Mitään Java- tai C-kielien opettelua ei tarvita. Jos olet joskus tehnyt nettisivuja, osaat luultavasti tehdä myös widgettejä.

Widgetti on käytännössä pienehkö www-sivu, joka näkyy työpöydälläsi. Widgetin käyttämät tiedostot ovat kansiossa, joka on pakattu. Jos muutat widgetin .widget-päätteen .zip-päätteeksi, voi purkaa widgetin johonkin kansioon ja tarkastella, mitä tiedostoja se sisältää sekä tutkia widgetin lähdekoodia.

Widgetti sisältää yleensä seuraavaa:

  • Yksi .kon-päätteinen tiedosto, jossa on kirjoitettuna XML-kielellä widgetin rakenne (mm. linkit widgetin käyttämiin kuviin ja asetukset). XML-kielestä on kerrottu lyhyesti MVnetin Kotisivun teko -osiossa.
  • Yksi tai useampi .js-päätteinen tiedosto, jossa on kirjoitettuna widgetin varsinainen toiminnallisuus JavaScript-kielellä.
  • Kuvia (JPG, GIF- tai PNG-kuvia, lue kuvaformaateista)

Widget-ohjelmointi kannattaa aloittaa Yahoon Workshopista. Sieltä löytyy Widget Creation tutorial (PDF-tiedosto), joka kannattaa lukaista kokonaan läpi. Tutoriaalissa on kerrottu hyvin widgettien perusrakenne ja mitä kaikkea widgettien tekoon tarvitsee. Lisäksi kannattaa ladata Yahoo Widget Engine Reference guide (PDF), jossa on lueteltu lähes kaikki tarvittava tieto widgeteistä: käytössä olevat XML-tägit ja komennot. Näiden lisäksi kannattaa ladata myös Widget Converter 2.0, jolla saa paketoitua widgetin kansiosta .widget-päätteiseksi tiedostoksi. Tämä tehdään vasta aivan lopuksi, kun widgetti on valmis.

Widget-ohjelmointia varten tarvitset jonkun tekstieditorin. Windowsin Muistio kannattaa unohtaa, se ei sovellu hyvin ohjelmointiin. Sen sijaan kannattaa ladata esim. Notepad++, joka osaa värjätä ohjelmakoodia. Editorin asetuksista kannattaa tehdä seuraavaa: Valitse Asetukset...Säädä tyylitystä. Valitse Language-listasta XML ja kirjoita ikkunan alalaidan Käyttäjän-kenttään kon ja tallenna asetukset. Nyt ohjelma tunnistaa .kon -päätteisen tiedoston kielen automaattisesti XML:ksi. Tiedostot (kon- ja js-tiedostot) kannattaa aina kirjoittaa UTF-8-merkistöllä (Tiedostomuoto...Koodaus UTF-8). Muutoin voi tulla ongelmia ääkkösten kanssa widgeteissä.

Apua ohjelmointiin saa myös englanninkieliseltä Konfabulatorin keskustelufoorumilta.

Omia widgettejäni

Alla on listattu pari omatekemääni widgettiä, jotka voit ladata vaikka omalle koneellesi. Kaksi ensimmäistä widgettiä on rakennettu Juha Ollilan Mac OS X:n Dashboardille tehtyjen FMI-widgetin ja Viivi ja Wagner-widgetin pohjalta. Alkuperäistä koodia ei ole kauheasti jäljellä, mutta widgettien käyttämät kuvat ovat samat kuin alkuperäisissäkin versiossa, joista kiitokset Ville Aholle.

Itse käytin näitä Juha Ollilan widgettejä iBookissani, jossa on siis Mac OS X-käyttöjärjestelmä. Kun ostin läppärin, jossa käytän Windowsia, halusin saada kyseiset widgetit myös Windowsiin. Koska widgetit eivät toimineet Windowsissa, eikä kukaan muu näitä ollut Windows-versioksi kääntänyt, täytyi homma tehdä itse. Samalla opin perusteet, miten näitä vimpaimia tehdään. Hyvin opettavainen prosessi.

Suomen sääennuste -widget

Huom! Tämän widgetin kehitys on siirretty sivulle MVnet :: Tietokoneet :: Widgetit - Sääennuste, josta widgetin voi ladata. Kyseiseltä sivulta löytyy myös paljon muuta tietoa widgetistä ja myös kuvankaappauksia uusimmasta versiosta. Alla esitetty tieto on siis osittain vanhaa tietoa ja kuvankaappaukset ovat vanhasta versiosta.

Suomen sääennuste -widgetti

Suomen sääennuste-widgetti näyttää ruudulla paikallisen sääennusteen. Käyttäjä voi valita n. 40 suomalaisen kaupungin listasta, minkä kaupungin paikallissääennusteen hän haluaa nähdä. Sääennuste on 5 vuorokauden mittainen ja ennusteesta vastaa Ilmatieteen laitos, joten sääennuste on melko luotettava. Ennuste päivitetään automaattisesti tuoreimpaan ennusteeseen.

Lataa Suomen sääennuste -widgetti.
Suomen sääennuste -widget Yahoon widget-galleriassa.

Viivi ja Wagner -widget

Huom! Tämän widgetin kehitys on siirretty sivulle MVnet :: Tietokoneet :: Widgetit - Viivi ja Wagner, josta widgetin voi ladata. Kyseiseltä sivulta löytyy myös paljon muuta tietoa widgetistä ja myös kuvankaappauksia uusimmasta versiosta. Alla esitetty tieto on siis osittain vanhaa tietoa ja kuvankaappaukset ovat vanhasta versiosta.

Viivi ja Wagner -widgetti

Viivi ja Wagner-widgetti näyttää työpöydällä Helsingin Sanomien julkaiseman päivän Viivi ja Wagner-sarjakuvan (sarjakuvaa päivitetään vain arkisin), jota piirtää Jussi Tuomola (Juba). Vimpain päivittää sarjakuvan automaattisesti hakemalla tuoreimman sarjakuvan Helsingin Sanomien verkkosivuilta.

Lataa Viivi ja Wagner -widgetti.
Viivi ja Wagner -widget Yahoon widget-galleriassa.

AdSensor-widget

Huom! Tämän widgetin kehitys on siirretty sivulle MVnet :: Tietokoneet :: Widgetit - AdSensor, josta widgetin voi ladata. Kyseiseltä sivulta löytyy myös paljon muuta tietoa AdSensorista (englanniksi) ja myös kuvankaappauksia uusimmasta versiosta. Alla esitetty tieto on siis osittain vanhaa tietoa ja kuvankaappaukset ovat vanhasta versiosta.

AdSensor-widget suomeksi AdSensor widget in English

AdSensor-widgetti näyttää tietoja käyttäjän Google AdSense -palvelun mainostuloista. Widgetin käyttö edellyttää luonnollisesti, että käyttäjä on Google AdSense-palvelun käyttäjä. Google AdSensestä voit lukea lisää MVnetin kotisivuohjeista ja halutessasi rekisteröityä AdSensen käyttäjäksi. Widget näyttää seuraavat tiedot käyttäjän mainostuloista:

  • Mainosten klikkaukset ja tulot mainoksista tänään
  • Mainosten klikkaukset ja tulot mainoksista eilen
  • Mainosten klikkaukset ja tulot mainoksista viimeisen 7 päivän osalta
  • Mainosten klikkaukset ja tulot mainoksista tässä kuussa
  • Mainosten klikkaukset ja tulot mainoksista viime kuussa
  • Mainosten klikkaukset ja tulot mainoksista viime maksusta

Widget hakee tiedot aivan kuten itsekin haet ne nettiselaimella osoitteesta: https://www.google.com/adsense/

Eli widget kirjautuu ensin AdSenseen ja sitten noutaa tiedot parsimalla AdSensen www-sivuilta tietoja. Käyttäjätunnuksen ja salasanan lähetys on turvallista, koska widgetkin käyttää tässä turvallisia https-yhteyksiä.

Käyttäjä voi tallentaa salasanansa widgetin muistiin, jolloin sitä ei tarvitse antaa enää uudestaan. Widgetin näyttämät AdSensen tiedot voi kätevästi määrittää päivittymään automaattisesti tai manuaalisesti.

Widget on saatavilla eri kielillä. Saatavilla ovat tällä hetkellä seuraavat kielet: suomi ja englanti. Widgetin saa näkyviin esim. suomenkielisenä, valitsemalla Yahoon Widget Enginen asetuksista käytettäväksi kieleksi suomen. Jos widgetissä ei ole käännöksiä haluamallesi kielellä, näytetään widget englanninkielisenä.

Lataa AdSensor-widgetti.
AdSensor -widget Yahoon widget-galleriassa.