‘ajax’ タグのついている投稿

新しくなったYouTube再生ページのマークアップを解析する #html5

2010年04月06日

新しく、リッチでスマートになったYouTube。HTML5を本格的に採用し、CSS3によるエフェクトを多用しています。HTML5を牽引するGoogleがどのようなマークアップでYouTubeを作り替えたのか、動画再生ページを解析してみました。

まず、読み込んでいる画像が非常に少ないですね。動画のサムネール以外に読み込んでいる画像は3点だけ、合計20KB。軽量なのはpng8だからでしょうね。

ページ全体のマークアップの骨格を画像にしてみました。

youtube-watch

mastheadというID名は流行っとるのかなー。サイドバーの配置の仕方が面白いですね。少し詳しく、ソースで見ると以下のようになっています。

2009年11月27日

いやー、はまった。今日半日くらいこの現象に費やしてしまった。

症状：
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);

なんだか分からないけど、助かった！

2009年10月20日

CKEditorがかなり便利。かなり使いやすいWYSIWYGエディタで、導入も驚くほどカンタン。インストール方法もまとめておきたいが、詰まった点があったのでメモ。

CKEditorにもネイティブでプレビュー機能があるのだが、当然エディタで編集している範囲しかプレビューされない。エディタが入っている以外のinputタグの内容などもあわせた「編集内容をプレビュー」機能を持たせたければ、エディタから編集中のデータを取り出さなければならないので、その方法です。

// 「editor1」が、CKEditorに置き換えたtextareaを差すので、環境に合わせ変えてください。
data = CKEDITOR.instances.editor1.getData();
alert(data);

CKEditor自体も、formをsubmitする際にエディタ部分のデータを取得してtextareaのvalueに突っ込んでいるみたい。