このとき、return falseをつけておかないと、リンクをクリックしてアラートが出た後に、アンカーの移動（で合ってる？）みたいなのが行われてしまう。URLの最後に＃がつく感じですね。

ここを＃にしないでjavascript:void(0)と書くと、return falseがなくても大丈夫なのかな……自分で確かめた限りでは大丈夫だったけど、参考文献をいくつかあさった限りでは、javascript:void(0)でも完全なリンクの無効にはならないっぽいことも書いてあった。まあどっちの場合でもreturn falseを書いとけばまず間違いはないだろうと思われます。

僕も基本的には常にreturn falseを書いてます。まあ僕の場合は、return falseの意味をちゃんと理解してたわけじゃなくて、初めてjavascriptを触ったときに、とりあえず後ろにはreturn falseをつけるのが常識なんだろうみたいな印象を持って以降、今でもそのままの流れでとりあえずつけとけばいいやって思って書いてる感じですけど。

でもそんな覚え方だと、やっぱり落とし穴の一つや二つにははまるわけですね。

この前、ラジオボタンにonchange属性をつける仕様があったんですけど、当然のようにreturn falseをつけて書いてたら、チェックの変更が起きなくなってしまったんですね。

だいぶ適当に書きましたけど、例えばこんな感じのラジオボタンがあったとして、最初にラジオ１の方を選択してそっちにチェックがついたら、何度ラジオ２の方のボタンを押してもチェックはラジオ１の方についたままになってたんですよ。何か言葉だけで説明するとややこしいっすかね……すんません。

ちなみに、function test()はちゃんと呼ばれます。だからthis.valueをアラートしてみると、ちゃんと選択された方の値は取得できるんですよ。でもチェックの移動はしない。function内で無理やりチェックを変えるとかも試みてみたんですけど、ダメでした。僕の書き方に問題があった可能性はここでは無視することにして、とりあえずダメでした。しつこいようですが、ダメでした。

ダメでした。

で、その原因がreturn falseでした。こいつを外したら、正常な動きをするようになった。

何かねぇ……ラジオボタンにonchangeって、なかなかの曲者っぽい感じがします。Firefoxではちゃんと動くのにIEだとちゃんと動かなかったりとか。っていうか、IE6だとちゃんと動かなかったりとか。

この前もね、先方さんから「何かラジオボタンのとこが上手く動かないんだけど」みたいなこと言われて、こっちでいろいろチェックしてみたんですけど、どこにも不具合が見つからなくて、まさかと思ってIE6でテストしてみたら、まさにズバリだったさ。

くそっ、IE6め。IE6めぇぇぇぇ！！

先日、Ajaxで処理を行う場面に出くわしたときにこのsubmit()を使ったのだけど、とあるページでだけエラーが起きた。

こんな感じのエラー。あ、document.get～が$になってるのはprototype.jsを使用してるからね。

いくつかのページで同様の処理を行っていたのだけど、一つのページでだけこのエラーが出て、どうにも先に進まなかった。

で、調べた結果たどり着いたのがこちら

＞どうやらidやname属性が “submit” になってる部品があると、JavaScriptのFormオブジェクトのsubmit()が上書きされる模様。

ということなんだそうです。

ああ、言われてみれば確かに。CakePHPでsubmitボタンの種類別の判定をしようとして、$this->params['form']['submit']に値を入れるために、submitボタンにsubmitっていうname属性をつけていました。

確認画面を挟んだ処理とかのときにね、この値をswitch文とかで判定しようと思ってやったことだったんだけど、まさかそれがこんなところに影響を及ぼすとは、思いもよりませんでした。まあ、分かってしまえば解決方法は至って簡単。name属性を別のに変えれば良い。

上記の参考サイトさんには、これは当たり前すぎる的なことを書いてあるんですが……そーだったんですか。

でもそういう当たり前のことに気づかないことだって、たまにはあるよね。人間だもの。
（僕の場合は気づかなかったんじゃなくて知らなかっただけですけど……）

そんなときはjavascriptで先に画像を読み込んでおくという手もあるっぽい。

こんな感じ。

できればこの処理が並列で行われると良いのだが、現状はSafariやIE8でしか並列処理は実装されていないらしい。そのうち段々と実装されていくらしいけど。

とりえあず、全体的に実装されるまでは何らかの対策を講じようというわけで、その何らかの対策についてですけれど、javascriptを動的にロードすることで、並列処理を可能にする方法がある。

通常、javascriptファイルを読み込む場合は

headタグの中に↑こんな感じで記述するけれど、これ自体をjavascriptで行うことで、動的な読み込みが可能になる。

同様にcssもこの方法で読み込むことも可能っぽい。

参照サイトはこちら。実際に並列処理している様子が分かるますです。

で、今回それを逆にできないかなって思ったわけですよ。仕様的にそういう要求をされているのかをいまいち掴みかねた部分もあるんですけど、編集画面で改行を1行だけにしてほしい的なことを言われたので、たぶんそんな感じのことを言ってると思ったわけですよ。別に現状で問題なければ、わざわざそんな要求をしてこないと思うし。そう思ったわけですよ。

プラグインとかをいろいろ調べてみたんですけど、自分が調べた限りでは、記事投稿の際にpタグやbrタグを挿入しないプラグインは存在するんですが、それだと本文にも改行が入らないようになってしまうので、もっと別のやり方を考えないといけない。

僕も詳しいことは分かっていないんですけど、enterを押したらpタグを入れてshift+enterだったらbrタグを入れるというのは、wp-includes/js/tinymceの中にあるtiny_mce.jsだかwp-tinymce.jsあたりで制御してるっぽいですね。たぶん、wp-tinymce.jsの方なのかな。だからこのファイルをこねくり回せば何とかなるんじゃないかと思い、とりあえずいろいろこねくり回してみることにしました。この辺り↓のサイトさんを見ても、そんなようなことが書いてあるし。

http://modxcms.com/forums/index.php?topic=15204.0

http://d.hatena.ne.jp/tohokuaiki/20080326/tiny_mce

そういうわけで、いざwp-tinymce.jsの中身を見てみたわけなんですが……まあ～……見づらいっすね。jquery.jsなんかもそうですけど、余計なスペースとか改行を省略するために、1行で全コードを書いてあったりするじゃないっすか。だから追うのが大変でした。wp-tinymce.jsとかも、行数にすると30行足らずしかないから、1行あたりのソースがものすごく長い。某ジャンプ漫画の休載期間並に長い。if文の中にif文があってその中でfor文のループ処理を行っていて、その中でさらにif文を……みたいのが全部1行で書いてありますからね。玉ねぎかっつーの（←？）

まあ結論から言うと、さんざんこねくり回した挙句にenterとshift+enterの挙動を逆にするという操作は結局実現できなかったんですけど、今日はその話はおまけでして……今回はその時にちょっと役に立ったサイトさんがあったので、それを紹介したいというわけなんです、はい。

しかし、最近の僕は「いろいろ頑張った挙句にできませんでした」って感じの記事ばっかりだな……この前のtera termのときといい……ただのダメなやつじゃんねｗｗ。

まあそれは置いといて、今日ご紹介したいのはJs Decoderというサイト。

このサイト、javascriptのコードを貼っつけてdecodeってやると、良い感じにdecodeしてくれるんすよ。ためしにwp-tinymce.jsとかデコードしてみたんすけど、もう見やすさが違い過ぎました。美人は三日で飽きる、ブスは三日で慣れるなんて昔の人は言ったもんですが、見づらいソースは何日経っても見づらいですよね。見やすいソースは何日経っても見やすい。そりゃそうだ。

っていうか、wp-tinymce.jsとか、デコードすると普通に15000行とかあるんすけど……それを30行程度で記述するって、どんだけっすか。

このJs Decoder、個人的には結構便利だなと思いました。インデントとかもちゃんと取って表示してくれるし。

で、javascriptの話だけど、javascriptでalertを使っていると、ときどき『undefined』という文字列を目にする。まあ、要は値が何にもねーぞこのやろうってなことを言ってるんでしょうけど、このundifinedやfalse、nullに0、果ては空文字や改行コードのみ（\n）のそれぞれを==で比較した場合に、trueが返ってくる場合とfalseが返ってくる場合が結構ごちゃまぜになっているような印象を受ける。

まず、0や改行コードのみ、空文字はfalseと==で比較するとtrueが返ってくる。でもnullやundifinedはfalseが返ってくる。falseで比較してるのにtrueが返ってくるとか何かややこしいことを言っているけれど、要は等しいかどうかってこと。trueが返ってくれば等しいと判断できる。

false と 0、\n、空文字 => 等しい

false と null、undifined => 等しくない

こんな感じ。

ここから判断するに、nullとundifinedは等しいっぽい。0と\nと空文字も等しいと思われる。でも例えばnullと空文字なんかは等しくないようだ。

前にこんなようなif文を書いた時に、strの中身は空文字なのになぜかalert文が出ないな～って思ったことがあったんですけど、どうやらそういうことらしい。

あと、そう。FirefoxとIEで違う動きをしたこともありました。

というのも、自分ではstrにnullを入れてたつもりなのに、何かFirefoxかIEのどちらかは（どっちかはちょっと忘れた）勝手に改行コードを入れたりすることがあって、それで何度やってもalertが出なかった、みたいなことがありました。多分、firebugでDOMを調べたら改行コードが入ってるのが分かったような気がするから、Firefoxの方がそうだったかもしれないね。

一度自分の中で整理しておきたかったので、メモ。

こちらを見ると、上記のそれぞれの比較が表で見やすくまとめられているので、参考になるよ。

そこで、画像の読み込みのタイミングを遅らせてページの表示を早めようという試みを可能にするのが、Lazy Loadというプラグイン。

やっていることは、画像を読み込ませる部分に別の軽い画像を代替的に読み込ませることで負荷を軽減するような感じ……で合ってるのかな。

まずは上記のリンク先からlazyloadをダウンロードしてくる。あとjqueryがないと動かないので、持ってなければダウンロードしておく。

まあ、たとえばこんな感じで画像を呼んでいるソースがあったとする。

これでimgタグで呼んでいるsample.jpgやsample2.jpgがdummy.gifに置き換わる。event: “click”というのは画像をクリックしたらsample.jpgなどを読み込むようにしている。デフォルトはページスクロールで画像を読み込むようになっているらしい。

dummy.gifを1px×1pxのgif画像とかにしておけば一つのページに100個とか200個くらい画像を出しているときなんかはそれなりに読み込みが早くなる……と思う。

 結構いろんなところで使われていると思いますし、僕が手がけるサイトでも、ブログ機能なんかをつける場合はだいたいhighslideをつけてくれという指示をいただきます。

通常、highslideを動かすためには↓こんなようなソースを書く必要がある。

要はhighslide.jsを読み込んでaタグにクリック時のイベントを書けば動くわけですが、ブログで記事を書くときに毎回これを書くのは面倒だし、ユーザビリティを考えてもこれを自分で書かせるのはあまりよろしくはない。

そこで、画像を投稿したら勝手にhighslideが動くようなjavascriptでも書いておけば、便利じゃないかな～と思う。それなら画像を投稿するだけで良いもんね。

何をやっているかというと、要はid=’content’で囲われた中にある文の中からaタグを探してきて、その中にimgタグがあったら、highslide属性を付け足しますよということです。単純にaタグだけ拾ってきてhighslide属性をつけたら、ただのリンクにもついちゃいますからね。

とりあえずはこんなjavascriptのコードを書いて、addHighslide.jsとでも適当に名前をつけて<head></head>の中で読み込む。あとはfooterの部分、</body>の前にでも以下のコードを書けばＯＫ。

これは、一度ページを全部読み込んでから上のjavascriptを実行させますよってこと。

if(IE=’\v’==’v')は、使っているブラウザがIEかどうかを判定しています。理由はあまりよく分かっていないんだけど、IEだとsetAttribute(‘onclick’, ‘return hs.expand(this)’)って書いても上手くhighslide属性がつかないので、こんな場合分けをしてあげないといけない。

これを書いておけば、いちいち自分でブログを更新するときにaタグの中にclass=”highslide”やら何やらを書かなくても大丈夫。誰がブログを更新してもhighslideが使えますね。

ちなみにこのソースを書くにあたり、こちらの本を参考にさせていただきました。ていうか、ほぼパクリ。

 setAttributeってやつを使って属性を変更してやれば、ちゃんとできる。

document.getElementsByTagName(‘tag’)はタグ情報を配列で返してくるから、変数tagsは配列になっている。tags.lengthで配列の数を取得できる。ページ内に仮にembedタグが4つあればtags.lengthは当然4になる。

たぶん、自分はここが分かっていなかったから

みたいなことをやろうとして失敗していたのだと思う。

追記

Flashムービーの背景を透明化するにはembed要素にwmode=”transparent”という属性を付加してやればよい。あとobject要素内にparam要素も追加する必要がある。後者については今回は省略させてもらうとして、前者のembed要素にwmode属性を追加するときの個人的な注意点。

属性を付加するだけならこれでOKなのだけど、xhtmlにおいて、閉じタグがないような場合、半角スペースとスラッシュをタグの中に書くというルールがある。

たとえば上のようなやり方でwmode属性を追加した場合、Firebugとかでソースを確認すると、こんな感じになる。

スラッシュの前に半角スペースが入っていない。これだと残念ながら背景は透明化されない。正規表現を使った置換でも何でもいいけど、とりあえずこの部分に半角スペースを入れないといけないようだ。ちなみに僕はPHPのereg_replace関数を使った。

正直、この半角スペースは入れなきゃいけないものだなんてこと知らなくて、どうして背景が透明化されないのか、昨日2時間くらい悩んだ。でも無事に解決して良かったっす。

問題の解決にあたり、こちらのサイトを参考にさせていただきました。

最初はこんな感じでbodyタグに書けば何とかなるんじゃね？って思ってやってみたんだけど、上手く動かなかった。

エレメントに関係なくonloadなんかを使いたい場合には、windowを使うといいらしい。

こう書いておけば、ページが読み込まれたときにメッセージボックスが開かれる。