このページでは、このWEBサイトを作るにあたって必要な技術ついて解説・・・ したいんだけど、WEBのプログラミングについて真剣に書き始めたら、【音】 編 の何倍ものページが必要なのと、映像や音に比べて親切で優秀なWEBサイトが他にたくさんあるので、ここではこのサイトがどういう技術の上に成り立っているかということに軽く触れたあと、【映像】 編で少し触れた フラッシュ・ビデオ [FLV] について詳細な解説を加えて、「ピアノ難民を救え！」 の技術解説は終わりにしたい。

【 WEB 】

WEBプログラミング / WEB総括 / CSSハックは最小限に / SEOは当然意識 / AJAXを多用 / フラッシュ・ビデオ [ Flash Video ] 入門 / FLVファイルの書き出し設定 / ビデオ・コントローラ / アルファ・チャンネル

まずはじめに、このページに書いてある内容は、音や映像の話とは違って、誰が読んでもだいたいわかるような書き方ができない。だから、【音】 編 まで熱心に読んでいただいた方には失礼だけれど、WEBについての基礎知識がなければ、このページは読んでも最後の最後までさっぱり 「？」 なことになると思いますのでご容赦下さい。

WEBプログラミング

僕がWEBのことをやり始めたのは2001年頃だったと思うけど、当時に比べると、今はひとつのWEBサイトを作るのに必要なプログラミング知識の量がとても多くなった。もちろん基本であるHTMLだけでもできるにはできるけど、ある程度のレベルのサイトを作ろうとすると、HTML以外にもいくつか習得しなければならないプログラミング言語があって大変だ。何かに書いてあったけど、「プロの作るWBEサイトと、素人が作るWEBサイトの出来の差がどんどん広がっている」 のが現状だそうで、僕もその通りだと思う。これは、WEBサイトに掲載する情報が多様化しているのが原因で、それに合わせて必要な技術がどんどんと増えているというわけだ。

初期のWEBサイトといえばテキストが基本で、それに画像が加わり、音楽が加わり、そしていまはデータベースと動画が主流・・・という流れです。

さて、はじめに断ったように、ここでは各プログラミング言語について詳しく書くことはできないけど、何が必要か、ということを列挙してみるとこんな感じだ。

• CSS
• JavaScript
• PHP
• SQL （ここではMySQL）
• ActionScript
• XML

広義の 「プログラミング言語」 含む、ということで。

僕はプロのプログラマーではないので、本当を言うとすべてを熟知しているわけではないんだけど、だいたい以上の言語に関する基本的な知識がないと、このWEBサイトは作れない。いまWEB制作現場では、いくつかの専門チームに分かれて、グラフィックを作る人はグラフィックをやり、HTMLをコーディングする人はそれをやり、CSSを専門にやる人もいて、それとは別にプログラマーもいる・・・ような風景が当たり前になってきた。でもこのサイトは僕が個人的にやっているものなので、誰かに頼むわけにもいかず、コツコツと貯めた知識をかき集めて何とか完成に至った。

ページの先頭に戻る

WEB総括

始まってすぐに 「総括」 ってのも何だけど、早く 「フラッシュ・ビデオ」 の話までたどり着きたいので、当サイトに関する重要トピックを箇条書きにしておくことにする。

• CSSハックは最小限に
• SEOは当然意識
• AJAXを多用

ページの先頭に戻る

CSSハックは最小限に

ハックを使う主な理由はIE対策で、本当にIEの出来の悪さ （というか世界基準に準拠することを拒む頑なさ） にはいつも閉口する。で、これはやり出したらキリがないので、最小限に留められるよう、いくつかのルールを守ってハックを回避するようにした。

以下はそのルールの中でも重要だと思われる Windows版 IE6 のCSSバグ回避法 の主なもの。これを守るだけで、無意味なハックをかなり回避できる。

• width と同時に 左右border および 左右padding を指定しない
• height と同時に 上下border および 上下padding を指定しない
• float:left の 左margin は 0、float:right の 右margin は 0
• float を含むボックス （コンテナ） には width を指定

参考サイト：　http://mb.blog7.fc2.com/blog-entry-83.html

CSSのブラウザによる解釈の違いに関する問題のうち、重要なものは何と言ってもこういったボックス・モデルの話で、1ピクセル単位でレイアウトを調整したいデザイナーにとって死活問題だ。思うに、この話を突き詰めていくと、多くの問題が、「width を指定するかしないかの判断の分岐」 に集約されて、そこをクリアできれば、あとは 「padding でやらずに中にもうひとつボックスを作って margin で対応する」 等の定番の作戦で切り抜けられる。div タグ が増えることにはなるけど、妙なハックを増やすよりはプログラム上健康だと僕は思う。

CSSのバグ回避の問題については全部はとてもここに書けないけど、こういう話はグーグルで検索したら山ほど出てくるので、有志による最先端の研究には常にアンテナを張っておくのが大事。

なお、僕がターゲットにしているのは、IE5.5以降＋モダンブラウザなので、これ以外のブラウザへの配慮は基本的にしていません。

参考：　推奨ブラウザについて

ページの先頭に戻る

SEOは当然意識

WEBサイト構築にあたって最重要とも言える課題にここ数年で登りつめたのが、グーグルのようなWEB検索の検索結果の上位に表示されるようにサイトを作ること （＝SEO [検索エンジン最適化] ） だ。それを意識することをSEO対策なんて言うんだけど、SEO対策上、絶対に無視できないのが、静的ページ （表示内容がアクセスのたびに基本的に変わらないページ） が有利だ という点。これは時代とともに変わっていく可能性は大いにあるけど、現時点では、静的ページの代表格であるHTMLでできるだけWEBページを作るのが基本スタンスになっている。

ただし、HTMLはとても不器用なスクリプトで、ユーザーの目を引くような派手な演出や、WEBサイトを使いやすく／見やすくする便利な機能を提供できない。そのため、それを補うために JavaScript や CSS などの力を借りるわけだけど、中でも、次の章で解説する、静的なHTMLを使いながらWEBページを動的に更新できる AJAX は、SEO対策上、非常に有用な技術だ。

AJAX については後述するとして、ここに、SEO対策を通じて僕が目論んでいることがひとつある。それは、

「ピアノ」 や 「難民」 ではさすがに無理だけど、この 「ピアノ難民」 という言葉は、（勝手ながら） きちんと定義したのは僕がはじめてのはずだからたぶん可能だし、何となく新しい言葉を開発したみたいで気分がいい。

・・・と、いうわけで、僕がもしこのサイトを宣伝するテレビCMを作るなら、こんな風になるだろう。

（笑）。

「ピアノ難民」 という言葉は、一部のブログで 「ピアノを弾きたいけどピアノにありつけないピアニスト」 のようなニュアンスで使われていましたので、僕が世界ではじめて使った言葉、というわけではありません。

ページの先頭に戻る

AJAXを多用

AJAX [エイジャックス] は、JavaScript と XML という既存の技術を組み合わせて、画面を切り替えずに動的にWEBページの一部を書き換える技術。これは、画面遷移を待たなくていいというメリット以上に、動的に更新するページをHTMLでも作れるというメリットがあって、ここ数年で開発・発明されたWEB技術の中で最も重要なものだと僕は思う。もちろん、ただ単にユーザーの立場から便利であること以上に、前の章に書いたとおり、SEO対策上、非常にその意義は大きい。

「ピアノ難民を救え！」 でも、コメントの送信や閲覧、アクセスカウントで利用していて、その結果、ユーザーがアクセスするページはすべてHTMLで作ることができた。

バックグラウンドでデータベースに問い合わせたり、ソースを吐き出しているのはPHPです。

AJAXリクエストの受け取りには僕は JSON を使っているんだけど、理由は、XMLを勉強し始めたころにはXLSでの整形の話がどうもピンとこなかったのと、DOMがあまりにもまどろっこしかったというもので、ほぼ消去法的にJSONを使うことになった。でも慣れるととても使いやすくて、以来ずっとJSONを使っている。それに、少し工夫することで、HTMLで受け取る JSON を吐き出すページ （.php） をそのまま使って、FLASH から ActionScript を使って LoadVars でフラッシュ内にデータを動的に表示できることができる ので、フラッシュとHTML両方でデータベースへの問合せなんかをやりたいときには手軽で便利だ。

せっかくなので少しPHP （xxxx.php） のソースを紹介しておく。

 
//################################## JSONフォーマットのレスポンス（配列）

 // 文字列 aaa , bbb, ccc をそれぞれ varA, varB, varC として出力する例
 // ※連想配列の場合はさらに [ { },{ },{ } ] の要領で囲う
 
$json = '{"varA":"aaa", "varB":"bbb", "varC":"ccc"}';

//################################## Flashで受け取れるフォーマットに書き換え
 
$output = str_replace( "{" , "" , $json );
$output = str_replace( "}" , "" , $output );
$output = str_replace( ":" , "=" , $output );
$output = str_replace( "," , "&" , $output );
$output = str_replace( "\"" , "" , $output );

//################################## その結果、$output は下記のようになる

// varA=aaa&varB=bbb&varC=ccc

//################################## 2つの変数を、リクエストによって分岐して出力
 
// ※この例では $mode を GET変数 で送っているという設定

if($_GET["mode"] == "JSON"){
  print $json;
}
else if($_GET["mode"] == "FLASH"){
  print $output;
}
 

で、JSON の受け取りはこうなる。 [JavaScript]

 
//################################## AJAX 問合せ
 
function getResponse(){
  uri = "xxxx.php";
  data = "mode=JSON";
  options = {method: "get", parameters: data, onComplete:setResponse};
  new Ajax.Request(uri, options);
}

//################################## AJAX 問合せ結果処理
 
function setResponse(myRequest){
  eval("var output = " + myRequest.responseText);
  A = output.varA;
  B = output.varB;
  C = output.varC;
}
 

これで、A, B, C の各変数に、PHPの出力 （$json） の aaa, bbb, ccc がそれぞれ格納され、HTML内で使えるようになる。

一方、フラッシュから受け取る場合にはこう。 [ActionScript]

//################################## 関数定義し、直後に実行
 
my_lv = new LoadVars();
my_lv.onLoad = function(success){
 
	if(success){
		
		//this.A の this は、my_lv つまり受け取ったPHP出力
		A = this.A;
		B = this.B;
		C = this.C;
	}
};
 
my_lv.load("xxxx.php?mode=FLASH);
 

これで、A, B, C の各変数に、PHPの出力 （$output） の aaa, bbb, ccc がそれぞれ格納され、フラッシュ内で使えるようになる。

このソースはかなり教科書的に使えるおまじないのようなものですね。

以上は JSON を使った AJAX のソース一例だけど、わざわざ同じPHPを使って HTML と フラッシュ から問合せをするなんてことはあまりないかもしれない。でも、一風変わった JSON の記述にも親近感が沸く一例ではないかと思うので紹介した。

沸かないですかね？

ページの先頭に戻る

フラッシュ・ビデオ [ Flash Video ] 入門

さて、技術解説 【WEB】 編 の目玉は、この Flash で動画を再生する Flash Video だ。これはプログラミングとはあまり関係がないけど、今後WEBサイトを作るにあたって個人レベルでもどんどん取り入れることが多くなるものだと思うので、別に先駆けというつもりではないけど、色々とトライしてわかったことがあるのでここに書き留めておく。

僕は、「WEBの存在意義は知識の共有にある」 と思っています。

まずはじめに、フラッシュ・ビデオを作成する手順としてはこういうステップを踏む。

• 1. 動画ファイル（.wmv、.avi、.mov など） を .flv に変換
• 2. フラッシュ（.fla）内で .flv の読み込み設定をして .swf をパブリッシュ
• 3. .swf を開くと、.flv が読み込まれて動画が再生される

FLVの一番の特徴は、単体では基本的に再生できない動画フォーマットだということだ。つまり、 .flv をダブルクリック （Flash Player で OPEN） しても、真っ白な画面が表示されるだけで、動画を見るには .swf が必ず必要 だということ。

裏技的に .flv を単体で再生できるソフトもありますが。

1. の動画変換には、フラッシュ （MX以降かな？） についてくる Flash Video Encoder を使うのが一般的だけど、 Premiere や Final Cut や After Effects のような 動画編集ソフトから、直接 .flv を書き出すこともできる。 後者のほうが、一旦 .avi 等を作って、それをさらにエンコードする二度手間が省ける分便利なので、僕はその方法を取っている。つまり、技術解説 【映像】 編 の最後 に触れた Premiere の出力の話がようやくここに繋がるというわけだ。

実は FLV を使うにあたっては、各種設定にそれほど難しいことはない。一旦映像ができてしまえば、あとはエンコードの品質を決めることと、フラッシュ内に .flv を読み込むのときのビデオ・コントローラの設定をすることくらいで、これまでの映像や音声の話に比べれば子供の遊びみたいなもんだ。というわけで、続くの2つの章でそれぞれについて解説する。

ページの先頭に戻る

FLVファイルの書き出し設定

まず .flv の書き出しについてだけど、「書き出し／Adobe Media Encoder／Video コーデックのオプション」 のところで、「エンコードプロファイル」 を選択肢の中から設定する （例えば Flash 8 - 標準品質 を選ぶ） のであれば、それだけで書き出し （＝レンダリング） の設定は完了するし、特にこだわるポイントがなければそれで何も問題はない。でも、「ピアノ難民を救え！」 では、映像の長さがどれも 4分半以上あって、設定によって書き出した FLV のサイズが大きく変わるので、色々とテストをした結果、下記のような設定に落ち着いた。

できあがったファイルサイズについては、確かにこのご時勢、20MB だろうが40MB だろうが、回線がADSLや光ファイバーなら関係ないし・・・という気持ちもないではないけど、必要以上にファイルサイズを増やすこともないだろうと思い、「できるだけファイルサイズは小さく、でも画質と音質はぼちぼち」 となるような設定を探した。

言うまでもありませんが、例によってこれは一例です。また、サーバによっては転送容量 （＝トラフィック容量、Band Width） の心配もしなければならないので、ファイルサイズのことはやはり気にしておかなければなりません。

この中で、重要な設定は、下記の3つ。

• ビデオコーデック ： On2 VP6
• 画質／最大データレート ： カスタム 300kbps
• オーディオのエンコード ： 256kbps （mp3）

この 「On2 VP6」 を使った .swf は、Flash Player 7 以前では再生できず、バージョン8以降のプレイヤーが必要になる。 従って、On2 VP6 を使うとユーザーの幅を狭めてしまうけど、画質 （圧縮率） を比べるとこちらの方が圧倒的に優秀なので、こちらを採用した。

僕が使っているのは Flash 8 Professional で、それ以前のバージョンにはエンコードに 「On2 VP6」 がなくて、「Sorenson」 しか選べないようになっているみたいです。もちろん、Flash Player 7 以前を使っているユーザーにはアップデートのメッセージを表示するようにしています。

画質と音質の単位 kbps は [キロビット／秒] で、映像／音声1秒あたりに含まれるデータ量 （＝データ・レート） を表していて、これが大きいと画質／音質が良いということになる。参考までに、通常の2時間映画を収録した片面１層DVDビデオの各データ・レートは、ものすごく大雑把に言うと、映像が 約4Mbps ＝ 4000kbps で、音声はその10分の1の 約400kbps だ。

この数字はDVDを作成する側がいくらでも調整できるので、あくまでも一例です。ちなみに、ハリウッド映画界の意向（圧力？）で、133分までの映画を１枚のディスクに収められるデータ・レート・・・というのが、DVDの画質を決めるひとつの基準になったそうです。

で、このサイトで公開している演奏動画をDVDと比較するとどうなるかというと、映像の解像度の違いを加味すれば、画質は DVDの約10分の1、音質は 約1.5分の1 ということになる。

解像度は、DVDが 720×480 ピクセルで、演奏動画が 648×480 ピクセル。

さて、Media Encoder の設定画面では、画質は標準で 400kbps [中] になっているので、Adobe はこの数字を推奨しているみたいだ。でも、「ピアノ難民を救え！」 の演奏動画は、それほど動きの多い映像ではないので （左上は常に真っ黒だし） 、さすがに 200 は苦しかったけど、300 と 400 の違いはそれほどわからなかったから 300 を採用。それから、音声のほうは、96 ではときどきチャリチャリとノイズが乗ったような音がしてダメで、128 ならだいたいOKだった。それなのに、わざわざ最上級のレート 256 を採用したのは、196以下だと、曲中のある特定の場所で （特にレベルが大きく変化するところ？） で、音が抜けたり、「ピコ！」 とか 「バスッ！」 とか、意味不明なノイズが乗ることがあったからだ。普通であれば、フラッシュビデオ で音声のエンコードに 256kbps なんていう高い数値を使うことはまずないと思う ので、これはあまり参考にならないかもしれない。実際、解説動画では、音声は重要ではないので、映像の尺が長いこともあり、音声は 96kbps （映像は 200kbps） でエンコードしているし、通常であれば、音は 128kbps で十分だと思う。

128kbps と言えば、iPod などで聴いている mp3 の標準的な音質で、大きなスピーカーで聴いても十分聴ける音質です。

でも、とにかくこの FLV 書き出しの際に、妙なノイズが乗る問題には僕も最後まで悩まされ、せっかくのミキシングがこんなところでダメになるのはくやしいので、色々と試した結果、音声は 256 （映像が 300 なので、ほぼ同じデータ量！） ってことになった。

はっきりしたことは言えないんだけど、どうも Cubase の Multi Maximizer が原因のひとつのようで、このプラグインで 音圧をぐっと上げているところ （音が詰まっているところ？） で、音抜けが発生する確率が高い みたいだ。それから、息がマイクにかかったときに出る 「ボッ」 という ポップノイズ の大きいところでも、FLV に書き出すと音が抜けやすい。そして、全般的に、エンコードの音質が高いほど、その音抜けが減る傾向にある・・・ということがわかった。でも結局、この問題についてはこれといった解決方法が見つからず、オーディオの書き出しのときに （Cubaseで） ビット数を 16bit に落とすことと、ミキシングのときに、ポップノイズの大きいところをこまめにボリューム調整することと、レンダリングの設定で最上級の 256kbps を選ぶことで、その意味不明なノイズを極力やっつけることができた。

本当に原因不明の難病のようなもので、この問題さえなければ、僕としては 128kbps でも十分なのですが・・・ 困ったものです。いったん .avi に書き出してから Video Encoder で変換するのもやってみましたがダメでした。どなたかこの問題について同じような体験があれば情報を下さい！

ページの先頭に戻る

ビデオ・コントローラ

ビデオ・コントローラっていうのは、演奏動画の下の端にある、再生ボタンやシークバー （曲の途中に再生ヘッドを移動するバー） や音量バーの乗っている部分のことで、フラッシュにはもともといくつかのコントローラが用意されているから、何かこだわりたいことがない限り、そのまま使って大丈夫。　・・・なんだけど、せっかくなので、少しだけ改良してみた。コントローラの中身もよくよく見ると ActionScript の塊みたいなもので、その内容もかなり複雑なので、ちゃんと理解するにはかなりの勉強が必要だ。で、僕はもともとあるコントローラ用の .fla ファイルに少しだけ手を加えて実装したので、この点についてはほとんど何も書くことができない。詳しくは Adobe のサイトにあるので このあたり を参照して欲しい。

なかなか丁寧な日本語訳があって、これさえ見れば解説本はいらないっていう感じです。

で、ひとつスゴイなと思ったのが、コントローラの .swf の元データである .fla ファイルを、すべて提供してくれている 点だ。 Flash がインストールされているなら、データはすでにパソコンの中に入っていて、C:\Program Files\Macromedia\Flash 8\en\Configuration\SkinFLA のような場所にずらーっと並んでいる。この中から改良の元になるファイルを選んで、それを開いて手を加えてパブリッシュすれば、オリジナルのコントローラ .swf が得られる。

僕は英語版を使っているので、日本語版の場合は \jp\ だと思います。

実際にはコントローラの各パーツの色や形を変えるのはとても簡単で、フラッシュの基本をわかっている人ならすぐできると思うんだけど、ここで操作できるのは主にグラフィック部分だけで、肝になるスクリプト部分は別のところにある。で、僕はけっきょくこの 「別のところ」 が探せなくて断念したんだけど、たぶん .fla でウィザードを使ってコントローラを埋め込んでいる以上、踏み込んだスクリプトの改変はできず、大幅なコントローラのカスタマイズをするには、やはりイチからスクリプトを書く必要があるようだ。

もし FLV をコントロールするスクリプトを書くなら、Adobe がとても丁寧なドキュメントを作ってくれているので、そちらを参考にするといいと思う。オンラインドキュメント内の 「FLV ファイルのプリロード」 や 「外部 FLV ファイルのダイナミック再生」 を見れば、フラッシュ・ビデオ を ActionScript で操作する方法の概要がよくわかるし、このソースを使えば、簡単なコントローラはすぐに作れるはずだ。

僕はそれにはトライせず、既存のコントローラに手を加えるだけで済ませました。

ちなみに、フラッシュ・ビデオについて専門的に書かれた唯一無二の参考図書があるのでそれを最後に紹介しておく。分厚くて、その分内容も難しいところもあるけど、FLVのもとになるビデオ編集の話からエンコード設定やスクリプトの話まで幅広く取り扱っているので、コレを読めば FLV のことはすべてわかります。 タイトルもダテではありません （笑）。

参考図書　：　「Flash Video 教科書 - Flash Video の基本から応用まで」

ページの先頭に戻る

アルファ・チャンネル

最後に、「ピアノ難民を救え！」 では出番のなかった FLV の 「アルファ・チャンネル」 について少し書いておく。

アルファ・チャンネルっていうのは、簡単に言うと 「透明にする部分」 のこと。映像編の 「クロマキー合成」 のところで、緑の背景を黒く抜くっていうのをやったけど、この 「色を抜く」 というのは、 実際には 「その部分を透明にする」 ということで、そうやって他の映像と合成することを 「アルファチャンネルを使って合成する」 と表現する。

さっきの「FLVファイルの書き出し設定」の画面に、「アルファチャンネルのエンコード」 っていうチェックボックスがあったけど、これにチェックを入れることで、映像に設定したアルファチャンネル （＝ 透明にしたい部分） が、FLV に書き出したあとでも有効となる・・・んだけど、注意しないといけないのが、 Premiere で、レンダリングから一気に FLV を書き出す場合には、なぜかアルファチャンネルのエンコードが無視される ということ。なので、FLV でアルファチャンネルを使いたい場合には、面倒だけど、いったんアルファチャンネルつきの動画フォーマットに書き出しておいて、それを Flash Video Encoder で「アルファチャンネルつき」でエンコードしないとダメなのだ。

僕が調べたところによると、Premiere の場合には、下記のような設定でレンダリングをしたあとで、FLV の変換をやるとうまくいくようです。（もちろん実際に試しました）

• ファイルの種類： QuickTime
• 圧縮： アニメーション
• 色深度： 数百万色＋

色深度の 「数百万色＋」 の 「プラス」 が、アルファチャンネルのことを指しているようです。

まさに 「プラス・アルファ」 ですね。ちなみに、Final Cut や After Effects でも同じ現象が起こる・・・らしいです。

以上、非常に長かった技術解説ですが、ようやくこれにて終了となります。

長文にお付き合いいただきありがとうございました。お疲れ様でした！

ご意見・ご感想などをお寄せ下さい。 [ メッセージ送信フォーム ]