JQuery Cycle Plugin（サークル・プラグイン）を使うと、

様々なエフェクトをかけた画像のスライドショーや

少し目立つリンクバナーを比較的簡単に作成することができます。

（ソースをDLもできますが、それは使わなくても作れます。）

JQuery Cycle Plugin の配布元のホームページ（英語）で

主なエフェクトを見ることができます。

　　▶ jQuery Cycle Plugin

サークル・プラグインを設置したベースとなるウェブページの見本は

次のURLとなります。

　　▶ JQuery Cycle Plugin - Basic Demo

このウェブページのHTMLソースをコピーして編集して行きます。

ソールを見ると分かるように、

次の２つのライブラリはフルパスでリンクを張って済ませます。

　　jquery.js

　　jquery.cycle.js

jquery.js の最新バージョンについては、

このブログ「Google AJAX Libraries API の使い方」を参照します。

jquery.cycle.js のバージョンは jquery.cycle.all.latest.js という

常に最新のバージョンになるライブラリへの

便利なフルパスリンクで完了します。

ベースのソースを元に実際に編集するのは

次の CSSと JavaScript の部分です。

　　CSS（.slideshow）

　　JavaScript（以下の部分）

　　　　　$(document).ready(function() {

　　　　　$('.slideshow').cycle({

　　　　　 fx: 'zoom'

　　　　　 });

　　　　　 });

CSS（.slideshow）では、

　　overflow: hidden;

という設定を追加することで、

ブラウザーが JavaScript をオフにしている場合でも

最初の画像１枚だけが表示され、

レイアウトが著しく崩れることを避けることができます。

JavaScript の部分については

　　fx: 'zoom'

の zoom の部分を

　　blindX、blindY、blindZ、cover、curtainX、curtainY、

　　fade、fadeZoom、growX、growY、none、scrollUp、

　　scrollDownscrollLeft、scrollRight、scrollHorz、scrollVert、

　　shuffle、slideX、slideY、toss、turnUp、turnDown、

　　turnLeft、turnRight、uncover、wipe、zoom

に変えることでエフェクトの種類を変更できます。

これらエフェクトの実際の動きは

次のページで fx をクリックして確認できます。

　　▶ jQuery Cycle Plugin - Effects Browser

エフェクトの速度やタイミング、画像の重なり具合などの

パラメーター（＝オプション）は fx: 'zoom' の下に

記述を追加して行います。

例）

　　$(document).ready(function() {

　　$('.slideshow').cycle({

　　 fx: 'zoom',

　　 speed: 500, // トランジションの速度

　　 timeout: 5000, // 次のトランジションが起こるまでの間隔時間

　　 sync: 1 // 1はtrueで重なるように同時に起こる。0だと別々

　　 });

　　 });

　　※オプションの最終行にはコンマ（ , ）を付けないこと。

追加できるオプションについては次のページを参照。

　　▶ jQuery Cycle Plugin - Option Reference

（オプションの一部について日本語で解説しているホームページ：

　http://shanabrian.com/web/library/cycle.php）

気づいたいくつかの問題点

• 個々の画像へのリンク方法は通常の a href="" でOK（「jQuery Cycle Plugin - Anchor Demo」も参照）ですが、リンクを張ると一部エフェクトの挙動がおかしくなるケースが見受けられます。（主に zoom が関わるエフェクト）
  
  
• CSS にしろ JavaScript にしろ、外部ファイル化が望ましいわけですが、外部ファイル化すると Internet Exploter 6（Win）でエフェクトが効かなくなります。

Tweet

世に出まわっている様々なAJAX（エイジャックス、アジャックス）用の便利なライブラリを、当該サイトでダウンロードしてそれを自社サーバーにアップロードすることなく、グーグルのサーバーからライブラリを直接呼び出して利用する方法について。

早い話が、グーグルが Google AJAX Libraries API として、グーグルのサーバーから自由に使えるように公開してくれているのを利用しようというものです。

現時点で提供されている Google AJAX Libraries API

• Chrome Frame
• Dojo
• Ext Core
• jQuery
• jQuery UI
• MooTools
• Prototype
• script_aculo_us
• SWFObject
• Yahoo! User Interface Library (YUI)
• WebFont Loader

【利点】

• 一度ダウンロードしたライブラリ（どこのサイトからでもOK）はブラウザーにキャッシュされ、次回以降高速に機能する。
• 使用するバージョンに対してワイルドカード指定ができるため、マイナーアップデートなどはグーグルに任かせておける。

【難点】

• いわゆるフルパス指定になるため、オフラインで機能しない。（制作者サイド）

Google AJAX Libraries API を使うための準備

１．グーグルアカウントを取得

グーグルが提供するすべてのサービスに共通するグーグルアカウントを取得して、サービスにログインする必要があります。

　　▶ Google アカウント

２．Google AJAX Feed API への登録ページで、

　　Google API キーを取得

Google AJAX Libraries API を利用するために、利用するウェブサイトのURLを入力し、「APIキーを生成」ボタンを押します。

Google API キーのコードが書かれてページが表示されるので、その Google API キーのコードをコピペかメモる。

（使用するウェブサイトのURLには、wwwといったサブドメインを書かないほうが無難。サブドメイン名を書かないと、全てのサブドメインに対して有効になる。）

　　▶ Google AJAX Feed API への登録

Google AJAX Libraries API の記述方法

Google AJAX Libraries API を呼び出すための記述方法は２つあります。（カギ括弧<>とコロン:は、全角＜＞：にしています）

１．HTMLファイル内にインラインで記述

〈例〉

＜meta http-equiv="content-script-type" content="text/javascript" /＞

＜script src="http：//www.google.com/jsapi/?key=グーグル API キー" type="text/javascript">＜/script＞

＜script type='text/javascript'＞google.load('jquery', '1.4.2');＜/script＞

２．HTMLファイル内で直接取得、さらに外部ファイル化

〈例：直接取得〉

＜meta http-equiv="content-script-type" content="text/javascript" /＞

＜script src="http：//www.google.com/jsapi/?key=グーグル API キー" type="text/javascript"＞＜/script＞

＜script src="http：//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"＞＜/script＞

〈例：外部ファイル化〉

document.write('＜script src="http：//www.google.com/jsapi/?key=グーグル API キー" type="text/javascript"＞＜/script＞');

document.write('＜script src="http：//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"＞＜/script＞');

Google AJAX Libraries API の記述方法：ワイルドカード

〈例〉

１．

＜script type='text/javascript'＞google.load('jquery', '1');＜/script＞

２．

＜script src="http：//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"＞＜/script＞

既出の例で、1.4.2とバージョン指定するところを、1と記述することで、バージョン1.9.9（＝2未満）までのバージョンの中の最新バージョンを呼び出すことができます。

Google AJAX Libraries API の最新バージョン

以下のページで、提供されているライブラリの種類と最新バージョンを確認できます。

　　▶ Google Libraries API - Developer's Guide（英語）

フルパス指定する際は、“path(u)” ではなく、 “path” を使用すること。

ちなみに、“path(u)” はuncompressed（非圧縮）ファイルで、

“path” の方は、compressed（圧縮）や minified（最小化）がはかられたファイルです。

uncompressed（非圧縮）や minified（最小化）については、

次のホームページが参考になりました。

　　▶「jQuery 開発者向けメモ - 基本・サンプル」

圧縮をしておらず，開発時の状態のままの Uncompressed 版と， 圧縮を行った Packed 版と Minified 版があります．

通常は Minified版かPacked版を使うと良いと思いますが， 開発中はデバッグがやりにくくなるため，Uncompressed版を利用することをおすすめします．

Minified版とPacked版の違いは，MinifiedはJavaScriptの文自体はそのままに，空白を詰めたものです． Packed版は，ソースコードを圧縮し，ロード後にJavaScriptで圧縮されたjQueryコードを解凍し，実行することで更に小さくしたものです． ファイルサイズはPacked版の方が小さいですが，クライアント側でJavaScriptの解凍処理が走るので，クライアントPCへの負担は大きくなります.

Tweet

デザクロ-ブログ「Yahoo! JAPAN が Google 検索エンジンの採用を発表」で取り上げたように、国内最大手の検索エンジンヤフーがグーグル検索エンジンを採用することを７月27日に発表しました。

その発表を受け、新聞各紙が取り上げた記事から日本の検索サービスのシェアについておさえておきます。

【朝日新聞（2010年７月28日）】

（ネットレイティングス調べ。2010年６月の検索回数をもとに計算）

1. ヤフー　50.2％
2. グーグル　32.8％
3. インフォシーク　9.2％
4. マイクロソフト　2.9％
5. その他　4.9％

【日経新聞（2010年７月28日）】

（日本はネットレイティングスのデータを基に日経推定。世界は米コムスコア）

1. ヤフー　53.2％
2. グーグル　37.3％
3. マイクロソフト　2.6％
4. goo　1.5％
5. その他　4.5％

参考までに世界での検索エンジン比率は次の通り。

1. グーグル　66.8％
2. ヤフー　7.2％
3. 百度（Baidu）　6.5％
4. マイクロソフト　3.1％
5. その他　16.4％

Tweet