AS3

最近、JavaScriptのライブラリを使って動きを付けたりすることが多くなってきました。
特に多用するのが、ライブラリの代表格である「jQuery」と「prototype.js」の2つ。
ただ、どちらも「$」関数を使用しているため、これらのライブラリを同時に使うと正常に動作しません。

しかし、jQueryには他のライブラリと共存するための回避策が初めから用意されているのです。

すごいぞ、jQuery！

この記事の続きを読む

数あるJavascriptライブラリの中で代表的な「jQuery」と「prototype.js」。

今までは何らかの機能が必要になった際にググったり本で調べたりして、見付けたものをベースに何とか形にして……という感じでした（です。今も）。
見付けたものがたまたまjQuery/prototype.jsだったというだけで、言ってしまえばどっちでも良かったのですね。
でもまぁいつまでもそれじゃいかんだろうということで、今回それぞれの特徴をまとめてみることにしました。

とはいえ自分で解説できるほど深い知識があるわけでもなく、リンク集みたいになってしまってます。

いずれこういう内容を何も見ずに書けるようになりたいですなぁ。

あ、「jQueryとprototype.jsを同時に使うには」という記事も書く予定です書きました。

この記事の続きを読む

ここで言う「スライダー」とは、「同じ構造の要素を限られたスペースで表示するために、要素ごとスライドさせて表示させるためのもの」という意味。

（↓こんなのです）

音量を調整するような「つまみ」のことではありません。

（↓こんなのではないです）

「スライダー」でググったら「つまみ」の方ばかりヒットして、なかなか欲しい情報に辿り着きませんでした。
何かほかに良い表現はないんですかねぇ。
この記事の続きを読む

SafariからFirefoxに乗り換えて早幾月。
もはや単なるブラウザの域を超えて、強力な制作・開発ツールとなっています。

ここでは、そんなFirefoxの機能を拡張・強化してくれるアドオンをご紹介。
基本的には普段仕事で（たまにプライベートでも）使っているものばかりなので、実際の使用感なんかを参考にしていただければ、と。

アドオンの基本的な使い方については、別の記事にまとめてあります。
ご参考まで。

この記事の続きを読む

ものすごくシンプルで使いやすいロールオーバーをご紹介。
最近、特別な理由がない限りこの方法でロールオーバーの設定をしています。

オリジナル版

使うのは「CSS HappyLife」さんの「ソースがシンプルなJSによるロールオーバー」で紹介されているJavaScript。
使い方はごく簡単で、画像を用意してJSファイルを外部ファイルとして読み込むだけ。
画像ファイル名の最後が「_on」であればロールオーバー用、「_off」であればロールアウト（通常）用の画像として認識し、勝手に表示を切り替えてくれるのです。

特別なタグや属性を加えることなく、つまりソースをきれいに保ったままスマートに動作します。

「_on」「_off」を付けるだけというのも直感的でいいですね。
（ちなみに、JavaScriptをいじればこのキーワード（？）も変えられます。）

改良版

↑のスクリプトをベースとした改良版もあります。
（「Le Arche」さんの「JavaScriptメモ(３)：しんぷるロールオーバー」で紹介されています）

改良点は、動作する範囲をIDで指定できるようにしたこと。
元々はページ内の画像すべてに反応してしまっていたので、それを任意の範囲に限定しようということですね。
小さなことではありますが、僕的にはものすごく重宝しています。

ただ、ロールオーバーしたい画像がいろんなところに散らばっている場合、どうしても複数のIDを指定する必要があります。
それに、指定したIDがページ内に無いとエラーが発生するため、複数のページで異なる範囲に指定する必要がある場合、そのパターン分のJSファイルを用意する必要もあったりします。

というわけで、場面に応じてオリジナル版と改良版を使い分けているのが実際のところ。
だいたいはオリジナル版だけで事足りるのですが、画像の点数が多くなったり「_on」「_off」って付けちゃいそうなページを作っていたりするときは、改良版を使ったりします。
（まぁスクリプトをいじれば動作条件を変えられるので、本当はオリジナル版だけで良いのかもしれませんが……）

今思うと、DreamWeaverのあのゴッツいスクリプトが随分太っちょに思えますね。
きれいなソース、万歳！

雑感

ロールオーバーにはCSSを使う方法も多々ありますが、僕はどうもはあまり好きではありません。

イチイチclass名を付けないといけなかったり、text-indentでテキストを-9999pxまで飛ばしたり、一つのデータにon/off両方の画像を入れないといけなかったり、まぁ何かと手間がかかるワケです。
もちろん作り手の手間だけじゃなく、alt属性を設定できなかったり「CSS:on, 画像:off」の設定だとテキストが表示されなかったりするため、ユーザビリティ／アクセシビリティ的によろしくないという話もよく目に耳にします。
動作を直感的につかみにくいですし。

できればソースを保ったままでロールオーバーできないかなぁ、と常々思っていたところ、まさに渡りに船。
理想通りの方法が見つかって今に至るわけです。

CSS HappyLifeさん、Le Archeさんに感謝！