タグ『
失敗話 』
昨日のを直しました。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
職業訓練が今日も自習状態だったんで、そうはいっても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秒 ‡
未分類
今日は職業訓練が一日自習だったので勉強が大分捗った。web構築スキルの｢勉強｣ってのも変な話だけど、本をじっくり読んで｢勉強する｣ってことは今しかできないかなって思ってるのと、資格試験が近いため｢勉強｣してるんです。ええ、あの悪評高い「ウェブデザイン技能検定」受けます。ええ。2級です。すみません。この話はまたの機会に。
というわけで時間が出来たので皆さんお待ちかねの学習の記録第二弾。PHP(地獄)編です。ええ、分かってます。誰も見てません。アクセスログ見てますから。
- ノン・プログラマのためのPHP入門 10日間コース
JS編で書いたとおり、PHPの学習にはすごく苦労してます。この本に最初に取りかかったのは｢持ってたから｣。去年前職がちょっと暇だったときに少しでも勉強しようかと思い買いました。けど積ん読。｢ノンプログラマ｣とはありますが、｢素人向け｣という内容ではないよう。(僕ちょっと疲れてるのかな)。webデザイナーなど、｢触れたことはある」程度の知識は事前に必要ではないかと思います。はい言い訳です。で、用語の分からないものが多く、3章で挫折。ただし、この本にものすごく感謝してるのはXamppの導入を助けてくれたこと。おかげさまで最初の学習環境を整えることに労力をとられないで済みました。僕の場合は本の通りやって一発で上手く行きました。まぁ後で人並みに苦労はするんですが。
- 初めてのPHP5
次はこれ。迷いに迷ってこれを買いました。JS編で触れた『初めてのJavaScript 第2版』より先に始めて6章で挫折。詳細な説明で勉強の充実感はあるんですが、知らない言葉が多すぎて本当に頭がパンクしそうになりました。1ページ/日がデフォになってきたんで一旦撤退しました。
- 基礎からのMySQL
ネットで(泣きながら)探しまくって、藁にもすがる思いで次に買ったのがこの本。どこでも絶賛されてる感じなのですが、僕にもこの本はよく理解できました。というかこの本で駄目ならサーバサイドは一旦諦めようと思って始めたので、西沢先生(勝手に呼ばせてもらってます。)には足を向けて寝られません。2章の扉に書かれてらっしゃる「必ず成功する秘訣」を何回も読み返しながら勉強しました。で、嬉しくて調子に乗って掲示板を公開してます。理解し易くて読んでて気持ちが良いので暇があれば読み返してますが、やっぱり分かってない部分も多くてまだまだお世話になりそうです。
以上が勉強のために買った本です。今は『初めてのPHP5』に再挑戦中。今日は9章がようやく終わりました。頭痛が酷い。2度目の挫折間近。明後日から一旦『独習PHP 第2版』に行く予定です。
他にも評判が良かったので『PHPによるWebアプリケーションスーパーサンプル 第2版』も買いました。でも今の僕のレベルでは意味が分からなすぎてただのカーゴカルトコーディング(こんな言葉あったのね)になっちゃうんで、眺めるだけに止めてます。もう少し理解が進んだらもう｢勉強｣ではなくて「実習」を始めるつもりなんで、その時は大活躍してくれそうです。いつのことやら。
以上、PHP編でした。JSの方は順調に『JS5』に進んでいて今日は5章まで進みました。意外に分かり易いです。
10年10月25日(月)‡21時58分00秒 ‡
未分類