ラベル Ajax の投稿を表示しています。 すべての投稿を表示

jQuery + Google AJAX Feed API

以前にも何度かここでGoogle AJAX Feed APIについて書いてたのだが、JQuery HowTo: Google Feeds API - jQuery pluginを見て、もっとシンプルな使用方法があったことを知った。

クラス リファレンス - Google AJAX Feed API - Google Codeを再度確認して今一度。

上記で挙げたpluginでは渡す引数の順番に気をつけなければならないのが不満なので、使いやすいように書き直してみる。

Code

$.gFeed = function(options, callback){
  var opt = $.extend({
    v: '1.0',
    num: 10
  }, options);
  
  if (!opt.q) 
    return false;
  
  $.getJSON(
    'http://ajax.googleapis.com/ajax/services/feed/load?callback=?',
    opt,
    function(data){
      if (data) 
        callback.call(this, data.responseData.feed);
    });
}

使用できる引数の種類は「q, v, hl, key, context, num, scoring, output」
引数の説明はURL 引数で確認できます。

Usage

$.gFeed({
  'q': 'http://yas-hummingbird.blogspot.com/rss.xml'
  }, function(feed){
    var lst = [];
    for(var i=0; i<feed.entries.length; i++){
      var entry = feed.entries[i];
      lst.push(
        '<span><a href=' + entry.link + ' >' + entry.title + '</a></span>' + 
        '<span> - ' + 
        (function (date) {
          return (date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate());
        })(new Date(entry.publishedDate)) + 
        '</span>');
    }
    
    $(document.body).append('<ul><li>' + lst.join('</li><li>') + '</li></ul>');
});



iTunes Feed

このgFeedを利用して、さらに特定のFeedを取得するメソッドを作成する方が使いやすいだろうということで、iTunesのFeedを取得するメソッドを作成してみる。

Code

(function($){
$.iTunes = {
  categories: {
    Top_Albums: 'topalbums',
    Top_Songs: 'topsongs',
    New_Releases: 'newreleases',
    Just_Added: 'justadded',
    Featured_Albums: 'featuredalbums',
    _default: 'topalbums'
  },
  genre: {
    all: 0,
    country:6,
    electronic: 7,
    folk: 10,
    jazz:11,
    newAge: 13,
    pop: 14,
    rb_Soul: 15,
    dance:17,
    hiphop_Rap: 18,
    world: 19,
    rock: 21,
    vocal:23,
    reggae:24,
    jPop: 27
    // etc ...
  },
  feed: function( params, options, callback){
    var prms = $.extend({
      category:'topalbums',
      country:143462,
      limit:10,
      genre:0
    }, params);
    
    var countries = {
      usa: 143441,
      france: 143442,
      germany: 143443,
      uk: 143444,
      italy: 143450,
      canada:143455,
      australia: 143460,
      japan: 143462,
      // etc ...
      _default: 143462
    };
    
    prms.country = (function(c){
      return (+c == c) ? c : countries[c.toLowerCase()] || countries._default;
    })(prms.country);
    
    callback = $.isFunction(options) ? options : callback || function(){};
    options = ( !options || $.isFunction(options) ) ? {} : options;
    options.q = 
      'http://ax.itunes.apple.com/WebObjects/MZStore.woa/wpa/MRSS/' + 
      prms.category +
      '/sf=' + prms.country +
      '/limit=' + prms.limit +
      '/genre=' + prms.genre + '/rss.xml';
    
    $.gFeed(options, callback);
  }
}
})(jQuery);

Usage

$.iTunes.feed({
    category:$.iTunes.categories.Top_Albums,
    country:'japan',
    limit:10,
    genre:$.iTunes.genre.dance
  },
  function(feed){
    var $div = $('<div>').append($('<h3>').text(feed.description));
      $.each(feed.entries, function(i, entry){
      $div.append(entry.content);
      });
    $(document.body).append($div);
});


実際に使用して気付いたのだが、iTunesのFeedは応答が少々遅いのか、たまにではあるが初回読み込み時にタイムアウトしてしまい、Feedを表示できないことがある。
こういう場合、やはりgetJSONを使用するよりajaxメソッド使用してタイムアウトの時間を設定した方が良いかもしれない。

AJAX Libraries API でYUIまでホスティングし始めた

Googleは代表的なAJAXライブラリをホスティングしてくれてるんですが、いつの間にかその種類が増えている。

追加されたのは二つ。

  1. SWFObjectNew!
  2. Yahoo! User Interface Library (YUI)New!

個人的は以下があるので使ってます。
  1. jQuery
  2. jQuery UI
  3. Prototype
  4. script_aculo_us
これ機会にYUIも一度触ってみようかな?

参考:AJAX Libraries API

AJAX - 『$』が衝突している場合の対処法

prototype.jsとjQueryで使われている「$関数」(jQueryでは$ショートカット)が衝突する問題についての回避策が紹介されていたので念のため。

原因が分からない不具合があるなら、これが当てはまるかもしれない。



読み込む順番
  1. prototype.js
  2. jquery.js


case1.
<script type="text/javascript">
  jQuery.noConflict();

  //jQuery
  jQuery("div").css("color","gold");
</script>


case2.
<script type="text/javascript">
  $j=jQuery.noConflict();

  //jQuery
  $j("div").css("color","silver");
</script>


いろいろなサイトを閲覧していると私的感覚ですが、かなりの頻度で不具合を目にする。
それがブラウザの問題か、Ajax関連によるものか、原因自体を把握するのが難しいと感じる。

例えばJavaScriptを読み込む順番を間違えても動作しなくなるが、こういった初歩的なミスなら気付くのも容易だが、上記のような問題となるとWeb屋でもない私が対処の仕方にたどり着くまで容易ではなかった。

以上、参考までに

Google AJAX Feed APIを使用して最新記事を表示する

Google CodeにあるGoogle AJAX Feed APIを利用してブログに最新記事(Recent Posts)を表示する。

サンプルにある『AJAX Dynamic Feed Control』(下記参照)を使用します。

AJAX Dynamic Feed Control
http://www.google.com/uds/solutions/dynamicfeed/index.html

こちらでベースとなるコードを生成し、その後変更が必要な部分を編集します。
このまま使用したのではいろいろと不都合があるので、Optionの設定で自分用にカスタマイズしましょう。


変更可能なプロパティの設定例:

numResults : 5,
displayTime : 2000,
fadeOutTime : 1000,
pauseOnHover : true,
title : "",
linkTarget : google.feeds.LINK_TARGET_SELF,
stacked : false,
horizontal : false

  • numResults - 表示するフィードの数
  • displayTime - メイン(上部)に表示される記事の表示時間
  • fadeOutTime - 表示されている記事がフェイドアウトする時間
  • pauseOnHover - 下部に表示されるフィード(文字列)にマウスを合わせたときにその該当記事が表示されるか否か
  • title - タイトルを指定
  • linkTarget - 表示するウィンドウの指定。
  • stacked - 複数のフィードを指定したときにフィード別にタイトルを表示する
  • horizontal - "true"に設定すると横長一行のスタイルになる
その他詳しくは以下のページで確認して頂きたい。


Class Reference
http://code.google.com/intl/ja/apis/ajaxfeeds/documentation/reference.html


コード例)
<head>
<script src="http://www.google.com/jsapi?key=notsupplied-wizard" type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css" media="screen" />
<script type="text/javascript">
function LoadDynamicFeedControl() {
var feeds = [{url: 'http://yas-hummingbird.blogspot.com/feeds/posts/default'}];
var options = {
numResults : 5,
displayTime : 2000,
fadeOutTime : 1000,
pauseOnHover : true,
title : "Recent Posts",
linkTarget : google.feeds.LINK_TARGET_SELF,
stacked : false,
horizontal : false
}
new GFdynamicFeedControl(feeds, 'feed-control', options);
}
google.load('feeds',"1");
google.setOnLoadCallback(LoadDynamicFeedControl);
</script>
</head>
<body>
<div id="feed-control">
<span style="margin:10px;padding:4px;">Loading...</span>
</div>
</body>

上記の『google.load('feeds',"1");』この"1"はAJAX Feed APIのバージョンを表しています。

Google AJAX Feed API への登録

その他、API キーの登録については下記のページにて解説、登録できますの参照下さい。

Google AJAX Feed API への登録
http://code.google.com/intl/ja/apis/ajaxfeeds/signup.html

Googleが提供するAJAX JavaScriptライブラリを使用する

Googleの『AJAX Libraries API』というサービスを利用することで、jQueryやprototypeなどのjsファイルをWeb上の何処かにアップロードする必要がなくなります。

分かりやすく言えば、Googleがどうぞご自由に使って下さいと、Web上に公開しているJavaScript ライブラリを使わせてもらうということですね。

閲覧者側のメリットとして、利用者が増えればキャッシュから読み込むことで、閲覧時に不要な読み込み処理が減るということでしょうか。

使い方は最初にjsapiを読み込み、google.loadで読み込みたいJavaScriptライブラリを指定するというものです。

例として、以下のコードをheadタグ内に入れます。

<script src="http://www.google.com/jsapi"></script> 
<script>
   google.load("jquery", "1.2.6");
</script>

『"1.2.6"』というのはjQueryのバージョンですが、上記の場合、
『http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js』
と、このような形でjQueryのjsファイルが読み込まれます。

今後のメンテも考慮してバージョンを『"1.2"』とすると、1.2.xの最新バージョンが読み込まれます。
『"1"』とすると1.xの最新バージョンが読み込まれます。
上記どちらの書き方をしても現時点で最新バージョンである1.2.6が読み込まれました。

Google Feed APIやGoogle Search APIとの併用も可能で実際にこちらで使用しています。

GF APIやGS APIを使用する場合はAPIKeyが必要となりますが、Ajax Libraries APIでは必要ありません。

現在使用出来るライブラリは以下の5つです。

実際に使用する場合は上のファイルだけでなく、プラグインも使用するので別途アップロードしなければならないだろうが、このサービスを利用すれば今後のメンテが楽になりますので利用する価値はあるでしょう。

Blogger に使えそうな画像表示 Javascript ライブラリ etc...

Bloggerにupした画像のもう少しマシな見せ方はないかとちょっと探してみた。

LightBoxでシンプルに

Lightbox 2
http://www.huddletogether.com/projects/lightbox2/

動作が安定しているのでライトボックスの中ではこれがおススメかな?
『Script.aculo.us』と『prototype』を使用しています。


jQuery lightBox plugin
http://leandrovieira.com/projects/jquery/lightbox/

上の『2』と見た目にはほぼ同じ。
これは jQueryのプラグインになります。
上の『2』も含めてサンプルがあるのでそれをベースに移植すれば簡単に出来そう。

その後、これを使用してみたが動作に不満があったので『Highslide JS』に換えた。
参考:『lightBox 0.5』から『Highlside JS』に変えた訳


Lightbox JS
http://www.huddletogether.com/projects/lightbox/

これが一番シンプルで簡単に取り入れられそう。
該当のjsファイル以外にライブラリを必要としないところが良い。
上記『LightBox2』の初期バージョンのようだ。


ThickBox
http://jquery.com/demo/thickbox/

ソースを見ると、かなりシンプルなつくりなのが解る。故に動作もシンプル。
jQueryのプラグインで、jQueryのサイトから。



FancyZoom
http://www.cabel.name/2008/02/fancyzoom-10.html

画像を拡大表示させるときのEffectは「おおぉ」と思わせるが、それ以外の作りについては雑な印象。



facebox
http://famspam.com/facebox

これもjQueryを使用します。
jQueryを使用したものの中では一番 cool な印象。


ライトボックスの亜種は他にも多数存在するのでここにないモノもいろいろ試してみるのも良いかと。


おススメ

Highslide JS
http://highslide.com/

これはいいなぁと思うがなんか面倒そう。サンプルだと画像の左上に「Powerd by Highlight JS」と出るのだが、これ消しても問題ないのか?実際は出ない?設定で非表示にすることも可能。
結局私はこれに落ち着いた。



スライドさせるなら

JQuery Cycle Plugin
http://malsup.com/jquery/cycle/

いろんな動作が見られて「こんなことができるのか」と関心。ただブログに画像貼り付けるだけじゃ面白くないので、こう言う見せ方したらスペースも取らないし良いかな。



複数の画像を表示させるパーツとして

jQuery: jqGalScroll v2.1
http://benjaminsterling.com/jquery-jqgalscroll-photo-gallery/

縦 or 横方向にスライドさせるのだが中身を見ると例えば横方向にスライドさせるなら画像のコンテナのWidthが画像の合計Width分取っているようでちょっと腰が引ける。
低スペックのPCだと重くないか?

追記:jQueryのバージョンアップに伴い現在使用不可。(2009/03/10)


AJAX SlideShow
http://www.google.com/uds/solutions/slideshow/index.html

GoogleのAPIサンプル。このサンプルではFrickerの画像を引っ張ってきて表示している。シンプルだからFrickerのユーザーが自分のブログに載せたいならこれ使うのが手っ取り早い。


何をチョイスするにしてもHTML(XML)とJavascriptについて多少の知識は必要で、またjsファイルをアップロードする場所の確保も必要です。

Sony Style(ソニースタイル)
デル株式会社

Recent Posts