≒ scriptaculousEffectsSample2

昨日のを直しました。Chromeでも動きます。これです。

Chromeのデベロッパーツールで中を見てみたら、何故かa要素だけはちゃんと挿入されててその中身のimg要素がキレイに入っていない状態。
憶測だけど、ChromeのinnerHTMLメソッドは孫要素は生成しないのかもしれない。調べてもわからなかったです。

で、いつもの泥縄式対策。a要素とその中のimg要素にid付けて、

1. #img1が無ければ以下の処理開始（だってFireFoxではちゃんとimg要素存在してるんだからね）。
2. 文字列からimgタグ部分だけを切り出し。
3. さらにsrc部分を切り出し。
4. さらにさらに src=”　と　”　を削る。裸のurl。
5. 新たにimg要素を作り
6. 4のurlをsrcプロパティに指定。
7. できた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