ダウンロード サンプルファイル (12.1 KB)
-
- Page 4
YUI3を使うための準備
YUI3の全体像が見えてきたところで、次にYUI3を使うためにはどうしたらよいかを説明したいと思います。
YUI3はYahoo!のダウンロードページからダウンロードできます。「YUI Seed」と「Full Developer Kit」があります。「YUI Seed」はコアの部分にアクセスするためのシードファイル（yui-min.js）のダウンロードです。「Full Developer Kit」はドキュメントやサンプル、YUIのJavaScriptやCSSなどが入っている圧縮ファイルです。以下の図は「Full Developer Kit」をダウンロードして解凍したファイルの画像です。
Yahoo!ではこのライブラリーを、BSDライセンスという非常に扱いやすいライセンス形態で無償配布しています。だれでもダウンロードして使用することができます。
BSDライセンスとは、オープンソースソフトウエアで使用されるライセンスの一つで、無保証・免責を宣言し、配布する時に著作権表示を行うことのみを条件とするものです。
非商用でも商用でも自由に利用することができ、改造も自由というビジネスにも活用できるライセンスです。
基本的なスクリプトの書き方
いよいよ書き方です。それぞれの詳しい書き方は次回からということで、今回は基本の部分のみに触れたいと思います。コアの部分はJavaScriptで書かれており、HTMLに以下のリストを書いて使用できるようにします。yui-min.jsの設定部分はリスト1に書いています。
以下はフレーム画像を表示させてだんだん消えていくアニメーション効果を使用しての例題です。
<html>
<head>
<script src="http://yui.yahooapis.com/3.0.0pr1/build/yui/yui-min.js" type="text/javascript"></script> （1）
<script type="text/javascript">
window.onload = function() {
YUI().use("anim-base", function(Y) { （2）
var myAnim = new Y.Anim({
node: '#demo',
to: {
width: 0,
height: 0
}
});
myAnim.run(); （3）
});
}
</script>
</head>
<body>
<div id="demo" style="background-image:url(./kiwaku.png); width: 600px; height: 480px"> （4） </body>
</html>
（1）の部分のsrcは「./yui-min.js」にしても良いです。最初に600x480のフレームの画像が現れ、だんだん消えていきます。ターゲットは（4）のid=demoの部分です。（2）の部分がYUI3の基本の書き方になります。
YUI().use(読み込むモジュール名,...,処理関数)
ここでは、anim-baseモジュールを読み込み、id="demo"の要素を0×0のサイズになるまでアニメーションするためのY.Animオブジェクトを生成しています。実際にアニメーションを実行しているのは（3）のrunメソッドです。
まとめ
YUI3の全体像と使用するための準備、基本の書き方を説明しました。次回からはコアの部分を中心に、各ユーティリティなどを、例題をみながら説明していきたいと思います。
- 修正履歴
-
- 2009/11/09 16:22 誤字修正しました：ディスクトップ ⇒ デスクトップ
この記事は参考になりましたか？
既に会員の方はを行ってください。
- Yahoo! UI Library Ver.3 を使ってみよう連載記事一覧
- この記事の著者
-
山田 祥寛（ヤマダ ヨシヒロ）
静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ（Java・C#・Python・PHP・Ruby・JSP＆サーブレットなど）」「速習シリーズ（ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど）」「改訂3版JavaScript本格入門」「これからはじめるLaravel実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数。
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
-
WINGSプロジェクト 横塚 利津子（ヨコツカ リツコ）
＜WINGSプロジェクトについて＞有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）。主にWeb開発分野の書籍／記事執筆、翻訳、講演等を幅広く手がける。 2026年時点での登録メンバは約50名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書、記事多数。 RSS X: @WingsPro_info（公式）、@WingsPro_info/wings（メンバーリスト） Facebook
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
この記事は参考になりましたか？
この記事をシェア
