jQueryで作る途中まで読んだらスライドダウンして表示されるバナーサンプル

2010年4月13日 — takeo

ページ途中に貼ったテキストバナーを目立たせたい。

あれこれ飾るよりもページをスクロールして、いいタイミングで広告を表示させるやりかたが効果的かも。

そんなときに使えるサンプルを作ってみた。(ダイヤモンドオンライン風)

バナーエリアが画面下から１５０px表示されたタイミングでスライドダウンしてバナーを表示させる。

たぶん、普通に使えると思う。

jQueryとjquery lazyaction pluginを使った。

これがサンプル

            function showBanner(target, options){
                //バナを0.3秒後に開く
                setTimeout(function(){$("ul",target).slideDown(1000);},300);
            }

            $(function(){
                $(".scrollText").each(function(){
                    $(this).lazyaction({
                        action: showBanner,
			/** 150px表示したら */
			threshold : -150
                    });
                });

            });

使ったプラグイン

jquery lazyaction plugin
プラグインに登録された領域が表示されるまで登録された関 数の実行を遅延させるプラグイン。表示されたタイミングで実行するコールバック関数を実行できる。
今回は商品の表示に使用し、画像の読み込みを遅延させた。自家製プラグイン。

これがサンプル

jQueryで作る最後まで読んだらOKにするサンプル

2010年3月17日 — takeo

規約とか必ず最後まで見てほしいコンテンツがある場合、最後まで表示したかチェックしたい。
そんなときに使えるサンプルを作ってみた。

div#scrollEnd が表示されたら「最後まで読み終わりました。」とアラートがでる。
ただそれだけ。ここで、最後まで表示したかチェックフラグをONにすればいい。

たぶん、普通に使えると思う。

jQueryとjquery lazyaction pluginを使った。

これがサンプル

            function showEnd(target, options){
                alert("最後まで読み終わりました。");
            }

            $(function(){
                //#scrollEndが表示されたらshowEnd()を実行
                $("#scrollEnd").lazyaction({
                    action: showEnd
                });
            });

使ったプラグイン

jquery lazyaction plugin
プラグインに登録された領域が表示されるまで登録された関 数の実行を遅延させるプラグイン。表示されたタイミングで実行するコールバック関数を実行できる。
今回は商品の表示に使用し、画像の読み込みを遅延させた。自家製プラグイン。

これがサンプル

Yahoo!ショッピングAPIを使ってみた。

2010年3月12日 — takeo

今回はマネタイズということで、アフィリエイトと連携できるYahoo Shoppingの商品検索WebサービスAPIを試してみた。

前回と同じくAjaxで作ってみる。こんな感じ↓

Yahoo Shopping apiテスト(AJAX)

作り方

１．まず、Yahoo Shoppingの商品検索WebサービスAPIを利用するためにアクセスキーを取得する。

2．アフィリエイトを始めるために、バリューコマースのIDを取得する。
（Yahooショッピングは、Yahooポイントでの還元か、バリューコマース経由の現金かを選択できる。）

参考：

３．Ajaxから利用するためにYahoo! Pipesでjsonp形式で出力するためのプロキシを作る。

（戻り値として、jsonp形式が使えるけど、appidを隠すために、Yahoo! Pipesを使う。）

パラメータにaffiliate_typeとaffiliate_idをセットする。

4.Yahoo!ショッピングAPIでアフィリエイトパラメータを指定する

APIのリクエスト時にリクエストパラメータaffiliate_typeにvc affiliate_idに
http%3A%2F%2Fck.jp.ap.valuecommerce.com%2Fservlet%2Freferral%3Fsid%3D●●●●●
●●%26pid%3D▲▲▲▲▲▲%26vc_url%3D

を指定します。(●と▲には3.で確認したsidとpidの値を入れます)
例(sidとpidの値はサンプルです。）

参考：

4．jQueryを使って、Yahoo! Pipesでjsonp形式で検索結果を取得する。

      $.ajax({
        url: "http://pipes.yahoo.com/pipes/pipe.run",
        data: {
            //何件目から取得するか。0始まり
            offset: 0,
            hits: MAX_PAGE_ITEM,
            //売れ筋順
            //sort: "-sold",
			//レビュー数順
            sort: "-review_count",
            query: searchKeyword,
            _id: "630316100b7af4d383aee9e85d2437a5",
            _render: "json"
        },
        dataType: 'jsonp',
        jsonp: '_callback',
        complete: function(){
            //通信終了時の処理
        },
        success: function(data, status){
            //通信が成功した場合の処理 (JSONPのコールバック関数はこれが呼ばれます)
            onSuccessSearchItem(data);
        }
    });

5．取得した商品情報をレイアウトして完成。

使ったプラグイン(前回と同じ)：

  • jquery jtemplates pluginprototype.jpのTemplateのようなHTML Template
  • jquery history pluginブラウザの戻るボタンに対応するためのプラグイン。
  • jquery lazyaction pluginプラグインに登録された領域が表示されるまで登録された関数の実行を遅延させるプラグイン。表示されたタイミングで実行するコールバック関数を実行できる。
    今回は商品の表示に使用し、画像の読み込みを遅延させた。自家製プラグイン。

価格コムのapiと比べると、取得できる情報が豊富でいろんなことができそうだ。

１秒間に１回というリクエスト制限があり、ajaxからは現実的じゃない。本当はサーバーサイドでコントロールしてあげなくちゃだめだ。（今回は心ばかりにjavascriptで１秒間のインターバルを開けている）
いろんなジャンルの商品を取り扱っているせいか価格コムのapiと比較すると想定外の結果が返ってくることが分かる。
うまく使いこなして取得する商品をコントロールすることができれば、いろんなことに使えそうだ。

※前回と同じく画面はappleの真似をしてみた。パクリはいろいろ勉強になる。

Yahoo Shopping apiテスト(AJAX)

価格.com WebサービスAPIを使ってみた。

2010年3月7日 — takeo

前から気になっていた価格.comの商品検索WebサービスAPIを試してみた。

とりあえず、今回はAjaxで作ってみる。こんな感じ↓

価格.com apiテスト(AJAX)

作り方

１．まず、価格.com WebサービスAPIを利用するためにアクセスキーを取得する。

２．Ajaxから利用するためにYahoo! Pipesでjsonp形式で出力するためのプロキシを作る。（このAPIは出力形式がxmlのみでajaxからは使えない）

Yahoo! Pipes:Kakaku.com Item Search JSON



参考：

３．jQueryを使って、Yahoo! Pipesでjsonp形式で検索結果を取得する。

    $.ajax({
        url: "http://pipes.yahoo.com/pipes/pipe.run",
        data: {
            ApiKey: "18e1df1b7387543cc580ebe9c55294a1",
            HitNum: MAX_PAGE_ITEM,
            Keyword: searchKeyword,
            //価格コムのページ数は１から始まる
            PageNum: current_page + 1,
            _id: "d3acf57a65838085f97700e9ce5c0eb2",
            _render: "json"
        },
        dataType: 'jsonp',
        jsonp: '_callback',
        complete: function(){
            //通信終了時の処理
        },
        success: function(data, status){
            //通信が成功した場合の処理 (JSONPのコールバック関数はこれが呼ばれます)
            onSuccessSearchItem(data);
        }
    });

4．取得した商品情報をレイアウトして完成。

使ったプラグイン：

  • jquery jtemplates pluginprototype.jpのTemplateのようなHTML Template
  • jquery history pluginブラウザの戻るボタンに対応するためのプラグイン。
  • jquery lazyaction pluginプラグインに登録された領域が表示されるまで登録された関数の実行を遅延させるプラグイン。表示されたタイミングで実行するコールバック関数を実行できる。
    今回は商品の表示に使用し、画像の読み込みを遅延させた。自家製プラグイン。

一回に取得できる商品が、20まで。取得した情報の中に、他のサイト（amazonなど）で利用できる商品コードがあると思っていたけど、価格コムの商品コードしかない。APIで取得できる画像も80 x 60ととても小さい画像。アフィリエイトもない？。このAPIをマッシュアップしてどんなサービスが作れるんだろう？

今度は、この検索結果をDBにため込んで、いろいろやってみるか。（１日5000回使える）
ajaxでは、戻るボタンの対応が面倒だし、Googleアドセンスみたいなアフィリエイトも使えない。

※画面はappleの真似をしてみた。パクリはいろいろ勉強になる。

価格.com apiテスト(AJAX)

jQueryで作るTwitter Tickerチュートリアルを試してみた。

2010年2月27日 — takeo

jQueryで作るTwitter Tickerのチュートリアル（A jQuery Twitter Ticker – Tutorialzine）を試してみた。

↓試したサンプル

jQueryで作るTwitter Tickerチュートリアルのサンプル

iPhoneとかのTwitterクライアントを使ってるといろんなことができるから、このチュートリアルには過剰な期待でのぞんだのだが、ショボイ。ページ開いて一度だけ指定したユーザーのTweetsを表示しているだけ。

なんでだろうと、API（Twitter API 仕様書 日本語訳 第四十五版 (2010年2月24日版)）をみていると、

・いろいろやるには、認証が必要。

認証
public_timeline の取得等一部の API を除くほとんどの API で、認証を使用する。応答に protected なユーザに関する情報が含まれる可能性のある API は認証が必須となっている。
現在、OAuth認証とBASIC認証が使用可能。

・APIの実行数制限がある。（認証してない場合IPアドレスでカウントされる）

API の実行回数制限
Twitter の API は、60分間に150回まで実行できる。この実行回数制限を超えた状態でさらにリクエストを送った場合、HTTPステータスコード 400 が返る。
認証の必要なもの、不要なものの両方が実行回数制限の対象となる(以前は実行回数制限の対象外であった public_timeline の取得も、現在は対象となっている)。
認証の必要なものはユーザID(アカウント)単位で、認証の不要なものはIPアドレス単位で、実行回数のカウントを行なう。
[訳者による注記] Twitter の運用状況によっては API 制限がより厳しく設定されることがある(60分間に20回まで、など)。

ってのがあって、Javascriptだと、これくらいでやめておくほうがいいんだなと納得。

この実行回数制限を適用されると都合が悪い場合は、理由を明示の上、Twitter 開発者にコンタクトを取ること。納得できる理由が示されれば、当該ユーザを、実行回数制限適用外のスクリーン名のリストに入れる。

Twitter本家のブログパーツからガンガンAPIを呼んでいるのは、これで制限解除か。

rate_limit_status という「アカウント関連のAPI」を使うことで、実際の API 制限の実施状況を調べることができる。

これを使えば、あと何回使えるか取得できるらしい。ん？何回実行してもカウントが減らない？おかしい。

jQueryで作るTwitter Tickerチュートリアルのサンプル

Twitter　APIは認証いれて、キャッシュとかしてサーバーで使うのがいいんだな。たぶん

こんどためしてみよう。

jQueryで作るFlashみたいにフェードインフェードアウトするバナー

2010年2月26日 — takeo

Flashみたいに、何枚かの写真をランダムにフェードインフェードアウトしながら表示するバナーを作ってみた。
一応、jQueryのプラグイン形式で（プラグインの作り方はてきとう！）。

画像パスと、リンク先URLをリストでプラグインに渡せば、リストをシャッフルして（最初の1回だけ）順に表示する。５秒置き（初期値）にフェードインフェードアウトしながらパラパラと画像が変わる。

これでiPhoneでもバナーがクリックできる！

サンプル

一応プラグイン形式のソース

/**
 * jQuery Shuffle Bannar plugin
 * Copyright (C) cubdesign | http://www.cubdesign.com/
 * Dual licensed under the MIT <http://www.opensource.org/licenses/mit-license.php>
 * and GPL <http://www.opensource.org/licenses/gpl-license.php> licenses.
 * Date: 2010-02-26
 * @author Takeo Tamura
 * @version 0.5.0
 */

(function($) {
    var name_space = 'shuffleBannar';
    $.fn[name_space] = function(options) {
        var elements = this;

        var settings = $.extend({
            'bannarList' : [],
			'interval':5000,
			'fadeOutTime' : 1000,
			'fadeInTime' : 1000
        }, options);

		var addData = function (v) {
            $.data(v, name_space, {});
            return $(v);
        };

		/*
		* シャッフルする
		*/
		var shuffle = function (targetArray)  {
			var i  = targetArray.length;
			 while (i) {
				var j  = Math.floor(Math.random() * i);
				var x  = targetArray[--i];
				targetArray[i] = targetArray[j];
				targetArray[j] = x;
			 }
			return targetArray;
		};

		//キャッシュ防止用
		var nocache = new Date().getTime();

		var bannarList = settings.bannarList;
		//シャッフル
		bannarList = shuffle(settings.bannarList);

		//今表示しているバナーの番号
		var currentBannarNumber = -1;

		//インターバルID
		var iId = -1;

		/*
		* バナーを変更する
		*/
		var changeBannarImage = function ()  {
			clearInterval(iId);
			 $("#shuffleBannar img:first").fadeOut(settings.fadeOutTime,function(){
				$(this).remove();
				loadBannarImage();
			 });

		};
		/*
		* バナーを読み込む
		*/
		var loadBannarImage = function ()  {
			currentBannarNumber++;

			if( currentBannarNumber == bannarList.length ){
				currentBannarNumber = 0;
			}

			var targetBannar = bannarList[ currentBannarNumber ];

			var imageURL = "" + targetBannar.image + "?nocache="+nocache;
			var linkURL = "" + targetBannar.link;

			var img = new Image();

			 $(img).load(function(){
							$(this).hide();
							$("#shuffleBannar").append(this);
							$(this).fadeIn(settings.fadeInTime);
							$(this).click(function(){location.href=linkURL;});
							iId = setInterval(changeBannarImage,settings.interval)
						}).attr('src', imageURL)

		};

        elements.each(function() {
			addData( this );
			loadBannarImage();
        });

        //method chain
        return this;
    };
})(jQuery);

jQuery lightBox plugin

2008年5月19日 — takeo

最近の流行？のlightbox系UIを導入してみた。

wordpressのプラグインとして「ightbox 2 Wordpress Plugin」が定番っぽい感じだけど、ライブラリに「prototype.js」が使われているのが嫌で、「jquery.js」を使っている「jQuery lightBox plugin」にした。
（このブログでは、jquery.jsをJavascriptライブラリとして使っていこうと思っているので、prototype.jsを避けた。一応ちょっとした工夫で共存はできるがこれだけの為にprototype.jsは重い。）

以下で説明する方法で設置すると、簡単にページ中の画像をスライド表示することができる。
簡単に設置できるし、軽快に動く、いいライブラリだ。

jQuery lightBox pluginの使い方

wordpressのプラグインではないので、pluginフォルダには入れない。HTMLからアクセスできる場所に置く。

１．JSを読み込む。

<script type="text/javascript" src="http://www.cubdesign.com/js/jquery.js"></script>
<script type="text/javascript" src="http://www.cubdesign.com/js/jquery.lightbox-0.5.js"></script>

２．CSSを読み込む。

<link rel="stylesheet" type="text/css" href="http://www.cubdesign.com/css/jquery.lightbox-0.5.css" media="screen" />

３．スクリプトを追加する。

<script type="text/javascript">

$(function(){

$('a[@rel*=lightbox]').lightBox();

});

</script>

４．lightbox機能を使いたいaタグにrel属性を設定する。

<a href="image1.jpg" rel="lightbox"><img src="thumb_image1.jpg" width="72" height="72" alt="" /></a>

<a href="image2.jpg" rel="lightbox"><img src="thumb_image2.jpg" width="72" height="72" alt="" /></a>

<a href="image3.jpg" rel="lightbox"><img src="thumb_image3.jpg" width="72" height="72" alt="" /></a>

以下サンプル

(c) 2010 cubdesign | powered by WordPress with Barecity