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

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

マークアップの概要

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

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

youtube-watch

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

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

Twitterアカウントで演奏に参加できるミニマル・ミュージックを作る実験、経過報告。

TwitterとUSTREAMの組み合わせの強力さに大きな可能性があることは、おそらくたくさんの人が感じていると思う。DOMMUNEを代表格として、音楽を配信することも多く行なわれるようになった。僕は個人的に「複数の人数で自由に参加できる音楽」というものをずっと研究して来たので、このTwitterとUSTREAMの登場にはまさに心が躍った!

そして、ある程度の完成度に達しながらも不満の残った前作「rain tower 3」の次のバージョンとして、現在「RAIN TOWER IV」という作品を開発している。

では前作のrain tower 3は何がダメだったか。それは参加する際の敷居の高さであった。

参加型音楽だからこその問題とは。

2006年のインターカレッジ・コンピュータ音楽コンサートで発表したrain tower 3は、ドラムマシンのようなシーケンサ状のGUIを複数人数で共有し、リズムパターンを変えたり、エフェクトをかけたりして遊ぶ音楽として設計された。当然、参加者が行なったGUIに対する操作をどうやって音楽に反映させるか、そして共有している音楽をどうやって参加者全員に配信するかと言う問題が発生する。

rain tower 3では、参加者が行なった操作をOSCメッセージ[1]としてホストコンピュータに集約し、参加者全員に再配信するという方法をとっている。しかし、これには参加者がまずホストコンピュータにログインすることが必要で、そのためにはまずSuperColliderとログイン用のプログラムをインストールする必要があり、さらに自分のマシンのIPアドレスを調べる必要があった。これは非常に敷居が高いと言わざるを得ない。演奏を行なう際はほぼ必ず、開発者の僕が参加者のマシンへのインストールをサポートする必要があった。これは無様だ。

このダメダメな作品を改善すべく、ログイン周りのプログラムの書き直しと簡単なチャットシステムをSuperColliderで書き進めていたのだが、ある日突然、そんなことをする気持ちが完全に失せた。もちろん、Twitterの存在を知ったからである。Twitterを、オープンなメッセージ送受信プラットフォームとして使用すれば、わざわざ新しいアプリケーションを参加者にインストールしてもらう必要は無い。また、多人数で音楽を共有する手段も、USTREAMの登場によって解決された。いやー、実にいい時代ですね!

しかし、TwitterとUSTREAMというツールを使うことにより、新たな問題も発生させた。昨年12月に行なった最初の実験でも明らかになった問題点は以下の3点だ。

1. GUIが使えない。

もちろん、この作品専用のGUIを開発してもいいのだが、敷居を下げるというコンセプトには合わない。できれば、誰もが普段使っているTwitterクライアントでも参加できるのが望ましい。となると、どういう方法で参加すれば良いか。

とりあえず、音楽に反映されるまでの時間のダイナミックさを損なわないよう、短いコマンドと数値の組み合わせをツイートするという手段をとることにした。これに関しては色んなアプローチがあると思うので、いいアイディアを探しているところだ。

2. タイムラグが大きい。

SuperColliderでOSCをやり取りする場合、高速なUDP/IP通信を用いるため、タイムラグはほとんど問題にならなかった。しかし、Twitterではそうはいかない。通信プロトコル以前にツイートしてから検索結果に反映されるまで、どうしても数秒のタイムラグは発生してしまう。また、Twitter APIへのリクエスト回数も、Twitterは明らかにしていないが制限があると思われるので、1秒間に何回もリクエストするわけにはいかない。さらに、USTREAMでもタイムラグは存在するので、結局ツイートしてから音楽に反映されるまで10秒以上かかってしまう。

この問題に関しては、タイムラグがあっても構わない方法を探るほかない。また、よりリアルタイムに近い検索を可能にするTwitter Streaming APIの実用化も探っている。

3. 音質が低い。

ユーザーのマシンにアプリケーションをインストールし、そのアプリケーションが音楽を再生する場合はもちろん音質は問題ない。しかし、USTREAMでの配信では限界がある。

この問題に関しても、USTREAMを使うということは、モバイル機器からでも参加可能な音楽になるということで、高音質が前提の音楽では似合わないだろう。ふさわしい音楽にするしかない。

で、やってみた。

以上の問題を踏まえて、バージョンアップしたRAIN TOWER IVのベータテストを2010年3月27日、午前1時〜3時にかけて行なった。のだが、長くなってしまったのでこの詳細については次の記事でご報告したい。


[1] 音響合成のためのプログラミング言語「SuperCollider」はマシン上のサーバーに対してメッセージを送り、サーバーがそのメッセージを処理して音を発すると言う特殊な仕組みを採用している。ローカルマシン上のサーバーだけでなく、Open Sound Control(OSC)というプロトコルにより、ネットワークを介して他のマシンのSuperColliderサーバーに対してもローカルマシンと同様にメッセージを送信することができる。

#concrete5 ページ属性を追加して、カスタムテンプレート内で使用する

concrete5では、各ページにページ属性が設定でき、各ページの設定>カスタム項目から選択することができます。

このページ属性に「オートナビから除く」というオプションがありますが、例えば「グローバルナビゲーションには表示させたくないがパンくずリストには表示させたい」という場合、ブロックとしてはどちらもオートナビなので困ってしまいます。そういう時は、ページ属性を追加してしまいましょう。

ページ属性の追加は管理画面のページとテーマ>ページタイプ画面で、ページ属性情報を追加ボタンをクリックします。

ページ属性を追加

設定したページ属性は、各ページの設定で選択することができるようになります。

作成したページ属性を選択する

次に、「グローバルナビから除く」にチェックが入っているページを飛ばすオートナビのカスタムテンプレートを作成します。

既存のオートナビのview.phpをローカルにコピーします。
/concrete/blocks/autonav/view.php

「オートナビから除く」にチェックが入っているかを判定している行の「exclude_nav」を「グローバルナビから除く」のハンドルに変更します。

// 変更前
if (!$_c->getCollectionAttributeValue('exclude_nav')) {
// 変更後
if (!$_c->getCollectionAttributeValue('exclude_globalnav')) {

以上の変更をしたview.phpを、適当な名前を付けて保存します。ここでは分かりやすくglobal_nav.phpとしておきます。

最後にカスタムテンプレートとして使えるようにサーバーの下記のディレクトリにアップロードします。カスタムテンプレートの詳細は公式サイトの解説を参考にしてください。
/blocks/autonav/templates/global_nav.php

しかし、concrete5は本当に自由度高いですね。MTやWordPressに慣れているので、不安になるくらいですw

WordPressの引越し(phpMyAdminでドメイン名を一括置換する)

WordPressを引越ししたり、確認用ドメインやIPアドレスから公開用のドメインに変更したい時、phpMyAdminがあればMySQLに格納されている旧ドメインを一括で新ドメインに変更できる。そのためのSQL文を毎度忘れるのでメモ。

UPDATE wp_options SET option_value=REPLACE(option_value,"旧ドメイン","新ドメイン");
UPDATE wp_posts SET post_content=REPLACE(post_content,"旧ドメイン","新ドメイン");
UPDATE wp_posts SET guid=REPLACE(guid,"旧ドメイン","新ドメイン");

とりあえず、これでうまく行ってると思う…

SQL文は全く分かってないので、保証はしません。
この書き方だとヤバくね?という場合、ご指摘いただければありがたいです :mrgreen:

2010.9.3追記

3.0から導入のwp_nav_menuを使用している場合wp_postmetaテーブルにもURLが入ることがあるので下記も追加してください。

UPDATE wp_postmeta SET meta_value=REPLACE(meta_value,"旧ドメイン","新ドメイン");

SuperColliderの音をUstream Producerに流す方法

結論から言うとSuperColliderに限らず様々な用途に使える手段のようですが、こういう検索をする人の役に立つかなと思ってブログに書くことにします。

soundflowerという仮想オーディオデバイスを使うと、SuperColliderの音をsoundflowerに流し、その音をsoundflowerを入力デバイスとしてUstream Producerに入れることができる、と。説明難しいですね。SuperCollider側の設定も必要なく、非常に簡単なので試してみてください。

  1. soundflowerをインストールする。
  2. システム環境設定>サウンドで、入力・出力ともにSoundflowerにする。
  3. SuperColliderを起動する。うまく行っていれば起動時のメッセージでInput deviceとOutput DeviceがSoundflowerになっていることを確認できます。特に設定の必要はありませんでした。
  4. Ustream Producerを起動し、Live Inputを右クリックして、こちらでもSoundflowerを選択する。
  5. 以上。

こちらの記事を参考にさせていただきました。

http://veadardiary.blog29.fc2.com/blog-entry-1038.html
http://www.moongift.jp/2009/05/soundflower/