Jarmark.org

Korzystanie z Google Docs stało się już dla mnie codziennością. Większość dokumentów, które przygotowuję piszę w edytorze z docsów. Narzędzie to jest całkiem sprawne, ma swoje dziwactwa, ale to niewielka cena za edytor z możliwością pracy grupowej nad dokumentem i wersjonowaniem wyników pracy. Ale… apetyt rośnie w miarę jedzenia - niemal od początku brakuje mi możliwości stylizowania tworzonego dokumentu za pomocą własnych arkuszy CSS.

Czy taki feature ma sens praktyczny? Myślę, że tak - dodając własny CSS do tworzonego dokumentu przekształcamy Google Docs w prawdziwie internetowy edytor WYSIWYG nie poświęcając niczego z jego pierwotnej funkcjonalności. Jest to szczególnie przydatne przy korzystaniu z GD jako edytora dla CMS czy bloga. Tak, tak wiem, że istnieje TinyMCE czy FCKeditor - GD daje jednak znacznie większe możliwości out-of-box.

Sposobu na realizację swojego pomysłu początkowo szukałem w API udostępnionych przez Google, niestety póki co rozwijane jest tylko API dla Google Spreadsheet - ta droga okazała się więc ślepym zaułkiem. Drugim pomysłem na rozwiązanie problemu było skorzystanie z Greasemonkey. Tym razem wkroczyłem na drogę która okazała się być szeroką, równą i prostą jak, nie przymierzając, nasze autostrady na Euro2112^*…

Greasemonkey - dla tych co pierwszy raz

Greasemonkey to rozszerzenie do przeglądarek firefoxopodobnych, które umożliwia uruchamianie po stronie klienta skryptów, które w dowolny sposób modyfikują strony renderowane w przeglądarce. Skrypty (zwane w nomenklaturze GM user scripts) to zwykły kod w Javascriptcie uruchamiany po załadowaniu strony do przeglądarki. Mogą one dowolnie zmieniać drzewo DOM i zachowanie się strony - w tym także korzystać z JS już osadzonego na oglądanej stronie. GM dostarcza autorom user scripts kilka specjalnych funkcji które pozwalają m.in na zapis danych w trzewiach przeglądarki (GM_s/getValue), dostęp do konsoli JS (GM_log) czy swobodną komunikację ze światem (GM_xmlhttpRequest). Na pierwszy rzut oka sposób działania GM wydaje się trywialny - zwykłe wstrzykiwanie znacznika <script> do renederowanego HTMLa. Dokładnie w ten sposób działały wczesne wersje GM, okazało się jednak, że rodzi to spore luki w bezpieczeństwie. Począwszy od wersji 0.5 (dziś jest dostępna wersja 0.7RC) skrypty GM są uruchamiane w specjalnym sandboxie dzięki czemu mają pełen dostęp do zawartości strony nie stanowiąc zagrożenia. Rodzi to także pewne utrudnienia dla twórców skryptów - po szczegóły odsyłam do tego posta.

Użytkownicy GM naprodukowali tysiące skryptów na niemal każdą bolączkę związaną z przeglądaniem WWW, większość z nich jest dostępna w serwisie userscripts.org. Warto tam zajrzeć szukając rozwiązań czy inspiracji. Mój problem nie miał tam rozwiązania, dlatego mogę z dumą zaprezentować światu:

Google Docs Styler

Idea działania mojego skryptu jest następująca rozszerzyć toolbar Google Docs o możliwość dodawania adresów różnych skryptów CSS. Chciałbym także, aby istniała możliwość dodania wielu URLi oraz aby dane były pamiętane przez przeglądarkę po jej zamknięciu. Implementacja poszła zupełnie gładko, i po kilku godzinach otrzymałem skrypt, który daje taki oto rezultat:

albo taki:

czy taki:

Mój eksperyment z GM i Google Docs pokazuje, że tworzenie mushupów nie musi polegać tylko na wykręcaniu soków z RSS i prezentowaniu ich na Google Maps. Dostępne narzędzia pozwalają bardzo łatwo przygotować mikroaplikację, która łącząc różne źródła danych tworzy nową jakość. Pozytywne doświadczenia z GM skłoniły do dalszej eksploracji tego obszaru, ich wyniki mam zamiar niebawem także opisać na jarmarku.

PS: Jeżeli komuś przyda się moje cudo jest ono dostępne oczywiście także na http://userscripts.org/scripts/show/10443

*) nie, to nie jest pomyłka w dacie :>