2010年8月 :: Archives

画面内でコンテンツをふわふわさせてみました。

デモ

	var i = 0;
	(function move(){
		// プラスマイナスを交互に渡す
		i = i > 0 ? -1 : 1;
		
		var p = $("#sample").position().top;
		
		$("#sample").animate({ top: p + i * 10 }, { 
			duration: 500,
			complete: move // アニメーション完了後に関数を再帰呼び出しする。
		});
	})();

.animate()を再帰的に呼び出すことで繰り返し処理を行っています。

今日は、JavaScript開発の定番になっているjQuery、これをGoogleAPIから呼び出して、サイト構築の手間を省こうではないかというお話です。

Google API を使う時にAPIをロードするためのgoogle.load()
これでjQueryも呼び出せます。

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

これだけ。


↓ 以下Googleから抜粋。


google.load(moduleName, moduleVersion [, optionalSettings])
google.load()の引数で渡すのは3つ。最後のはオプションです。

moduleName
API名。maps, search, feeds, など

moduleVersion
APIモジュールのバージョン。
新しいAPIリビジョン、たとえば2.24が導入されると、前のリビジョン2.23がAPIの安定バージョンになります。
バージョン2.24はテストバージョンです。
リビジョンを指定せずにAPIのバージョン2をリクエストすると、自動的にAPIの安定リビジョン(2.23)が渡されます。
APIのテストバージョンを入手するには、明示的にバージョン2.24をリクエストします。
常にAPIのテストバージョンを指す特別なワイルドカード2.xを使うこともできます。

optionalSetting
省略可能な構成オプション。オブジェクトリテラルで記述。{"language" : "ja_JP"} など。
 [可能なオプション例]
  ・callback : ロード後に呼び出す関数。
  ・language : APIやUIコントロールをローカライズする言語。ISO639言語コードで指定。
  ・nocss : デフォルトのCSSをロードするかどうか。trueでロードしない。
  ・nooldnames : 古い名前空間(GSearch, GSearchControlなど)ロードしない場合はtrueを指定。
  ・packages : コアAPIと一緒に読み込む関連パッケージを指定。
  ・base_domain : APIの基本ドメイン。(ex.) Maps APIの中国版は ditu.google.cn を指定。
  ・other_params : API特有のオプションを指定。


[サンプル]
google.load("search", 1)
google.load("maps", 2, {"other_params" : "sensor=false"})

スクロールイベントにjQueryのanimate()をバインドさせて、スクロール時に移動するコンテンツを作ってみました。

デモ

    var d = document.height;
    var w = $(window).height();
    var h = $(".content").outerHeight();

    $(document).scroll(function(){

        var s = $(document).scrollTop();

        // 画面と同期 = s
        $("#sample_1").queue([]).stop().animate({ top: s }, 1000);

        // スクロールと同期 = s + w * s / d
        $("#sample_2").queue([]).stop().animate({ top: s + w * s / d }, 1000);

        // 上下に接着 = (d - h) * s / (d - w)
        $("#sample_3").queue([]).stop().animate({ top: (d - h) * s / (d - w) }, 1000);

        // タイミング変更
        setTimeout(function(){ $("#sample_4").queue([]).stop().animate({ top: (d - h) * s / (d - w) }, 500) }, 500);

    });

しかし！
これではIEとOperaが動いてくれません…

原因はdocumentオブジェクトを参照できないからのようなので、
上記コードの「document｣部分を、下のように書き換えました。

	var d = $("body").height();
	var w = $(window).height();
	var h = $(".content").outerHeight();

	$(window).scroll(function(){

		var s = $(window).scrollTop();

単純に「document」を「body｣に置き換えただけでは、スクロールイベントやscrollＴop()が取れないので、ドキュメントの高さのところは「body｣に、スクロール関連は「window｣に置き換えました。

これでIEやOperaなどでも動くようになりました。めでたしめでたし

ただ、３と４はスクロールバーの上下にある矢印の幅の分だけ微調整しないと、画面最下部にきちんと接してくれません。
ChromeとSafariはその辺は空気を読んでくれますね。

canvas要素を使ってオセロを作ってみました。

デモ

画面サイズに合わせて盤面のサイズが決まります。

GoogleAPIを使ったiPhone用壁紙検索をちょっとばかり改良してみました。

デモ

変更点は

• ベースはHTML5+CSS3
• 検索ボックスをCSSでiPhoneぽく
• 検索結果一覧を左右にスライド
• 「iPhone画面を表示する」をオプションに。
• 元画像URLがすでに無効になっていた場合に「Not Found」用の画像を表示。