まずは「jQuery UI」のダウンロード……今回はしません！
JavaScriptのライブラリを使ってフェードイン／フェードアウトで画像を切り替える方法はいくつかありますが、オバマ氏のサイトのようなデザインを実現するには、指定した時間で自動切換えができるタブ機能を持つライブラリが便利です。
今回は、前回と同じjQueryライブラリ上で動作するJavaScriptライブラリ「jQuery UI」を使います。jQuery UIはその名のとおり“UI（＝ユーザーインターフェイス）”まわりを処理してくれるライブラリで、タブやスライダー、ドラッグ＆ドロップといった機能を、1からプログラムを書くことなく使えるようにするものです。今回はjQuery UIライブラリ内にある「タブ」ライブラリだけを使用しましょう。
jQuery UIのトップページ
それではさっそく、ライブラリをダウンロードしましょう……と言いたいところですが、今回はダウンロードしません。これまでの本連載では、ライブラリファイルを配布元のサイトからダウンロードして使用していましたが、今回は直接、jQueryのWebサイト上にあるスクリプトファイルのURLを指定します。
「Web上にあるライブラリファイルを読み込んで使用するというのは大丈夫なの？」という人もいるかもしれません。もちろん、メリットもあればデメリットもあります。メリットとしては、ライブラリファイルに不具合があった場合に、特に何もしなくても自動的に修正がされることです。また、ローカルディスクにダウンロードする手間もなくなり、ディスク容量もわずかですが節約できます。意外とうれしいのが、スクリプトのフォルダ名やフォルダ構成を変更した場合にパスを書き直す必要がない、ということ。フォルダ名を変更したり移動させることが多い場合には便利です。
逆にデメリットとなるのは、ライブラリファイルがあるサーバーが停止してしまうと当然ですがプログラムが動かなくなってしまうことです。また、ネットワークに接続されていない環境では動作確認ができない点も挙げられます。
最近では米グーグルやヤフーでも、ライブラリのホスティングサービスを提供しているので、今後はWeb上のライブラリファイルにリンクする方法が簡単でよいかもしれません。グーグルにせよヤフーにせよ、他のホスティングサービスに比べてもサーバーが止まる可能性は低いので、比較的安心して使用できるでしょう。
