Yahoo! UI Library3（YUI3）の動きを受け持つモジュール
Yahoo! UI Library Ver.3 を使ってみよう（4）
ダウンロード サンプルファイル (51.7 KB)
YUI3（Yahoo! UI Library 3）は処理をモジュールという形で提供しています。前回はコア機能に含まれる標準オブジェクトについて紹介しました。今回は、開発時によく使用されるユーティリティ内のモジュールについて紹介したいと思います。
はじめに
今回からは、コアの機能を使って作成された、いろいろなモジュールを紹介して行きたいと思います。まず、処理の動きが目に見えて、なじみやすいモジュールを紹介したいと思います。
最初に、アニメーション処理をまとめたモジュールanim、次にマウスのドラッグ＆ドロップをまとめた複数のモジュールDD、イメージ読み込み用のモジュールimageloader、最後に、Webには欠かせないクッキー処理用モジュールcookieの順で紹介します。
対象読者
Webアプリケーションに興味があり、Yahoo! User Interface Libraryに注目している人。HTMLとJavaScriptを使える人を対象にしています。
必要な環境
HTMLとJavaScriptが作成できるエディターとインターネットにつながっているパソコンがあれば、例題の作成、確認ができます。
アニメーション処理
処理に動きを出して、親しみのあるサイトにするアニメーション処理について紹介します。アニメーションを追加するための処理はモジュールanimにまとめられています。
アニメーションの指定と実行
ボタンを押すとフェードイン／フェードアウトを行うアニメーションを考えてみましょう。起動時は図1のようになっています。
書き方をリスト1に示します。
<style>
#demo {
background-image: url(./obake.jpg);
width:200px;
height:200px;
}
</style>
<script type="text/javascript">
YUI().use("anim", function(Y) {
/* 消す処理 */
Y.one('#erase').on('click', function(e) {
var anim = new Y.Anim({ //（1）
node: '#demo',
duration:5.0,
to: {
opacity: 0
}
});
anim.run(); //（2）
});
/* 表示処理 */
Y.one('#show').on("click", function(e) {
var anim = new Y.Anim({ //（3）
node: '#demo',
duration:5.0,
from:{ //（4）
opacity: 0
},
to: {
opacity: 1
}
});
anim.run();
});
});
</script>
</head>
<body>
ボタンを押してアニメーション効果を確認<br><br>
<div id='demo'></div><br> //（5）
<button id='erase'>消す</button>
<button id='show'>表れる</button>
</body>
モジュールはanimを指定します。（5）のdivタグにスタイルシートで200px×200pxの画像を表示しています。（1）でアニメーションのオブジェクトをanimとし、プロパティで動きを指定しています。node:は動かしたい画像の指定、duration:はアニメーション実行時間（秒）の指定、from:は開始時の状態、to:は終了時の状態指定です。
1つのプロパティに複数のデータをセットしたいときは、fromやtoで書いているように｛...｝で囲って中に指定します。opacity:は透明度の指定で0:が透明、1:が不透明指定になります。たとえば、0.5は透明度50％ということになります。他にwidth／height／backgroundColorなど、CSSのプロパティを設定できるようです。
アニメーションを実行させたい時は、オブジェクト.run()と書きます。実際に例題を動かして、動作を確認してみてください。
この記事は参考になりましたか？
- 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
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
この記事は参考になりましたか？
この記事をシェア
