Tweet

JavaScriptでActionScriptのようにカスタムイベントが使えたらいいなぁと思って調べてみました。AS3のようにカスタムイベントクラスを作って～という方法ではないですが、イベントのtypeを自分で独自に設定することができそうだったので、そちらでやってみました。

IEが問題で、IE9以降ではaddEventListenerが使えるようですが、それ以前はattachEventしか使えません。またfireEventはtargetがdocumentの子ノードとして配置していないとエラーになってしまいました。さらに、attachEventするイベントはIEで定められているものしか使えないようです。

これを何とかしてみたのが以下のものです。

使用方法は中にある通りです。

spfdCustomEvent.addListener("登録したいDOMオブジェクト", "イベント名", function(e){alert("呼びたい処理")});
spfdCustomEvent.dispatch("登録したDOMオブジェクト", "イベント名");

という感じで使用できるはずです。

参考：カスタムイベントとイベントの発火 :: 5509

こちらのサイトさんを参考にさせていただきました。detachEventにも対応させたかったので、1度クロージャにしたんですが、リスナにクロージャを登録して削除するところで失敗したので、別のやり方にしています。

他ライブラリを使えば余裕で実現できるかと思いますが、ライブラリに依存しない形で持っておきたかったのです。

Tweet

どうもお久しぶりです。

FlashDeveloperだったんですが、最近はHTMLも書くようになりました。

HTMLを作ってると、細かいところで面倒だなぁーと思うことが多いです。慣れてないだけかもしれませんが…。

変数が使えないというのが一番大きな問題で、ヘッダフッタを変更しようものなら全部変更というのがね…。慣れない。うまいやり方を見つけたいです。

それはさておきとして、表題の件です。imgのサイズはやはり指定したほうが良い、ということなので、全部指定しているのですが、コピペしたり、変更があったり、間違って入力してたりで、実際のサイズとは違うサイズがimgタグのwidth/heightに入ってたりします。大きい画像で少ないpixelであればそんなに目立ちませんが、やはりデザイン通りに配置しないと、ということで。

で、これを何とかできないかと思って、ブックマークレットを作ってみました。FirefoxでFirebugを使ってる前提の作りになっていますが、他の環境でもconsole.logを確認できれば使えると思います。

追加するには、適当にどこかのページをブックマークした上で、タイトルをわかり易い名前に変更し、以下のリンクのURLをコピーしてください。そのまま下のリンクをブックマークにドラッグ&ドロップでも大丈夫なブラウザもあるかもしれません。

→画像サイズチェック

使い方:

1. 調査したいページを開く
2. FirebugのJavaScriptコンソールなど、console.logを見れる画面を開く
3. ブックマークレットを実行
4. 画像サイズが実際のサイズと異なるものがあれば、赤く枠がつき、コンソールに現在の画像サイズと、実際の画像サイズが表示されます。(now:現在の表示サイズ, real:実際の画像のサイズ)

ブラウザによっては動作しないかもしれませんが、Win7+Firefox16,Mac10.6+Firefox17では動作してくれました。

jQueryを使うために1秒待つ、ということをしています。読み込み完了が検知できればもっといいんですが…。このあたりは機能向上も含めて考えてみようと思います。

HTMLをやり始めるに当たって環境を整えたりしたので、次回はそれについて何か書こうとおもいます。