CodeZine(コードジン)

特集ページ一覧

Yahoo! UI Library 3(YUI3)の基本

Yahoo! UI Library Ver.3 を使ってみよう(1)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
目次

YUI3の特徴

 本体はYahoo!のWebサイトにあります。本体とはAPI(Application Program Interface)といわれる命令や関数の集合体のことです。Yahoo!が実際に使用しているライブラリーの中で公開可能なものをライブラリーとしてまとめています。APIの詳細説明ファイルはダウンロードページにある、Full Developer Kitに含まれています。

 YUI3はコアを中心として、いくつかの部品に分類されます。

YUI3コア

 YUI3ライブラリーの基本となる部分です。YUI3を使用するためには、YUI seedと呼ばれるシードファイルをページに組み込んで作成します。バージョン3からは軽量化されました。シードファイルをページに組み込んで定義した関数を通して、いろいろなYUI3の基本ライブラリーにアクセスします。

 YUI3のシードファイルとは、YUI3のアクセス方法を定義したテキストファイルです。YUI3を利用するときは必ず読み込んでおく必要があります。コアといわれる部分はシードファイルに定義されています。もちろんシードファイルのみでアクセスできない処理もあります。いくつかのJavaScriptファイルを設定してプログラムを書いていくことになります。

 シードファイルを定義するには、URLでYahoo!内のファイルを指定することも、シードファイルをダウンロードして、直接ダウンロードしたファイルを指定することもできます。以下のリストはシードファイルを定義する2つの方法の例です

[リスト1]シードファイルを定義する方法
<script src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script>    (1)
<script src="./yui-min.js"></script>    (2)

 (1)はYahoo!のサーバー内にあるyui-min.jsを呼び出しています。(2)はダウンロードしたJavaScriptを呼び出しています。どちらの定義でも大丈夫です。

 コアには以下の要素が含まれています。それぞれ単体で使うというより組み合わせることによって、アニメーション効果やドラッグ&ドロップなどの機能を提供します。

(1)Global Object(標準オブジェクト)

 YUI3のための言語ユーティリティと基本の関数群、ビルドインローダーが設定されています。以下のコンポーネントが含まれます。

Grobal Objectコンポーネント
コンポーネント モジュール 説明
Array Operations array 配列の操作
YUI Core core コアとなる部品
Language helper methods lang 命令が使える範囲の確認など
Periodic execution method later 定期的な処理の実行
Logging support log ログのサポート
Object Operations object オブジェクトの操作
Browser Sniffing ua ブラウザの検出
YUI Object yui YUIの全体の基本となる部分をまとめたもの
Dynamic script and css loading get 必要になったときに読み込む処理のサポート
YUI Loader loader 各コンポーネントの読み込み

(2)Node(ノード)

 DOM操作のためのインターフェイスです。標準のDOM APIをベースにして、操作を容易にします。DOM(文書オブジェクトモデル)とはライブラリーへのアクセスや操作の方法を定義するモデルです。以前のバージョンのDOM操作はここでサポートされています。

(3)Event(イベント)

 ブラウザ内でのイベント(マウスのクリックや状態の変化などで起こるもの)処理をサポートするものです。DOMイベント、マウスイベント、キーイベントなどがあります。動的なWebページを作成するためにはなくてはならないものです。

Component Infrastructure:基盤となる部品

 各要素の基本となる部分をまとめたものです。以下のものがあります。

(1)Attribute:属性の設定

 各要素に個別に属性を追加することができます。デフォルト値を設定したり、読み取り専用に設定したり、指定された値を読み込んだりする処理をサポートします。

(2)Base:基本部品

 YUI3の基礎クラスとなるものです。初期化や終了の処理の一貫性を提供します。

(3)Pluigin:(Beta)プラグイン

 プラグインとはアプリケーションに小さなプログラムを追加するものです。

  • FocusManager Node Plugin(Beta):選択された場所の表示のサポートソフト
  • MenuNav Node Plugin(Beta):メニュー表示を便利にするソフト
  • Console Filters Plugin(Beta)入出力データから必要なものを取り出すソフト

などがあります。

 現在Beta版ですが、将来いろいろなものが追加されていくと思います。

(4)Widget:(Beta)ウィジェット

 ウィジェット関係のものです。ウィジェットはYahoo!が進めているJavaScriptをベースとして作成されている、小さくて便利なプログラムです。「Yahoo!ウィジェットエンジン」と呼ばれるものをパソコンにインストールすると「ウィジェット」と呼ばれるプログラムをデスクトップ上で使えるようになります。ウィジェットはいろいろなWeb上のツールをアクセスすることができます。Widget部品は、ウィジェットの作成を手助けするライブラリーです。

図1:ウィジェットがセットされたデスクトップ
図1:ウィジェットがセットされたデスクトップ

CSS resource:スタイルシート

 スタイルシート関係のものです。

  • CSS Reset:スタイルシートの初期化を担当します
  • CSS Base:CSSの基本となる部分が含まれます
  • CSS Font:フォント関するCSSのサポートです

などを含みます。スタイルシートはこれからのWebアプリケーション作成に重要な位置を占めるようになると思います。

Developer tools:開発ツール

 ページ作成時に便利なツールをまとめたものです。Console(Beta)・Profiler・Testなどがあります。

 Profilerは動作中のプログラムがどの処理をどういった順序で実行したかを監視します。TestはJavaScriptのテストフレームワークです。デバッグを容易にします。

 プログラムを作成するのは「作成4、デバッグ6」と言われるくらい、実行テスト(デバッグ)は大事です。実行中に思わぬバグを見つけることがあります。どれだけデバッグをやったかで、作成されたプログラムの完成度は変わってきます。開発用のツールが整備されることはとてもありがたいことです。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

修正履歴

  • 2009/11/09 16:22 誤字修正しました:ディスクトップ ⇒ デスクトップ

バックナンバー

連載:Yahoo! UI Library Ver.3 を使ってみよう

もっと読む

著者プロフィール

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

  • WINGSプロジェクト 横塚 利津子(ヨコツカ リツコ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5