新しく、リッチでスマートになったYouTube。HTML5を本格的に採用し、CSS3によるエフェクトを多用しています。HTML5を牽引するGoogleがどのようなマークアップでYouTubeを作り替えたのか、動画再生ページを解析してみました。
まず、読み込んでいる画像が非常に少ないですね。動画のサムネール以外に読み込んでいる画像は3点だけ、合計20KB。軽量なのはpng8だからでしょうね。
ページ全体のマークアップの骨格を画像にしてみました。
mastheadというID名は流行っとるのかなー。サイドバーの配置の仕方が面白いですね。少し詳しく、ソースで見ると以下のようになっています。
いやー、はまった。今日半日くらいこの現象に費やしてしまった。
症状：
HTMLに埋め込んだGoogleMapのマーカーで、draggable: trueに設定しているにもかかわらず、ドラッグできない現象が発生。
marker = new google.maps.Marker(this.point,{ draggable: true });
原因はUnloadでした。メモリリーク防止のために入れていたgoogle.map.Unloadがなぜか邪魔していたみたい。Prototype.jsを使用しているので下記の様に書いていたのですが、
Event.observe(window, 'unload', google.maps.Unload());
このコードのカッコひとつ、Unload()←コレ を削除すると、なおった。
Event.observe(window, 'unload', google.maps.Unload);
なんだか分からないけど、助かった！
CKEditorがかなり便利。かなり使いやすいWYSIWYGエディタで、導入も驚くほどカンタン。インストール方法もまとめておきたいが、詰まった点があったのでメモ。
CKEditorにもネイティブでプレビュー機能があるのだが、当然エディタで編集している範囲しかプレビューされない。エディタが入っている以外のinputタグの内容などもあわせた「編集内容をプレビュー」機能を持たせたければ、エディタから編集中のデータを取り出さなければならないので、その方法です。
// 「editor1」が、CKEditorに置き換えたtextareaを差すので、環境に合わせ変えてください。 data = CKEDITOR.instances.editor1.getData(); alert(data);
CKEditor自体も、formをsubmitする際にエディタ部分のデータを取得してtextareaのvalueに突っ込んでいるみたい。