Yahoo!ユーザーインターフェイスライブラリ

JavaScriptライブラリ

Yahoo!ユーザーインターフェイスライブラリ(ヤフー ユーザーインターフェイスライブラリ、YUI)は、AjaxDHTMLDOMスクリプトなどの手法を使用して、高度にインタラクティブなWebアプリケーションを構築するための廃止されたオープンソースのJavaScriptライブラリである。

Yahoo! User Interface Library
開発元 Yahoo!
初版 2006年2月13日 (18年前) (2006-02-13)[1]
最終版
3.18.1 / 2014年10月22日 (9年前) (2014-10-22)[2]
リポジトリ ウィキデータを編集
プログラミング
言語
JavaScript
対応OS Cross-platform (JavaScript)
種別 JavaScript library
ライセンス BSD License
公式サイト yuilibrary.com
テンプレートを表示

概要 編集

YUIにはいくつかのコアCSSリソースが含まれている。 BSDライセンスの下で利用可能である[3]。YUIの開発は2005年に始まり、Yahoo!MyYahoo!などのプロパティとYahoo!その年の夏からフロントページでYUIを使い始めた。YUIは2006年2月に公開された[1]。 Yahoo!エンジニアのコアチームによって積極的に開発された。

2009年9月、Yahoo!YUI 3をリリースした。これはライブラリを最新化し、YUI2から学んだ教訓を取り入れるためにゼロから再構築されたYUIの新しいバージョンである。拡張機能の中には、 DOM要素を取得するためのjQueryなどのCSSセレクター駆動エンジン、モジュールの粒度の重視、必要に応じて他のモジュールをロードする小さなシードファイル、コードの記述をより簡単に高速化することを目的とした様々な構文変更がある[4]

Yahoo!のYUIライブラリプロジェクトThomas Shaによって設立され、Yahoo!によって内部的に後援された。共同創設者ジェリーヤン;その主要なアーキテクトは、Sha、Adam Moore、およびMattSweeneyである。ライブラリの開発者はYUIBlogを管理している。YUIコミュニティは、コミュニティフォーラムでライブラリとその実装について話し合っている。

2014年8月29日、Yahoo!によるYUIの積極的な開発が発表された。 JavaScript標準の進化、開発者による大規模なJavaScriptライブラリへの関心の着実な減少、およびサーバー側ソリューションの急増を引用して、終了する。将来の開発は、「Yahooのプロパティにとって絶対に重要」な問題に対処するメンテナンスリリースに限定される[5]

特徴 編集

YUIライブラリは、そのWebサイトに完全に文書化されている。詳細なAPIドキュメントは、ライブラリのダウンロードに付属している。 YUIコア、ユーティリティ、UIコントロール、CSSコンポーネント、開発者ツール、ビルドツールの6種類のコンポーネントがある。

コア 編集

YUI Coreは、イベント管理とDOM操作のための軽量(31KBの縮小)ツールセットである。

YUIグローバルオブジェクト
YUIグローバルオブジェクトには、言語ユーティリティ、スクリプトローダー、およびYUIの他のベースラインインフラストラクチャが含まれている。
ドムコレクション
要素の配置やCSSスタイルの管理など、一般的なDOMスクリプトタスクを支援する。
イベントユーティリティ
開発者にブラウザイベント(マウスクリックやキー押下など)への簡単で安全なアクセスを提供する。また、カスタムイベントを公開およびサブスクライブするためのカスタムイベントオブジェクトも提供する。

ユーティリティ 編集

アニメーション
ページ要素の位置、サイズ、不透明度、またはその他の特性をアニメーション化することにより、「効果」を作成するのに役立つ。
ブラウザ履歴マネージャ
Webアプリケーションがブラウザの戻るボタンとブックマーク機能を使用するのを支援する。
接続マネージャー
クロスブラウザー方式でXMLHttpRequestトランザクションを管理するのに役立つ。フォームの投稿、エラー処理コールバック、ファイルのアップロードのサポートが統合されている。
クッキー
シンプルなAPIを介してブラウザのCookieとサブCookieを管理できる。
情報源
単純なJavaScriptアレイから、XHRを介したオンラインサーバーまで、他のコンポーネントが様々なタイプのデータと対話するための共通の構成可能なインターフェイスを提供する。
ドラッグ アンド ドロップ
YUIドラッグアンドドロップユーティリティを使用すると、要素を「ドラッグ可能」にしたり、ドラッグイベントに応答するドロップターゲットを簡単に作成したりできる。
エレメント
DOM内のHTML要素のラッパーを提供し、リスナーの追加、DOMの操作、属性の設定と取得などのより単純な一般的なタスクを作成する。
ゲット
Get Utilityは、スクリプトノードを介したデータとスクリプトの非同期ロードおよび外部CSSファイルの動的ロードをサポートする。
イメージローダー
YUIのImageLoaderを使用すると、ページの読み込み時にビューポートに表示されていない画像の読み込みを延期できる。これにより、パフォーマンスが大幅に向上する可能性がある。
JSON
JSONユーティリティは、受信したJSONデータを検証して安全であることを確認するためのメソッドと、JavaScriptデータをJSON形式の文字列に変換するためのメソッドを提供する。これらのメソッドは、JSON.orgでのDouglasCrockfordの作業に基づいている。
サイズ変更
ブロックレベルのHTML要素のサイズを変更できる。
セレクタ
YUIセレクタユーティリティを使用すると、CSS3セレクタ構文を介してHTML要素への参照を取得できる。
YUIローダー
YUIローダーはクライアント側のローダーエンジンであり、任意のYUIコンポーネント(および依存関係)をその場で動的にロードできる。

コントロール 編集

オートコンプリート
テキスト入力を含むユーザーインタラクションにオートコンプリート機能(提案リストと先行入力機能)を提供する。さまざまなデータソース形式をサポートしている。また、XMLHttpRequestを介してサーバー側のデータソースをサポートする。
ボタン
従来のHTMLフォームボタンのように機能するリッチでグラフィカルなボタンの作成を可能にする。
カレンダー
日付の選択に使用されるグラフィカルな動的コントロール。
チャート
チャートコントロールは、データソースユーティリティを介してデータを取得し、さまざまな一般的なチャート形式(線、棒、円など)でデータを表示する。
カラーピッカー
カラーピッカーコントロールは、色を選択するための豊富なビジュアルインターフェイスを提供する。
コンテナ
ツールチップ、パネル、ダイアログ、SimpleDialog、モジュール、オーバーレイなど、さまざまなDHTMLウィンドウパターンをサポートする。
データテーブル
スクリーンリーダーでアクセス可能な表形式のデータをWebページに表示するためのシンプルで強力なAPI。注目すべき機能には、並べ替え可能な列、ページネーション、スクロール、行の選択、サイズ変更可能な列、およびインライン編集が含まれる。
画像クロッパー
ImageCropperは、クライアント側の画像クロッパーにUIとインタラクティブな要素を提供する。
レイアウトマネージャー
上、下、左、右、中央のレイアウト単位を含む固定レイアウトを提供することにより、わずかな労力でクロスブラウザのピクセルパーフェクトレイアウトを作成できる。
メニュー
フライアウトメニュー、メニューバー、およびコンテキストメニューを作成するための簡単なAPIを提供する。
リッチテキストエディター
YUIリッチテキストエディターは、モジュール式で高度に構成可能な洗練されたクライアント側のテキストプロセッサであり、あらゆるオープンエンドのテキスト入力状況に適している。
スライダー
ユーザーが1つまたは2つの軸の値の有限範囲内で選択できるようにする汎用スライダー要素を提供する。
タブビュアー
コンテンツのナビゲート可能なタブ付きビューを提供する。 XMLHttpRequestを介したタブコンテンツの動的ロードをサポートする。
ツリービュアー
ノードを拡張および縮小できるコンテンツツリーを生成する。
アップローダー
アップロードの進行状況に関するフィードバックを含む複数ファイルのファイルアップロードを可能にする。

CSSリソース 編集

CSSベース
リセット後にベースを使用して、Web開発者が慣れている標準のブラウザーCSSルールの一貫したクロスブラウザー置換を提供する。
CSSグリッド
1000以上の異なるページレイアウトをサポートするサブセクションコンポーネントを備えた7つの基本的なページワイヤーフレーム。
CSSフォント
標準化されたクロスブラウザフォントファミリとサイズレンダリング。
CSSリセット
CSS宣言はマージンを削除し、共通要素でのクロスブラウザーレンダリングを標準化する。

開発者ツール 編集

ロガー
画面上のコンソール、 Mozilla Firefox用のFirebug拡張機能、またはSafariJavaScriptコンソールにログメッセージを書き込むための迅速で簡単な方法を提供する。
プロファイラー
JavaScript用のクロスブラウザーの非ビジュアルコードプロファイラー。
プロファイラービュアー
プロファイラーと組み合わせて使用し、プロファイリングデータの豊富な視覚化を提供します —グラフィカル(Charts Controlを使用)と表形式(DataTableを使用)の両方。
YUIテスト
YUI Testは、ブラウザベースのJavaScriptソリューションのテストフレームワークである。 YUI Testを使用すると、JavaScriptソリューションに単体テストを簡単に追加できる。特定のxUnitフレームワークからの直接ポートではないが、YUITestはnUnitとJUnitからいくつかの特性を引き出す。

ビルドツール 編集

YUIコンプレッサー
YUI Compressorは、 JavaScriptとCSSを安全に最小化するツールである。
YUIDoc
YUIDocは、JavaScriptコードの検索可能なAPIドキュメントを生成するJavaScriptで記述されたツールである。これは通常、ビルドプロセスの一部として使用されている。 YUIDocはコメント駆動型であり、様々なコーディングスタイルやプログラミング言語と互換性がある。

脚注 編集

  1. ^ a b The Yahoo! User Interface Library”. Yahoo! User Interface Blog (2006年2月13日). 2011年10月10日時点のオリジナルよりアーカイブ。2023年4月5日閲覧。
  2. ^ Releases · yui/yui3 · GitHub” (英語). GitHub. 2020年4月24日閲覧。
  3. ^ YUI Library”. 2008年6月13日閲覧。
  4. ^ YUI 3.0.0: First GA Release of YUI’s Next-Generation Codeline”. Yahoo! User Interface Blog (2009年9月29日). 2009年11月18日閲覧。
  5. ^ Important Announcement Regarding YUI”. Yahoo! Engineering. 2014年8月29日閲覧。

参考文献 編集

関連項目 編集