タグ『
JavaScript 』
昨日のを直しました。Chromeでも動きます。これです。
Chromeのデベロッパーツールで中を見てみたら、何故かa要素だけはちゃんと挿入されててその中身のimg要素がキレイに入っていない状態。
憶測だけど、ChromeのinnerHTMLメソッドは孫要素は生成しないのかもしれない。調べてもわからなかったです。
で、いつもの泥縄式対策。a要素とその中のimg要素にid付けて、
- #img1が無ければ以下の処理開始（だってFireFoxではちゃんとimg要素存在してるんだからね）。
- 文字列からimgタグ部分だけを切り出し。
- さらにsrc部分を切り出し。
- さらにさらに src=” と ” を削る。裸のurl。
- 新たにimg要素を作り
- 4のurlをsrcプロパティに指定。
- できたimg要素を#aTagにappendChildしてできあがり！
奇特な方はソース見てみてください。上の通りコード書いてます。恥ずかしい。
でも出来たからよし。終了。と言いたいのだけど課題も残った(いやもともと課題だらけですけどね)。
受け取ったJSONはオブジェクト。それを文字列として加工してるんだから無理があるのは分かってるんだけど、例えばそのままsubstringメソッドを使うと、Chromeの場合は怒られる。FireFoxには無視されちゃう(処理が止まる)。なので所々｢+=””」ってやって文字列にしてる。一度やれば良いと思ったら、何故か勝手に(string?)オブジェクトに戻ってる。うーん我ながらよく分かってないなｰ。というかここまで書いて、JSONのままオブジェクトとして最後まで扱えばもっとエレガントな感じに出来るのかなと思った。次の課題とさせてください。ほんとに終了！
追伸：
今日は何故かLANが遅い。CatDogViewer触って見たけどやっぱり先読み必要だなｰ。とてもLightBoxが機能しているとは言えない状態。
それとtitleとlinkはやっぱり表示が必要だな。法的にはグレー。礼儀的に×。といってもスクエア表示のリンクはLightBoxに使ってるからマウスオーバーで表示ってのは駄目、というかあんまりエレガントでない。例えば吹き出しを出させるとかはかっこわるいよね。
ボタンでスクエア表示内がtitleとlink表示に変化とかどうだろう。それだとスムーズにリンク先に移行できるしね。
以上。追伸で独り言でした。
10年10月28日(木)‡23時19分43秒 ‡
Script
職業訓練の授業中こそこそやりました。『実践Ajax』でprototype.js+Script.aculo.usのUIエフェクトを紹介していたんで作ってみました。これです。
昨日「jQuery可愛いよ」ばかり書いてて、prototype.js様の罰が当たるかと思ってやりました。やっぱりすごいprototype.js。エフェクトサンプルの部分は僕みたいなやつでも1時間もかからず組めました。まぁいつも通りJSON部分で試行錯誤。家帰ってきて今までかかったわけですが。でも、おかげでCatDogViewerとちがい写真にちゃんとリンク張れました。CatDogViewerの方もそこらへんちゃんとしたいんだけど、やりかたがまだ分からない。HTMLの勉強もっとしよう。
こんな演習、勉強というより遊び(それも小学生レベル)だから、スキルアップにつながるかは疑問だし、僕が本当にウェブ構築スキルを身につけてやりたいこととは全く関係ないのだけど、今の僕の能力だとこの程度のことが出来るだけでもすごくうれしいし楽しいです。それと、いわゆる｢ウェブ制作会社｣とかだとスクリプトでこういう｢見た目｣に効くスキルが求められるのかなとも思ってる。僕絵心全くないんだけどね。
以上。って閉めようと思ったらChromeでは全く動かないことが判明。じゃあ公開やめろよ。いやだ。
10年10月28日(木)‡01時14分32秒 ‡
Script
職業訓練が今日も自習状態だったんで、そうはいっても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で見てみたらぜんぜん駄目だった。これは正式版出てから対応します。つーか出来るのか？
10年10月26日(火)‡19時07分15秒 ‡
未分類