[UPGRADE][Blogger] Losowy post z danej kategorii pobierany z feeda

Jak rozwiązałem wyświetlanie losowego "tipa" na górze strony? Bardzo prosto, choć trzeba było co nieco pokombinować. Po pierwsze z pomocą przychodzi generowany przez Bloggera kanał RSS. Jak wiemy, możemy pobierać wpisy po etykietach za pomocą specjalnie spreparowanego linku. W tym przypadku pobieramy zestawienie postów z etykietą QUICKTIPS za pomocą linka: /feeds/posts/summary/-/QUICKTIPS?alt=json, gdzie jako parametr alt podajemy oczywiście json, gdyż chcemy otrzymać dane w formacie JSON, a nie w XML. I tutaj pojawia się mały myk - ścieżkę do feeda musimy podać relatywną, lub pobrać poprzez javascript wartość location.hostname i dołączyć do ścieżki.

Dlaczego? Już wyjaśniam.
Podając tutaj np.:
[code]http://phpmajster.blogspot.com/feeds/posts/summary/-/QUICKTIPS?alt=json[/code]
nałożymy sobie ograniczenie Same Origin Policy.

Na czym to w skrócie polega skoro link prowadzi w to samo miejsce? Mianowicie za pomocą $.getJSON() pobrać możemy dane jedynie z TEJ SAMEJ domeny, na której uruchomiony został skrypt.

Ktoś zapyta - no dobrze, ale przecież wszystko się zgadza - skrypt jest osadzony na stronie, która należy do tej samej domeny, co kanał z feedami. I generalnie jest to racja, ale - ciekawa sprawa się stanie, gdy wejdziemy na stronę z przedstrostkiem www, czyli poprzez:
[code]http://www.phpmajster.blogspot.com[/code]
Otóż dla javascriptu będzie to już INNA domena. Skrypt natomiast uroczo wyrzuci błąd o niezgodności domen i zakończy swoje działanie komunikatem w konsoli. Stąd też ścieżka relatywna - nie ma tutaj znaczenia, czy na strone wejdziemy z www, czy bez www - skrypt dopisze sobie odpowiednią domenę na początku, więc wszystko zadziała jak powinno. Czemu tak się dzieje? Otóż - www to tak naprawdę subdomena i relikt dawnych czasów. Ładnie wygląda na wizytówce, ale w praktyce zapis z www jest niepoprawny i stanowi pozostałość po zamierzchłych czasach, gdy po internecie surfowało się jeszcze przy świeczkach.

Uwaga: /feeds/posts/summary/ pobiera skróconą wersję posta, jeśli chcemy pobrać całość posta, to używamy adresu /feeds/posts/default.

No dobrze, ten problem mamy rozwiązany, przyjrzyjmy się kodowi:
[code]<script>
function getRandomArbitary (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

$(document).ready(function() {

 $.getJSON( "/feeds/posts/summary/-/QUICKTIPS?alt=json")
 .done(function( json ) {
  var entries = [];
  var randomEntry = 0;

  for(entryNode in json.feed.entry)
  {
   entries[entryNode] = '';
  }
  randomEntry = getRandomArbitary(0, entries.length-1);  
  $('div.tip').html('<p><a title="Szybka losowa porada: klik, aby przeczytać" href="' + json.feed.entry[randomEntry].link[4].href +'">' + json.feed.entry[randomEntry].title.$t + '...</a></p>');
 })

 .fail(function( jqxhr, textStatus, error ) {
  var err = textStatus + ", " + error;
  console.log( "Request Failed: " + err );
 });
});
</script>[/code]

Przeanalizujmy go po koleji:
[code]
//Funkcja zwracająca losową liczbę INT z przedziału <min, max>:
function getRandomArbitary (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

$(document).ready(function() {

 $.getJSON( "/feeds/posts/summary/-/QUICKTIPS?alt=json")
 .done(function( json ) {
  var entries = [];
  var randomEntry = 0;

 /*
 Na początek deklaracja tablicy entries, do której pobierzemy posty z etykietą QUICKTIPS oraz zmiennej randomEntry, która będzie nam przechowywała wygenerowany losowo numer posta do pokazania. Kolejnym krokiem jest pobranie JSON-a - jako parametr podajemy tutaj funkcję zwrotną, która pobierze dane do obiektu 'json', nad którym za chwilę się popastwimy.
 Gdy pobieranie JSON-a zakończy się sukcesem, przejeżdzamy pętlą po zwróconym przez niego obiekcie i każdy z wpisów ładujemy jako oddzielny element do tablicy entries. Jako index tablicy posłuży nam entryNode, gdyż elementy feed.entry w obiekcie JSON-a są listowane numerycznie, czyli json.entry[0], json.entry[1], .....

 Ogólna struktura wpisu w formacie JSON-a pokazana jest na dole strony.

 Gdy mamy już wypełnioną tablicę, wygenerujmy liczbę z przedziału od 0 do ILOŚCI POBRANYCH WPISÓW - 1. Dlaczego w ten sposób? Ponieważ numeracja wpisów rozpoczyna się od 0, a nie od 1.
 Liczbę pobranych wpisów pobieramy z długości tablicy, czyli poprzez entries.length.

 */

  for(entryNode in json.feed.entry)
  {
   entries[entryNode] = '';
  }
  randomEntry = getRandomArbitary(0, entries.length-1);

  /*
  Mamy już wygenerowaną losową liczbę z zadanego zakresu, wyświetlimy więc teraz wpis z tablicy, na zasadzie entries[LOSOWY_KLUCZ].
  Jak widać w kodzie - odwołamy się teraz poprzez jQuery do DIV-a, w którym umieścimy tytuł wpisu i link do całości. W tym przypadku jest to DIV o klasie 'tip', który zaszyłem w szablonie bloga i któremu zdefiniowałem odpowiednie CSS-y. Dobierzemy się teraz do informacji o wpisie.
  To co nas interesuje z tego obiektu to tytuł posta i link do niego.
  Zainteresujemy się więc polem title.$t oraz polem link[4].href.
  Pobieramy stosowne dane, preparujemy link i dynamicznie podmieniamy DIV-a za pomocą metody html() zawartej w jQuery:
  */

  $('div.tip').html('<p><a title="Szybka losowa porada: klik, aby przeczytać" href="' + json.feed.entry[randomEntry].link[4].href +'">' + json.feed.entry[randomEntry].title.$t + '...</a></p>');
 })

 /*
 W przypadku niepowodzenia dajemy na konsolę komunikat
 */
 .fail(function( jqxhr, textStatus, error ) {
  var err = textStatus + ", " + error;
  console.log( "Request Failed: " + err );
 });

 /*
 Podsumowując - nie jest to moze zbytnio wydajna metoda w przypadku, gdy mamy dość dużą ilość wpisów do pobrania, niestety chyba jedyna - a przynajmniej ja nie byłem w stanie wymyśleć ncizego innego.
 Oczywiście można by obejść to w następujący sposób - poprzez stworzenie ukrytego posta zawierającego ukryte odnośniki do wpisów, a następnie parsowanie tych danych przez JS, pomysł taki jednak mijałby się z celem, gdyż dane trzeba byłoby uzupełniać ręcznie, a nie o to tutaj chodzi.
 */
});[/code]

Pobierany JSON od strony struktury danych wygląda np. tak:
[code]{
    "version": "1.0",
    "encoding": "UTF-8",
    "feed": {
        "xmlns": "http://www.w3.org/2005/Atom",
        "xmlns$openSearch": "http://a9.com/-/spec/opensearchrss/1.0/",
        "xmlns$blogger": "http://schemas.google.com/blogger/2008",
        "xmlns$georss": "http://www.georss.org/georss",
        "xmlns$gd": "http://schemas.google.com/g/2005",
        "xmlns$thr": "http://purl.org/syndication/thread/1.0",
        "id": {
            "$t": "tag:blogger.com,1999:blog-4106195950283171870"
        },
        "updated": {
            "$t": "2015-05-19T21:00:08.284+02:00"
        },
        "category": [
            {
                "term": "Blogger"
            },
            {
                "term": "UPGRADE"
            },
            {
                "term": "PDO"
            },
            {
                "term": "PHP"
            },
            {
                "term": "PHP5"
            },
            {
                "term": "QUICKTIPS"
            },
            {
                "term": "google drive"
            },
            {
                "term": "hosting"
            },
            {
                "term": "hostowanie"
            }
        ],
        "title": {
            "type": "text",
            "$t": "PHP Majster"
        },
        "subtitle": {
            "type": "html",
            "$t": "PHP5, SQL, HTML5, CSS3, XML, JSON, SOAP, Apache2 - artykuły, tutoriale, porady, praktyczne zastosowania."
        },
        "link": [
            {
                "rel": "http://schemas.google.com/g/2005#feed",
                "type": "application/atom+xml",
                "href": "http://phpmajster.blogspot.com/feeds/posts/summary"
            },
            {
                "rel": "self",
                "type": "application/atom+xml",
                "href": "http://www.blogger.com/feeds/4106195950283171870/posts/summary/-/QUICKTIPS?alt=json"
            },
            {
                "rel": "alternate",
                "type": "text/html",
                "href": "http://phpmajster.blogspot.com/search/label/QUICKTIPS"
            },
            {
                "rel": "hub",
                "href": "http://pubsubhubbub.appspot.com/"
            }
        ],
        "author": [
            {
                "name": {
                    "$t": "Marcin Szczygliński"
                },
                "email": {
                    "$t": "noreply@blogger.com"
                },
                "gd$image": {
                    "rel": "http://schemas.google.com/g/2005#thumbnail",
                    "width": "32",
                    "height": "32",
                    "src": "//lh3.googleusercontent.com/-VKXRY8wQsJY/AAAAAAAAAAI/AAAAAAAAHf8/mvNNdldc80k/s512-c/photo.jpg"
                }
            }
        ],
        "generator": {
            "version": "7.00",
            "uri": "http://www.blogger.com",
            "$t": "Blogger"
        },
        "openSearch$totalResults": {
            "$t": "2"
        },
        "openSearch$startIndex": {
            "$t": "1"
        },
        "openSearch$itemsPerPage": {
            "$t": "25"
        },
        "entry": [
            {
                "id": {
                    "$t": "tag:blogger.com,1999:blog-4106195950283171870.post-6203016219442009518"
                },
                "published": {
                    "$t": "2015-05-17T00:51:00.000+02:00"
                },
                "updated": {
                    "$t": "2015-05-19T18:56:41.654+02:00"
                },
                "category": [
                    {
                        "scheme": "http://www.blogger.com/atom/ns#",
                        "term": "google drive"
                    },
                    {
                        "scheme": "http://www.blogger.com/atom/ns#",
                        "term": "hosting"
                    },
                    {
                        "scheme": "http://www.blogger.com/atom/ns#",
                        "term": "hostowanie"
                    },
                    {
                        "scheme": "http://www.blogger.com/atom/ns#",
                        "term": "QUICKTIPS"
                    }
                ],
                "title": {
                    "type": "text",
                    "$t": "[TiP] Google Drive jako hosting dla plików .js i .css"
                },
                "summary": {
                    "type": "text",
                    "$t": "\n\n\n\nMoże nie każdy wie, ale Dysk Google można wykorzystać do hostowania załączanych do strony plików takich jak skrypty JS, czy arkusze CSS. To bardzo przydatna sprawa, a żeby z niej skorzystać trzeba dokonać małego tricku. Na początek musimy plik, który chcemy hostować oflagować jako \"Publiczne w internecie – każda osoba w internecie może znajdować i wyświetlać.\" Możemy to zrobić klikając na nim"
                },
                "link": [
                    {
                        "rel": "replies",
                        "type": "application/atom+xml",
                        "href": "http://phpmajster.blogspot.com/feeds/6203016219442009518/comments/default",
                        "title": "Komentarze do posta"
                    },
                    {
                        "rel": "replies",
                        "type": "text/html",
                        "href": "http://phpmajster.blogspot.com/2015/05/tip-google-drive-jako-hosting-dla-js-i-css.html#comment-form",
                        "title": "Komentarze (0)"
                    },
                    {
                        "rel": "edit",
                        "type": "application/atom+xml",
                        "href": "http://www.blogger.com/feeds/4106195950283171870/posts/default/6203016219442009518"
                    },
                    {
                        "rel": "self",
                        "type": "application/atom+xml",
                        "href": "http://www.blogger.com/feeds/4106195950283171870/posts/default/6203016219442009518"
                    },
                    {
                        "rel": "alternate",
                        "type": "text/html",
                        "href": "http://phpmajster.blogspot.com/2015/05/tip-google-drive-jako-hosting-dla-js-i-css.html",
                        "title": "[TiP] Google Drive jako hosting dla plików .js i .css"
                    }
                ],
                "author": [
                    {
                        "name": {
                            "$t": "Marcin Szczygliński"
                        },
                        "uri": {
                            "$t": "https://plus.google.com/114751653321349063487"
                        },
                        "email": {
                            "$t": "noreply@blogger.com"
                        },
                        "gd$image": {
                            "rel": "http://schemas.google.com/g/2005#thumbnail",
                            "width": "32",
                            "height": "32",
                            "src": "//lh3.googleusercontent.com/-VKXRY8wQsJY/AAAAAAAAAAI/AAAAAAAAHf8/mvNNdldc80k/s512-c/photo.jpg"
                        }
                    }
                ],
                "media$thumbnail": {
                    "xmlns$media": "http://search.yahoo.com/mrss/",
                    "url": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTE3gMdpqH_RfcFcxgrd8ijQ1DQTnwaW4XJOTJPPKHd0n4sJvO61W6tEzCjWvsy2K5YFDOlvy51WESRSLrfqBPUWj5jXhw-maOwmka_UJj_JmHk9SmSqXW6Vm6VG1ySy_6R2V3MOmN4Cs/s72-c/tip3.png",
                    "height": "72",
                    "width": "72"
                },
                "thr$total": {
                    "$t": "0"
                }
            },
            {
                "id": {
                    "$t": "tag:blogger.com,1999:blog-4106195950283171870.post-4819749668594474047"
                },
                "published": {
                    "$t": "2015-05-17T00:34:00.000+02:00"
                },
                "updated": {
                    "$t": "2015-05-19T18:55:21.676+02:00"
                },
                "category": [
                    {
                        "scheme": "http://www.blogger.com/atom/ns#",
                        "term": "QUICKTIPS"
                    }
                ],
                "title": {
                    "type": "text",
                    "$t": "[TiP] Polskie znaki w czcionkach Google"
                },
                "summary": {
                    "type": "text",
                    "$t": "\n\n\n\n\n\nJeśli chcemy użyć któregoś z zestawu czcionek od Google na swojej stronie może pojawić się problem z polskimi znakami na przeglądarkach innych niż Chrome. Wszystkie polskie znaki są wyświetlane wtedy za pomocą domyślnej czcionki, podczas gdy reszta renderowana jest includowaną przez nas czcionką. Problemem są domyślne ustawienia eksportu linka do czcionki, jaki generuje Google. Startowo "
                },
                "link": [
                    {
                        "rel": "replies",
                        "type": "application/atom+xml",
                        "href": "http://phpmajster.blogspot.com/feeds/4819749668594474047/comments/default",
                        "title": "Komentarze do posta"
                    },
                    {
                        "rel": "replies",
                        "type": "text/html",
                        "href": "http://phpmajster.blogspot.com/2015/05/tip-polskie-znaki-w-czcionkach-google.html#comment-form",
                        "title": "Komentarze (0)"
                    },
                    {
                        "rel": "edit",
                        "type": "application/atom+xml",
                        "href": "http://www.blogger.com/feeds/4106195950283171870/posts/default/4819749668594474047"
                    },
                    {
                        "rel": "self",
                        "type": "application/atom+xml",
                        "href": "http://www.blogger.com/feeds/4106195950283171870/posts/default/4819749668594474047"
                    },
                    {
                        "rel": "alternate",
                        "type": "text/html",
                        "href": "http://phpmajster.blogspot.com/2015/05/tip-polskie-znaki-w-czcionkach-google.html",
                        "title": "[TiP] Polskie znaki w czcionkach Google"
                    }
                ],
                "author": [
                    {
                        "name": {
                            "$t": "Marcin Szczygliński"
                        },
                        "uri": {
                            "$t": "https://plus.google.com/114751653321349063487"
                        },
                        "email": {
                            "$t": "noreply@blogger.com"
                        },
                        "gd$image": {
                            "rel": "http://schemas.google.com/g/2005#thumbnail",
                            "width": "32",
                            "height": "32",
                            "src": "//lh3.googleusercontent.com/-VKXRY8wQsJY/AAAAAAAAAAI/AAAAAAAAHf8/mvNNdldc80k/s512-c/photo.jpg"
                        }
                    }
                ],
                "media$thumbnail": {
                    "xmlns$media": "http://search.yahoo.com/mrss/",
                    "url": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUqpPpw5UCE-u15sqUjwRyrCRd7yAG3NGfbgMbp__ApRAVnJt8EXxOmIPBlDFqnMsM1M9uL3EAaAioRz1avC03jf0zluYAsT2Lq_L4-yeEBPNATNYfMVjsdykKUscMlbFOx0dXKBsT6IA/s72-c/tip3.png",
                    "height": "72",
                    "width": "72"
                },
                "thr$total": {
                    "$t": "0"
                }
            }
        ]
    }
}[/code]

A w widoku eleganckiego drzewka prezentuje się tak:
Na niebiesko zaznaczyłem dane, które wykorzystaliśmy.