So-net無料ブログ作成
JavaScript ブログトップ

Firebugを使おう [JavaScript]

Javascriptで開発する際、「プログラムが思った通りに動かない」といったことはよくあります。

実際、私もYahoo! UI LibraryやScript.aculo.usでも原因不明で動作しないことがあり試行錯誤に時間が費やされました。

その場合、デバッガでステップ実行させたり、変数の中身を確認したりする操作が必要になります。これらの機能を提供してくれるのが「Firebug」です。

FirebugはFirefoxの拡張機能であるため、Firefoxをインストールする必要があります。
http://mozilla.jp/firefox/

次にFirefoxを起動してFirebugをインストールしましょう。(IEではインストールできません。)
http://getfirebug.com/jp.html

「404 Page not found. 」と表示されていますが、右上のボタンでインストール開始します。

Firebug起動方法ですが、
1.FireFoxでデバッグしたページを開く。
2.メニューから「ツール」→「Firebug」→「Firebug を開く」を選択する。
デバッグコンソールが開くと正常にインストールされています。

詳しい使用方法は、まだ勉強中なので後ほど紹介します。
nice!(0)  コメント(10)  トラックバック(0) 
共通テーマ:日記・雑感

もっと簡単なアニメーション [JavaScript]

以前にYahoo! UI Libraryを使用したアニメーションを紹介しました。今回はもっと簡単なアニメーション方法を紹介します。

まず今回使用するライブラリScript.aculo.usをダウンロードしましょう。現在の最新バージョンはscript.aculo.us 1.8.3 です。

解凍するとlibsrcというフォルダが出来ます。この2つのフォルダにある9つのファイルをサーバにUPします。私の場合、libというフォルダを作りそこへUPしました。

ライブラリのロードは以下のようにして行います。
Script.aculo.usは、prototype.jsを使用しているのでこちらもロードしておきます。”?load=effects,dragdrop”は今回使用するライブラリファイルです。省略すると全ライブラリを読み込むため処理が重くなってしまいます。
<script src="/lib/prototype.js" type="text/javascript"></script>
<script src="/lib/scriptaculous.js?load=effects,dragdrop" type="text/javascript"></script>

使用する画像を配置しましょう。画像以外でもOKです。
<div id="test1">
<img src="sample2.jpg" id="img1" width="200" border="0"></div>

後は簡単です。idをパラメータにしてにして関数を呼び出すだけです。関数によってはnewをつけないと動かなかったり、id以外のパラメータが必要だったりします。

サンプルページはこちらです。実際の動作はサンプルで確認してみて下さい。
画像が消えてしまった場合は、再読み込みして下さい。また、1回目はライブラリのロードに時間がかかり、アニメーションが重かったりします。これも再読み込みで改善されます。
http://www.skillworker.net/test/aculousAnim.html

1.フェードイン
画像をフェードインさせるため、最初にstyle="display:none;"を指定して画像を消しておきましょう。
<div id="test1" style="display:none;">
<img src="sample2.jpg" id="img1" width="200" border="0"></div>

フェードイン処理ですが、たったこれだけです。"test1"は先ほど付けたIDです。
 Effect.Appear("test1");

実際細かいオプションを指定できるのですが、これだけでも充分なアニメーションが可能です。

2.フェードアウト
画像をフェードアウトさせます。
 Effect.Fade("test1");

3.BlindUp
画像を下から上に消します。
 Effect.BlindUp("test2");

4.BlindDown
画像を上から下に表示します。
 Effect.BlindDown("test2");

5.ドラッグ&ドロップ
ボタン押下後に画像をドラッグ&ドロップできるようになります。
 new Draggable("test2");

6.SlideUp
画像を下から上に消します。
 Effect.SlideUp("test2");

7.SlideDown
画像を上から下にスライド表示します。
 Effect.SlideDown("test2");

8.折りたたむ
画像を縦、横の順で折り畳んで消します。
 Effect.Fold("test2");

9.縮小後消失
画像を縮小し消します。
 Effect.Squish("test2");

10.TVスイッチOFF
画像をテレビのスイッチをオフにした時の効果で消します。
 Effect.SwitchOff("test2");

11.落下後消失
画像を落下させて消します。
 Effect.DropOut("test2");

12.拡大アニメ表示
画像を拡大しながら出現させます。
 Effect.Grow("test2");

13.拡大アニメ消失
画像を拡大して消します。
 Effect.Puff("test2");

14.縮小後消失2
画像を縮小して消します。
 Effect.Shrink("test2");

15.点滅
画像を点滅させます。
 Effect.Pulsate("test2");

16.シェイク
画像を左右に小刻みに揺らします。
 Effect.Shake("test2");

17.移動アニメ
画像を現在の位置から指定した分移動させます。移動量は正数または負数を指定できます。
 Effect.MoveBy("test2", 100, 50);

この場合、横100縦50移動させます。

18.透明度アニメ
画像の不透明度を変化させます。
 new Effect.Opacity("test2", { from:1.0, to:0.0 });
この場合、透過度を1.0から0.0に変化させています。

逆も可能ですね。
 new Effect.Opacity("test2", { from:0.0, to:1.0 });

19.アニメ組み合せ
複数のアニメーションをまとめて実行します。
new Effect.Parallel([
  new Effect.MoveBy("test2", 300, 300),
  new Effect.Scale("img2", 50)
]);

Effect.Scaleは、指定サイズに拡大縮小(100が等倍)します。この場合、画像を縦横300移動しながら、50%に縮小します。

20.スクロール
指定したIDまでスクロールさせます。
new Effect.ScrollTo("test3");

まだまだ色んなことが出来るようですが、今回はここまでにします。

この記事で参考にした書籍です。

10日でおぼえるAjax 入門教室

nice!(0)  コメント(0)  トラックバック(0) 
共通テーマ:日記・雑感

もう少しYahoo! UI Library [JavaScript]

 前回はわかり易い様にボタンにアニメーション動作を割り付けました。実際にはホームページを表示したタイミングでアニメーションをさせたいことが多いと思います。そこで、今回はイベントを使ってみたいと思います。

イベントを処理するには、eventモジュールを読み込む必要があります。

 YUI().use('event', function(Y){});

ただし、animモジュール読み込んだ場合は、eventモジュールも自動的にも読み込まれるようです。

イベントの種類やイベント発生時の処理の内容(イベントハンドラ)は、on()で設定します。loadはページが読み込まれたタイミングで発生するイベントです。第2パラメータには、イベントハンドラを指定します。

 Y.on('load', function(){});

 ページが読み込まれDOM(Document Object Model)の準備が出来たタイミングでアニメーションさせたい場合はdomreadyを使用します。

Y.on('domready', function(){}); 

で、前回のテスト2を改良したスクリプトは以下になります。

<script type="text/javascript" language="JavaScript">
<!--
  YUI().use('anim', function(Y){
    Y.on('load', function(){
      (new Y.Anim({
      node: '#myPhoto',
      duration : 5.0,
      from : { opacity : 0.0 },
      to : { opacity : 1.0 }
    })).run();
  });
});
//-->

 ここでまた壁にぶち当たったのですが、最初に画像の透明にしておかなければいけません。ブラウザ毎に透明度の設定方法が異なるのです。

ブラウザプロパティ設定値の範囲
Internet Explorerfilter:alpha(opacity=値)0~100 (整数値)
Firefox2mozOpacity=値0~1.0 (小数値)
Safari(Firefox3)opacity=値0~1.0 (小数値)
私の調べたところこのようになっていると思われます。

すべてのブラウザに対応するためには、すべて設定しちゃえばいいのです。

<div>
<img src="sample.jpg" width="300" height="455" id="myPhoto" style="
filter: alpha(opacity=0); -moz-opacity:0.0; opacity:0.0
">
</div>

これで出来ました。

http://www.skillworker.net/test/YuiAnim2.html
nice!(0)  コメント(10)  トラックバック(0) 
共通テーマ:日記・雑感

まじめにYahoo! UI Library [JavaScript]

今回は画像の座標を動かしてみましょう。基本は前回までと同じ要領です。

前回のテスト2に座標(450, 400)から(100,100)まで移動する処理を追加してみましょう。

YUI().use('anim', function(Y){
  Y.on('load', function(){
    (new Y.Anim({
      node: '#myPhoto',
      duration : 5.0,
      from : {
xy : [450, 400], opacity : 0.0 },
      to : {
xy : [100, 100], opacity : 1.0 }
    })).run();
  });
});

たったこれだけでOKです。

ではサンプルでテスト3ボタンを押してみましょう。

http://www.skillworker.net/test/YuiAnim1.html

フェードインしながら画像が動きましたね。

 テスト4~8ですが、YUIに付属しているのサンプルコードを使用したものです。YUIで何が出来るかは以下のフォルダ内のサンプルコードを実際に動かしたほうがわかりやすいです。

examples/

 テスト4~8の動作の説明だけ行っておきます。テストボタン押下前には、再読み込みを行って下さい。コードについては、ブラウザのソース表示で見て下さい。

■テスト4
 画像が消えちゃいます。

■テスト5、6
 テスト5またはテスト6ボタン押下後にマウスで任意の場所をクリックしてみて下さい。画像がその位置に移動しましたね。テスト5と6では移動の仕方が異なります。

■テスト7、8
 これらもテスト4と同じく画像が消えますが、違いがわかるように画像下に文字を配置しています。

 このようにYUIを使用するとサイトの画像にアクセントをつけることが出来ます。
nice!(0)  コメント(10)  トラックバック(0) 
共通テーマ:日記・雑感

YUIはYahoo! UI Labraryだった [JavaScript]

 前回簡単に使用できるといったことを多少後悔しつつ、なんとかサンプルを動かすことが出来ました。手軽さという面では他のJavaScriptライブラリには及ばないようです。
 しかし、YUIは大規模サイトで使用されている実績もあり、非常に動作が安定しています。また充実したUI部品と豊富な機能を備えています。

http://www.skillworker.net/test/YuiAnim1.html

1.まずアニメーションということで画像を一枚用意します。
 myPhotoというタグをつけましょう。YUIをいうかダイナミックHTMLは、このIDに対して操作を行います。
 <img src="sample.jpg" width="300" height="455" id="myPhoto">

2.animモジュールの読み込み
 YUI().use('anim', function(Y){~});
第2パラメータはモジュールの読み込み完了時に呼び出されるコールバック関数です。

3.コールバック関数の処理を追加
 どのエレメントにどのような動作を行わせるかを指定して、アニメーションオブジェクトを作成します。エレメントの指定はIDを指定します。今回はnode:'#myPhoto'です。
 どのように動作させるかは、from(開始値)とto(終了値)にそれぞれCSS(Cascading Style Sheets)のプロパティ名と値を指定します。まずopacityプロパティを使用して透明度を変化させて見ましょう。
 opacityプロパティは、要素の透過度を指定するプロパティです。0は完全透過で、1は完全不透過です。

 new Y.Anim({
  node: '#myPhoto',
  from : { opacity : 0.0 },
  to : { opacity : 1.0 }
})
上記サンプルでは、myPhotoというIDに対して、opacityを0~1に変化させるというものです。

作成したアニメーションオブジェクトを動かすにはrun()メソッドを使用します。
function(Y){
  (new Y.Anim({
    node: '#myPhoto',
    from : { opacity : 0.0 },
    to : { opacity : 1.0 }
  })).run();
}

では、サンプルでテスト1ボタンを押してみて下さい。スクリプトの警告が表示された場合許可してください。

http://www.skillworker.net/test/YuiAnim1.html

では次にアニメーションの時間を指定してみましょう。
 duration は、変化が起きるとき、どれくらいの時間をかけて変化するのか、その時間を "秒数" で指定します。

YUI().use('anim', function(Y){
  (new Y.Anim({
    node: '#myPhoto',
    duration : 5.0,
    from : { opacity : 0.0 },
    to : { opacity : 1.0 }
  })).run();
});

サンプルでテスト2ボタンを押してみて下さい。画像が5秒かけて浮かび上がってきましたね。
nice!(0)  コメント(10)  トラックバック(0) 
共通テーマ:日記・雑感

YUIって誰? [JavaScript]

ではありません。

 Yahoo! User Interface Libraryを紹介したいと思います。現在の最新バージョンは3で以下からダウンロードできます。Full Developer Kitをダウンロードして解凍して下さい。

YUI 3 — Yahoo! User Interface Library

YUIとは、Yahoo!で使われている公開ライブラリーを使いやすくするためにYahoo!が作成した、ユーザーインターフェイス構築のためのコンポーネント集です。今回は簡単そうなアニメーション機能を使ってみたいと思います。

YUIのアニメーション機能を使用すると、誰でも簡単に?Flashのようなアニメーションサイトが作れます?

まずは、簡単に使い方を見ていきましょう。

1.モジュールを読み込む
 scriptタグでライブラリー本体を読み込みます。

 <script type="text/javascript" src="build/yui/yui.js"></script>

 
もしくは、ヤフーのサーバーからYUIを直接読み込む場合は以下の様にします。

 <script src="http://yui.yahooapis.com/3.0.0pr1/build/yui/yui.js" type="text/javascript">
</script>

但し私の方では、これだとうまく動かないのでbuild配下をサーバにアップロードして使用しています。

 使用するモジュールをuse()メソッドを使いスクリプト内で指定します。
 YUI().use(読み込むモジュール名, .... , コールバック関数)

コールバック関数はモジュールの読み込み完了時に呼び出されます。
また、モジュールは複数指定することが出来ます。

例.
YUI().use('event','node', 'anim', function(Y){ ~ })  

ここまでで準備完了です。

具体的なアニメショーンの方法は次回説明します。
nice!(0)  コメント(10)  トラックバック(0) 
共通テーマ:日記・雑感
JavaScript ブログトップ

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。