YUI3のユーティリティ
以上の部品を使って、実際にユーザーが使いやすい形にまとめたものが、ユーティリティと言われるものです。以下ユーティリティにはどんなものがあるか説明して行きます。
ユーティリティは以下のものに分類されます。
ユーティリティ | 概要 |
Animation | アニメーション効果 |
AsyncQueue | 非同期キュー(待ち行列処理) |
Cache | キャッシュ |
Cookie | クッキー |
Data Schema(Beta) | データスキーマ |
Data Source(Beta) | データソース |
Data Type(Beta) | データ型 |
Drag&Drop | ドラッグ&ドロップ |
Get | 取得 |
History | 記録 |
Image Loader | 画像読み込み |
IO | データ通信 |
JSON | ジェイソン |
Style Sheet | スタイルシート |
表にまとめたユーティリティの簡単な説明を行います。
Animation:アニメーション効果
図の表示や消去に効果を加えたり、色を変えるなど、アニメーションを追加して、変化を加えることができるものをまとめています。
AsyncQueue:非同期キュー(待ち行列処理)
指定した処理を順に非同期実行するキューといわれる待ち行列につなぎ、実行させます。キューと言われる待ち行列は先に設定されたものから順に実行させる「先入れ先出し(FIFO:First in First Out)」といわれる処理方式のものです。
Cache:キャッシュ
ローカルマシン内に使用頻度の高いキーや値を格納するための、基本的なキャッシュメカニズムを提供します。IEなどで再読込みを早くするために作られる一時ファイルのメカニズムです。
Cookie:クッキー
買い物かごや、ID、PASSの時間制限付き保存に使われるクッキーの操作をサポートするユーティリティです。
Data Schema(Beta):データスキーマ
任意の形式のデータを解析してJavaScriptオブジェクトに変換する処理をサポートしています。
Data Source(Beta):データソース
以下のデータ群からデータを取り込んでYUIで使用できる形に変換し各機能へ渡すことができるように、一括管理する処理をサポートしています。
- JavaScript配列
- HTML内のデータ
- XML(Extensible Markup Labguage)
- CSV(Comma Separated Values)
- JSON(JavaScript Object Notation)
Data Type(Beta):データ型
データの型変換およびXML文書の型変換、文字列、数値、日付などのための便利なメソッドの書式設定を提供します。
Drag&Drop:ドラッグ&ドロップ
ドラッグ&ドロップの操作に必要な部品を提供します。最大移動量を指定するなどができます。
Get:取得
違うサイトにある自分で作成したJavaScriptやCSS、信頼できるサイトのサービスなど、Javacriptで直接取得したい場合があると思います。Get ユーティリティは、違うサイトのJavaScriptやCSSを直接ローディングすることができます。
History:記録
状態の推移の記録をサポートします。ブラウザヒストリーマネージャーというものがあり、Ajaxで画面操作をしている時でも、戻るボタンで操作前の状態に戻れるというものです。
Image Loader:画像読み込み
画像のローディングをサポートするユーティリティです。画像のロードで、ロードのタイミングやロード中の効果の設定など、タイマーやイベントを使って実現させなければいけなかった表示効果をユーティリティに組込み、パラメータの設定で便利に使用することができるものです。
IO:データ通信
データ通信をサポートするユーティリティです。Ajaxなどを行うための関数をサポートしています。またブラウザ毎の仕様の違いをある程度吸収してくれます。
JSON:JavaScript Object Notation
JSONに関するサポートユーティリティです。JSONとは、軽量のテキストベースのデータフォーマットのことで、JavaScriptのオブジェクトリテラルをベースにしているものです。
JSONはXMLのようなタグで囲むのではなくカッコで囲んでインデントを付け表示するもので、可読性はとてもよくなっています。JavaScriptがベースになっていることからAjaxでのデータ交換フォーマットとして広く使用されています。
Style Sheet:スタイルシート
スタイルシートに関するユーティリティです。YUI3を設定しておくと、各ブラウザの表示に関する差異をある程度吸収してくれるというものです。先述のように、CSS Reset、CSS Base、CSS Fontなどを含みます。