Přejít k navigační liště

Zdroják » JavaScript » Tvoříme příkazy pro Ubiquity: metadata, přidávání a aktualizace

Tvoříme příkazy pro Ubiquity: metadata, přidávání a aktualizace

Ubiquity je revoluční rozšíření Firefoxu. V dnešním pokračování návodu o tvorbě příkazů zabředneme do složitějších skriptů, ukážeme si použití metadat, předvedeme si, jak nabídnete váš příkaz ostatním uživatelům a jak pracovat s mapou. Uvidíte, že je to hračka. Postačí vám umět jen trochu JavaScript.

Tento článek je překladem anglického originálu na Mozilla Wiki. Autory původního textu jsou: Aza Raskin, Blair McBride, Abimanyu Raja, Jono DiCarlo a Atul Varma.

Minulý týden jsme v první části Jak vytvářet vlastní příkazy pro Ubiquity ve Firefoxu probrali naprosté základy. Dnes na ně navážeme.

Dokumentace a metadata

Než váš vytvořený příkaz pošlete do světa, měli byste k němu přidat alespoň následující základní atributy:

CmdUtils.CreateCommand({
  name: "date",
  homepage: "http://azarask.in/",
  author: { name: "Aza Raskin", email: "aza@mozilla.com"},
  contributors: ["Atul Varma"],
  license: "MPL",

  /* zbytek kódu */
}) 

A zcela určitě bystě měli přidat i dokumentaci:

CmdUtils.CreateCommand({
  name: "date",
  homepage: "http://azarask.in/",
  author: { name: "Aza Raskin", email: "aza@mozilla.com"},
  contributors: ["Atul Varma"],
  license: "MPL",
  description: "Inserts today's date.",
  help: "If you're in an editable text area, inserts today's date, formatted for the current locale.",

  /* zbytek kódu */
}) 

Hodnoty atributů description a help se automaticky zobrazují na stránce s výpisem všech příkazů. (Na tuto stránku se uživatel dostane zadáním příkazu „command-list“.) V obou případech můžete použít i značky HTML.

Atribut description je jednořádkový popis toho, co příkaz dělá. Na druhou stranu help je delší popis, který může obsahovat příklady apod. Pokud je váš příkaz nakolik jednoduchý, že se jeho popis vejde na jednu řádku, pak použijte pouze description a help vynechte.

Co je Ubiquity?

Ubiquity je experimentální rozšíření prohlížeče Firefox přidávající rozhraní, jaké webové prohlížeče dosud neměli, totiž příkazovou řádku. Jedná se o nový koncept vznikající v rámci projektů Mozilla Labs. Zatímco koncept příkazů je poměrně jasný, uživatelské rozhraní je velkým experimentem a nikdo, ano Mozilla Labs, v tuto chvíli neví, kam až tento experiment zajde. Je možné, že se jedná o slepou uličku, ale možná se jedná o opravdovou revoluci.

O Ubiquity se více dočtete v článku Ubiquity – největší revoluce prohlížečů od dob Greasemonkey.

TIP: Ubiquity si můžete rozšířit o další příkazy, včetně příkazů pro české weby jako je IDOS.

Nabídněte váš příkaz ostatním

Nyní, když máme hotový náš úžasný příkaz „date“ (který jsme vytvořili v minulém dílu), jej nabídneme i ostatním. Stačí, abychom na webu vystavili javascriptový soubor a vytvořili HTML stránku, která na něj bude odkazovat pomocí značky link:

<link rel="commands" href="http://ceska-k-js-souboru" name="Sem vložte titulek" /> 

Poznámka: váš webserver musí nabízet soubory .js jako ‚application/x-javascript‘. MIME typ ‚text/javascript‘ bude tiše ignorován.

Pokud uživatel s nainstalovaným Ubiquity tuto stránku navštíví, zobrazí se mu zpráva s nabídkou přidání vašeho příkazu.

Přidání příkazu pro Ubiquity

Pokud příkaz pochází z nedůvěryhodného zdroje, uživateli se zobrazí varovná zpráva. (Neberte nijak osobně, že v Ubiquity jsou zatím všechny zdroje nedůvěryhodné.) Příkazy Ubiquity totiž mohou spustit jakýkoliv javascriptový kód s právy webového prohlížeče, proto přidáním příkazu dáte tomuto skriptu práva dělat cokoliv, co může udělat váš prohlížeč. Chceme, aby si toto nebezpečí lidé včas uvědomili, tak je trochu postrašíme.

Instalace příkazu pro Ubiquity

V budoucnu budeme mít něco, co nazveme „důvěryhodná síť“. Pokud vyzkoušíte příkaz z webu a bude přesvědčeni, že je bezpečný (anebo nebezpečný), zanecháte potvrzení (nebo varování). Když vaši přátelé s Ubiquity navštíví ten samý web, objeví se jim vaše potvrzení (nebo varování) na levé straně. Tímto způsobem se budou moct uživatelé spolehnout na posouzení lidí, které již znají, a kterým věří. Ti jim pomůžou rozhodnout se, zda je příkaz bezpečný.

Přidání příkazu jsme pojmenovali „subscribing“. To protože pokud je javascriptový soubor aktualizován, tj. pokud vlastník webu přidá nové příkazy, odebere nebo aktualizuje původní, tak všichni uživatelé přihlášení (subscribed) k této URL dostanou automaticky aktualizace. Jedná se o pohodlný způsob pro uživatele i vývojáře, ale obsahuje další bezpečnostní problém: i přestože jsme se rozhodli, že příkaz je v tuto chvíli bezpečný, neznamená to, že zůstane bezpečný napořád. Z tohoto důvodu byste se měli ujistit, že majitel důvěryhodné sítě sleduje, kdy se příkazy změní a upozorní uživatele, pokud by se objevilo nebezpečí.

Ukaž mě na mapě, snapshoty a vkládání HTML

Příkaz „map“, který Ubiquity obsahuje, je skutečně mocný. Je také slušně komplikovaný, i když to je relativní, jedná se jen několik set řádek kódu. Představte si, že si na Craigslistu (nebo na jiném webu) vybere nějaké domy nebo třeba seznam restaurací a jen zadáte příkaz „map these“ a zobrazí se vám mapa, jakou potřebujete. Koncept „these“ dovoluje uživatelům vytvářet mashupy. Ale to jsem odbočil. Vytvořme jednoduchý příkaz, který vloží mapu vaší aktuální polohy.

V tomto příkazu použijeme Google API pro statické mapy a Ubiquity funkci CmdUtils.getGeoLocation(), která vloží mapu s vaší aktuální polohou. Ubiquity v tuto chvíli používá API MaxMind, které odhadne vaši polohu podle IP adresy. V budoucnu to pravděpodobně ještě změníme.

CmdUtils.CreateCommand({
  name: "map-me",

  _getMapUrl: function() {
    var loc = CmdUtils.getGeoLocation();
    var mapUrl = "http://maps.google.com/staticmap?";

    var params = {
      center: loc.lat + "," + loc.long,
      size: "500x400",
      zoom: 14,
      key: "ABQIAAAAGZ11mh1LzgQ8-8LRW3wEShQeSuJunOpTb3RsLsk00-MAdzxmXhQoiCd940lo0KlfQM5PeNYEPLW-3w"
    };

    return mapUrl + jQuery.param( params );
  },

  preview: function( pblock ) {
    var msg = "Inserts a map of your current location: <br/>";
    msg += "<img src='%s'/>".replace( /%s/, this._getMapUrl() );
    pblock.innerHTML = msg;
  },

  execute: function( ) {
    CmdUtils.getImageSnapshot( this._getMapUrl(), function(imgData) {
      CmdUtils.setSelection( "<img src='" + imgData +"'/>");
    })
  }
}) 

V kódu najdete tři novinky: CmdUtils.setSelection k nastavení HTML (opravdu, i tak to můžeme udělat), CmdUtils.getGeoLocation() a CmdUtils.getI­mageSnapshot(), který uloží obsah obrázku.

Získání polohy na základě IP adresy není přesné, ale dává to smysl pro nastení nějaké výchozí polohy mapy. CmdUtils.getGeoLocation() vrací objekt, který má tyto vlastnosti: city, state, country, lat a long.

K čemu potřebujeme CmdUtils.getI­mageSnapshot()? Protože API Google Maps požaduje autorizační klíč, který je svázán s URL. Pokud bychom jen jednoduše vložili HTML značku pro obrázek do libovolné stránky, obrázek by se nenahrál, protože jeho klíč by neopovídal aktuální URL stránky. Proto použijeme funkci snapshotImage(), která zkonvertuje obrázek do data url.

Existuje další funkce CmdUtils.getWindowSnapshot(), která sejme obrázek z obsahu libovolného okna nebo panelu. Jako první parametr jí předáte objekt window a jako druhý callback funkci.

Pokračování příště

V další části tutoriálu již naučíme vytvářet příkazy používající argumenty.

Článek, který jste právě dočetli, je překladem anglického originálu a je zde publikován s laskavým svolením Mozilla Corporation.

Kolik používáte příkazů v Ubiquity?

Komentáře

Subscribe
Upozornit na
guest
2 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
bendo

no tak skusil som si napisat jednoduchsi prikaz na hladanie filmov v csfd. ak niekto chce http://gist.github.com/59654

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.