明日もデザインで食べていこう![04]HTML5の読書会でした。/秋葉秀樹

投稿:  著者:  読了時間:9分(本文:約4,400文字)


こんにちは、最近ちょっと大変な仕事を引き受けちゃって、納期ギリギリでこの記事を書いていることを知ったら怒るだろうな、、、クライアント。と、そんな感じでこんばんは、秋葉です。今週末は宮崎で講演があります、第二の故郷で楽しみです。

さてさて、IE9ベータが出ました。皆さんはもうダウンロードしましたか? あ、出来てない? 8が上書きされるから?? そのへん不便ですよね〜。で、実はCSS3どこまで実装してるの? って話ですが、かなり期待している人、いるかと思いますが......

僕的に残念でした。CSS3のグラデーションがサポートされていません。もうちょっと細かく言うと、CSSでグラデーションを塗る機能は、IEだとだいぶ前から実装されていたんです。これはIEの独自実装ってやつです、サンプルを見てみましょう。



例えば<div class="box">にグラデーションをかける場合、、、

【サンプル】
div.box {
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#ff0000,endColorStr=#00ff00);
}

やるじゃないかマイクロソフト......相変わらずの独自路線を突っ走ってるね。詳しく見てみると、とっても大事な事がわかります。

・縦と横方向にしか、グラデーションが効かない。(円形や斜め直線は不可)・グラデーションは、開始と終了の2点の色設定しか出来ない。

例えば、ちょっとテカっているボタンみたいなのを作る時って、縦方向に50%あたりで別の色を設定して、ツルっとしている風に見せたりする場合があります。(わかります?)ところが、0%の位置と100%の位置にしか色を着けられないとなると、シンプルなものしか出来ない。あとはキミのセンスだ! なんて無責任な要望にキミはアタマを悩ませるのか!?

これではCSS3のグラデーションとは全く似て非なるもの、といったところでしょう。このあたりはおそらく次回、もっと細かくIE9 Betaを触ってレポートをみなさまにご報告する予定でございます。どうぞお楽しみに。

●HTML5読書会しました

今回は、「HTML5-WEST.jp読書会」って勉強会を開催しました、的なレポ。肝心のHTML5-WEST.jpコミュニティを仕切っている(と、勝手に思っている)村岡さんが急遽諸事情で来れなくて、僕が進行役、ってことになりました。なんと30人近くも集まっていただき大変。参加者はホント熱心な方ばかりでした。

この「読書会」って勉強会は、とても良いスタイルだな、と、実感しました。全員が順番に音読していくんです。なので、全員がただ同席している「傍観者」ではなく、ちゃんと勉強に「参加」しているスタイルになりやすいからです。今回は大体こんなやり方で進めました。

・スクリプトが書いている部分は読まず、そこにさしかかったら若干時間を取る。そこで各々黙読。
・自分のペースより少しゆっくり読む。
・文節にさしかかると、スキルのある人が補足。

今後もこのスタイルは続けていきたいと思います。

●HTML5-WEST.jp読書会レポート

今回のテーマは、「HTML5のvideoを勉強しよう」でした。
< http://tweetvite.com/event/funa >
告知サイトが間に合わず、出来た時には定員に達してしまいました。
< http://html5-west.jp/events/20101017/ >

▼今、HTML5 videoが使えるのか?

何と以下のブラウザがHTML5 videoをサポートしてます。

・InternetExploler 9(beta)
・Firefox (3.6)
・Safari (5)
・Chrome (7)
・Opera (10)

全部メジャーブラウザ!! これはっ?! もうIEさえ何とかなると使える! と、思った方。そう、そうなんですが......実は、

▼コーデック(圧縮技術)のお話

僕らがインターネットを通じて見ている動画は、もう全てといっても過言じゃないほど、「圧縮」されています。この圧縮技術って世の中にいっぱいあるんです。そして、圧縮技術といっても、動画、音声でさらに分かれてきます。

HTML5 videoには主に以下の圧縮技術を使ったプロジェクトが有名です。
・H.264
・Theora/Ogg
・WebM

○H.264
H.264は、高画質で定評があるように見えます。ただし、「特許」という問題が、結果的にブラウザ実装を遠ざけたという感じでしょう。「2010年いっぱいまでは無償で使っていいよ」って話ですが。じゃあ、2010年以降はどうなるの? 使用料を請求されるんじゃない? ということになりますね。

ちょっと前の記事ですが、こんなのもあります。
< http://av.watch.impress.co.jp/docs/20031118/mpegla.htm >
なんとその特許団体の中に、Safariを作っているあのAppleが入っているんです。他にも日本の企業が比較的多く入っているように見えます。

○Theora
Wikipediaがこんなことを記載しています。

ーーー引用
特許上の懸念が少なくフリーで利用できるTheoraは、HTML5における標準動画コーデック候補としてMozilla Foundationやオペラ・ソフトウェアなどから支持されていたが、アップルやノキアなどの反対により撤回された。またGoogleも、H.264/MPEG4 AVCなどのより新しい圧縮コーデックと比べて圧縮率で劣るTheoraはYouTubeで使用できる水準に満たないと考えている。[1]一方で、たとえばXiph.orgのGreg Maxwellは独自に行った同一ファイルサイズでの比較検証において、Theoraは画質でも圧縮効率でもH.264より優れているものと主張している。
ーーー引用終わり

ブラウザの支持率が高く、今後はTheoraかな? と思いきや、

○WebM
Googleが、ライセンスフリー、オープンソースコーデックの開発に着手することを発表して、一気に期待が高まった「WebM」というプロジェクト。ここを見ると書きかけではあるけど、一連の流れは見られる。
< http://ja.wikipedia.org/wiki/WebM >

で、これで自由に使えるフォーマットに期待!? といったところですが、今年8月にH.264の特許団体が、「無償動画コンテンツなら特許料は取らないよ」と言い始め、大変。WebMの「標準化」が期待されていたんですが、これならSafariがWebMをサポートするのは難しいんじゃないか? と思う人もいるでしょうね。また何か分かり次第、お伝えするようにしましょう。

●話戻って、勉強会の成果

といっても、最初なのでとても簡単なことから。成果物はこちら。
< http://akibahideki.com/html5/video_range.html >

【スクリプト】

<script type="text/javascript" language="JavaScript">
var video, range;
var ctx;
window.onload = function () {
video = document.getElementsByTagName('video')[0];
range = document.getElementById("range");
range.max = video.duration;
video.addEventListener("timeupdate", func, false);
}

function func () {
var timeDisplay = document.getElementById("time");
timeDisplay.innerHTML = Math.floor(video.currentTime)+"/"+Math.floor(video.duration)+"ボリュームは"+video.volume;
range.value = Math.floor(video.currentTime);
}

function videoplay() {
video.play();
}

function videopause() {
video.pause();
}
</script>

【HTMLソース】

<video src="video/movietest.ogg" width="640" height="360" poster="video/movietest.jpg">
</video><br>
<p id="time"></p>
<input min="0" id="range" type="range" value="0">
<button onClick="videoplay()">再生</button>
<button onClick="videopause()">ぽーず</button>


▼解説
<input type="range"〜
が新しいですね。スライドバーみたいなものですね。
このrangeをサポートしてるのが
・Chrome (7)
・Safari (5)
・Opera (10)
うーん、Firefox 4 betaでもこれはサポートされていません、残念。

これで再生状況をinput要素でユーザに知らせる事が出来るんですね。でも、各ブラウザに対応させるには、コーデックもそうだけど、input要素のrangeタイプが無理ならCSSで作るか、canvasで作るか、色々考えないといけませんね。

またそのうち、そういった手法も考えていきましょう。ではでは、よろしくお願いします!!

【あきば・ひでき】hidetaro7@gmail.com
< http://www.akibahideki.com/blog/ >

テクニカルディレクター・デザイナー。DTP黎明期からグラフィックデザインを学び、東京都営団地下鉄など交通広告を多数手がける。同時に音楽活動も活発に行い、西日本半全国ツアーなどを展開、某専門学校のテーマソングを作詞作曲、編曲から楽器全てを演奏してレコーディングするなど、マルチなクリエイティブ活動も。最近では東京と大阪の教育施設などで講師業をも務める。HTML CSS JavaScript Flash ActionScript 3DCG Movie DTP GraphicDesign...多種スキルを持つ。Web標準技術だけに執着せず、全てのメディアで説得力のある表現にチカラを注ぎたい、そんな仕事をしたい。