≒ CatDog最終版?

職業訓練が今日も自習状態だったんで、そうはいってもJavaScriptの時間なので一応遠慮してCatDogViewerをあれこれいじってました。に書いたとおり、(というか最初から)imgタグのinnerHTMLがタイミング良く受け渡しされないんで苦労してましたが、3行入れ替えるだけで懸案だった「Chromeでも動くようにする」「alertを出さなくて良いようにする(出さないとobject内容が引き渡せない)」が直りました。比較のために前の今回のを置いときます。レベルの低い話を偉そうに言って申し訳ないですが、以下改良できた経緯です。

授業で「prototype.jsでJSON処理」つーのをやったので、CatDogViewerの隠れた問題「Prototype.jsとjQueryの共存」を解消できないかなと思い、あれこれいじくったのですがいつも通り挫折。わかったことはJSONとJSONPって違うのね、ってことぐらい。
で、「俺にはやっぱりjQueryしかない」「jQuery可愛いよ」とgetJSON関数のリファレンス覗いてたら、「コールバック関数」って言葉が出てきた。あー聞いたことある。「初めてのJavaScript」でよくわかんなかったとこだー、なんて思ってたら、説明に「処理が完了したら実行される関数」なんて書いてある。あれ?
よく自分で書いた(コピペした)コード見てみたら当たり前だけどちゃんとそういう構造になってる。で、3行getJSON関数の引数として移動したら出来ちゃった。

データがスムーズに受け渡されないことが諸悪の根源。alert入れて一旦処理を抜けると(一応)動くことからそう考えていましたが、逆に「受け渡しできてから次の処理」ってやれば良かったのね。俺の馬鹿。

その結果alertなし・chromeで動く、には出来たんだけど、今度はimgの中身が間に合わなくてみっともない状態になっていたので、上記と同じ考え方「中身が入ってから表示する」にコードを変更して完成。ここでもjQueryの「event.add(とonload)」構文を使いました。ホント可愛いよjQuery。なお、readyメソッドでは駄目でした。判定基準が違うみたい。

以上が今日の進展です。じゃあこれでこのスクリプトの改良は終わりかということ。いえいえ。機能を増やす予定は元々ありませんので使い勝手の向上を追求していくことになるのですが、早速気になる点が。というか今回解消できた問題点が無くなったら気になるだろうなと思っていた点、「初回以降にボタンを押したとき、ぱっと画像が消える」というのがやはりみっともないなと思ってます。他の画面変更は皆slideup・downで行っているのに、この時だけぱっと消えちゃう。今まではalertでごまかされてました。以下改良失敗覚え書き。

  • スクリプトの最初にslideupを入れた→slideupの前にinnerHTML=””が効いちゃって、結局ぱっと消える。Ajaxの馬鹿。
  • この場合のonloadやreadyの入れ方が分からない。
  • setIntervalで判定ループ(slideupが終わったらinnerHTMLをクリア)は何故か駄目。

までで今日は挫折。以上です。何か昨日から挫折って言葉をいっぱい書いてる感じ。
今から勉強の方を頑張ります。ああ、PHPは可愛くないなー。

追伸:IE9で見てみたらぜんぜん駄目だった。これは正式版出てから対応します。つーか出来るのか?